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…

  •