【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage

前言

实现在微信小程序中嵌入一个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

1. index.html中引入sdk。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2. 操作页

<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两篇文章中有提到。

参考

1. 微信小程序 webview 与 h5 通过 postMessage 实现实时通讯的实现:介绍了使用回退、销毁组件以实现通信的方式，比较详细。不过我没试。这个需求场景可能后续会用到吧：使用h5端生成canvas嵌入到小程序中使用（说是在小程序里画太麻烦了）【实际上也算不上实时吧？】
2. 微信小程序webview postMessage使用：案例简单，但是除了回退之外，按照他的写法跳转和销毁我试了下都不行。不知道哪里有问题。下次试试。
3. 微信小程序web-view与H5交互：判断H5是否在小程序环境：罗列了三种方法，我使用了推荐的那种。

补充

微信小程序与web-view页面双向通信 小程序传过去的方式就是src中带参数，感觉也不太方便？暂时没有用到。