在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入
import wx from 'weixin-js-sdk';//引入 Vue.prototype.wx = wx//
jq项目中我们需要引入这个js-sdk(在需要调用js接口的页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js
,如果你的服务器是https请求的话请引入https://res.wx.qq.com/open/js/jweixin-1.2.0.js
)
// 分享 调用sdk // 微信分参数 getConfig() { this.showFx = true var _this=this; // let url = location.href.split('#')[0] //获取锚点之前的链接 let url = encodeURIComponent(window.location.href.split('#')[0]) //获取锚点之前的链接 console.log(url) //let url = 'http://xiaofeng.ckugua.com/index.html' //获取锚点之前的链接 // console.log(url) _this.$Ajax.post('webchat/config?url='+url).then(response => { // console.log(response) let res = JSON.parse(response.data.data); console.log(res) _this.wxInit(res); }) }, // 微信分享 wxInit(res) { var _this=this; let url = window.location.href.split('?')[0] //获取锚点之前的链接 console.log(url) // let links = url+'#/Food/' + this.$route.params.id; let links = url+'#/product/productDetails?pid='+_this.$route.query.pid; console.log(links) let title = '晓峰科技'; let desc = '了解更多,请关注“晓峰科技”公众号'; let imgUrl = 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4soO2NoID1uZPHibOVgkJoPoaelibibF3GagvW2o43wRASA/0'; _this.wx.config({ debug: false, appId: res.appId, timestamp: res.timestamp, nonceStr: res.nonceStr, signature: res.signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] }); _this.wx.ready(function() { _this.wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: links, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function() { alert('分享成功') _this.showFx =false; }, cancel: function() { alert('分享失败') _this.showFx =false; } }); //微信分享菜单测试 _this.wx.onMenuShareTimeline({ title: title, // 分享标题 desc: desc, // 分享描述 link: links, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function() { alert('分享成功') _this.isShow =true; }, cancel: function() { alert('分享失败') _this.isShow =true; } }) }); _this.wx.error(function(err) { alert(JSON.stringify(err)) }); }