ez-wxlite

ez-wxlite是一套小程序開發(fā)模板，旨在設計一套簡潔、高效、可維護的開發(fā)框架。

本套模板總體上分為兩部分：

• client：小程序源碼部分；
• server：為本地服務，不是后端服務，主要作用是mock接口以及靜態(tài)文件服務。

點擊這里下載模板：https://github.com/wxlite-plus/ez-wxlite/releases

client

client部分是框架的核心，設計上分為：

• req：網(wǎng)絡請求；
• router：路由；
• config：配置信息；
• utils：工具集，用于存放一些通用的公共方法。
• wxs：工具集，wxml相關的一些公共變量及方法。

使用

框架核心代碼都包含在client/framework文件夾內(nèi)，在app.js中一次性引入：

// app.jsrequire('./framework/index.js').patch();App({});

調(diào)用patch方法會直接完成App、Page、Component這三個全局方法的代理，并完成相應的注入，所以上面的App({})其實已經(jīng)是被代理之后的App，在這一實例中我們可以獲取到注入的options數(shù)據(jù)，通過this.$opts獲取到：

App({ onLaunch() { console.log(this.$opts); }, onShow() { console.log(this.$opts); },});

原小程序的App方法只能在onLaunch中獲取到options，代理過后的App，通過將options掛載在實例上，我們可以在所有生命周期里訪問到，方便使用，Page同理。

req

req是wx.request的高級封裝，用于發(fā)起ajax請求以及文件上傳。

wx.request是一個底層api，使用的不便之處在于：

1. 返回結(jié)果比較底層，需要處理statusCode，而開發(fā)者往往更關注業(yè)務相關的data部分；
2. 登錄機制繁瑣，設計上甚至有些反人類；
3. 不具備良好的接口管理功能，可維護性差；

……

綜上所述，wx.request需要一層高級的封裝來簡化操作，因此有了req，req代理了wx.request，并在這基礎上做了一些設計工作，以提供良好的維護性：

• promisify：支持promise，替代callback的方式；
• 簡化respone：簡化返回的數(shù)據(jù)信息，只保留業(yè)務數(shù)據(jù)；
• method替代url：使用js api的書寫方式來替代直接書寫url的方式；
• 接口緩存：支持便捷的接口前端緩存；
• 自動登錄：登錄態(tài)過期自動重新登錄，過程對開發(fā)者透明。

詳細內(nèi)容請瀏覽：https://github.com/wxlite-plus/mp-req

router

頁面的跳轉(zhuǎn)存在哪些問題呢？

1. 與接口的調(diào)用一樣面臨url的管理問題；
2. 參數(shù)類型單一，只支持string。

當我們傳遞的參數(shù)argument不是string，而是number或者boolean時，也只能在下個頁面得到一個argument.toString()值：

// pages/index/index.jswx.navigateTo({ url: '/pages/a/index?a=true',});// pages/a/index.jsPage({ onLoad(options) { console.log(options.a); // => "true" console.log(typeof options.a); // => "string" console.log(options.a === true); // => false },});

上面這種情況想必很多人都遇到過，而且感到很抓狂，本來就想傳遞一個boolean，結(jié)果不管傳什么都會變成string。

我們的解決方案是：利用json.stringify encodeURIComponent和decodeURIComponent JSON.parse的方式讓參數(shù)保真。

順手也替換掉那不好記的navigate api，于是就出現(xiàn)了如下方式：

// pages/pageA/index.jsconst { router } = require('../../framework/index.js');Page({ onReady() { router.push({ name: 'home', }); },});// pages/index/index.jsPage({ onLoad() { console.log(this.$opts); // { id: '123', type: 1 } },});

詳細內(nèi)容請瀏覽:https://github.com/wxlite-plus/mp-router

server

server為本地服務，不是后端服務，主要作用是：

• mock服務：當后端接口未就緒時，使用自定義的數(shù)據(jù)模擬接口調(diào)用；
• 靜態(tài)文件服務：開發(fā)階段使用本地靜態(tài)資源替代線上的cdn資源；

運行

1. 命令行進入server目錄，執(zhí)行npm包安裝：npm install（或者使用yarn）;
2. 執(zhí)行npm run dev。

done！

mock服務

mock的配置文件為server/mock/init.js，假設我需要一個獲取我的用戶信息的接口：

function init(server) { server.get('/user/myInfo', (req, res) => { res.json({ code: 0, data: { id: '123456', name: 'Jack' }, msg: 'succ', }); });}

接著我就可以通過訪問http://localhost:8080/user/myInfo得到我預設的json。

靜態(tài)文件服務

如果我們想要隨意地切換靜態(tài)資源服務環(huán)境，那么我們在使用靜態(tài)資源的時候就不能hard code，那我們怎么做呢？我們使用wxs來配置靜態(tài)資源的前綴。

client/wxs這一目錄存放的是wxs文件，其中我們預定義了cdnPathTable.wxs，它的含義類似于client/config.apiUrlTable.js，我們定義了local、dev、release三個環(huán)境，然后在wxml文件中使用：

<!-- pages/index/index.wxml --><wxs src="../../wxs/index.wxs" modal="utils"></wxs><image src="{{utils.cdnPath}}/img/avt.jpg" />

這里的wxs和config其實沒有什么區(qū)別，選擇定義在wxs中是因為wxs在wxml中使用十分方便。

其他

為了使開發(fā)工作更簡單高效，我們沒有采用在小程序開發(fā)工具以外再搭建一層腳手架的做法，而是盡可能使用現(xiàn)有的工具和環(huán)境，借助于強大的vscode，我們還提供了：

• eslint支持；
• 借助typescript進行語法提示；

…

啟用eslint功能只需要在根目錄下運行npm install即可，typescript主要是實現(xiàn)小程序api的語法提示功能，當然這功能直接使用現(xiàn)有的vscode插件就可以實現(xiàn)，不過我目前沒有找到比較好用的~考慮到微信的api文檔更新比較頻繁，插件的維護速度可能跟不上，所以簡單地實現(xiàn)了一個本地化，在開發(fā)過程中可以手動補充，將自己常用的api定義好就足以提高效率了。