hybird app混合開發介紹


一 概念

1 Hybird App,是用現有前端(html,js,css)技術來開發的app。
特點:1 靈活(開發靈活 ,部署靈活) 2 擁有類似原生的性能體驗。

2 不是h5頁面,也不是在webview里面加載的。 
而是通過例如webpack打包工具生成的js bundle資源文件,放到原生本地渲染(原生需集成環境)。



 

二 優點

1 擁有web/h5的靈活性,支持隨時熱更新(增量更新); 同時擁有原生app的性能。

2 編寫一次, 多端通用,跨平台,體驗一致。

3 組件可以modules和compontents化,開發效率及復用率高。

4 支持擴展: 可直接調用原生組件(需要按規則封裝),原生也可以反過來和混合頁面交互;當然也可以調用三方modules組件模塊。



 

三 原理

1 主要通過javascript 內核引擎(JsCore 內核),虛擬化技術解析,將js控件轉成對應的原生組件 渲染。(例如:div、img 等轉成原生的 View、Image 等組件)
當然weex里-----------Android 下使用 UC 提供的 v8 內核。

---每個端都基於 DOM 模型設計並實現了標准的界面渲染接口 供 JavaScript 引擎調用。
---采用了內存 Dom tree Diff 計算,優化了 view 的渲染效率和體驗。

ps: weex在版本上支持降級成h5,從而當weex渲染失敗的時候,使用webview加載url。



 

四 應用及場景

1 頁面功能模塊頻繁變動,需要快速更新迭代(或者能快速的fix線上bug)。

2 頁面展示性的內容為主(影響用戶輸入的及固定的,一般用原生;
分享出去的用h5頁面)。



 

五 發展形勢

一 用JavaScript 開發app應用已經是客戶端(甚至前端)必備的技能

能解決:
1 開發一次,2端(甚至3端)通用。

2 ios快速發布及修復功能模塊(原生不支持熱更新 ;提交審核緩慢)



 

二 目前流行框架解決方案有:

React Native -----facebook 已開源-----https://reactnative.cn/

weex/Rax------alibaba 已開源(支持vue和react2個版本)--- https://weex.apache.org/cn/guide/



 

三 案例

手機百度,微信小程序(Rn改造),攜程,qq空間,電商類,金融類app,支付寶,天貓,手淘,淘票票,飛豬,淘寶頭條。。。

 

 

六 適用人員

1 有前端和原生經驗的app開發者

2 前端開發人員(vue.js/react.js)



 

七 weex框架 和 React Native框架對比

一 Weex 對現有項目兼容性較好,入侵性較低:

1 weex允許項目里面部分頁面使用weex;也可以整個項目都使用,而且它自帶webview,tab, navigator…

2  寫法更貼近前端(單位用px)。

3   原生可以封裝方法和組件 ,供weex頁面調用。

4   可以引用三方組件。



二 React Native 要求最好整個項目都用它改造,現有項目重構改動大。

1 他里面自帶了android/ios目錄 ,有項目結構,必須按照它的寫法。

2 寫法更貼近原生。

3 原生也可以封裝方法和組件 ,供頁面調用。

4 也可以引用三方組件。



 

八 weex簡單介紹

一 Weex 是一套簡單易用的跨平台開發方案

能以 web 的開發體驗構建高性能、可擴展的 native 應用,遵循 W3C 標准實現了統一的 JSEngine 和 DOM API,你甚至可以使用其他框架驅動 Weex,打造三端一致的 native 應用。 目前支持vue和rax(react) 2個dsl分支。



二 涉及到的相關知識

1 前端基礎html,js,css (flexbox布局)
2 ES6語法基礎
3 Vue.js 基礎
4 Weex 相關api
5 原生知識
1 android使用java開發,只要按java寫法,外加熟悉下android的控件和組件即可。
2 weex使用vue.js開發,只要按vue.js寫法(js),外加熟悉下weex的控件 和 功能module即可。

Vue.js 是一套構建用戶界面的漸進式框架.
 1 簡單,用熟悉的html,css來編寫。
2 清晰,專注於MVVM 模型的 ViewModel 層。
3 使用了虛擬化DOM,不直接操作DOM.性能較高。    4 組件化思想,復用率高。



三 demo演示

http://dotwe.org/vue/14ef9c678038b54d992fb0bc9d462f6e



九 必備組件介紹

BindingX———https://alibaba.github.io/bindingx/
阿里巴巴開源的一套基於 Weex、React Native 的富交互解決方案 「BindingX」。提供了一種稱之 為 「Expression Binding」 的機制可以在 Weex、React Native 上讓手勢等復雜交互操作以60fps的幀率流暢執行,而不會導致卡頓,因而帶來了更優秀的用戶體驗。

進一步介紹

https://www.jianshu.com/p/14729b28d15f




GCanvas—————https://alibaba.github.io/GCanvas/
阿里開源繪圖,兼容web,weex,React Native




Weex UI組件庫(飛豬提供)----------https://alibaba.github.io/weex-ui/#/
基於vue.js里面有封面的組件效果,對開發非常有幫助

 

 

網易也用weex----https://github.com/zwwill/yanxuan-weex-demo

網易嚴選

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM