前端框架:小程序、vue、react

小程序与h5

2019-01-24  本文已影响9人  js_hcl
['feedList[' + (page - 1) + ']']: newVal,
  1. <web-view></web-view>

一、小程序端

<web-view src="{{url}}" 
          bindmessage="h5PostMsg" 
          bindload="h5Load" 
          binderror="h5Err">
</web-view>
//说明
通过绑定url,可以实现动态web-view
接收消息:
"网页向小程序 postMessage 时
会在特定时机(小程序后退、组件销毁、分享)触发并收到消息
e.detail = { data }"
实测:在h5对应的page销毁或分享时,可以获得消息
并且,
多条消息是一并获得

要获得消息,如果是navigateTo因为不会销毁Page。所以接收不到消息,改为redirectTo即可
文档地址

二、h5端

<!-- 首先引入  JSSDK 1.3.2  接口-->

<script
    type="text/javascript"
    src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>
测试接口
console.log("h5 网页加载成功")
wx.miniProgram.postMessage({ data: 'this is data1' });
wx.miniProgram.postMessage({ data:{foo: 'this is data2'} });
wx.miniProgram.getEnv(function(res) {
    console.log(res) 
})
setTimeout(() => {
    //这边是重定向,如果是导航的化,自己页面不会销毁,则page页获取不到Msg
    wx.miniProgram.redirectTo({url: '/index/three'})
}, 60000);
  1. h5开启调试
  2. 在模拟器界面,上通过右键 - 调试,打开 [<web-view>]组件的调试

三、消息返回

上一篇下一篇

猜你喜欢

热点阅读