微信小程序与web-view页面双向通信

一、web-view

小程序开放能力，web-view可用于在小程序中内嵌网页，会自动铺满整个小程序页面。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

二、小程序与网页之间的数据交互

1、miniProgram --> webviewH5 官网没有提供发送的接口，只能通过修改web-view的src属性，使用&来附加参数，并在网页中解析参数。这一点可以做到。只是这意味着小程序每次向网页传参，都要刷新一次网页。
2、webviewH5 --> miniProgram
在web-view中添加bindmessage属性，并绑定一个函数，用于监听网页发来的消息。
在网页中引入jweixin-x.x.x.js，然后通过js调用微信JSSDK的wx.miniProgram.postMessage()来向小程序发送数据。

网页向小程序postMessage 时，只有在（小程序后退、组件销毁、分享）这三种情况下，bindmessage才会被触发并接收消息。所以，即使在网页中调用了wx.miniProgram.postMessage()，小程序也不会立即响应，bindmessage所绑定的函数不会执行。

三、传参限制

网页和小程序之间即时传参无法实现，不过小程序可以通过web-view的src属性来切换网页，网页也可以通过wx.miniProgram.navigateTo()来切换小程序的页面。这些功能都是微信通过JSSDK为web-view所内嵌的网页提供的支持，但仅仅是提供了一部分JSSDK的功能，限制同样很多。

四、应用

1、小程序页面

javascript 复制代码

页面
<web-view class='webview' src="{{url}}" bindload="bindload" binderror="binderror" bindmessage="getMessage"></web-view>

//js 文件
data: {
	url: '',
    Title:''
}
//webview 组件的三个原生事件
bindload(){
	console.log('webview load success')
}
binderror(){
	console.log('webview load error')
}
//网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
getMessage:function(res){
  console.log("H5传递过来的参数",res.detail.data);
  this.setData({
    Title: res.detail.data[res.detail.data.length - 1].foo
  })
},
/**
   * 用户点击右上角分享
   */
onShareAppMessage(res) {
  console.log("接收H5传入的参数this.data.Title",this.data.Title);
  return {
    title: this.data.Title,
    path: '/pages/index/index?type=index',
    imageUrl: 'https://picsum.photos/100/200'
  }
}

2、webview H5页面

javascript 复制代码

 //引入sdk;
 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 
 //页面
 <div class="container">
      请输入向小程序传递的变量foo的值:<input type="text" v-model="input1"/> <br/>
      <input type="button" class="btn_send" value="sendMessage" @click="send1"> <br/>
 </div>
<script>
    var vm = new Vue({
      el: ".container",
      data: {
        input1: '333333',
      },
      created() {
      },
      methods: {
      //向小程序传递参数foo
        send1() {
          console.log("this.input1",this.input1);
          wx.miniProgram.postMessage({ data: { foo: this.input1 } })
        },
      },
      mounted() {

      },

    })

  </script>