在小程序之初便開(kāi)發(fā)應(yīng)用了,現(xiàn)在小程序的開(kāi)發(fā)也越來(lái)越成熟了,完善了很多的API、組件、架構(gòu)等,社區(qū)也由原來(lái)的零星點(diǎn)點(diǎn)到現(xiàn)在的不大不小,但也算是有了,期間也誕生了很多的開(kāi)發(fā)框架,越來(lái)越多的三方輔助庫(kù),我也搗鼓出很多。比較有名的算是 wepy 和 labrador , wepy是 vue 風(fēng)格的小程序開(kāi)發(fā)框架, labrador 則比較親和 React ,各有千秋,也各有深坑,而labrador 作者目前已經(jīng)停止更新了 TnT,作為React深度使用者的我來(lái)說(shuō)是憂傷的,于是我搗鼓出 wn-cli 來(lái)用類 React 快速開(kāi)發(fā)微信小程序,然而在這個(gè)過(guò)程中,想了很多,為什么需要開(kāi)發(fā)框架呢?小程序本身在一開(kāi)始就強(qiáng)調(diào)框架,且現(xiàn)在做的也不差,后來(lái)總結(jié)了下,無(wú)非是不熟悉小程序這套框架,但學(xué)習(xí)新的中間框架去開(kāi)發(fā)小程序,這不是更加加大了熟悉成本嗎?且出了問(wèn)題增加了處理的代價(jià)。
于是,我重新思考了下,最佳的微信小程序開(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 的意義與原因。
[x] 優(yōu)化小程序 API
[x] 接入 Redux 管理頁(yè)面數(shù)據(jù)流
[x] 樣式書寫采用 less 預(yù)編譯
[x] wxs 管理工具庫(kù)
[x] 按需加載,子頁(yè)面分包(除卻 tab 頁(yè)面的其他頁(yè)面)
[x] 資源自動(dòng)化管理
由于微信的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 就可以更加方便的書寫同步代碼
yarn add babel-core
yarn add babel-preset-env
{ "presets": [ "env" ] }
// install yarn add gulp-babel const babel = require('gulp-babel'); // ... .pipe(babel()) // ...
以上,便可以在微信小程序中使用 async/await 了。
為什么選擇 less ,因?yàn)楹?jiǎn)單方便,前端編譯,輕量級(jí)。
注意:由于小程序本身的限制,在書寫樣式的時(shí)候,不要使用 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'; })) // ...
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; }
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)