本文背景
之前写过类似的文章,今天重新整理下,今天只分析下面这一种场景
本文内容
小程序入口界面1
H5页面1,page1
H5页面2,page2
其中page1到page2,分两种场景
1)window.location.href=page2
2)window.location.assign = page2
这两种场景验证下来均是可以正常返回的
场景
小程序入口界面1
代码片段
界面2
代码片段1
界面3
本文总结
在具体分析的时候,如果无法返回,要看看是不是popstate事件有相关的逻辑
小程序webview嵌入H5网页无法返回问题分析
本文背景
之前写过类似的文章,今天重新整理下,今天只分析下面这一种场景
本文内容
小程序入口界面1
H5页面1,page1
H5页面2,page2
其中page1到page2,分两种场景
1)window.location.href=page2
2)window.location.assign = page2
这两种场景验证下来均是可以正常返回的
场景
小程序入口界面1
代码片段
界面2
代码片段1
界面3
本文总结
在具体分析的时候,如果无法返回,要看看是不是popstate事件有相关的逻辑
2 个评论
小程序使用webview组件之前需在后台配置业务域名实现与h5页面的交互。配置业务域名请移至微信公众平台 左侧选择开发选项,会找到相应的域名配置。
如图操作顺序及需求:
图1
图2
图3
在此项目中遇到小程序与h5之间的跳转传值回显的问题。从h5页面(图1)跳转到小程序页面(图2)选择地点之后自动返回到h5页面并把地点回显到h5页面。解决办法如下步骤:
注意:
webview API
网页内 iframe 的域名也需要配置到域名白名单。 开发者工具上,可以在 <web-view> 组件上通过右键 - 调试,打开 <web-view> 组件的调试。 每个页面只能有一个 <web-view>,<web-view> 会自动铺满整个页面,并覆盖其他组件。 <web-view> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 <web-view> 的 src 后面加个#wechat_redirect解决。 避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent。 1 2 3 4 5 6
本来觉得万无一失, 但又出现返回上一级页面的问题… 又接着调bug。。
由于选择地点次数不限制任意修改,每次修改之后会重新刷新URL,这会导致页面缓存问题,如果多次选择地点,每次返回的页面不是小程序的上一级页面而是上一次选择地址之后的URL,URL改变了几次,需要点几次才能返回到小程序的上一级页面。所以,这里需要在h5页面中监听浏览器的返回事件,不管URL改变了多少次强制回退到小程序的上一级页面中。
window.history.pushState('forward', null, '#'); window.history.forward(1); // 不知为何必须要加以上两行代码才能成功监听到回退事件..先打个问号??? 后续更新 window.addEventListener("popstate", function(e) { // 跳转到上一个小程序页面 wx.miniProgram.navigateBack({ delta: 1 }); }, false); 1 2 3 4 5 6 7 8 9 10
到此所有问题完美解决囖
微笑吧,哈哈~~~