评论

小程序webview嵌入H5网页无法返回问题分析

小程序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事件有相关的逻辑

最后一次编辑于  2020-10-19  
点赞 0
收藏
评论

2 个评论

  • 呆jio不
    呆jio不
    06-06
    网页内 iframe 的域名也需要配置到域名白名单
    z这段话的意思是小程序嵌套的网页里边带有iframe ,然后这些iframe 也要配置业务域名白名单吗?但是如果这些地址配置不了有没有其他的解决方案
    
    06-06
    赞同
    回复
  • 红小豆
    红小豆
    2020-10-19

    小程序使用webview组件之前需在后台配置业务域名实现与h5页面的交互。配置业务域名请移至微信公众平台 左侧选择开发选项,会找到相应的域名配置。

    如图操作顺序及需求:

    图1

    图2

    图3

    在此项目中遇到小程序与h5之间的跳转传值回显的问题。从h5页面(图1)跳转到小程序页面(图2)选择地点之后自动返回到h5页面并把地点回显到h5页面。解决办法如下步骤:

    • 前边已经说明,如果在小程序中使用h5页面需要在微信公众后台配置业务域名;这是条件一。相反如果需要在h5页面跳回到小程序网页中可使用JSSDK1.3.2提供的接口来实现返回小程序页面 小程序API
    • 实现选完地址(图2)使用wx.navigateBack返回到h5页面(图1)地点回显(图3),需要两步操作:选完地址把值传给h5; 这里使用小程序的页面路由页面路由,选完地址之后直接把值setData到上一级页面中,这样传值问题就解决了
    • h5页面接收到值之后渲染到页面上,从而实现回显成功。如果想要渲染到页面上,必须让webview重新刷新URL,所有我们必须把需要渲染的URL放在onShow生命周期中,如果URL拼接的参数有变化时,会自动刷新页面从而实现地点的回显。
    • 在小程序的onLoad周期中接收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
    

    到此所有问题完美解决囖


    微笑吧,哈哈~~~


    2020-10-19
    赞同
    回复
登录 后发表内容