概述
? ? ? ?在客戶端項(xiàng)目中，同一個(gè)app會(huì)開發(fā)成兩個(gè)版本，一個(gè)是安卓版本，一個(gè)IOS版本，公司必須有兩個(gè)開發(fā)團(tuán)隊(duì)（一個(gè)安卓團(tuán)隊(duì)，一個(gè)IOS團(tuán)隊(duì)）來進(jìn)行開發(fā)，這樣一來，開發(fā)成本非常之高。所以，往往在實(shí)際項(xiàng)目-中，會(huì)嵌套很多H5頁面，一個(gè)H5頁面同時(shí)兼容安卓和IOS兩個(gè)系統(tǒng) ，這樣一來，大大減少了開發(fā)成本，前端開發(fā)頁面就必須和原生進(jìn)行交互。
技術(shù)及交互
1. 頁面開發(fā) ? ? ?—— 前端開發(fā)人員將所有的頁面按照移動(dòng)webappp進(jìn)行開發(fā)，做好不同屏幕的適配（寬度100%,視口為移動(dòng)端視口 (快捷方式meta:vp ?tap），字體適配rem單位，設(shè)置html根標(biāo)簽的font-size然后根據(jù)媒體查詢判斷設(shè)備屏幕大小進(jìn)而設(shè)置html根標(biāo)簽的不同fontsize，去除移動(dòng)端高亮顯示；小圖標(biāo)要善于使用字體圖標(biāo)（常用的字體圖標(biāo)庫有阿里巴巴矢量圖），改變input標(biāo)簽的默認(rèn)樣式可以采用隱藏input,然后通過字體圖標(biāo)來控制前面的圖標(biāo)，就可以做成自己想要的圖標(biāo)效果）
2.前端頁面部署 —— 設(shè)置好入口文件（原生一進(jìn)來就進(jìn)入的頁面，命名為index.html），部署到對應(yīng)的服務(wù)器上，通過網(wǎng)址就能夠訪問到頁面，將網(wǎng)址給app客戶端開發(fā)人員，他們將app配置好環(huán)境后講頁面嵌套在app中。
3.進(jìn)行數(shù)據(jù)對接：兩種對接方式（1）.前端頁面自己通過ajax去后臺(tái)拉數(shù)據(jù)，然后自己在頁面上使用再提交給后臺(tái)。前提是原生需要將對應(yīng)的設(shè)備號，加密方式，請求數(shù)據(jù)所需要的各種參數(shù)通過回調(diào)函數(shù)傳遞給H5頁面，H5頁面拿到這些數(shù)據(jù)后直接調(diào)后臺(tái)的借口、獲取到數(shù)據(jù)。（2）.前端頁面不用自己去后臺(tái)拉取數(shù)據(jù)，而是通過回調(diào)函數(shù)，獲取到原生app拉取的數(shù)據(jù)，前端頁面將這些數(shù)據(jù)處理后又通過回調(diào)函數(shù)交給app，再又app發(fā)送給后臺(tái)。兩種調(diào)用的優(yōu)劣比較：如果H5頁面及數(shù)據(jù)不是很多，使用第二種方式比較合理，不用H5頁面請求數(shù)據(jù)（不用封裝請求，不用加密數(shù)據(jù)），不使用框架，大大減少了頁面的大小，提高性能及用戶體驗(yàn)。如果涉及到的前端頁面非常多，數(shù)據(jù)交互比較復(fù)雜的話，就必須使用第一種對接方式了，app只需要將設(shè)備號，加密規(guī)則，參數(shù)傳遞給H5，H5根據(jù)頁面需求自己向后臺(tái)拉去和請求數(shù)據(jù)，直接交互，不再通過app進(jìn)行轉(zhuǎn)接，減小復(fù)雜程度。
