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

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

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

　　優(yōu)點：

　　用戶體驗極佳，渲染速度快于H5，動畫效果絢麗等等

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

　　可離線使用

　　調(diào)試透明

　　缺點：

　　開發(fā)成本高

　　兼容設(shè)備有限

　　商店內(nèi)容限制

　　用戶更新不能控制

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

　　優(yōu)點：

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

　　兼容多個平臺，ios/android/M站/微信/小程序

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

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

　　可離線使用

　　缺點：

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

　　整體打包文件比較大

　　調(diào)試稍繁瑣

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

　　基于以上幾點，我們制定了，

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

　　源碼托管及工作流

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

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

　　本地服務(wù)跑起來

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

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

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

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

　　前端時間多前端綁定，后端人多后端綁定。去年用的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綁定本機，chrome模擬機，sourceMap調(diào)試

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