最近写的项目中涉及到了微信分享,因此将一些分享方面的知识梳理一下。其中还涉及到对分享功能的隐藏和显示。
在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)) }); } } }