歡迎您光臨深圳凯时真人娱乐平台網絡科技有限公司!
电话图标 余先生:13699882642

網站百科

为您解码網站建設的点点滴滴

使用uni-app開發小程序 ,比直接原生開發小程序好在哪裏

发表日期:2019-11 文章编辑:小灯 浏览次数:1185

小程序原生開發有不少槽點:

  1. 原生wxml開發對Node、預編譯器、webpack支持不好 ,影響開發效率和工程構建流程 。所以大公司都會用框架開發
  2. 微信定義的這套語法 ,wxml、wxs ,以及wx:if等語法 ,私有化太強 。不如正經學vue ,學會了全端通用 ,而不是只爲微信小程序
  3. vue生態裏有太多周邊工具 ,可以提高開發效率 ,比如ide、校驗器、三方庫 。 。 。而微信的開發者工具和專業編輯器相比實在不好用 ,個性化設置也非常少

作爲前端工程師 ,除了微信小程序 ,還要開發web、其他小程序甚至App ,人們不喜歡來回切換開發工具和變更語法思考方式 。

uni-app自然可以解決這些問題 ,但開發者又經常有些顧慮:

  1. 怕使用uni-app後 ,微信小程序裏有的功能無法實現 ,受制于uni-app的更新
  2. 怕性能不如原生WXML
  3. 怕框架不成熟 ,跳到坑裏
  4. 擔心社區生態不完善

本文從開發者關心的功能、性能、學習門檻、開發體驗、生態、可擴展性等維度 ,逐個分析對比 ,給予說明 。

1.功能實現

開發者最常問的問題:如果小程序叠代升級 ,新增了一批API ,但uni-app框架未及時更新 ,該怎麽辦?

其實這是誤解 ,uni-app不限制底层API 调用 ;在小程序端 ,uni-app支持直接編寫微信原生代碼 。

類比傳統web開發 ,如果vue、react等框架的使用 ,造成開發者無法操作浏覽器提供的所有api ,那這樣的框架肯定是不成熟的 。小程序開發也一樣 ,uni-app框架中 ,同樣可調用微信提供的所有原生代碼 。

故如果存在某些API(平台特有或新增API) ,uni-app尚未封裝 ,開發者可直接在uni-app中編寫微信原生API ,即wx.開頭的各種API 。

舉個例子 ,目前uni-app雖然尚未封裝跨平台的廣告(ad)組件 ,但開發者在小程序端依然可以使用微信<ad>組件來展現廣告 ,代碼示例如下:

 <view>
    <view class="title">微信官方banner广告</view>
    <view style="min-height: 50px;">
        <!-- uni-app尚未封装,但可直接使用微信原生的ad组件-->
        <ad unit-id="adunit-01b7axxxbf53d74e"></ad>
    </view>
    <view class="title">微信官方视频广告</view>
    <view style="min-height: 50px;">
        <!-- uni-app尚未封装,但可直接使用微信原生的ad组件-->
        <ad unit-id="adunit-9f340xxx64533" ad-type="video" ad-theme="white"></ad>
    </view>
</view>

小程序端運行效果如下:

包括微信小程序自定義組件、WXS、雲開發這些複雜用法 ,在uni-app裏一樣全面支持 。

所以 ,結論是:使用uni-app框架開發 ,在功能上和原生小程序開發沒有區別 ,不會有任何限制 。

2. 性能体验

開發者常問的第二個問題:三方框架 ,內部大多做了層層封裝 ,這些封裝是否會增加運行負載 ,導致性能下降?

同樣是多慮了 ,uni-app不會導致性能下載 ,甚至對很多環節做了自動優化 ,很多場景下性能體驗比微信原生開發更好 。

類似使用vue.js開發web ,不但不會造成性能比原生js差 ,反而由于虛擬dom和差量更新技術的運用 ,在大多數場景下 ,比開發者手動寫代碼操作dom的性能還好 。

小程序中需要頻繁的寫setData代碼來更新數據 ,這裏很重要的就是差量數據更新 。如果不做差量 ,代碼性能不好 ,如果每處邏輯都判斷差量數據更新 ,那代碼寫起來太麻煩了 。

使用uni-app ,底層自動差量數據更新 ,簡單而高性能 。

凯时真人娱乐平台 從優化理論、實測數據兩個維度來仔細說明 。

2.1 理论:框架优化方案

爲提高性能體驗 ,小程序從架構設計層面做了很多工作:

  • 邏輯層、視圖層分離 ,避免JS運算阻塞視圖渲染
  • 單獨定義組件標簽(wxml) ,減少DOM複雜度
  • 精簡樣式(wxss) ,提升渲染性能
  • 複雜組件原生化(video/map等) ,解決web組件的功能/體驗缺失

通過這些規範約束 ,大幅提升了小程序的整體性能體驗 ,但依然存在不少性能坑點 ,其中以setData最爲頻繁普遍 。

這裏引用微信官方的描述 ,簡單介紹一下setData背後的工作原理:

小程序的视图层目前使用 WebView 作为渲染载体 ,而逻辑层是由独立的 JavascriptCore 作为运行环境 。在架构上 ,WebView 和 JavascriptCore 都是独立的? ,并不具备数据直接共享的通道 。当前 ,视图层和逻辑层的数据传输 ,实际上通过两边提供的 evaluateJavascript 所实现 。

爲簡化開發 ,微信將evaluateJavascript調用封裝成了setData JS方法 ,實現視圖層和邏輯層的數據傳輸 ,數據流示意圖如下:

setData的執行會受到很多因素的影響 ,setData每次傳遞數據量過大或頻繁被調用(見微信官方介紹) ,都可能引發性能體驗問題 。

幸運的是 ,uni-app在這兩個方面都有優化 。

2.1.1 减少 setData 传递数据量

假設當前頁面有一個列表(初始值爲a,b,c,d) ,現在要向列表後追加4個新列表項(e,f,g,h) ,我们分别以微信原生、uni-app 两种模式编写代码 。

小程序原生代碼:

page({
    data:{
        list:['a','b','c','d']
    },
    change:function(){
        let newData = ['e','f','g','h'];
        this.data.list.push(...newData);
        this.setData({
            list:this.data.list
        })
    }
})

如上微信原生代碼 ,change方法執行時 ,會將list中的a,b,c,d,e,f,g,h8個列表項通過setData全部傳輸過去 。

uni-app 代码:

export default{
    data(){
        return {
            list:['a','b','c','d']
        }
    },
    methods:{
        change:function(){
            let newData = ['e','f','g','h'];
            this.list.push(...newData)
        }
    }
}

如上uni-app代碼 ,change方法執行時 ,僅會將list中的e,f,g,h4個新增列表項傳輸過去 ,實現了setData傳輸量的極簡化 。

uni-app借鉴了 westore JSON Diff库 ,在調用setData之前 ,會先比對曆史數據 ,精確、高效計算出有變化的差量數據 ,然後再調用setData ,仅传输变化的数据 ,这样就实现 setData 传递数据量的最小化 ,大幅提高通讯性能 。

Tips:也許有些同學對傳遞數據從a,b,c,d,e,f,g,h8個列表項優化爲e,f,g,h4個列表項 ,不以爲然 ,但凯时真人娱乐平台 提醒 ,不要小看這個機制 ,上述只是demo示例 。

  • 在實際列表場景中 ,每個列表項可能包含縮略圖、標題、摘要、時間等各種信息 ,每個列表項數據都會更大(假設爲1k) ;
  • 假設當前頁面有20個列表項 ,連續上拉4次後 ,頁面變成100條記錄 ;如果再次上拉 ,頁面變成120條記錄時 ,情況會有不同
  • 上述微信原生的方式 ,將120條記錄數據(120k)全部傳輸過去
  • 上述 uni-app 模式 ,仅会将新增的20条(101 ~ 120)记录数据(20k)传输过去 ,数据量是原生方式的1/6!
  • 當頁面列表項數據越多 ,這個差別就越大 ,頁面有200條記錄時 ,uni-app傳遞數據量會變成微信原生數據傳遞量的1/10!

2.1.2 减少 setData 调用频次

假设我们有更改多个变量值的需求 ,我们分别以微信原生、uni-app 两种模式编写代码 。

小程序原生代碼:

change:function(){
    this.setData({a:1});
    this.setData({b:2});
    this.setData({c:3});
    this.setData({d:4});
}

如上四次調用setData ,就會引發4次邏輯層、視圖層數據通訊

uni-app 代码:

change:function(){
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
}

如上uni-app的代碼 ,最后会被合并成{"a":1,"b":2,"c":3,"d":4}一條數據 ,然後僅調用一次setData完成所有數據傳遞 ,大幅降低了setData的調用頻次 。

uni-app之所以有这样的优势 ,是因为 uni-app 基于 Vue Runtime 深度定制实现 ,并借助了 Vue 的 nextTick 机制 。

2.2 实测:性能对比数据

有了如上的理論分析 ,凯时真人娱乐平台 接著進行真機實測 ,用數據來對比 。

測試模型如下:

  • 开发内容:开发一个仿微博小程序首頁的复杂长列表 ,支持下拉刷新、上拉翻页、点赞 。

仿微博的列表是一個包含很多組件的列表 ,這種複雜列表對性能的壓力更大 ,很適合做性能測試 。

  • 界面如下:

  • 开发版本:使用微信原生、uni-app分别开发两套代碼 ,uni-app使用cli方式默認安裝 。
  • 測試代碼開源(Github倉庫地址:https://github.com/dcloudio/test-framework) ,

Tips:若有同学觉得测试代码写法欠妥 ,欢迎提交 PR 或 Issus ,本项目下还有其它框架的测试代碼 ,开发者可忽略

  • 测试机型:红米 Redmi 6 Pro、MIUI 10.2.2.0 稳定版(最新版)、微信版本 7.0.3(最新版)
  • 測試環境:每個框架開始測試前 ,殺掉各App進程、清空內存 ,保證測試機環境基本一致 ;每次從本地讀取靜態數據 ,屏蔽網絡差異 。

從觸發上拉加載到數據更新、頁面渲染完成 ,需要准確計時 。人眼視覺計時肯定不行 ,凯时真人娱乐平台 采用程序埋點的方式 ,制定了如下計時時機:

  • 計時開始時機:交互事件觸發 ,框架賦值之前 ,如:上拉加載(onReachBottom)函數開頭
  • 計時結束時機:頁面渲染完畢(微信setData回調函數開頭)

Tips:setData回調函數開頭可認爲是頁面渲染完成的時間 ,是因爲微信setData定義如下(微信規範):

字段 類型 必填 描述
data Object 這次要改變的數據
callback Function setData引起的界面更新渲染完畢後的回調函數

测试方式:从页面空列表开始 ,通过程序自动触发上拉加载 ,每次新增20条列表 ,记录单次耗时 ;固定间隔连续触发 N 次上拉加载 ,使得页面达到 20*N 条列表 ,计算这 N 次触发上拉到渲染完成的平均耗时 。

測試結果如下:

列表條數 微信原生 uni-app
200 770 641
400 876 741
600 1111 910
800 1406 1113
1000 1690 1321

說明:以400條微博列表爲例 ,從頁面空列表開始 ,每隔1秒觸發一次上拉加載(新增20條微博) ,記錄單次耗時 ,觸發20次後停止(頁面達到400條微博) ,計算這20次的平均耗時 ,結果微信原生在這20次 触发上拉 -> 渲染完成 的平均耗時爲876毫秒 ,uni-app是741毫秒 。

这个数据 ,可能违反了很多人的直觉 ,uni-app 的性能竟然比微信原生还好!

不必疑惑 ,這就是上面理論分析章節中 ,減少setData傳遞數據量優化方案的結果 ;微信原生每次傳遞全量數據 ,而uni-app在調用setData之前會自動做diff計算 ,每次僅傳遞變動的數據 。

開發者使用微信原生框架 ,完全可以自己優化 ,精簡傳遞數據 ,比如修改如下:

data: {
    listData: []
},
onReachBottom() { //上拉加载
    // 通过长度获取下一次渲染的索引
    let index = this.data.listData.length;
    let newData = {}; //新变更数据
    Api.getNews().forEach((item) => {
        newData['listData[' + (index++) + ']'] = item //赋值,索引递增
    }) 
    this.setData(newData) //增量数据,发送数据到视图层
}

經過如上優化修改後 ,再次測試 ,微信原生框架性能數據如下:

組件數量 微信原生框架(優化前) 微信原生框架(優化後) uni-app
200 770 572 641
400 876 688 741
600 1111 855 910
800 1406 1055 1113
1000 1690 1260 1321

從測試結果可看出 ,經過開發者手動優化 ,微信原生框架可達到更好的性能 ,但 uni-app相比微信原生 ,性能差距並不大 。

但原生开发需要开发者熟悉小程序通讯机制 ,有意识的去编写代碼 ,精简数据 ;uni-app自动处理 ,自然是更省心 。

這個結果 ,和web開發類似 ,web開發也有原生js開發、vue、react框架等情況 。如果不做特殊優化 ,原生js寫的網頁 ,性能經常還不如vue、react框架的性能 。

也恰恰是因爲Vuereact框架的優秀 ,性能好 ,開發體驗好 ,所以原生js開發已經逐漸減少使用了 。

通過本章節性能優化的理論分析及數據實測 ,凯时真人娱乐平台 可以輸出這麽個結論:

  • uni-app 不会增加小程序运行负载 ,不会拉低运行性能
  • uni-app 自动处理了很多性能优化点 ,对不懂性能调优或不熟悉小程序架构设计的开发者 ,更友好 ,更省心

3.社區生態

3.1 周边轮子

小程序是脫離web自造生態 ,很多web生態中輪子無法使用 。

微信小程序還是有周邊生態的 ,而其他幾家小程序平台的生態基本沒建起來 。

uni-app的周邊生態非常豐富 ,在插件市場有近800個插件 ,詳見 ext.dcloud.net.cn 。

首先uni-app兼容小程序的生態 ,各種自定義組件均可直接引入使用 。在此基礎上 ,uni-app的插件市場 ,有更多vue組件 ,同時可跨多端使用 ,並且性能優秀 。

這使得uni-app的生態成爲最豐富的小程序開發生態 。

比如富文本解析、圖表等組件 ,uni-app的插件性能均超過了wxparse、wx-echart等微信小程序組件 。

如果開發者需要豐富和高性能的組件 ,更應該使用uni-app ,而不是原生小程序開發 。

3.2 活跃的QQ/微信群和论坛

uni-app官方有 70 个开发者QQ/微信交流群(大多2千人群 ,近10万开发者) ,三方群更多 。

問答社區 ,每天有數百篇帖子  ;钴S度與微信小程序官方論壇相同 ,遠超過其他小程序官方論壇 。

uni-app三方培訓活躍 ,騰訊課堂官方都爲uni-app制作了課程 ,各種培訓網站到處可見免費或收費的uni-app培訓視頻教程 。

4.學習門檻、開發體驗

首先微信原生的開發語法 ,既像React  ,又像Vue ,有點不倫不類 ,對于開發者來說 ,等于又要學習一套新的語法 ,大幅提升了學習成本 ,這一直被大家所诟病 。

uni-app则对开发者更为友好 ,简单来说是 vue的语法 + 小程序的api 。

它遵循Vue.js語法規範 ,組件和API遵循微信小程序命名 ,這些都屬于通用技術棧 ,學習它們是前端必備技能 ,uni-app沒有太多額外學習成本 。

有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app  。

沒學過vue的同學 ,也不用掌握vue的全部 ,只需了解vue基礎語法、數據綁定、列表渲染、組件等 ,其他如路由、loader、cli、node.js、webpack並不需要學 。

因爲HBuilderX工具搭配uni-app可以免終端開發 ,可視化創建項目、可視化安裝組件和擴展編譯器 ,也就是uni-app的學習門檻 ,比web開發的vue.js還低 。

開發體驗層面 ,微信原生開發相比uni-app有較大差距 ,主要體現在:

  • 更爲強大的組件化開發能力:vue的組件開發比小程序自定義組件開發的體驗要好很多
  • 應用狀態管理:uni-app支持vuex
  • 使用 Sass 等 CSS 预处理器
  • 完整的 ES Next 语法支持
  • 自定義構建策略

開發工具維度 ,差距更大:

  • 微信開發者工具被吐槽無數
  • uni-app的出品公司 ,同時也是HBuilder的出品公司 ,DCloud.io 。HBuilder/HBuilderX系列是四大主流前端開發工具(可對比百度指數) ,其爲uni-app做了很多優化 ,故uni-app的開發效率、易用性非微信原生開發可及 。

這裏可以輸出一個結論:如果你需要工程化能力 ,那就直接忘了微信原生開發吧 。

5.未來擴展性

雖然當前産品僅要求發布到微信小程序 ,但若有一天 ,老板和外來的一個和尚喝完咖啡 ,轉身就要求覆蓋阿裏、百度、字節跳動等各家小程序平台 ,此時程序員該怎麽辦?

難道真的每個平台到處搬磚嗎?

此時 ,uni-ap的跨端功能將成爲程序員的自救神器 ,基于uni-app開發的小程序 ,無需修改 ,即可同時發布到多家小程序 ,甚至App、H5平台 。這不是夢想 ,而是現實 。大家可依次掃描如下8個二維碼 ,親自體驗最全面的跨平台效果! 。

6.結語

uni-app 微信
功能 相同 相同
性能 常規場景更優 需要自己編寫複雜代碼才能提高性能
社區生態 豐富 ,更多高性能組件 豐富
開發體驗 純vue體驗 ,高效、統一 ;工程化能力強 語法私有化 ;工程化能力弱
多端能力 同時支持H5、多家小程序、跨平台App 只能用于微信小程序

結論:只開發微信小程序 ,也應該使用uni-app


本頁內容由凯时真人娱乐平台網絡科技有限公司通過網絡收集編輯所得 ,所有資料僅供用戶參考了本站不擁有所有權 ,如您認爲本網頁中由涉嫌抄襲的內容 ,請及時與凯时真人娱乐平台 聯系 ,並提供相關證據 ,工作人員會在5工作日內聯系您 ,一經查實 ,本站立刻刪除侵權內容 。本文鏈接:/25256.html
相關小程序
 八年  行業經驗

多一份參考 ,總有益處

联系深圳网站公司凯时真人娱乐平台网络 ,免费获得網站建設方案及报价

咨詢相關問題或預約面談 ,可以通過以下方式與凯时真人娱乐平台 聯系

業務熱線:余經理:13699882642

在線咨詢 提交需求

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

  • 粵ICP備13056747號