收藏
回答

jssdk分享朋友圈功能配置title无效?

公众号ID
wxe17727286c4f87e6
//h5-weixin-sdk.js
// 调用后端接口,获得 JSSDK 初始化所需的签名
import jweixin from 'weixin-js-sdk';
import AuthUtil from '@/api/auth';
async init() {
    const url = window.location.href.split('#')[0];//location.origin;
    const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url);
    if (code === 0) {
      jweixin.config({
        debug: false,//true,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          'chooseWXPay',
          'openLocation',
          'getLocation',
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'scanQRCode',
        ], // TODO :后续可以设置更多权限;


        openTagList: data.openTagList,
      });
	  // 监听结果
	  configSuccess = true;
    } else {
      console.log('请求 JSSDK 配置失败,错误码:', code);
    }
    jweixin.error((err) => {
      configSuccess = false;
      console.error('微信 JSSDK 初始化失败', err);
    });
    jweixin.ready(() => {
      if (configSuccess) {
        console.log('微信 JSSDK 初始化成功');
      }
    });
}
updateShareInfo(data, callback = null) {
const shareData = {
        title: data.title,
        desc: data.desc,
        link: data.link,
        imgUrl: data.image,
        success: function (res) {
          if (callback) {
            callback(res);
          }
          // 分享后的一些操作,比如分享统计等等
        },
        cancel: function (res) {},
		fail:function(res){}
      };
jweixin.updateTimelineShareData(shareData);
jweixin.updateAppMessageShareData(shareData);
}

//share-page
// #ifdef H5
import $wxsdk from '@/utils/h5-weixin-sdk';
// #endif
// 新增:设置页面meta标签的函数
const setWechatShareMeta = () => {
  // #ifdef H5
  // 只在H5环境下执行
  const metaTags = [
    // 微信分享相关meta
    { property: 'og:title', content: '测试分享标题' },
    // { property: 'og:image', content: `${staticUrl}/static/invite/share.png` },
    { property: 'og:url', content`${h5Url}` },
    { property: 'og:type', content: 'website' },
    // 微信特定meta
    { name: 'wechat:title', content: '测试分享标题' },
    // { name: 'wechat:image', content: `${staticUrl}/static/invite/share.png` },
    // QQ分享相关meta
    { itemprop: 'name', content: '测试分享标题' },
    // { itemprop: 'image', content: `${staticUrl}/static/invite/share.png` },
  ];
  // 动态创建或更新meta标签
  metaTags.forEach(tag => {
    const selector = tag.property ? `meta[property="${tag.property}"]` : 
                    tag.itemprop ? `meta[itemprop="${tag.itemprop}"]` : 
                    `meta[name="${tag.name}"]`;
    
    let meta = document.querySelector(selector);
    if (meta) {
      // 更新现有meta标签
      meta.setAttribute('content', tag.content);
    } else {
      // 创建新的meta标签
      meta = document.createElement('meta');
      if (tag.property) meta.setAttribute('property', tag.property);
      if (tag.name) meta.setAttribute('name', tag.name);
      if (tag.itemprop) meta.setAttribute('itemprop', tag.itemprop);
      meta.setAttribute('content', tag.content);
      document.head.appendChild(meta);
    }
  });
  // 设置页面标题(微信有时也会读取这个)
  document.title = '测试分享标题';
  // #endif
};
const setShareTimeLine = ()=>{
	const shareInfo = {
	  title: '测试分享标题', // 分享标题
	  desc: '', // 描述
	  image: '', // 分享图片
	  path: '', // 分享页面+参数
	  link: `${h5Url}`, // 分享Url+参数
	  query: '', // 分享参数
	  forward: {}, // 转发所需参数
	};
	// #ifdef H5
	 // 设置meta标签
    	    setWechatShareMeta();
		// 给足够的时间让微信读取meta信息
	   setTimeout(() => {
		 $wxsdk.updateShareInfo(shareInfo);
	   }, 300);
	// #endif
}


onLoad((options) => {
	// 获取分享码
	if(options.inviteCode){
		// 保存邀请码
		uni.setStorageSync('inviteCode',options.inviteCode);
		sheep.$store('user').inviteCode = options.inviteCode;
	}
});
onMounted(async ()=>{
	// #ifdef H5
	$wxsdk.init();
	await nextTick();
	setShareTimeLine();
	// #endif
})



我开启调试后,发现jssdk分享功能的配置都正常了,然后关闭调试发布到生产环境后,发现在调用分享朋友圈功能时,弹出的页面上只有一个输入框和分享路径Link,没有默认的分享卡片。

预期的分享朋友圈弹出来的样式:

但是现在在线上测试的样子:

默认的那个分享卡片不见了,被替换成了配置的link参数。这是为什么,请问如何解决?


回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    12-04

    你好,麻烦使用xweb调试下呢?

    12-04
    有用
    回复
  • 智能回答 智能回答 本次回答由AI生成
    12-03
    有用
登录 后发表内容
问题标签