前端hybrid開發(fā)介紹實(shí)例

　　某OTA-前端開發(fā)技術(shù)體系

　　原生開發(fā)的優(yōu)/缺點(diǎn)

　　優(yōu)點(diǎn)：

　　用戶體驗(yàn)極佳，渲染速度快于H5，動(dòng)畫效果絢麗等等

　　直接可調(diào)用原生功能（通訊錄、攝像頭等等）

　　可離線使用

　　調(diào)試透明

　　缺點(diǎn)：

　　開發(fā)成本高

　　兼容設(shè)備有限

　　商店內(nèi)容限制

　　用戶更新不能控制

　　混合開發(fā)的優(yōu)/缺點(diǎn)

　　優(yōu)點(diǎn)：

　　從人員和時(shí)間成本上，學(xué)習(xí)成本低，開發(fā)效率高于原生開發(fā)

　　兼容多個(gè)平臺(tái)，ios/android/M站/微信/小程序

　　控制用戶更新，無需等待發(fā)包

　　無商店內(nèi)容限制

　　可離線使用

　　缺點(diǎn)：

　　用戶體驗(yàn)不如純原生應(yīng)用，沒有絢麗的效果，渲染/響應(yīng)速度慢，動(dòng)畫支持不好等等

　　整體打包文件比較大

　　調(diào)試稍繁瑣

　　需要定義私有協(xié)議調(diào)用原生功能（通訊錄、攝像頭等等）

　　基于以上幾點(diǎn)，我們制定了，

　　首頁+搜索列表是原生界面，活動(dòng)專題頁+產(chǎn)品詳情+預(yù)訂流程頁+支付均為H5混合頁面的技術(shù)體系

　　源碼托管及工作流

　　基于github flow，適合每周二/四上線，上線完成Master合并到future分支。

　　指引閱讀：http://www.ruanyifeng.com/blog/2015/12/git-workflow.html

　　本地服務(wù)跑起來

　　node / nginx / iis 起一個(gè)資源站點(diǎn)服務(wù)，再起一個(gè)站點(diǎn)服務(wù)用于托管頁面（如果資源沒有單獨(dú)域名就更方便了）

　　數(shù)據(jù)模擬+數(shù)據(jù)綁定

　　如果后臺(tái)有數(shù)據(jù)了，直接調(diào)用即可。

　　如果沒有可以用http://www.easy-mock.com

　　前端時(shí)間多前端綁定，后端人多后端綁定。去年用的ng1，現(xiàn)在在重構(gòu)到vue2，切換無壓力~

　　測試環(huán)境

　　git 提交代碼到 gitlab服務(wù)器，gitlab發(fā)出hook鉤子給 服務(wù)器jenkins，Jenkins接收信息，觸發(fā) 前端構(gòu)建

　　hosts綁定 服務(wù)器IP，打開瀏覽器即可

　　開發(fā)調(diào)試

　　M站： hosts綁定本機(jī)，chrome模擬機(jī)，sourceMap調(diào)試

　　app：charles/fiddler，手機(jī)指向電腦IP代理，開發(fā)走debug包，調(diào)試模式，打開safari 或者 chrome://inspect ，sourceMap調(diào)試