百度网站评级,关于网站运营的问题,电影网站页面seo,电商网站建设的目的小程序与内嵌网页的数据通信
前言
微信小程序提供了web-view组件#xff0c;允许开发者在小程序中嵌入网页。然而#xff0c;由于小程序和网页运行在不同的环境中#xff0c;它们之间的通信就需要依赖特定的机制来实现。然而我们日常的需求中#xff0c;很多的时候都涉及…小程序与内嵌网页的数据通信
前言
微信小程序提供了web-view组件允许开发者在小程序中嵌入网页。然而由于小程序和网页运行在不同的环境中它们之间的通信就需要依赖特定的机制来实现。然而我们日常的需求中很多的时候都涉及到小程序内嵌网页和小程序之间进行数据通信的情况。这篇文章是我自己总结的微信小程序与内嵌web-view中网页通信的一些方法。
小程序向内嵌网页传递数据
通过修改web-view的src属性可以在src中附加参数然后在网页中解析这些参数这种方式的操作类似于在网页中嵌入 iframe。例如
web-view src{{url}}/web-viewurl: https://www.a.com?id123name456或者在小程序中设置url时可以附加参数
this.setData({url: ${this.data.url}?paramvalue
});网页向小程序传递数据
使用wx.miniProgram.postMessage在H5页面中可以使用wx.miniProgram.postMessage向小程序发送消息。例如
wx.miniProgram.postMessage({data: { message: Hello from H5 }
});在小程序中需要在web-view组件上绑定bindmessage事件来接收消息:
web-view bindmessagegetMessage/web-view小程序的JavaScript中处理消息
Page({getMessage(e) {console.log(e.detail.data); // 获取到的消息数组}
});注意消息只有在特定时机如小程序后退、组件销毁、分享等才会被触发。比如说
H5刷新本页wx.miniProgram.redirectToH5 页面跳转wx.miniProgram.navigateToH5回退页面wx.miniProgram.navigateBack
如果不加这些具体的操作我们在微信开发者工具端会收到这样的一个信息
invokeAppService postMessage {message: Hello from H5} 2并没有收到相对应的message事件打印的内容,然后我们修改代码
wx.miniProgram.postMessage({data: { message: Hello from H5 }
});
wx.miniProgram.navigateBack();不出意外的话会得到我们想要的结果但是有些时候还是会出意外就是当我们添加了当前带 web-view 的页面为编译页面的时候使用了 wx.miniProgram.navigateBack();依旧会的得到invokeAppService postMessage {message: Hello from H5} 2这样的结果。
我们只需要略微调整即可:
const $button document.getElementById(btn)
$button.addEventListener(click, () {wx.miniProgram.postMessage({data: { message: Hello from H5 }});wx.miniProgram.redirectTo({url: /pages/Test/WorkWebView/WorkWebView})
})或者移除编译选项也是能够得到我们想要的结果的。
