uni-app 在跨平臺小程序中的實踐

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 方面。兩者具有如下共同點：

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 標籤不一樣】

【生命週期函數不一樣】

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 頁面的研發效率。

作者簡介

張慧吉、伍新生

■ 經銷商技術部 - 移動 App 團隊

■ 團隊主要負責汽車報價業務和微聊業務。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/HtTa7Ay0J-Z8idQex5tScQ

猜你喜歡