小程序開發(fā)現(xiàn)狀:

1. 開發(fā)工具不好使用(無法熱更新，編譯緩慢)；
2. 無法使用css預(yù)處理語言(Sass、Less)，有些IDE的插件可以監(jiān)聽編譯，但不同編輯器需要額外安裝；
3. 無法使用工程化(圖片自動壓縮，文件監(jiān)聽編譯等)；
4. 編碼繁瑣(創(chuàng)建一個頁面，需要新建4個文件(.wxml、.js、.json、.wxss),每次新建都需要新建4次或者復(fù)制文件比較浪費時間)；
5. 團隊多人協(xié)作，代碼風(fēng)格、使用的編輯器不一致；

技術(shù)選型：

在進行小程序項目啟動，進行技術(shù)選型的時候，對市場上多個小程序框架進行了考慮:

• uni-app、mpVue、wepy、taro、 kbone

團隊成員mpvue、wepy、uni-app都有實際的項目經(jīng)驗,且根據(jù)Github上的star數(shù)還有issue,最后決定回到到使用原生開發(fā)。

原因:

雖然框架有些很成熟，有工程化和跨端的解決方案，也有實際的上線項目，但考慮到后續(xù)一些支撐性的問題(維護，文檔，坑等)，在github上看了issue，有些已經(jīng)沒在維護了。

想著讓項目持續(xù)迭代，不受第三方框架限制，保持穩(wěn)健，最后決定使用原生，跟著官方的迭代升級，自己維護，引入前端工程化的思想，提高繁瑣的流程以及開發(fā)效率。

引入工程化

1. 基于Webpack4.x,自定義Webpack配置

   • scss編譯為wxss：定義全局變量,使用公共的樣式文件,提高css開發(fā)效率和可維護性；

   • 自動壓縮圖片資源 : 小程序?qū)Π笮∮邢拗疲瑝嚎s圖片大小可以減少空間，加快頁面加載；普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網(wǎng)站，壓縮完再保存下來，效率比較低。現(xiàn)在執(zhí)行命令就可以自動壓縮圖片。

2. 代碼規(guī)范

   • eslint: 能在js運行前就識別一些基礎(chǔ)的語法錯誤，減少不必要的小問題，提高調(diào)試效率；

   • husky、line-staged、prettier: 統(tǒng)一團隊代碼規(guī)范: 當(dāng)執(zhí)行代碼提交到git倉庫時，會將已改動文件的代碼格式化統(tǒng)一規(guī)范的代碼風(fēng)格;

1. 命令行創(chuàng)建頁面和組件模板

   • 小程序每次新建頁面或者組件，需要依賴4個文件(.wxml,.js,.wxss,.json)。只需要執(zhí)行npm run create命令，會提示選擇創(chuàng)建頁面還是組件，選擇完成輸入頁面或者組件的名字，會自動生成4個模板文件(.wxml,.js,json,.scss)到對應(yīng)的目錄

1. 引入jest單元測試

   • 生成測試覆蓋率

項目結(jié)構(gòu)

app -> 小程序程序的入口，使用微信開發(fā)者工具制定app目錄cli -> 生pages和components的模板腳手架img ->

 圖片資源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改動，容易有沖突，將scss文件傳到服務(wù)器就好了).prettierrc.js(代碼格式化風(fēng)格配置)babel.config.jsjest.config.js(單元測試配置文件)webpack.compress.js(指定入口圖片資源文件，將圖片壓縮編譯到小程序的資源目錄)webpack.config.js -> (工程化入口文件,指定入口scss文件，監(jiān)聽文件變化，自動將scss編譯為wxss)

項目使用的包文件

• webpack、babel、eslint: 轉(zhuǎn)換、規(guī)范js
• chalk: console.log打印彩色顏色
• scss、css-loader: 編譯scss
• figlet: 控制臺顯示字體樣式
• husky,line-staged,prettier: 代碼格式化相關(guān)
• jest、miniprogram-simulate: 單元測試

項目運行

. 安裝依賴    npm install 或 yarn install. 編譯scss   

 npm run dev. 壓縮圖片    npm run img. 單元測試    npm run test(生成測試報告)    npm run test:watch(監(jiān)聽測試文件改動—開發(fā)環(huán)境下使用)

示例

編譯scss

執(zhí)行 npm run dev

壓縮圖片

執(zhí)行 npm run img

將圖片壓縮到app/assets/img目錄下,一張7k的圖片變成5k，肉眼看不出有什么差別。

新建頁面

執(zhí)行 npm run create

終端會提示選擇頁面還是組件,選擇頁面,按Enter鍵，輸入頁面的名稱，會自動將4個文件創(chuàng)建到app/pages/xxx下。

新建組件

執(zhí)行 npm run create

終端會提示選擇頁面還是組件,選擇組件,按Enter鍵，輸入組件的名稱，會自動將4個文件創(chuàng)建到app/components/xxx下。

單元測試

執(zhí)行 npm run test 生成測試報告執(zhí)行 npm run test:watch 監(jiān)聽測試文件，方便開發(fā)使用

其他思考

工程化的初衷就是為了減少重復(fù)性的操作，提高編碼的效率和樂趣。

JavaScript是弱類型語言，好處是靈活，壞處是太靈活(多人協(xié)作，維護別人寫的代碼就是很痛苦了)。

項目最主要的是穩(wěn)健，可高度自定義拓展，不拘束于版本和地上那方，特別多人協(xié)作的團隊，工程化能給團隊帶來更多的收益，后續(xù)也會考慮將TypeScript等其他好的方案引入項目。

藍藍設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)