武裝你的小程序——開發流程指南

時間 2019-11-06

標籤武裝程序開發流程指南简体版

原文原文鏈接

前端工程本質上是軟件工程的一種。軟件工程化關注的是性能、穩定性、可用性、可維護性等方面，注重基本的開發效率、運行效率的同時，思考維護效率。一切以這些爲目標的工做都是"前端工程化"。工程化是一種思想而不是某種技術。css

本篇文章你能夠學到：前端

如何使小程序支持scss；
怎樣經過gulp編譯你的項目；
項目經常使用的模塊封裝；
小程序同webview之間如何優雅的進行交互；
集中式管理你的項目提升可維護性；
提高開發效率的小工具編寫；

全文所有基於原生的小程序開發所闡述，各類第三方框架開發不在此列。並不會將整個項目的搭建流程細緻的寫出來，而是挑其中我認爲在開發過程當中存在的一些很重要的點進行詳細陳述。webpack

普通小程序開發流程有可能會遇到的坑

列舉部分常見的ios

小程序自己不支持經常使用的css預編譯器,致使樣式規範隨意散落在各個文件，沒法統一進行管理，而現代前端開發中不管是less,sass,stylus 均可以提高css效率；
缺乏統一的request攔截請求；
缺乏統一的路由管理；
缺乏集中式的API地址和ENV環境變量管理；
缺乏統一的本地緩存讀取管理；
重複的webview頁面；
不支持ES7以上的高級語法，如async await等特性；
不論是體驗版仍是開發版只能存在一種環境，一旦發佈預覽測試環境切換繁瑣；
上線前須要手動修改線上環境，容易出錯......

如何解決？

要解決工程化的問題，須要從兩個角度入手：開發 && 部署。git

開發

Questionweb

如何提升開發生產效率？
如何降代碼維護難度？

Programnpm

制定開發規範，提升團隊協做能力；
使用自動化編譯工具使項目支持各類插件和提升效率的工具；
模塊/組件化開發;
全部須要集中管理的地方進行統一封裝；

部署

環境切換；
壓縮打包；

項目搭建

完整目錄結構

開發流程

工程化方案選型

對於目前經常使用的工程化方案，webpack，rollup，parcel等來看，都經常使用與單頁應用的打包和處理，而小程序天生是「多頁應用」而且存在一些特定的配置。根據要解決的問題來看，無非是文件的編譯，修改，拷貝這些處理，對於這些需求，咱們想到基於流的 gulp很是的適合處理，而且相對於webpack配置多頁應用更加簡單。因此小程序工程化方案推薦使用 gulp。
json

Start

初始化一個項目，結構以下 gulp

src 爲開發目錄
dist（開啓編譯後可見）爲預覽/上傳目錄
.gitignore git上傳忽略文件
gulpfile.js 編譯配置文件
CHANGELOG.md 版本更新日誌
README.md 項目說明文件
package.json 項目配置文件

編譯用到的插件 使用npm或yarn自行安裝，安裝過程不過多贅述，不會請自行搜索。
"gulp": "^3.9.1"
"gulp-sass": "^4.0.2" scss編譯插件
"gulp-postcss": "^6.4.0" 強大的css處理插件
"gulp-rename": "^1.2.2" 更改文件名
"gulp-replace": "^1.0.0" 替換內容
"gulp-changed": "^3.2.0" 檢測改動
"autoprefixer": "^6.5.1" 自動添加前綴
小程序

如何使用scss？

gulp配置打包sass很是簡單，惟一須要注意的是@import的使用,wxss是支持樣式導入的，但上面說到太小程序是天生的多頁面應用，每個頁面都對應一個wxss，所以sass打包會把import的文件打包到當前文件，從而致使當前文件的體積變大。因爲微信限制單包代碼不能超過2M，所以當css越寫越多的時候，這種打包方式勢必會使樣式文件愈來愈大。

解決import導入問題

那如何解決import的導入問題呢，其實也比較簡單，說白了就是sass處理的時候，讓其不處理import部分的語句就能夠了。有兩種方式能夠作到，第一種是改寫sass處理的源碼，當遇到import語句時跳過。第二種是，在把文件交給sass處理前，咱們先把import語句部分註釋掉，這樣sass處理的時候就會忽略了，當sass處理完成後，再把註釋掉的語句打開便可。顯然第一種成本比較高，也很差維護，因此咱們採用第二種。
在處理import的時候，還有個地方是須要注意的。在sass中，import除了能引入css外，也能夠引入變量，函數。所以，咱們在處理的時候也須要注意區分，變量和函數最好有一個獨立的文件目錄存放，而且在import的時候，對於變量和函數，是必須交給sass處理的，也就是不能註釋掉。所以咱們單獨配置了sass變量和函數存放的位置，這樣咱們在打包的時候，遇到這樣的import語句，咱們就跳過，交給sass處理，不然就表明其是引入了共用的樣式文件，這樣咱們交給sass處理前，就先將其註釋掉，sass處理完成後再把註釋打開。

完整實現支持scss思路以下：

指定文件處理目錄
gulp-replace經過正則匹配@import語句將其註釋
判斷當前@import語句是否存在於變量和函數文件的配置路徑中
不存在就註釋，存在就跳過
啓用gulp-sass編譯scss文件，
經過postcss對低版本ios和安卓進行兼容樣式處理
gulp-rename更改文件後綴爲.wxss
gulp-replace經過正則匹配@import語句打開註釋
最後輸入到dist目錄

代碼以下

拷貝其他頁面，注意要排除scss文件，或者使用gulp-clean清理無用文件

創建監放任務

建立默認執行任務

將生成的dist目錄做爲根目錄丟進小程序開發工具便可實時刷新預覽小程序，至此你的項目已經徹底支持scss了，盡情的去浪吧。

提升你的代碼維護性——封裝

request請求攔截器

wx.request是小程序中最經常使用的api，在實際項目中會涉及到不少須要統一攔截/發送/處理，因此咱們須要對wx.request進行二次封裝用來支持各種需求，以實現代碼的可維護性。小程序自己已經支持promise語法，在此用promise將其封裝成經常使用的.then的形式

要作什麼？

能夠經過header和data統一發送公共參數，如請求驗證的token，用戶id等信息...
能夠統一進行錯誤攔截處理，如全局登陸狀態判斷，特殊code碼的處理...
能夠根據配置自適應請求環境，如Mock，Dev，Test， Slave，Prod...

須要支持的功能

請求方式
參數傳遞
成功回調
失敗回調
是否開啓mock數據
請求時是否展現loading
請求錯誤時是否展現toast

代碼實現

調用方式

在app.js入口文件內引入，並將其掛載到App對象上，須要調用時可經過getApp()的方式調用

以 index.js爲例，關於API的引入會在後文介紹：

Router路由

路由的封裝主要是爲了防止路由地址各個文件散落，沒法集中管理的問題。

須要支持的功能

無參路由和有參路由
路由地址縮寫
參數傳遞
跳轉延時
跳轉類型

代碼實現 定義出存路由地址的對象，使用時直接經過key值匹配

實現一個parse方法解析參數爲query拼接方式

定義一個 push對象接收普通無參數 path地址和有參數的 option對象， option對象包含 path(路由地址)、query(參數)，duration(跳轉延時)，openType(跳轉方式)；

經過openType結合原生api實現路由的幾種跳轉方法

調用方式 仍是老規矩，直接掛載App對象經過getApp()獲取直接調用

Stroage存儲

合理的Stroage方法封裝可使你更優雅的管理你的本地緩存。此功能須要支持三種經常使用的setItem(設置緩存)、getItem(讀取緩存)、clear(清除緩存)方法，而且在你的團隊內部最好整理一套寫入緩存的規範，不要一股腦丟在全局，應該按一些模塊進行劃分存取，這樣才能更好的維護你的本地緩存信息。

代碼實現

寫入和讀取均支持key ---> value的普通方式也兼容key--->value--->module的模塊方式，默認使用同步的方式設置，之因此加catch是爲了防止在特殊狀況下小程序會報警設置緩存錯誤，如同步報錯則採用異步容錯。 setItem寫入緩存

getItem讀取緩存

clear清除緩存

調用方式 同上掛載App，使用方法以下：

寫入

讀取

清除

API地址和ENV環境變量管理

API地址和ENV環境變量能夠作爲兩個單獨配置的文件進行配置，API文件只存接口路徑，ENV存儲多個環境變量，環境對象內配置當前環境各類域名，而後在app.js配置當前環境變量，做爲key值匹配ENV內的環境，將匹配的環境掛載App對象，配合前面封裝的fetchApi以env+url的方式實現自動環境適配。

API

ENV

app.js

統一的webview

微信小程序提供了在小程序中內嵌HTML頁面的能力，從微信小程序基礎庫1.6.4開始，能夠在小程序內放置一個組件來連接HTML頁面。有了就能夠方便的將幾端共用的h5頁面集成到小程序內部，爲咱們減小了可觀的工做量。

若是你有多個須要集成的webview頁面實際上無需爲每一個頁面都單獨建一個文件，只需對一個公共的webview頁面進行簡單封裝配合路由便可集中管理你的webview頁面。

代碼實現

wxml引入webview組件和加載中動畫，webview組件接收地址，和加載成功回調。

js中在data內定義webview頁面的地址列表，key用type表明指定路徑，value用page表明頁面連接，經過onload接收一個formpage參數對應type，動態加載組件上的src便可。須要注意的一點是，若是須要在webvie連接拼接獲取的參數，在某些安卓機型會由於提早渲染webview而src地址沒有初始化而產生白屏，因此最好的方式是經過一個變量控制組件的展現隱藏，確保須要渲染組件時數據已經初始化完成以保證頁面正常展現。

如何解決多環境切換問題

小程序不像h5網頁只要部署到對應環境，就能夠隨意輸入指定的環境域名進行測試，而小程序像app同樣沒有網址這一說，它自己只會存在一個預覽版本，普通的流程是每次當測試同窗須要在不一樣環境中測試時就須要找到開發同窗手動更改環境並從新發布體驗版。這樣的流程是很不靈活的，因此咱們須要想一個辦法，讓一個小程序版本自由的切換多個環境，而無需手動改代碼配置發佈。
如何實現？ 實現的思路有不少種，主要須要解決的就是環境如何進行切換的問題，在這裏我是經過利用小程序的重力感應api模擬搖一搖，將切換環境搓成一個一個隱藏的小彩蛋，測試人員只須要搖一搖彈出環境選項列表點擊對應選項更改App對象的config內的env環境屬性便可成功切換環境。

代碼實現