作者： skylor

https://segmentfault.com/a/1190000012955804

專案地址：https://github.com/skyFi/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 分包

[x] 資源自動化管理

1. 上傳 CDN

Promise 化非同步介面

由於微信的API中非同步介面都是有三個回撥函式的，分別是 success， fail， complete，執行時機同字面上意思（ complete一定會在介面的最後執行）。於是結合 Promise，簡單的描述如下（以下為簡版，具體的可以看原始碼）。

原生微信小程式API：

1. wx.request({

2.  // ... 其他一些配置項

3.  success: () => {},

4.  fail: () => {},

5.  complete: () => {}

6. });

新增 Promise後：

1. new Promise((resolve, reject) => {

2.  wx.request({

3.    // ... 其他一些配置項

4.    success: resolve,

5.    fail: reject,

6.    complete: resolve, // 這裡暫取 resolve 來解決

7.  });

8. });

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

1. wx.request({ /* ...一些配置項 */}).then(res => {

2.  console.log(res)

3. }, err => {

4.  console.error(err)

5. })

結合下面的 async/await 就可以更加方便的書寫同步程式碼。

使用 async/await

1.新增 babel

1. yarn add babel-core

2.安裝 env presets

1. yarn add babel-preset-env

3.使用 .babelrc

1. {

2.  "presets": [

3.    "env"

4.  ]

5. }

4.在 Gulp 中使用 babel

1. // install

2. yarn add gulp-babel

4. const babel = require('gulp-babel');

5. // ...

6. .pipe(babel())

7. // ...

5.新增 runtime，在使用 async/await的地方引入 ./src/utils/lib/runtime.js 檔案，幸運的是這件事情在這個repo中的 Gulp任務中自動處理了。

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

樣式書寫採用 less 預編譯

為什麼選擇 less，因為簡單方便，前端編譯，輕量級。

注意：由於小程式本身的限制，在書寫樣式的時候，不要使用 less 的巢狀功能！

1.新增 less 變數庫等

1. // ...

2. .pipe(addLessImport({

3.      themePath: path.join(__dirname, './src/theme/index.less'),

4.      commomPath: path.join(__dirname, './src/app.less'),

5.    }))

6. // ...

2.編譯

1. // ...

2. .pipe(less({

3.      paths: [path.join(__dirname, './src/theme')]

4.    }))

5. // ...

3.重新命名樣式檔案，以便小程式識別

1. // ...

2.  .pipe(rename((path) => {

3.    path.extname = '.wxss';

4.  }))

5. // ...

資源自動化管理

1.目前接入阿里雲，監測 assert 資料夾，自動上傳圖片資源

2.根據配置自動生成 less 配置 config.less

1. gulp.src('src/theme/config.less', { allowEmpty: true })

2.    .pipe(file('config.less', `@cdn: ~'${config.cdn}';`))

3.    .pipe(changed('src/theme'))

4.    .pipe(gulp.dest('src/theme'))

3.使用

1. page {

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

3.  background-attachment: fixed;

4. }