1.配置axios,qs
npm install axios --save
npm install qs
npm install weixin-js-sdk--save
2.main.js引入:
import axios from 'axios';
import qs from 'qs';
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs
3.根据微信登录返回的code问后端索要appId,timestamp,nonceStr,signature
//encodeURIComponent(window.location.href.split('#')[0]);是后端用来获取签名证书,前后端链接必须一致
_this.$axios.post(_this.https+'********?url='+encodeURIComponent(window.location.href.split('#')[0])).then((res)=>{
console.log(res)// 拿到appId,timestamp,nonceStr,signature
}
4.自定义方法传入appId,timestamp,nonceStr,signature.....
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识,填自己的!
timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
})
wx.ready(function () {
//是否支持分享
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
success: function (res) {
console.log(res)
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: 'xxxxxxxxx', // 分享时的标题
link: 'xxxxxxxxx', // 分享时的链接
imgUrl: 'xxxxxxxxx', // 分享时的图标
success: function () {
console.log("分享成功");
this.$message({
message: '恭喜你,分享成功',
type: 'success'
});
},
cancel: function () {
console.log("取消分享");
this.$message({
message: '取消分享',
type: 'warning'
});
},
fail: function (ress) {
console.log(ress)
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title:'xxxxxxxxx',// 分享时的标题
desc: 'xxxxxxxxx',// 分享时的关键词
link: 'xxxxxxxxx',// 分享时的链接
imgUrl: 'xxxxxxxxx',// 分享时的图标
type: '',
dataUrl: '',
success: function () {
console.log("分享成功");
this.$message({
message: '恭喜你,分享成功',
type: 'success'
});
},
cancel: function () {
console.log("取消分享");
this.$message({
message: '取消分享',
type: 'warning'
});
},
fail: function (ress) {
console.log(ress)
}
});
5.如果出现刷新页面没有数据,是因为在微信登陆返回的code拼接到了url后面,可以在后端接口成功回调的时候:
window.history.replaceState(data,title, url);
1、状态对象(data)—— data是一个JavaScript对象,通过pushState方法可以将data内容传递到新页面中。
2、标题(title)—— 几乎没有浏览器支持该参数,但是传一个空字符串会比较安全。
3、地址(url)—— 新的历史记录条目的地址(可选,不指定的话则为文档当前URL)。