概述
? ? ? ?在客戶端項目中滞谢，同一個app會開發(fā)成兩個版本串稀，一個是安卓版本，一個IOS版本狮杨，公司必須有兩個開發(fā)團隊（一個安卓團隊母截，一個IOS團隊）來進行開發(fā)，這樣一來橄教，開發(fā)成本非常之高清寇。所以，往往在實際項目-中护蝶，會嵌套很多H5頁面华烟，一個H5頁面同時兼容安卓和IOS兩個系統(tǒng) ，這樣一來持灰，大大減少了開發(fā)成本盔夜，前端開發(fā)頁面就必須和原生進行交互。
技術(shù)及交互
1. 頁面開發(fā) ? ? ?—— 前端開發(fā)人員將所有的頁面按照移動webappp進行開發(fā)，做好不同屏幕的適配（寬度100%,視口為移動端視口 (快捷方式meta:vp ?tap）喂链，字體適配rem單位返十，設(shè)置html根標簽的font-size然后根據(jù)媒體查詢判斷設(shè)備屏幕大小進而設(shè)置html根標簽的不同fontsize，去除移動端高亮顯示椭微；小圖標要善于使用字體圖標（常用的字體圖標庫有阿里巴巴矢量圖）洞坑，改變input標簽的默認樣式可以采用隱藏input,然后通過字體圖標來控制前面的圖標，就可以做成自己想要的圖標效果）
2.前端頁面部署 —— 設(shè)置好入口文件（原生一進來就進入的頁面蝇率，命名為index.html）迟杂，部署到對應的服務器上，通過網(wǎng)址就能夠訪問到頁面本慕，將網(wǎng)址給app客戶端開發(fā)人員排拷，他們將app配置好環(huán)境后講頁面嵌套在app中。
3.進行數(shù)據(jù)對接：兩種對接方式（1）.前端頁面自己通過ajax去后臺拉數(shù)據(jù)锅尘，然后自己在頁面上使用再提交給后臺攻泼。前提是原生需要將對應的設(shè)備號，加密方式鉴象，請求數(shù)據(jù)所需要的各種參數(shù)通過回調(diào)函數(shù)傳遞給H5頁面忙菠，H5頁面拿到這些數(shù)據(jù)后直接調(diào)后臺的借口、獲取到數(shù)據(jù)纺弊。（2）.前端頁面不用自己去后臺拉取數(shù)據(jù)牛欢，而是通過回調(diào)函數(shù)，獲取到原生app拉取的數(shù)據(jù)淆游，前端頁面將這些數(shù)據(jù)處理后又通過回調(diào)函數(shù)交給app傍睹，再又app發(fā)送給后臺。兩種調(diào)用的優(yōu)劣比較：如果H5頁面及數(shù)據(jù)不是很多犹菱，使用第二種方式比較合理拾稳，不用H5頁面請求數(shù)據(jù)（不用封裝請求，不用加密數(shù)據(jù)）腊脱，不使用框架访得，大大減少了頁面的大小，提高性能及用戶體驗陕凹。如果涉及到的前端頁面非常多悍抑，數(shù)據(jù)交互比較復雜的話，就必須使用第一種對接方式了杜耙，app只需要將設(shè)備號搜骡，加密規(guī)則，參數(shù)傳遞給H5佑女，H5根據(jù)頁面需求自己向后臺拉去和請求數(shù)據(jù)记靡，直接交互谈竿，不再通過app進行轉(zhuǎn)接，減小復雜程度摸吠。
