//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参数。这是为什么,请问如何解决?

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