vue网页实现与微信小程序进行数据通信

我们是利用的微信小程序web-view引入的vue网页链接，所以我们先查看一下web-view的默认属性和方法

属性说明

属性	类型	默认值	必填	说明	最低版本
src	string		否	webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。	1.6.4
bindmessage	eventhandler		否	网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。	1.6.4
bindload	eventhandler		否	网页加载成功时候触发此事件。e.detail = { src }	1.6.4
binderror	eventhandler		否	网页加载失败的时候触发此事件。e.detail = { url, fullUrl }，其中 fullUrl 为加载失败时的完整 url	1.6.4

相关接口 1

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有：

接口名	说明	最低版本
wx.miniProgram.navigateTo	参数与小程序接口一致	1.6.4
wx.miniProgram.navigateBack	参数与小程序接口一致	1.6.4
wx.miniProgram.switchTab	参数与小程序接口一致	1.6.5
wx.miniProgram.reLaunch	参数与小程序接口一致	1.6.5
wx.miniProgram.redirectTo	参数与小程序接口一致	1.6.5
wx.miniProgram.postMessage	向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接（2.31.1）	1.7.1
wx.miniProgram.getEnv	获取当前环境	1.7.1

（来自于微信小程序开发文档）

微信小程序为我们提供了在网页调用的方法，只要引入JSSDK就可以调用 

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

 或者使用npm安装

npm install weixin-js-sdk
//通过import引入
import wx from "weixin-js-sdk";

 在成功引入之后就可以在vue中使用并向微信小程序发送数据（下面是通过npm安装的使用案例）

<template>
  <div class="home">
    <button @click="sentMessage()">点击</button>
  </div>
</template>

<script>
import wx from "weixin-webview-jssdk";
export default {
  methods: {
    //调用函数发送数据
    sentMessage() {
      // wx.miniProgram.navigateTo({ url: 'pages/index/index' })
      wx.miniProgram.postMessage({ data: { foo: {} } });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 600px;
}
</style>

 在小程序中进行接收

//在.wxml文件中添加web-view引入所需要展示的链接
//bindGetMsg为接收到数据发送时触发的函数，在.js或者.ts文件下进行定义
<web-view src="此处填写需要引入的链接" bindmessage="bindGetMsg" ></web-view>

 如果在微信开发这微信中出现引入的链接无法打开时，请开启开发者工具的不校验域名（如果是线上版请配置域名白名单）

 定义接收到数据之后触发的函数

Page({
  bindGetMsg: function (res) {
    console.log('从h5页面获取到的信息----->', res)
  }
});

点击vue页面中按钮触达数据发送，随后小程序进行数据接收

 

如果想要将网页发送的数据存储到微信小程序本地可以使用wx.getStorageSync

//wx.setStorageSync(key, value)第一个参数是存的key名称，第二个参数为需要存储的值
Page({
  onLoad: function (options) {
    /**
     * --------如果请求的数据比较多，很占资源，可以利用小程序的缓存---------------------
     * 1.判断本地存储中有没有旧数据（有没有过期,time:Date.now(),数据，data:[...]）
     * 2.如果有旧数据，同时就数据没有过期，就使用本地存储中的旧数据即可
     * 3.如果没有旧数据，则直接发送请求
     */
    // 获取本地存储中的数据 
    const datas = wx.getStorageSync('datas');
    // 判断
    if (!datas) {
      // 没有缓存的数据
      console.log('没有缓存的数据')
    } else {
      // 可以用旧数据
      console.log('缓存数据存在', datas)
    }
  },
  bindGetMsg: function (res) {
    wx.setStorageSync('datas', res)
    console.log('从h5页面获取到的信息----->', res)
  }
});

至此整个通信外加存储的基本功能逻辑就结束了，根据各位的需求进行其他更改就行了