小程序webview的現狀
h5頁面在小程序中的交互(跳轉)場景
h5跳轉小程序native頁面(如:調用小程序地址選擇能力,然后返回對應的地址信息給h5頁面) h5跳轉己方業務線的h5頁面(內部頁面交互,方式比較多樣) h5跳轉其它業務線的h5頁面(如:交易流程,相關頁面可能有其他業務線提供)主要痛點
在完成相關操作后, 頁面狀態需要更新 ,目前常見的更新方式有如下兩種:
第一種:通過url傳參(如:url中加入__isonshowrefresh=1,告訴webview再次onshow時候刷新),把需要傳遞的參數拼接到url中,重新打開url。 第二種:需要跳轉到新的頁面進行數據更新(如:下單頁 - 地址選擇頁 - 新的下單頁)第一種方案,功能上沒有問題,但會導致頁面刷新,如果頁面操作復雜,需要多次刷新
第二種方案,正向操作時體驗比方案一好,但導致了另外一個問題:操作 跳轉層級過深 ,尤其返回的時候簡直讓人崩潰。
小程序中,h5頁面打開新頁面方式
我們先來看下小程序中常見的h5跳h5的方式:
方式1:直接用location.href跳轉,返回時候各機型表現不一致,有的會刷頁面,重新執行js,有的會直接展示之前的緩存 方式2:通過路由hash跳轉,返回觸發hashchange,頁面不刷新,js層面重現渲染 方式3:跳轉頁面打開一個新的webview,相當于每個頁面都是一個獨立的webview我們采用的是方式3,理由如下:
由于這種方案可能會達到小程序的10層限制。所以在一些重要頁面建議加入“ 回到首頁 ”的操作,通過這個操作來縮短小程序歷史棧
回到首頁方案簡述
(如果不感興趣這部分可以直接略過)
wx.miniProgram.reLaunch({ url: '/pages/webview/bridge?url=項目首頁地址'})先聲明,我們webview的路徑是/pages/webview/webview
/pages/webview/bridge是個中轉頁,有如下特點: 該頁面并 不是最終打開h5頁面的webview頁 ,而是一個 中轉頁。
主要用作返回處理
頁面邏輯: 如果是第一次展示,則跳轉/pages/webview/webview,同時把url傳過去,正常打開h5 如果不是第一次展示,說明是從webview返回過來的,直接重定向到小程序首頁新聞熱點
疑難解答
圖片精選