小程序webview的現(xiàn)狀

為細河等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及細河網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站制作、細河網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

h6頁面在小程序中的交互（跳轉(zhuǎn)）場景

• h6跳轉(zhuǎn)小程序native頁面（如：調(diào)用小程序地址選擇能力，然后返回對應(yīng)的地址信息給h6頁面）
• h6跳轉(zhuǎn)己方業(yè)務(wù)線的h6頁面（內(nèi)部頁面交互，方式比較多樣）
• h6跳轉(zhuǎn)其它業(yè)務(wù)線的h6頁面（如：交易流程，相關(guān)頁面可能有其他業(yè)務(wù)線提供）

主要痛點

在完成相關(guān)操作后， 頁面狀態(tài)需要更新 ，目前常見的更新方式有如下兩種：

• 第一種：通過url傳參（如：url中加入__isonshowrefresh=1，告訴webview再次onshow時候刷新），把需要傳遞的參數(shù)拼接到url中，重新打開url。
• 第二種：需要跳轉(zhuǎn)到新的頁面進行數(shù)據(jù)更新（如：下單頁 - 地址選擇頁 - 新的下單頁）

第一種方案，功能上沒有問題，但會導(dǎo)致頁面刷新，如果頁面操作復(fù)雜，需要多次刷新

第二種方案，正向操作時體驗比方案一好，但導(dǎo)致了另外一個問題：操作 跳轉(zhuǎn)層級過深 ，尤其返回的時候簡直讓人崩潰。

 小程序中，h6頁面打開新頁面方式

我們先來看下小程序中常見的h6跳h6的方式：

• 方式1：直接用location.href跳轉(zhuǎn)，返回時候各機型表現(xiàn)不一致，有的會刷頁面，重新執(zhí)行js，有的會直接展示之前的緩存
• 方式2：通過路由hash跳轉(zhuǎn)，返回觸發(fā)hashchange，頁面不刷新，js層面重現(xiàn)渲染
• 方式3：跳轉(zhuǎn)頁面打開一個新的webview，相當(dāng)于每個頁面都是一個獨立的webview

我們采用的是方式3，理由如下：

1. 打開新頁面時的效果更趨近于native間的跳轉(zhuǎn)（當(dāng)然新打開的頁面也會重新加載靜態(tài)資源，同時這也有另一個問題，一旦你打開10個層級后，再打開新的webview就沒反應(yīng)了，這個是小程序10層限制）
2. 返回的體驗也更趨近于native，同時保證頁面狀態(tài)統(tǒng)一（不會出現(xiàn)有的直接展示，有的會重新執(zhí)行js）
3. webview通過this.src拿到的鏈接即為當(dāng)前頁面鏈接，因為如果頁面自行通過路由和location.href跳轉(zhuǎn)，頁面鏈接變更后，webview并不會知曉，這種方案，webview通過this.src拿到的鏈接始終是當(dāng)前頁面的鏈接。

由于這種方案可能會達到小程序的10層限制。所以在一些重要頁面建議加入“ 回到首頁 ”的操作，通過這個操作來縮短小程序歷史棧

回到首頁方案簡述

（如果不感興趣這部分可以直接略過）

wx.miniProgram.reLaunch({
 url: '/pages/webview/bridge?url=項目首頁地址'
})

文章題目：詳解小程序中h5頁面onShow實現(xiàn)及跨頁面通信方案-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/pjgej.html