微信小程序開發最佳實踐
為什么會有這個 repo
在小程序之初便開發應用了，現在小程序的開發也越來越成熟了，完善了很多的API、組件、架構等，社區也由原來的零星點點到現在的不大不小，但也算是有了，期間也誕生了很多的開發框架，越來越多的三方輔助庫，我也搗鼓出很多。比較有名的算是 wepy 和 labrador ， wepy是 vue 風格的小程序開發框架， labrador 則比較親和 React ，各有千秋，也各有深坑，而labrador 作者目前已經停止更新了 TnT，作為React深度使用者的我來說是憂傷的，于是我搗鼓出 wn-cli 來用類 React 快速開發微信小程序，然而在這個過程中，想了很多，為什么需要開發框架呢？小程序本身在一開始就強調框架，且現在做的也不差，后來總結了下，無非是不熟悉小程序這套框架，但學習新的中間框架去開發小程序，這不是更加加大了熟悉成本嗎？且出了問題增加了處理的代價。
于是，我重新思考了下，最佳的微信小程序開發實踐應該是無痛的，且舒服的，無痛的是指在小程序的飛速發展變更中，我們不用重復的浪費學習第三方框架和原生框架。舒服的是指，我們能用上我們熟悉的流行工程流，如：less 預編譯、async/await 異步請求，redux數據管理等。
以上，便是這個 repo 的意義與原因。
設計概要
-
[x] 優化小程序 API
- Promise 化異步接口
- 突破請求數量限制（隊列）
- [x] 使用 async/await
-
[x] 接入 Redux 管理頁面數據流
- 直接接入，添加可配置項
- 添加 saga 管理操作
-
[x] 樣式書寫采用 less 預編譯
- 使用 Gulp 管理自動編譯，持續集成
-
[x] wxs 管理工具庫
- 數據的格式化操作，如時間格式化、金幣格式化等
-
[x] 按需加載，子頁面分包（除卻 tab 頁面的其他頁面）
- 按功能模塊分包加載（推薦）
- 按 tab 分包
- ps: 小程序 原生分包
-
[x] 資源自動化管理
- 上傳 CDN
Promise 化異步接口
由于微信的API中異步接口都是有三個回調函數的，分別是 success ， fail ， complete，執行時機同字面上意思（ complete 一定會在接口的最后執行）。于是 結合 Promise ，簡單的描述如下：（以下為簡版，具體的可以看源碼）
原生微信小程序API：
wx.request({
// ... 其他一些配置項
success: () => {},
fail: () => {},
complete: () => {}
});
添加 Promise 后：
new Promise((resolve, reject) => {
wx.request({
// ... 其他一些配置項
success: resolve,
fail: reject,
complete: resolve, // 這里暫取 resolve 來解決
});
});
Promise 化后，使用起來就簡單了：
wx.request({ /* ...一些配置項 */}).then(res => {
console.log(res)
}, err => {
console.error(err)
})
結合下面的 async/await 就可以更加方便的書寫同步代碼
使用 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 文件，幸運的是這件事情在這個repo中的 Gulp 任務中自動處理了。
以上，便可以在微信小程序中使用 async/await 了。
樣式書寫采用 less 預編譯
為什么選擇 less ，因為簡單方便，前端編譯，輕量級。
注意：由于小程序本身的限制，在書寫樣式的時候，不要使用 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')]
}))
// ...
- 重命名樣式文件，以便小程序識別
// ...
.pipe(rename((path) => {
path.extname = '.wxss';
}))
// ...
資源自動化管理
- 目前接入阿里云，監測 assert 文件夾，自動上傳圖片資源
- 根據配置自動生成 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;
}
