隨著移動互聯網的高速發展，各家大廠的小程式百花齊放，在用戶規模及商業化方面都取得了極大的成功。微信小程式的日活超過5億，其他追趕者如：支付寶、百度、位元組跳動小程式的月活也紛紛超過3億。鑒於小程式相比App，無需下載等待，有更高的激活率，相比H5有更好的下單轉化率，汽車報價業務線藉助各平臺的優勢，大力... ...
1. 背景
隨著移動互聯網的高速發展，各家大廠的小程式百花齊放，在用戶規模及商業化方面都取得了極大的成功。微信小程式的日活超過5億，其他追趕者如：支付寶、百度、位元組跳動小程式的月活也紛紛超過3億。鑒於小程式相比App，無需下載等待，有更高的激活率，相比H5有更好的下單轉化率，汽車報價業務線藉助各平臺的優勢，大力發展小程式業務。
目前國內頭部應用中，有一半以上部署了小程式。整個小程式生態現在有騰訊、阿裡巴巴、百度、位元組跳動、手機廠商、京東、360、美團、網易等9大類。然而各家平臺的開發規範完全不一樣，同時研發幾家主流平臺的小程式和快應用，對於研發團隊提出了挑戰，在前端團隊人數有限的情況下，如何能搞定諸多平臺的小程式是擺在我們面前的難題。
2. 技術選型
任何框架都首先要服務於實際業務需求，技術的選型也需根據研發團隊成員的技術方向和具體情況而定，對於項目建設而言技術框架沒有最好的只有最適合的。我們從核心需求、技術棧、支持跨平臺小程式、運行性能、社區生態、開發工具等幾方面對市面上的開發框架進行預研和對比。
2.1
核心需求
由於研發資源有限，在沒有額外人力增加的情況下，原來的H5研發人員要同時承擔跨平臺小程式的開發，核心需求是提高研發效率。經過調研，市面上支持跨平臺小程式的主流框架有uni-app和taro，本文主要針對這兩種開發框架進行對比。
2.2
uni-app和taro的共同點
taro是京東開發的多端統一開發框架，支持用 react 編寫一次代碼，生成能運行在微信/百度/支付寶/位元組跳動小程式、H5、React Native 等的應用。uni-app 是DCloud開發的使用 vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程式等多個平臺。由於筆者所在部門有專門的App原生開發人員，從性能角度來考慮，不需要開發框架支持App端，焦點主要集中在支持小程式和H5方面。兩者具有如下共同點：
-
均支持微信、百度、支付寶、位元組跳動等小程式及H5；
-
均支持使用 npm/yarn 安裝管理第三方依賴;
-
均支持使用 ES6 甚至更新的ES規範;
-
均支持使用 less/scss/ts 等預編譯器;
-
均支持進行應用狀態管理，taro 支持 Redux/Mobx，uni-app 支持 vuex。
2.3
uni-app和taro各自優缺點
前端團隊人數有限的情況下，相對react，我們團隊更熟悉vue技術棧，學習成本更低，開發時間和風險更低，且uni-app在不同平臺運行相容性更好，有官方推薦的IDE，所以我們決定使用uni-app作為跨平臺小程式的開發框架。
3. 應用案例
3.1
uni-app的項目結構
一個uni-app工程，預設包含如下目錄及文件：
圖 1 uni-app 項目結構
3.2
渲染引擎
uni-app有2種渲染引擎：基於weex的原生渲染，以及webview渲染。
如果使用 vue 頁面，則使用 webview 渲染；如果使用 nvue 頁面(native vue 的縮寫)，則使用原生渲染。
如果你不開發 App，那麼不需要使用 nvue。雖然 nvue 也可以多端編譯，輸出 H5 和小程式，但 nvue 的 css 寫法受限，所以如果不需要支持App的情況下，就不需要使用 nvue。在 App 端某些 vue 頁面表現不佳的場景下使用 nvue 作為強化補充。
3.3
uni-app與vue開發的區別
雖然uni-app遵循了vue語法，但是還是存在一些差異：
【DOM標簽不一樣】
-
div 改成 view；
-
span、font 改成 text；
-
a 改成 navigator；
-
img 改成 image；
-
select 改成 picker；
-
iframe 改成 web-view；
-
ul、li沒有了，都用view替代。做列表一般使用uList組件。
【生命周期函數不一樣】
uni-app在原來vue的生命周期函數上又新增了很多新的函數;
uni-app 支持 onLaunch、onShow、onHide 等應用生命周期函數；
uni-app 支持 onLoad、onShow、onReady 等生命周期函數。
生命周期執行順序為: App.vue: onLaunch（應用） -> App.vue: onShow（應用）-> index.vue: onLoad（頁面）-> index.vue: onShow（頁面）-> index.vue: created（vue）-> index.vue: onReady（頁面）-> index.vue: mounted（vue）-> index.vue: updated（vue）
-> App.vue: onHide（應用）-> index.vue: onHide（頁面）-> App.vue: onError（應用）。
【安裝第三方庫問題】
原來vue項目中通過npm install安裝的第三方庫，大多數無法直接在uni-app中使用，需要在uni-app的插件市場找類似的庫。
另外uni-app 在非 H5 端不支持window、document、navigator 等瀏覽器的對象，以及cookie等瀏覽器特性。
3.3
實際運行效果
通過實際驗證，基於uni-app開發的代碼分別發佈為微信小程式、百度小程式、快手小程式、位元組小程式等後，相容性不錯。對於一些平臺特性，還可以通過條件編譯，實現各平臺差異化編譯，調用各平臺的特色功能，如適配各平臺的獲取用戶信息、獲取用戶手機號等方法。其中頂部導航欄個性化定製在位元組小程式中預設不開放，需要小程式主體信用分大於90分，評級達到S，才可以申請。而微信小程式、百度小程式、快手小程式均預設支持。
圖2 汽車報價小程式在各平臺的運行效果
4. 應用效果和收益
汽車報價業務線目前基於uni-app已經同時支持微信小程式、百度小程式、位元組小程式、快手小程式等多個平臺，後續還將擴展其它平臺的小程式及快應用。在熟練掌握uni-app的語法和工具後，研發效率可以提3-4倍以上。後續我們將基於uni-app框架實現可視化編輯工具，通過豐富的組件可視化拖拽生成小程式，進一步提高小程式和H5頁面的研發效率。
作者|張慧吉、伍新生
本文來自博客園，作者：古道輕風，轉載請註明原文鏈接：https://www.cnblogs.com/88223100/p/practice-of-uni-app-in-cross-platform-applet.html
