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

来源:https://www.cnblogs.com/88223100/archive/2023/01/31/practice-of-uni-app-in-cross-platform-applet.html
-Advertisement-
Play Games

隨著移動互聯網的高速發展,各家大廠的小程式百花齊放,在用戶規模及商業化方面都取得了極大的成功。微信小程式的日活超過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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 相信大家看過不少講C# async await的文章,博客園就能搜到很多,但還是有很多C#程式員不明白。 如果搞不明白,其實也不影響使用。但有人就會疑惑,為什麼要用非同步?我感覺它更慢了,跟同步有啥區別? 有的人研究深入,比如去研究狀態機,可能會明白其中的原理。但深入研究的畢竟少數。有的人寫一些 ...
  • 由於一些客戶的內部系統需要提取一些記錄信息,如果手工錄入會變得比較麻煩,因此考慮使用百度雲的OCR進行圖片文字的提取處理,綜合比較了一下開源免費的Tesseract 類庫進行處理,不過識別效果不太理想,因此轉為了百度的OCR雲介面處理方式,測試的效果比較理想,基本上較少出現錯別字。本篇隨筆介紹如何利... ...
  • 1.背景知識 CRLF用來表示文本換行的方式 ,CR是回車的意思,對應 \r ;LF 是換行的意思,對應 \n Windows 換行符是 \r\n Unix 換行是 \n 如果一個將要在Linux伺服器上使用的文件,比如某個配置文件,在windows電腦打開,編輯過,那麼文件每一行末尾會多有\r 。 ...
  • MySQL中既存在redo log,又存在bin log,這是因為bin log是MySQL Server提供的一種歸檔日誌,其本身並不具備crash-safe能力。而redo log本身不具備歸檔能力,他是一種迴圈寫的日誌。 MySQL通過將這兩種日誌整合起來,並通過兩階段提交的機制,保證了數據... ...
  • 一:背景 1. 講故事 相信絕大部分用 SQLSERVER 作為底層存儲的程式員都知道 nolock 關鍵詞,即使當時不知道也會在踩過若幹阻塞坑之後果斷的加上 nolock,但這玩意有什麼註意事項呢?這就需要瞭解它的底層原理了。 二:nolock 的原理 1. sql 阻塞還原 為了方便講述,先創建 ...
  • Redis 每秒可以處理超過 10 萬次讀寫操作,是已知性能最快的 key-value 資料庫,稱得上是必須要學會的知識。 ...
  • 華為 HMS Core 音頻編輯服務(Audio Editor Kit)是華為幫助全球開發者快速構建各類應用音頻能力的服務,匯聚了華為在音樂、語音等相關音頻領域的先進技術。音頻編輯服務為開發者們提供音頻基礎編輯、AI配音、音源分離、空間渲染、變聲、多種音效等豐富的音頻處理能力,以及性能優異、簡單易用 ...
  • 一、前言 你可以使用任意文本編輯器,再結合命令行工具來開發 Flutter 應用。然而,我們推薦使用本文接下來介紹的編輯器插件以獲取更好的開發體驗。這些插件提供了代碼補全、代碼高亮、widget 輔助編輯的功能,以及為項目的運行和調試提供支持等。 推薦的開發工具有 VS Code、Android S ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...