小程序 webview 组件 实现与h5页面之间的传值及返回到上一级小程序页面

小程序使用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 的域名也需要配置到域名白名单。
		开发者工具上，可以在  组件上通过右键 - 调试，打开  组件的调试。
		每个页面只能有一个 ， 会自动铺满整个页面，并覆盖其他组件。
		 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
		在 iOS 中，若存在JSSDK接口调用无响应的情况，可在  的 src 后面加个#wechat_redirect解决。
		避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。

本来觉得万无一失， 但又出现返回上一级页面的问题… 又接着调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);

到此所有问题完美解决囖

---

微笑吧，哈哈~~~

---