微信开放平台JS-SDK使用—–微信分享功能-一一网

前言：移动端h5 想要使用微信JS-SDK实现分享功能。（前期找了大量的文档想要实现点击按钮，直接触发微信分享的功能。最后历经千辛万苦成功之后才知道，原来只是改变点击右上角微信浏览器自带分享功能的参数信息…此时内心十分崩溃的）

提醒：JS-SDK分享相关接口，无法实现点击按钮自动弹出分享框等操作，仅仅是修改了我们点击右上角三个点出现的分享功能的title、img等信息而已。

进入正题……
先留官方文档的地址：developers.weixin.qq.com/doc/offiacc…
具体的使用步骤其实官方文档写的很清楚了，下面是自己实践总结吧。

1、绑定域名（一般后端处理设置对应域名即可）

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

小注意：可能需要前端把MP_verify_sSunlVmd9349dV2O.txt文件保存在本地的assets文件中然后配置打包

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
   new CopyWebpackPlugin([
      {
         from: path.resolve(__dirname, './src/assets/utils'),
         to:path.resolve(__dirname, './dist/'),
         // config.dev.assetsSubDirectory,
         ignore: ['.*']
      }
   ])
],
复制代码

2、引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https)：res.wx.qq.com/open/js/jwe…
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… (支持https)。
备注：支持使用 AMD/CMD 标准模块加载方法加载

3、通过接口获取wx.config所需要的签名等信息

this.$router.push({ query: {} }) // 其他地方代码原因导致此页面的url中包括query值，可能是导致wx.config报错invalid signature的原因之一
let _this = this;
let res = await this.https.get('/pay/wechatPay/share', {url: encodeURIComponent('https://mobile-test.rightknights.com/monthlyReport')},);
let d = res.data; // 保存从后端获取的签名等参数后面使用
if (res && res.code != "0000") {
 return this.$Message.error(res.msg)
}
复制代码

4、wx.config

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: d.appId, // 必填，公众号的唯一标识
  timestamp: d.timestamp, // 必填，生成签名的时间戳
  nonceStr: d.nonceStr, // 必填，生成签名的随机串
  signature:  d.signature,// 必填，签名
  jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
});

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
  // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
  // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

});
wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
复制代码

5、分享接口wx.updateTimelineShareData

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
     wx.updateAppMessageShareData({
       title: '维权月报', // 分享标题
       desc: '维权月报', // 分享描述
       link: 'https://mobile-test.rightknights.com/monthlyReport', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
       imgUrl: _this.topBg03, // 分享图标
       success: function () {
        alert('成功')
        // 用户点击了分享后执行的回调函数
       }
    });
});
复制代码