小程序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返回过来的,直接重定向到小程序首页新闻热点
疑难解答
图片精选