欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

公众号下分享ios不显示图片问题

程序员文章站 2022-05-13 09:52:19
今天要做公众号文章分享,自定义标题、详情、图片。发现安卓能显示图片,但是ios不显示图片。最后通过各种尝试解决了。解决方法:1、公众号开发者文档JS-SDK现在是http://res2.wx.qq.com/open/js/jweixin-1.6.0.js。虽然文档说onMenuShareTimeline,onMenuShareAppMessage两个方法即将废弃,但是很显然新方法并没有对ios做兼容。我把老方法和新方法一起放,老放前,新放后。写在wx.ready()里面就可以解决问题。2、如....

公众号下分享ios不显示图片问题

今天要做公众号文章分享,自定义标题、详情、图片。
发现安卓能显示图片,但是ios不显示图片。最后通过各种尝试解决了。
解决方法:
1、公众号开发者文档JS-SDK
现在是http://res2.wx.qq.com/open/js/jweixin-1.6.0.js。
虽然文档说onMenuShareTimeline,onMenuShareAppMessage两个方法即将废弃,但是很显然新方法并没有对ios做兼容。
我把老方法和新方法一起放,老放前,新放后。写在wx.ready()里面就可以解决问题。
2、如果问题还没有解决,看看图片路径有没有错和路径前后有没有多余空格等等。

接下来是代码:

setWxConfig() {
    const that = this;
    const path = location.pathname;
    const urlList = location.href.split(path);
    const url = path + urlList[1];
    const data = {
      // url: url.substr(1)
      url: location.href
    };
    this.service.getWxConfigInfo(data).subscribe(val => {
      const obj = {
        appId: val.appId,
        timestamp: val.timestamp + '',
        nonceStr: val.nonceStr,
        signature: val.signature,
      };
      wx.config({
        debug: false,
        appId: obj.appId,
        timestamp: obj.timestamp + '',
        nonceStr: obj.nonceStr,
        signature: obj.signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData']
      });
      wx.ready(function () {
        wx.onMenuShareTimeline({
          title: '精治姚家', // 分享标题
          desc: this.info.title || '投票详情', // 分享描述
          link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imageUrl, // 分享图标
          success: function () {
            // 用户点击了分享后执行的回调函数
          }
        }),
          wx.onMenuShareAppMessage({
            title: '精治姚家', // 分享标题
            desc: this.info.title || '投票详情', // 分享描述
            link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            type: '', // 分享类型,music、video或link,不填默认为link
            dataUrl: this.imageUrl, // 如果type是music或video,则要提供数据链接,默认为空
            success: function () {
              // 用户点击了分享后执行的回调函数
            }
          });
        wx.updateAppMessageShareData({
          title: '精治姚家', // 分享标题
          desc: this.info.title || '投票详情', // 分享描述
          link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imageUrl, // 分享图标
          success: function () {
            // 设置成功
            console.log("设置成功")
          },
        });
        wx.updateTimelineShareData({
          title: '精治姚家', // 分享标题
          desc: this.info.title || '投票详情', // 分享描述
          link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.imageUrl, // 分享图标
          success: function () {
            // 设置成功
          }
        })
      });
      wx.error(function (res) {
      });
    })
  }

本文地址:https://blog.csdn.net/weixin_47361285/article/details/107515990