正文
vue 配置微信分享
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
参考：https://www.cnblogs.com/goloving/p/9256212.html
1. main.js
import WXConfig from '../../assets/js/wx.jsapi';
2. wx.jsapi.js
import axios from 'axios'
export default {
wxShowMenu: function(shareData) {
var localURL = location.href.split('#')[0];
var param = {
'url': localURL
};
var wxData = shareData.wxData;//分享配置信息
var Param1= shareData.param1;//假设需传参数1
var Param2= shareData.param2;//假设需传参数2
var ifshare = shareData.ifshare;//是否开启分享
var _this = shareData.that;
axios.get('*****', {//获取config信息链接
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
var getMsg = res.data.message.ticket;
wx.config({
debug: false, //生产环境需要关闭debug模式
appId: getMsg.appId, //appId通过微信服务号后台查看
timestamp: getMsg.timestamp, //生成签名的时间戳
nonceStr: getMsg.nonceStr, //生成签名的随机字符串
signature: getMsg.signature, //签名
jsApiList: [ //需要调用的JS接口列表
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'hideMenuItems'
]
});
wx.ready(function() {
/* wx.checkJsApi({
jsApiList: ["showMenuItems"],
success: function(res) {
wx.showMenuItems({
menuList: [
'menuItem:share:appMessage', //发送给朋友
'menuItem:share:timeline' //分享到朋友圈
]
});
}
});*/
if (ifshare == '1') {//后端未开启分享则屏蔽分享菜单
wx.hideAllNonBaseMenuItem();
return;
}
//分享到朋友圈
wx.onMenuShareTimeline({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标
success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接，用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享朋友圈返回的信息为:", res);
}
}); //分享给朋友
wx.onMenuShareAppMessage({
title: wxData.title, // 分享标题
desc: wxData.info, //分享描述
link: wxData.shareurl, // 分享链接
imgUrl: wxData.img, // 分享图标 success: function(res) {
// 用户确认分享后执行的回调函数
var param = {
param: {
param1: Param1,
param2: Param2
}
}
_this.axios.get('****', {//分享回调链接，用于自行记录判断之类
params: param
}).then(function(res) {
if (res.status == 200 && res.data.result == 0) {
console.log('分享成功');
}
}).catch(function(err) {
console.log(err);
})
console.log("分享朋友圈成功返回的信息为:", res);
},
cancel: function(res) {
// 用户取消分享后执行的回调函数
console.log("取消分享给朋友返回的信息为:", res);
}
});
});
}
})
},
}
3. vue中
activated(){
this.getShare();//放在这里获取是因为我用了keep-alive（在组件切换过程中将状态保留在内存中，防止重复渲染DOM），而此方法需要“每次进入组件都调用，从而初始化微信分享配置等”——关键，否则分享会出问题。
},
methods(){
getShare(){
let _this = this,
shareData = {
wxData: wxShareInfo,//分享配置信息
param1: _this.param1,
param2: _this.param2,
ifshare: _this.ifshare,
that: _this
};
_this.WXConfig.wxShowMenu(shareData);
}
}
