微信自定义分享功能,微信js-sdk使用总结

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

要实现的效果如图所示:

微信自定义分享功能,微信js-sdk使用总结

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

微信自定义分享功能,微信js-sdk使用总结

几个要注意的地方:

  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() {
          // 用户取消分享后执行的回调函数
        }
      });
    });
  });
},`

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

相关推荐