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

11,289

一、web-view

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

官方文档:developers.weixin.qq.com/miniprogram…

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

  • 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、小程序页面

页面
<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页面

 //引入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>

参考:www.jisuapp.cn/news/6784.h…