微信分享自定义样式未生效的几种原因

最新推荐文章于 2022-08-16 10:33:44 发布

我是代码的搬运工

最新推荐文章于 2022-08-16 10:33:44 发布

阅读量3.6k

点赞数

文章标签：微信自定义分享样式失效

本文链接：https://blog.csdn.net/weixin_42115495/article/details/101626496

版权

1、查看引入的js-sdk的版本，查看里面的分享接口是否与其一致，大部分人应该就是被新的分享接口给绊住了，官方文档接口https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
2、实现分享功能需要通过config接口注入权限验证配置，我使用的是老版本的

https://res.wx.qq.com/open/js/jweixin-1.2.0.js

const url=encodeURIComponent(window.location.href)
var urlStr = window.location.href.split('#')[0];
$.ajax({
  type: "get",
  url: self.headers + "/wxopen/getUrlShareIt?blockbusterId=" + blockbusterId + '&sUrl=' + url,
  success: function(data) {
    wx.config({
      debug: false,
      appId: data.data.appId,
      timestamp: data.data.timestamp,
      nonceStr: data.data.nonceStr,
      signature: data.data.signature,
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'updateAppMessageShareData', //1.4 分享到朋友
        'updateTimelineShareData', //1.4分享到朋友圈
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone'
      ]
    });
  },
});

wx.ready(function () {
  var shareData = {
    title: self.usetitle, //标题
    desc: "这是我制作的宝宝相册，快来帮我点赞吧", //描述
    imgUrl: self.titleImage, //自定义图片
    link: urlStr,  //分享的链接
    success: function () {
      console.log('分享成功' )
    }
  };
  wx.onMenuShareAppMessage(shareData); //分享给好友
  wx.onMenuShareTimeline(shareData); //分享到朋友圈
  wx.onMenuShareQQ(shareData); //分享给手机QQ
  wx.onMenuShareWeibo(shareData); //分享腾讯微博
  wx.onMenuShareQZone(shareData); //分享到QQ空间
});
wx.error(function (res) {
  alert(res.errMsg); //错误提示
});

这里后端约定要把当前的url编码之后传过去，这样后端那边才能接收到。
然后在wx.ready里面的link，我要分享的是当前的url，不能是编码之后的url，我就是传了编码之后的url，才一直无法出来效果，这里使用的urlStr是为了防止二次分享链接上加一些莫名的参数，至于一些前期配置，文档里都有详细说明