前言
实现在微信小程序中嵌入一个webview页面,并且在这个webview中进行操作后,能返回某些信息给到小程序中继续处理。
使用:vue2+小程序原生开发。
正文
关于如何使用微信小程序访问外部链接,这篇文章说得很详细了。
主要就是同域名下
微信小程序
新建嵌入webview的中间页
<web-view
src="url地址"
bindmessage="onMessage"
></web-view>
js
Page({
onMessage(e) {
console.log(e.detail.data);
//e.detail.data就是vue里传来的参数,后续进行处理即可
}
});
vue2
- index.html中引入sdk。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
- 操作页
<script>
export default {
data() {
return {
isMini: false,
};
},
mounted() {
this.isMiniProgramEnv();
},
methods: {
//判断环境是否为小程序
isMiniProgramEnv() {
// 通过navigator.userAgent 判断
let userAgent = navigator.userAgent;
this.isMini = /miniProgram/i.test(userAgent);
},
wxlogin() {
setTimeout(() => {
wx.miniProgram.navigateBack();
wx.miniProgram.postMessage({ data: "获取成功" });
}, 2000);
},
},
};
</script>
注意:文章来源:https://www.toymoban.com/news/detail-471249.html
- postMessage() 里,数据要放在 data 对象里。
- 注意触发的时机,只有 **后退、组件销毁、分享 的时候,**才会触发 web-view 的message事件。
- 所以小程序会回退到前一页。再接收到传值。
- 要在setTimeout中执行,为了确保能执行到。
- 如果真机或者调试有问题,可以试试狠狠清理缓存,这个在微信小程序访问外部链接 和参考3两篇文章中有提到。
参考
- 微信小程序 webview 与 h5 通过 postMessage 实现实时通讯的实现:介绍了使用回退、销毁组件以实现通信的方式,比较详细。不过我没试。这个需求场景可能后续会用到吧:使用h5端生成canvas嵌入到小程序中使用(说是在小程序里画太麻烦了)【实际上也算不上实时吧?】
- 微信小程序webview postMessage使用:案例简单,但是除了回退之外,按照他的写法跳转和销毁我试了下都不行。不知道哪里有问题。下次试试。
- 微信小程序web-view与H5交互:判断H5是否在小程序环境:罗列了三种方法,我使用了推荐的那种。
补充
微信小程序与web-view页面双向通信 小程序传过去的方式就是src中带参数,感觉也不太方便?暂时没有用到。文章来源地址https://www.toymoban.com/news/detail-471249.html
到了这里,关于【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!