最近写的项目中涉及到了微信分享,因此将一些分享方面的知识梳理一下。其中还涉及到对分享功能的隐藏和显示。
在vue页面的js 中放入如下代码:
const wx = require('weixin-js-sdk')
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
notShowMask: false,
}
},
mounted:function () {
wx.hideOptionMenu();
this.$nextTick(function () {
this.getConfig();
})
},
methods: {
// 微信分享参数
getConfig() {
let url = location.href.split('#')[0] //获取锚点之前的链接
wxAuthApi.getConfigData(url)//向服务器获取微信配置初始化需要的参数
.then(response => {
let res = response.data.data;
logObj(res);
this.wxInit(res);
})
},
// 微信分享
wxInit(res) {
let flag=this.notShowMask
let links = "http://www.baidu.com";
let title = '分享测试哦';
let desc = '了解更多知识,请关注“庄游”公众号';
let imgUrl = "";
wx.config({
debug: false,
appId: res.appId,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ['hideMenuItems','showMenuItems','onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
});
wx.ready(function () {
if(!flag){
wx.hideMenuItems({ menuList: ['menuItem:share:QZone', 'menuItem:share:appMessage',
'menuItem:share:qq','menuItem:share:timeline','menuItem:favorite'
]
});
}else{
wx.showMenuItems({ menuList: ['menuItem:share:QZone', 'menuItem:share:appMessage',
'menuItem:share:qq','menuItem:share:timeline','menuItem:favorite'
]
});
}
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
ready: function(){
alert("I am share ready")
},
success: function () {
// alert("分享到朋友圈成功")
//Toast({
//message: "成功分享到朋友圈"
//});
},
cancel: function () {
// alert("分享失败,您取消了分享!")
//Toast({
//message: "分享失败,您取消了分享!"
//});
}
});
//微信分享菜单测试
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// alert("成功分享给朋友")
// Toast({
// message: "成功分享给朋友"
// });
},
cancel: function () {
// alert("分享失败,您取消了分享!")
// Toast({
// message: "分享失败,您取消了分享!"
// });
}
});
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// alert("成功分享给QQ")
// Toast({
// message: "成功分享到QQ"
// });
},
cancel: function () {
// alert("分享失败,您取消了分享!")
// Toast({
// message: "分享失败,您取消了分享!"
// });
}
});
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// alert("成功分享给朋友")
// Toast({
// message: "成功分享到腾讯微博"
// });
},
cancel: function () {
// alert("分享失败,您取消了分享!")
// Toast({
// message: "分享失败,您取消了分享!"
// });
}
});
wx.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// alert("成功分享给朋友")
// Toast({
// message: "成功分享到QQ空间"
// });
},
cancel: function () {
// alert("分享失败,您取消了分享!")
// Toast({
// message: "分享失败,您取消了分享!"
// });
}
});
});
wx.error(function (err) {
alert(JSON.stringify(err))
});
}
}
}