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 支持 onl oad、onShow、onReady 等生命周期函式，
生命周期執行順序為: App.vue: onLaunch（應用） -> App.vue: onShow（應用）-> index.vue: onl oad（頁面）-> 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: one rror（應用），
【安裝第三方庫問題】
原來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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/542659.html
標籤：Android