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('取消分享到微博'); } }); }); },
阅读更多
相关文章推荐
- 关于在vue-cli中使用微信自动登录和分享的实例
- 微信分享给朋友圈/朋友/判断网络类型/支付在vue里面亲测
- vue 微信分享的实现
- vue微信分享
- vue2.0 如何在hash模式下实现微信分享
- vue 微信分享的实现
- Vue单页式应用(Hash模式下)实现微信分享的实例
- vue 微信分享至朋友圈&&分享至朋友代码封装
- Vue+Vue-router微信分享功能
- vue 微信分享设置踩坑
- vue2.0 Hash模式下实现微信分享
- vue微信分享 vue实现当前页面分享其他页面
- vue-cli构建项目下使用微信分享功能
- 关于在vue-cli中使用微信自动登录和分享
- Vue项目全局配置微信分享思路详解
- vue 项目如何引入微信sdk,使用微信分享接口
- vue项目微信分享之后路由链接被破坏怎么办
- vue-router history模式下的微信分享小结
- vue实现微信分享朋友圈,发送朋友的示例讲解