说到微信分享，其实挺坑的，刚对接的时候，以为可以像app端一样，通过自己写好的actionSheet来取分享，后来仔细阅读发现，调用的分享竟然是微信自己右上角更多的那个分享，如果不写的话，右上角那三个点点里是不包含微信分享的，这真是，坑到奶奶怀里去了。 而且最新官方通知，废弃了一部分接口，但是实测，你的jsApiList中要是不写那俩废弃的，还会报错，可能是半瘫痪状态吧。
我们的代码写在上一次的wechat.js中了。只不过是加了一点点微信分享的东西，签名还是利用initJssdk方法，客官请看：
import { getWxConfig } from 'api/index/index.js';
import { wxPay } from 'api/index/index.js';
import wx from 'weixin-js-sdk'
export default {
//判断是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
// console.log('是微信客户端')
return true;
} else {
// console.log('不是微信客户端')
return false;
}
},
//初始化sdk配置 这个上篇文章有详细讲解，就不赘述了
initJssdk: function(callback, url) {
console.log(url)
//服务端进行签名
let data = {
url: encodeURIComponent(url)
}
getWxConfig(data).then(res => {
if (res.status == 1000) {
if (res.data) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
//这里把分享的apilist里加上分享的接口名称
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'updateAppMessageShareData',
'updateTimelineShareData'
]
});
//配置完成后，再执行分享等功能
if (callback) {
callback(res.data);
}
}
}
}).catch(err => {})
},
//this.$wechat.share(data,url)封装后调用
//在需要自定义分享的页面中调用
share: function(data, url) {
//data是我们传递过来的需要分享的内容。
//url是当前页面路径
url = url ? url : window.location.href.split('#')[0];
//每次都需要重新初始化配置，才可以进行分享
this.initJssdk(function(callback) {
wx.ready(function() {
var shareObject = {
title: data.title,//// 分享标题
desc: data.des,//// 分享描述
link: data.url,//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.img,//// 分享图标
success: function(res) {
//业务回调
},
cancel: function(res) {
this.$toast({
icon: 'none',
title: '分享失败!',
duration: 1000
})
}
};
//分享给朋友及分享到QQ
wx.updateAppMessageShareData(shareObject);
//分享到朋友圈及分享到QQ空间
wx.updateTimelineShareData(shareObject);
});
}, url);
},
}
我们看完代码会发现，分享其实也是那些操作，微信配置，签名。然后调用分享接口。只需要我们把握住它的api规则，这些都不是事儿。友情提示：细看代码中的注释,哈哈。 这样我们的微信分享就完成了，鉴于只能在微信环境内使用，个人觉得实在是意义不大，如果公司有条件的话，找一个实力雄厚的第三方来对接h5分享实在是再好不过了。或者你就挨个主流浏览器内对接分享，多个平台分享都对一遍，哈哈哈哈。 码文不易，望您给个赞！谢谢啦！希望对你有所帮助
