微信公众号开发引入jssdk，分享配置

首先需要公众号管理员去设置JS接口安全域名

再引入jssdk的js文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

先拿到当前页面的url 发送给后端我们url上没有带hash 所有不用考虑去掉hash 此链接必须与分享时的链接一致，否则分享接口失败。如果url是变化的，那就在变化完之后再去换区签名前端只需要把url传给后端，后端来获得签名再返给前端。

本人是在vue里开发所以签名代码写在了updated钩子里

updated() {
    if (window.location.search.indexOf("?code") == -1) {
      if (this.testUrl != window.location.href) {
        this.url = location.href;
        this.$http
          .post("这里是后端接口名?url=" + encodeURIComponent(this.url))
          .then(({ data }) => {
            if (data.succeed) {
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.data.appid, // 必填，公众号的唯一标识
                timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                signature: data.data.signature, // 必填，签名
                jsApiList: [
                  "updateAppMessageShareData",
                  "updateTimelineShareData"
                ] // 必填，需要使用的JS接口列表
              });
            }
          });
      }
      this.testUrl = window.location.href;
    }
  }

前后端处理url时候尽量都使用encodeURLComponent()方法去处理一下，否则可能会出错

获取签名成功后就去配置分享样式的配置 wx.ready是签名获取成功后执行的回调这里我是封装了一个方法，因为分享的信息是动态的

generateShareLink(title, desc, image) {
      let link = "";
      if (location.search.indexOf("?studentId") == 0) {
        link = this.url;
      } else {
        if (localStorage.getItem("userId")) {
          link =
            this.url +
            "?studentId=" +
            localStorage.getItem("userId") +
            "&schoolId=" +
            localStorage.getItem("schoolId");
        } else {
          link = this.url;
        }
      }
      wx.ready(function() {
        //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: image, // 分享图标
          success: function() {
          }
        });
        wx.updateTimelineShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: image, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
          }
        });
      });
      wx.error(function(res) {
        // console.log(res.errMsg)// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    }

wx.updateAppMessageShareData() 是分享到朋友或者QQ

wx.updateTimelineShareData() 是分享到朋友圈或者QQ空间

还有几个其他方法马上要废除了，所以没有引用。详细去开发文档查看

遇到的问题是分享给一个用户，这个用户再次分享此链接就不走自己配置的分享接口；

解决：

前后端联调发现在前端把链接发送给后端，后端收到的时候url已经是被截取过的，不是完整的url了。

通过encodeURLComponent处理后，解决此问题。

开发过程中发现报了一个

此报错可能是因为引入位置的原因之前是因为引入位置错误后改到了 index.html 入口文件

后又报了此错误直接使用了npm 的包解决了

npm install weixin-js-sdk

import wx from 'weixin-js-sdk'

如果后端没有此包就会报一个浏览器安全问题的错误

Refused to connect to 'ws://127.0.0.1:22057/' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

此包前后端都需要下，注意

总结：

1、先配置js安全域名（安全域名必须与分享链接的域名一致）

2、引入jssdk（可以引入地址，可以使用npm安装）

3、将url传给后端获取签名（前端只需要传url）

4、将签名配置到wx.config里，（配置信息必须一一对应）

5、签名成功后会执行wx.ready方法，（在此方法中配置分享接口）