h5 微信分享，使用updateTimelineShareData ，title和图片也不展示问题

拿回忆下酒

已于 2023-09-05 15:20:29 修改

阅读量4k

点赞数 6

文章标签：微信小程序 sdk

于 2023-03-21 20:10:46 首次发布

本文链接：https://blog.csdn.net/qq_38998250/article/details/129695729

版权

关于微信分享，其实我写过一篇类似的文章h5 微信分享知识点，而且本人对微信生态体系（公众号、小程序）经验也很丰富，以为自己不会再踩微信的坑。

没想到最近两年没有对接微信，又再一次被坑了，再此记录一下吸取教训。

我们简单串一下流程，方便不太懂的小伙伴理解😄，知道的小伙伴可以跳过，坑点在最下边

授权

关于授权详情，大家可以去微信公众号：h5获取code，授权等问题了解具体的配置。

//这条链接主要是通过重定向，获取到**code**，然后与后端交互，获取信息方便执行wx.config
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

 wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: config.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
      timestamp: config.timestamp, // 必填，生成签名的时间戳
      nonceStr: config.nonceStr, // 必填，生成签名的随机串
      signature: config.signature,// 必填，签名，见附录1
      jsApiList: [
          
          //分享朋友圈
          'updateTimelineShareData',
          //updateAppMessageShareData
          'updateAppMessageShareData',
          // 'onMenuShareTimeline',
          // 'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareQZone',
      ]
  });

新分享方法

onMenuShareAppMessage 改为 updateAppMessageShareData
onMenuShareTimeline 改为 updateTimelineShareData

微信sdk1.6.0
微信sdk1.4.0

微信sdk1.2.0

1.2.0以前用onMenuShareAppMessage、onMenuShareTimeline

1.4.0以后用updateAppMessageShareData、updateTimelineShareData

执行wx.ready

执行分享方法


/**
* 变量注释，这几个字段不要改，是微信的规定的，值随便赋值
* title : 标题
* desc：段落描述
* link：打开的地址
* imgUrl：图片（缩略图36kb以下）
*/ 
const {title,desc,link,imgUrl} = this.info

wx.ready(function(){
   wx.updateTimelineShareData({
      title,
      desc,
      link,
      imgUrl,
      trigger: function (res) {
        // alert('用户点击分享到朋友圈');
      },
      success: function (res) {
        // alert('已分享');
      },
      cancel: function (res) {
        // alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
});