一邓嘹，為什么要用webview
公司目前要做出行業(yè)務(wù)辕漂，第一個(gè)入口確定為微信小程序。
作為老鳥吴超，不得不多問一嘴钉嘹，后面可能還有其他入口么？
得到的回答是：后續(xù)可能還有支付寶小程序鲸阻，高德小程序跋涣，百度小程序缨睡，公眾號(hào)，出行app陈辱。
在這樣一個(gè)需求場(chǎng)景下奖年，我們沒有那么多資源去投入到多端的原生開發(fā)，webview方案成了唯一的選擇沛贪。
二陋守，技術(shù)驗(yàn)證
既然要用，那么必然就要進(jìn)行一些技術(shù)驗(yàn)證利赋。
因?yàn)橹坝羞^ioswebview加載h5性能不佳的體驗(yàn)水评，所以當(dāng)時(shí)筆者主要的擔(dān)心是webview加載h5的性能。
迅速寫了demo一嘗試媚送，哇靠中燥，還挺快。
性能不擔(dān)心了塘偎，然后就去網(wǎng)上搜了搜常見問題疗涉。一看都有解決方案，也沒怎么擔(dān)心吟秩。
這個(gè)時(shí)候咱扣，筆者覺得沒什么瓶頸了，按部就班的去開發(fā)就好了涵防。一切都是那么的美好偏窝。
三，項(xiàng)目啟動(dòng)進(jìn)入開發(fā)
問題很快就浮出水面
top10：微信登陸后武学，如何把身份傳給h5
方案：這個(gè)問題比較簡(jiǎn)單祭往，在webview的url字符串上傳遞就是了。迅速解決火窒，這種feel很nice啊
但要注意硼补，當(dāng)小程序從后臺(tái)模式切換到前臺(tái)模式時(shí)，在onshow里要進(jìn)行身份的有效性檢查
top9：小程序cookie和微信共享熏矿，切到后臺(tái)不丟失
第一個(gè)頁(yè)面開發(fā)完和后臺(tái)接口聯(lián)調(diào)的時(shí)候已骇，突然發(fā)現(xiàn)token有問題（為了前后交互安全，基于OAuth實(shí)現(xiàn)的令牌）票编。
我們的h5網(wǎng)站也是可以微信瀏覽器訪問的褪储，但發(fā)放的token和小程序的是有差異性的。反反復(fù)復(fù)折騰了兩天慧域，才知道小程序的cookie和微信共享鲤竹，而且后臺(tái)運(yùn)行時(shí)依然保留。
方案：進(jìn)入時(shí)判斷是否小程序昔榴，是的話全部清理token辛藻，重新獲取碘橘，保證cookie數(shù)據(jù)的一致性
top8：判斷是否小程序內(nèi)運(yùn)行
當(dāng)時(shí)開發(fā)人員為了能方便調(diào)試，在代碼中加個(gè)一個(gè)判斷吱肌，如果不在小程序痘拆，就不去調(diào)用小程序的專有api。
寫的有點(diǎn)花里胡哨的氮墨，判斷user-agent纺蛆，后來(lái)發(fā)現(xiàn)ios有bug還兼容了一把。
但筆者總覺得太麻煩规揪，兼容性也不太靠譜桥氏。
方案：小程序webview的url加個(gè)參數(shù)&isSP=true，程序里判斷一把就ok了粒褒。綠色環(huán)保無(wú)污染
top7：堅(jiān)挺的緩存
方案：開發(fā)測(cè)試時(shí)，在微信【設(shè)置】->【通用】->【存儲(chǔ)空間】->【緩存】中徹底清理緩存诚镰，以保證加載最新的頁(yè)面
發(fā)布生產(chǎn)后奕坟，就需要有較好的版本管理。首頁(yè)設(shè)置Cache-Control:no-store清笨，始終加載最新html,同時(shí)在首頁(yè)中根據(jù)版本號(hào)判斷是否需要加載最新的js腳本
top6：分享或支付的轉(zhuǎn)彎實(shí)現(xiàn)
微信SDK里面沒有直接分享的調(diào)用月杉。所以這個(gè)地方需要變通實(shí)現(xiàn)
1.在可以分享的頁(yè)面增加一個(gè)分享按鈕
2，當(dāng)點(diǎn)擊該按鈕時(shí)抠艾，打開一個(gè)新的小程序頁(yè)面苛萎，參數(shù)通過url傳遞
3，在新打開的小程序頁(yè)面里检号，進(jìn)行真正的分享操作腌歉。
小程序分享頁(yè)面代碼如下：
top5：?jiǎn)?dòng)小程序如何區(qū)分是否分享進(jìn)入
先看看兩者的實(shí)際場(chǎng)景區(qū)別：
1，通過分享頁(yè)面進(jìn)入齐苛，會(huì)直達(dá)目標(biāo)頁(yè)面翘盖。
2，如果正常啟動(dòng)小程序凹蜂，顯示的是首頁(yè)
哪如何區(qū)分這兩者呢馍驯？可以通過在小程序的app.js的onShow里加代碼處理
top4：高德地圖的優(yōu)化加載
按照標(biāo)準(zhǔn)的方式，在head里加入高德script玛痊，會(huì)有什么問題呢汰瘫？
如下：
1，h5頁(yè)面反復(fù)跳轉(zhuǎn)或返回擂煞，高德地圖多次加載
2混弥，高德地圖的響應(yīng)不穩(wěn)定。慢的時(shí)候會(huì)阻塞整個(gè)頁(yè)面的渲染对省。
因?yàn)楦叩碌貓D在首頁(yè)剑逃，我們想盡快的給用戶顯示內(nèi)容浙宜，以避免客戶流失。
方案如下：
1蛹磺，preload高德地圖js
2粟瞬，在使用的時(shí)候，通過createElement+appendChild的方法萤捆，進(jìn)行懶加載裙品。
3，緩存高德地圖對(duì)象俗或，再次進(jìn)入頁(yè)面如果存在地圖對(duì)象市怎，不進(jìn)行2的操作
最終效果：客戶會(huì)先看到頭部和底部?jī)?nèi)容，高德地圖慢慢顯示辛慰。體驗(yàn)有所提高
top3：webview間sessionStorage數(shù)據(jù)不共享
這個(gè)問題的痛點(diǎn)不在于如何解決区匠。方案可以用cookie或localstoreage來(lái)替代。
重點(diǎn)是不知道帅腌！不知道驰弄！不知道！
top2：返回按鈕實(shí)現(xiàn)
正常情況來(lái)說速客，當(dāng)h5運(yùn)行在瀏覽器的時(shí)候戚篙。
跳轉(zhuǎn)新頁(yè)面左上會(huì)顯示一個(gè)向左的返回箭頭。
哪如果在webview你也想煎餅果子來(lái)一套怎么辦溺职？
和瀏覽器的區(qū)別就是岔擂，你得保證有兩個(gè)webview。然后h5的正常跳轉(zhuǎn)就會(huì)達(dá)到預(yù)期效果浪耘。
我們的做法是乱灵，首頁(yè)是一個(gè)webview，在這個(gè)頁(yè)面上只存在一個(gè)跳轉(zhuǎn)按鈕七冲，該按鈕點(diǎn)擊打開一個(gè)新的webview阔蛉。
top1：后臺(tái)切換到前端的h5加載
該問題只是對(duì)于我們項(xiàng)目是top1問題，大家關(guān)注問題點(diǎn)即可癞埠。
由于我們系統(tǒng)前后端交互加入了OAuth的驗(yàn)證機(jī)制状原，所以會(huì)有一個(gè)token傳遞，該token15分鐘過期
首頁(yè)加載的時(shí)候苗踪，獲取token颠区，通過webview的url傳遞給h5
那么問題來(lái)了，如果小程序被切到后臺(tái)通铲，15分鐘后再切到前臺(tái)怎么辦毕莱？同時(shí)我們還想好好利用這15分鐘的緩存優(yōu)化切換到前臺(tái)的加載速度。
最終方案如下：
1，檢測(cè)是否新用戶朋截，新用戶直接靜默登陸url賦值給webview
2蛹稍，不是新用戶，記錄時(shí)間部服，判斷是否13分鐘之內(nèi)（比15分鐘稍微小一點(diǎn)唆姐，保留點(diǎn)余地）的二次訪問，是的話廓八，不做任何處理
3奉芦，如果超過13分鐘，那么重新獲取token剧蹂，給webview新的url
上述操作在onShow里實(shí)現(xiàn)
寫在最后
通過項(xiàng)目實(shí)踐声功，整體來(lái)講，h5內(nèi)嵌webview宠叼，還是有很多不成熟的地方先巴，微信sdk的js api提供的也比較少。
就現(xiàn)狀來(lái)說冒冬，給將要使用webview的建議就是：
