文档
微信JS-SDK说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
参考代码
import Vue from 'vue';
export default function (app) {
const axios = app.$axios
function wxShare(title = 'test_title', desc = 'test_desc', image = 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', type = 'link') {
console.log(`title------------${title}`);
console.log(`desc------------${desc}`);
console.log(`image------------${image}`);
if (isWx()) {
$nuxt.$axios.post('/GetShareSignature', {
url: location.href
}).then((res) => {
returnConfig(res);
wxShareInfo(title, desc, image, type, location.href);
})
}
setMeta(title, desc, image);
}
Vue.prototype.$wxShare = wxShare
}
// 判断是否微信浏览器
function isWx() {
// return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
function returnConfig(data) {
wx.config({
debug: data.url.includes('debug=true') ? true : false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timeStamp, // 必填,生成签名的时间戳
nonceStr: data.nonce, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: [
'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
'updateTimelineShareData', // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
]
});
}
function wxShareInfo(title, desc, image, type, share_url) {
wx.ready(function () {
//分享好友
var shareData = {
title: title, // 分享标题
desc: desc, // 分享描述
imgUrl: image || 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // 分享图标
type: type,// 分享类型,music、video或link,不填默认为link
link: share_url,
success: function () {
// 设置成功
}
};
wx.checkJsApi({
jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表,所有 JS 接口列表见附录2,
success: function (res) {
// 以键值对的形式返回,可用的 api 值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
wx.updateAppMessageShareData(shareData); // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
}
});
wx.checkJsApi({
jsApiList: ['updateTimelineShareData'], // 需要检测的 JS 接口列表,所有 JS 接口列表见附录2,
success: function (res) {
// 以键值对的形式返回,可用的 api 值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
wx.updateTimelineShareData(shareData); // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
}
});
});
}
function setMeta(title, desc, image) {
addMeta('name', title);
addMeta('image', image|| 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
addMeta('description', desc);
}
// 手动添加mate标签
const addMeta = (name, content) => {
const meta = document.createElement('meta');
meta.name = name;
meta.content = content;
meta.itemprop = name;
$nuxt.$nextTick(() => {
document.getElementsByTagName('head')[0].appendChild(meta);
})
};
注意事项
- 由于苹果手机的限制,请用https的形式引入js文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js。否则当分享链接为https形式时无法加载js文件。
- 当对话框内的链接为普通链接形式时,点击进入进行二次分享依旧是普通链接形式,这是微信为了防止恶意传播链接分享作的限制。但在公众号对话框内是不作该限制的,开发过程中可在公众号对话框内测试。
- 当图片过大时,分享卡片可能不显示图片icon