摘要：于是，我重新思考了下，最佳的微信小程序開發(fā)實(shí)踐應(yīng)該是無痛的，且舒服的，無痛的是指在小程序的飛速發(fā)展變更中，我們不用重復(fù)的浪費(fèi)學(xué)習(xí)第三方框架和原生框架。以上，便可以在微信小程序中使用了。

微信小程序開發(fā)最佳實(shí)踐

項(xiàng)目地址

在小程序之初便開發(fā)應(yīng)用了，現(xiàn)在小程序的開發(fā)也越來越成熟了，完善了很多的API、組件、架構(gòu)等，社區(qū)也由原來的零星點(diǎn)點(diǎn)到現(xiàn)在的不大不小，但也算是有了，期間也誕生了很多的開發(fā)框架，越來越多的三方輔助庫，我也搗鼓出很多。比較有名的算是 wepy 和 labrador，wepy 是 vue 風(fēng)格的小程序開發(fā)框架，labrador 則比較親和 React，各有千秋，也各有深坑，而 labrador 作者目前已經(jīng)停止更新了 TnT，作為React深度使用者的我來說是憂傷的，于是我搗鼓出 wn-cli 來用類 React 快速開發(fā)微信小程序，然而在這個(gè)過程中，想了很多，為什么需要開發(fā)框架呢？小程序本身在一開始就強(qiáng)調(diào)框架，且現(xiàn)在做的也不差，后來總結(jié)了下，無非是不熟悉小程序這套框架，但學(xué)習(xí)新的中間框架去開發(fā)小程序，這不是更加加大了熟悉成本嗎？且出了問題增加了處理的代價(jià)。

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

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

[x] 優(yōu)化小程序 API

Promise 化異步接口

突破請(qǐng)求數(shù)量限制（隊(duì)列）

[x] 使用 async/await

[x] 接入 Redux 管理頁面數(shù)據(jù)流

直接接入，添加可配置項(xiàng)

添加 saga 管理操作

[x] 樣式書寫采用 less 預(yù)編譯

使用 Gulp 管理自動(dòng)編譯，持續(xù)集成

[x] wxs 管理工具庫

數(shù)據(jù)的格式化操作，如時(shí)間格式化、金幣格式化等

[x] 按需加載，子頁面分包（除卻 tab 頁面的其他頁面）

按功能模塊分包加載（推薦）

按 tab 分包

ps: 小程序原生分包

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

上傳 CDN

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

原生微信小程序API：

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

添加Promise后：

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

Promise 化后，使用起來就簡單了：

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

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

添加 babel:

yarn add babel-core

安裝 env presets

yarn add babel-preset-env

使用 .babelrc

{
  "presets": [
    "env"
  ]
}

在 Gulp 中使用 babel

// install
yarn add gulp-babel

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

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

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

為什么選擇 less，因?yàn)楹唵畏奖?，前端編譯，輕量級(jí)。

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

添加less 變量庫等

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

編譯

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

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

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

目前接入阿里云，監(jiān)測(cè) assert 文件夾，自動(dòng)上傳圖片資源

根據(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"))

使用

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

項(xiàng)目地址