前言
实现在微信小程序中嵌入一个webview页面,并且在这个webview中进行操作后，能返回某些信息给到小程序中继续处理。
使用:vue2+小程序原生开发。
正文
关于如何使用微信小程序访问外部链接，这篇文章说得很详细了。
主要就是同域名下
微信小程序
新建嵌入webview的中间页
<web-viewsrc="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>
注意：
- postMessage() 里，数据要放在 data 对象里。
- 注意触发的时机，只有 **后退、组件销毁、分享 的时候，**才会触发 web-view 的message事件。
- 所以小程序会回退到前一页。再接收到传值。
- 要在setTimeout中执行，为了确保能执行到。
- 如果真机或者调试有问题，可以试试狠狠清理缓存，这个在微信小程序访问外部链接 和参考3两篇文章中有提到。
参考
- 微信小程序 webview 与 h5 通过 postMessage 实现实时通讯的实现:介绍了使用回退、销毁组件以实现通信的方式，比较详细。不过我没试。这个需求场景可能后续会用到吧：使用h5端生成canvas嵌入到小程序中使用（说是在小程序里画太麻烦了）【实际上也算不上实时吧？】
- 微信小程序webview postMessage使用：案例简单，但是除了回退之外，按照他的写法跳转和销毁我试了下都不行。不知道哪里有问题。下次试试。
- 微信小程序web-view与H5交互：判断H5是否在小程序环境：罗列了三种方法，我使用了推荐的那种。
补充
微信小程序与web-view页面双向通信 小程序传过去的方式就是src中带参数，感觉也不太方便？暂时没有用到。
