您的位置:首页 > Web前端 > Vue.js

vue 微信分享

2018-06-04 16:17 176 查看

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

npm -install weixin-js-sdk --save

引入js文件   import wx from 'weixin-js-sdk'在mouted中调用:

this.wxShare('这里填写文案title' , window.location.href.split('#')[0] || window.location.href.split('?')[0] ,window.location.protocol + '//' + window.location.host + require('这里写图片的路径'));
wxShare:function (title, desc, link, imgUrl){ var qs=require('qs'); var instance = axios.create({ headers: {'content-type': 'application/x-www-form-urlencoded'} }); var params = {'url': window.location.href.split('#')[0]}; // 获取签名 instance.post(this.GLOBAL.BASE_URL+'user/wx_sign_package',qs.stringify(params)).then(function(res){ res = res.data; if (res.result == 0) { wx.config({ debug: false, appId: res.data.appId, // 填写自己的appID timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, // res.data是从后台接口返回的xinxi jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo' ] }); } else{ console.log("获取accessToken失败"); } }).catch((res) => { window.alert('网络异常,登录请求失败'); }); wx.ready(function () { // 分享给朋友 wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { console.log('已分享给朋友'); }, cancel: function () { console.log('取消分享朋友'); // 用户取消分享后执行的回调函数 }, fail: function (res) { window.alert(JSON.stringify(res)); } }); // 分享到朋友圈 wx.onMenuShareTimeline({ title: title, // 分享标题 link: link, imgUrl: imgUrl, // 分享图标 success: function () { console.log('已分享到朋友圈'); }, cancel: function () { console.log('取消分享朋友圈'); }, fail: function (res) { window.alert(JSON.stringify(res)); } }); // 分享到QQ wx.onMenuShareQQ({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () { console.log('已分享到qq'); }, cancel: function () { console.log('取消分享到qq'); } }); // 分享到腾讯微博 wx.onMenuShareWeibo({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () { console.log('已分享到微博'); }, cancel: function () { console.log('取消分享到微博'); } }); }); },

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: