微信分享官方API
我是自己分开写的js文件 share.js
import wx from 'weixin-js-sdk'
export function getShareInfo(fxUrl) { //如果分享的内容会根据情况变化,那么这里可以传入分享标题及url
//请求接口获得appId 签名 签名时间戳 还有签名的随机串
this.$http.request({
url: 'akt-web-auth/share-jssdk/get-share-info',
data: {
jsurl: fxUrl
}
})
.then(res => {
console.log(res.data);
// localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
//拿到后端给的这些数据
let appId = res.data.result.appId;
let timestamp = res.data.result.timestamps;
let nonceStr = res.data.result.nonceStr;
let signature = res.data.result.sign;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识,填自己的!
timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData'
]
})
wx.ready(function(e) {
//分享给朋友
wx.updateAppMessageShareData({
title: '偷偷告诉你,《安全生产考试真题》练3天就通过,马上开始真题练习', // 分享时的标题
desc: '一比一国家题库真题,立刻点击了解……',
link: 'http://akt.jianxiangtech.com/anktWeb', // 分享时的链接
imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png', // 分享时的图标
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
}
});
//分享给朋友圈
wx.updateTimelineShareData({
title: '偷偷告诉你,《安全生产考试真题》练3天就通过,马上开始真题练习',
desc: '一比一国家题库真题,立刻点击了解……',
link: 'http://akt.jianxiangtech.com/anktWeb',
imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png',
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
}
});
})
})
}
我全局挂载了一下方法 在main.js里
import {getShareInfo} from '' //引用上面的share.js文件
Vue.prototype.$share = getShareInfo;
使用方法
//this.$share(获取当前页面的url地址传给后台,share.js文件中的fxUrl就是接收的这个参数)
this.$share(location.href.split('#')[0])
示例是这样的:
ps:如果你遇到安卓或者IOS签名不对
1、首先与后台确定签名是否是对的
2、确定授权方式进入首页有没有进行多次重定向(我就是遇到多次重定向导致IOS分享签名报错) 因为IOS的SPA是不会自动刷新的 安卓的SPA是会自动刷新的 而且就算你打印出来或者alert出来都是对的 但是签名就是无效或者错误
3、如果还是不对 检查自己传给后台的url是不是对的
我目前就遇到了这几个问题 如果想多传几个参数那就自己在fxUrl后面加参数传递就好