一 概念
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
網易嚴選