uniapp设置微信分享
在uniapp中，用vue3写微信端H5，设置分享的时候，直接在index.html中引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>编译的时候貌似不会处理，虽然不报错，引入成功了，但是自定义的参数都无效，控制台会报错：wx.config is not a function。
去查了一下uniapp的官网，是集成了微信分享的，然后wx这个变量名称被占用了，所以需要动态引入：
先设置分享参数：
const shareTitle = ref('分享的标题')
const shareContent = ref('分享的内容')
const shareLink = ref('分享的链接')
const shareImage = ref('分享的图片，必须是公网可以读取到的')
然后写一个动态引入的方法：
方法内容如下：
function loadWxSdk() {
return new Promise((resolve, reject) => {
if (window.wx && typeof wx.config === 'function') {
resolve(window.wx);
return;
}
const script = document.createElement('script');
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
script.onload = () => {
if (window.wx && typeof wx.config === 'function') {
resolve(window.wx);
} else {
reject(new Error('微信 JS-SDK 加载成功但无法访问 config 方法'));
}
};
script.onerror = () => reject(new Error('微信 JS-SDK 加载失败'));
document.head.appendChild(script);
});
}
在需要设置分享的位置，执行方法：
方法内容如下：
async function initWechatShare() {
try {
//这个名称可以随便去，不要叫wx就行
const jsWechat = await loadWxSdk()
// 通过后端接口获取签名配置
const shareConfig = await setSignPackage();
// 初始化配置
jsWechat.config({
debug: false,
appId: shareConfig.appId,
timestamp: shareConfig.timestamp,
nonceStr: shareConfig.nonceStr,
signature: shareConfig.signature,
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
});
// 处理成功回调
jsWechat.ready(() => {
console.log('微信 JS-SDK 初始化成功');
// 设置分享信息
jsWechat.updateAppMessageShareData({
title: shareTitle.value,
desc: shareContent.value,
link: shareLink.value,
imgUrl: shareImage.value,
});
jsWechat.updateTimelineShareData({
title: shareTitle.value,
link: shareLink.value,
imgUrl: shareImage.value,
});
});
// 处理错误回调
jsWechat.error(err => {
console.error('wx.config 配置失败:', err);
});
} catch (error) {
console.error('初始化微信分享失败:', error);
}
}
//获取配置代码
function setSignPackage() {
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + '/signPackage.html',
method: 'POST',
data: {
//这个url必须是动态获取的
url: location.href.split('#')[0]
},
success: (res) => {
if (res.data.status == 1) {
resolve(res.data.data);
} else {
reject(new Error('获取签名失败: ' + res.data.msg));
}
},
fail: (err) => {
reject(err);
}
});
});
}
这样，只要在微信公众平台设置了安全域名的情况下，就可以正常分享了。
