小程序 web-view 与 H5页面 互相传值

1.小程序 传值给 H5页面

目前 小程序 传值给 H5页面，暂时只能通过网址参数传值，例如：

在小程序通过改变 web-view 的src 值，改变链接参数，传值给H5页面，以下代码示例,

网址参数不参写中文，因为在 IOS 是无法打开页面的，如果有中文需要 encodeURIComponent 编码下 

 <web-view src="http://www.html5-app.com/index.html?title=H5&name=html5" bindmessage="bindmessage" bindload="bindload" binderror="binderror"></web-view>

或者动态改变

<web-view src="http://www.html5-app.com/index.html?title={{title}}&name={{name}}" bindmessage="bindmessage" bindload="bindload" binderror="binderror"></web-view>

 js 文件可以通过 this.setData 方法改变值

this.setData({
      title: "H5",
      name:"html5"
    });

2. H5页面 传值给 小程序 

web-view 提示了一个 bindmessage 方法 ，但不是即时传值的，是在特定事件下才触发这个方法。

当 小程序后退、组件销毁、分享，时才触发 bindmessage 方法

<web-view src="http://www.html5-app.com/" bindmessage="bindmessage" bindload="bindload" binderror="binderror"></web-view>

 
  Page({
  onLoad:function (options) {
 
  },
  bindmessage:function (options) {
     //小程序后退、组件销毁、分享，时才触发 bindmessage 方法
         let data= JSON.parse(e.detail.data[0]);









  
     console.log("data:" +data.title);
   }
  })

 然后 H5 页面引入 

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

 wx.miniProgram.postMessage({data:'{"title":"H5"}' })