于是，我重新思考了下，最佳的微信小程序開(kāi)發(fā)實(shí)踐應(yīng)該是無(wú)痛的，且舒服的，無(wú)痛的是指在小程序的飛速發(fā)展變更中，我們不用重復(fù)的浪費(fèi)學(xué)習(xí)第三方框架和原生框架。舒服的是指，我們能用上我們熟悉的流行工程流，如：less 預(yù)編譯、async/await 異步請(qǐng)求，redux數(shù)據(jù)管理等。

以上，便是這個(gè) repo 的意義與原因。

設(shè)計(jì)概要

Promise 化異步接口

由于微信的API中異步接口都是有三個(gè)回調(diào)函數(shù)的，分別是 success ， fail ， complete，執(zhí)行時(shí)機(jī)同字面上意思（ complete 一定會(huì)在接口的最后執(zhí)行）。于是 結(jié)合 Promise ，簡(jiǎn)單的描述如下：（以下為簡(jiǎn)版，具體的可以看源碼）

原生微信小程序API：

wx.request({
  // ... 其他一些配置項(xiàng)
  success: () => {},
  fail: () => {},
  complete: () => {}
});

添加 Promise 后：

new Promise((resolve, reject) => {
  wx.request({
    // ... 其他一些配置項(xiàng)
    success: resolve,
    fail: reject,
    complete: resolve, // 這里暫取 resolve 來(lái)解決
  });
});

Promise 化后，使用起來(lái)就簡(jiǎn)單了：

wx.request({ /* ...一些配置項(xiàng) */}).then(res => {
  console.log(res)
}, err => {
  console.error(err)
})

結(jié)合下面的 async/await 就可以更加方便的書(shū)寫(xiě)同步代碼

使用 async/await

1. 添加 babel :

yarn add babel-core

1. 安裝 env presets

yarn add babel-preset-env

1. 使用 .babelrc

{
  "presets": [
    "env"
  ]
}

1. 在 Gulp 中使用 babel

// install
yarn add gulp-babel

const babel = require('gulp-babel');
// ...
.pipe(babel())
// ...

1. 添加 runtime ，在使用 async/await 的地方引入 ./src/utils/lib/runtime.js 文件，幸運(yùn)的是這件事情在這個(gè)repo中的 Gulp 任務(wù)中自動(dòng)處理了。

以上，便可以在微信小程序中使用 async/await 了。

樣式書(shū)寫(xiě)采用 less 預(yù)編譯

為什么選擇 less ，因?yàn)楹?jiǎn)單方便，前端編譯，輕量級(jí)。

注意：由于小程序本身的限制，在書(shū)寫(xiě)樣式的時(shí)候，不要使用 less 的嵌套功能！

1. 添加less 變量庫(kù)等

// ...
.pipe(addLessImport({
      themePath: path.join(__dirname, './src/theme/index.less'),
      commomPath: path.join(__dirname, './src/app.less'),
    }))
// ...

1. 編譯

// ...
.pipe(less({
      paths: [path.join(__dirname, './src/theme')]
    }))
// ...

1. 重命名樣式文件，以便小程序識(shí)別

// ...
  .pipe(rename((path) => {
    path.extname = '.wxss';
  }))
// ...

資源自動(dòng)化管理

1. 目前接入阿里云，監(jiān)測(cè) assert 文件夾，自動(dòng)上傳圖片資源
2. 根據(jù)配置自動(dòng)生成 less 配置 config.less

gulp.src('src/theme/config.less', { allowEmpty: true })
    .pipe(file('config.less', `@cdn: ~'${config.cdn}';`))
    .pipe(changed('src/theme'))
    .pipe(gulp.dest('src/theme'))

1. 使用

page {
  background-image: url('@{cdn}/index-bg.png');
  background-attachment: fixed;
}