npm install --save weixin-js-sdk
#封装微信分享代码
import wx from 'weixin-js-sdk' //微信sdk依赖
import http from '../../http' // 引用全局
const jsApiList = [
'checkJsApi',
'onMenuShareAppMessage',
'updateAppMessageShareData',
'onMenuShareTimeline',
'updateTimelineShareData',
'onMenuShareWeibo'
]
//要用到微信API
function getUrl() {
if (window.entryUrl === '') {
window.entryUrl = location.href.split('#')[0]
}
let u = navigator.userAgent
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
return isAndroid ? location.href.split('#')[0] : window.entryUrl
}
function getJSSDK(weiXin, invitation) {
// 调用后台接口换取参数
let url = getUrl()
http
.post('api-wechat/share/get-info', {
invitation: invitation,
url: url
})
.then(res => {
console.log(weiXin)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: jsApiList // 必填,需要使用的JS接口列表
})
wx.ready(function() {
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'showAllNonBaseMenuItem'
], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
console.log('检测', res)
}
})
wx.onMenuShareAppMessage({
title: weiXin.title,
desc: weiXin.desc,
link: weiXin.linkurl,
imgUrl: weiXin.img,
trigger: function trigger(res) {},
success: function success(res) {
console.log('已分享')
},
cancel: function cancel(res) {
console.log('已取消')
},
fail: function fail(res) {
alert(JSON.stringify(res))
}
})
wx.showAllNonBaseMenuItem() //显示所有非基础组件
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline({
title: weiXin.title,
link: weiXin.linkurl,
imgUrl: weiXin.img,
trigger: function trigger(res) {
// alert('用户点击分享到朋友圈');
},
success: function success(res) {
//alert('已分享');
},
cancel: function cancel(res) {
//alert('已取消');
},
fail: function fail(res) {
alert(JSON.stringify(res))
}
})
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
// wx.onMenuShareQQ({
// title: weiXin.title,
// desc: weiXin.desc,
// link: weiXin.linkurl,
// imgUrl: weiXin.img,
// trigger: function trigger(res) {
// //alert('用户点击分享到QQ');
// },
// complete: function complete(res) {
// alert(JSON.stringify(res));
// },
// success: function success(res) {
// //alert('已分享');
// },
// cancel: function cancel(res) {
// //alert('已取消');
// },
// fail: function fail(res) {
// //alert(JSON.stringify(res));
// }
// });
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
// wx.onMenuShareWeibo({
// title: weiXin.title,
// desc: weiXin.desc,
// link: weiXin.linkurl,
// imgUrl: weiXin.img,
// trigger: function trigger(res) {
// //alert('用户点击分享到微博');
// },
// complete: function complete(res) {
// // alert(JSON.stringify(res));
// },
// success: function success(res) {
// //alert('已分享');
// },
// cancel: function cancel(res) {
// // alert('已取消');
// },
// fail: function fail(res) {
// // alert(JSON.stringify(res));
// console.log(JSON.stringify(res));
// }
// });
})
wx.error(function(res) {
console.log(JSON.stringify(res) + '微信验证失败')
// alert(JSON.stringify(res)+"微信验证失败");
})
})
}
export default {
// 获取JSSDK
getJSSDK: getJSSDK
}
#组件中使用
import getJSSDK from '../../assets/js/sdk'
mounted() {
let wxShareData = {
title: "微信分享测试",
linkurl: location.origin + "/index.html#/test?shareId=154545",
desc: "分享链接添加动态参数",
img: "http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg"
};
getJSSDK.getJSSDK(wxShareData, "154545");
},
#微信里禁止分享
// 在公众号里的H5页面需要做禁止分享
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下面这个API隐藏右上角按钮
WeixinJSBridge.call('hideOptionMenu')
})