微信小程序開發最佳實踐(weapp-starter)

weapp-starter

微信小程序開發最佳實踐

項目地址

爲何會有這個 repo

在小程序之初便開發應用了，如今小程序的開發也愈來愈成熟了，完善了不少的API、組件、架構等，社區也由原來的零星點點到如今的不大不小，但也算是有了，期間也誕生了不少的開發框架，愈來愈多的三方輔助庫，我也搗鼓出不少。比較有名的算是 wepy和 labrador，wepy 是 vue 風格的小程序開發框架，labrador 則比較親和 React，各有千秋，也各有深坑，而 labrador做者目前已經中止更新了 TnT，做爲React深度使用者的我來講是憂傷的，因而我搗鼓出 wn-cli 來用類 React 快速開發微信小程序，然而在這個過程當中，想了不少，爲何須要開發框架呢？小程序自己在一開始就強調框架，且如今作的也不差，後來總結了下，無非是不熟悉小程序這套框架，但學習新的中間框架去開發小程序，這不是更加加大了熟悉成本嗎？且出了問題增長了處理的代價。

因而，我從新思考了下，最佳的微信小程序開發實踐應該是無痛的，且舒服的，無痛的是指在小程序的飛速發展變動中，咱們不用重複的浪費學習第三方框架和原生框架。舒服的是指，咱們能用上咱們熟悉的流行工程流，如：less 預編譯、async/await 異步請求，redux數據管理等。

以上，即是這個 repo 的意義與緣由。

設計概要

• [x] 優化小程序 API

  1. Promise 化異步接口
  2. 突破請求數量限制（隊列）
• [x] 使用 async/await

• [x] 接入 Redux 管理頁面數據流

  1. 直接接入，添加可配置項
  2. 添加 saga 管理操做

• [x] 樣式書寫採用 less 預編譯

  1. 使用 Gulp 管理自動編譯，持續集成

• [x] wxs 管理工具庫

  1. 數據的格式化操做，如時間格式化、金幣格式化等

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

  1. 按功能模塊分包加載（推薦）
  2. 按 tab 分包
  • ps: 小程序原生分包

• [x] 資源自動化管理

  1. 上傳 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

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 文件，幸運的是這件事情在這個repo中的Gulp任務中自動處理了。

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

樣式書寫採用 less 預編譯

爲何選擇 less，由於簡單方便，前端編譯，輕量級。

注意：因爲小程序自己的限制，在書寫樣式的時候，不要使用 less 的嵌套功能！

1. 添加less 變量庫等

// ... .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. 重命名樣式文件，以便小程序識別

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

資源自動化管理

1. 目前接入阿里雲，監測 assert 文件夾，自動上傳圖片資源
2. 根據配置自動生成 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; }

項目地址