小程序与h5
2019-01-24 本文已影响9人
js_hcl
['feedList[' + (page - 1) + ']']: newVal,
- <
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);
h5开启调试
在模拟器界面,上通过右键 - 调试,打开 [
<web-view>]组件的调试