自定义微信分享功能微信jssdk使用总结

需求：vue 项目移动端要求用户在公众号中分享出去的链接是图片 + 文字 + 标题的形式。而不是默认的

要实现的效果如图所示：

不设置时，分享的默认效果, 如下图所示：

几个要注意的地方：

1. wx.config 所有的配置项的数据都是后台返回的
2. wx.config 配置项的参数大小写一定要按照官网文档来，区分大小写，但是获取到的后台返回的字段可以自由定义，这个时候要注意后台返回的数据字段名称是否和官网的一致，在这块有个问题找了半天，结果最后发现 wx.config 配置项里面后台返回的 res.data.noncestr 中 noncestr 为小写，而自己没有细看一直以为也是 nonceStr. 导致 config:fail.
3. 分享时，请求的 url 不能带有 hash 值等，所以要进行截取

具体参考代码如下所示：

` wxShared() {

  let newUrl = window.location.href.split("#")[0]; //    
  let url = newUrl;

  this.$store.dispatch("GetTicketJSAPI", url).then(res => {
    let params = {
      debug: false, // 开启调试模式, 调用的所有 api 的返回值会在客户端 alert 出来
      appId: "wx3dab174110e5f840", // 必填，企业微信的 corpID
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳 ***************
      nonceStr: res.data.noncestr, // 必填，生成签名的随机串 必填，生成签名的随机串 ***************
      signature: res.data.signature, // 必填，签名 ***************
      jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"]
    };
    wx.config(params); // 通过 config 接口注入权限验证配置
    wx.ready(function() {
      // config 信息验证成功后会执行 ready 方法
      // 通过 ready 接口处理成功验证
      wx.onMenuShareAppMessage({
        // 分享给朋友
        title: "声动语商学苑", // 分享标题
        desc: "好语商引领自信人生 ·“一站式”专业青少儿语商培养教育品牌", // 分享描述
        link: res.data.str, // 分享链接
        imgUrl:
          "http://www.shengdongyushang.com/upload/asserts/sdys_logo1.png", // 分享图标
        type: "", // 分享类型,music、video 或 link，不填默认为 link
        dataUrl: "", // 如果 type 是 music 或 video，则要提供数据链接，默认为空
        success: function(res) {// 用户确认分享后执行的回调函数},
        cancel: function() {// 用户取消分享后执行的回调函数}
      });
      wx.onMenuShareTimeline({
        // 分享朋友圈
        title: "声动语商学苑", // 分享标题
        desc: "好语商引领自信人生 ·“一站式”专业青少儿语商培养教育品牌",
        link: res.data.str,
        imgUrl:
          "https://qccdata.qichacha.com/AutoImage/052236e320f34be80991ce01fd8cd138.jpg?x-oss-process=image/resize,w_120", // 分享图标
        success: function(res) {// 用户确认分享后执行的回调函数},
        cancel: function() {// 用户取消分享后执行的回调函数}
      });
    });
  });
},`

如果对你有所帮助，麻烦点个赞再走吧 ^_^