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

網易嚴選