分享功能之pc端分享和微信分享（vue版）

分享功能：是将指定的页面链接，图片，简介分享给微信好友，微信朋友圈，qq好友，qq空间等。

分享功能分pc端分享和微信分享：

1.pc端分享：

pc端分享通常使用第三方分享–百度分享（ http://share.baidu.com/ ），但是在vue中并不能直接使用，代码如下：

// html部分
<div class="pull-left share-content bdsharebuttonbox">
<span class="pull-left share-btn-text">分享</span>
<a title="分享到微信" href="#" class="pull-left share-list share-btn1 pointer" data-cmd="weixin" @click="weixin()"></a>
<a title="分享到QQ空间" href="#" class="pull-left share-list share-btn2 pointer" data-cmd="qzone"></a>
<!-- <span class="pull-left share-list share-btn1 pointer" data-cmd="weixin"></span>
    <span class="pull-left share-list share-btn2 pointer" data-cmd="sqq"></span>-->
<div class="mask" v-if="mask" @click="closeBtn"></div>
</div>


// js部分
setShare() {
const that = this;
//分享相关代码
window._bd_share_config = {
common: {
bdUrl:that.shareData.url,
bdPic:that.shareData.imagePath,
bdText:that.shareData.content,
bdDesc:that.shareData.title,
},
share: {},
selectShare: {
bdContainerClass: null,
// 这里和html标签里链接相对应
bdSelectMiniList: ["weixin", "qzone"]
}
};
const s = document.createElement("script");
s.type = "text/javascript";
s.src =
"/static/api/js/share.js?v=89860593.js?cdnversion=" +
~(-new Date() / 36e5);
document.body.appendChild(s);

// 百度分享有自动销毁的逻辑，加这么一段代码   重新初始化就没问题了。
if (window._bd_share_main) {
window._bd_share_main.init();
}
}

线上https请求访问http出现报错，一下是解决方案：

1.需要下载最新的版本插件，GitHub地址：https://github.com/hrwhisper/baiduShare

2.将下载插件好的放到static下；

3.结构部分同之前；

4.js引用，因为很多页面用到了分享，将组件封装在components，js部分如下，根据自己的路径来设置s.src

如下图

2.微信分享

微信分享指的是通过微信提供的api，分享到微信好友，微信朋友圈，qq好友，qq空间（ https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 ）;

在vue中使用步骤

1.安装 weixin-js-sdk

npm install weixin-js-sdk –save

2.其他使用方式同微信api文档，代码如下

1. // 微信分享 参数 type:分享类型， target：分享的id， url：生成签名的url sharewx(type, target, url) { var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var baseurl; if (isiOS) { //ios系统输出 baseurl = sessionStorage.wxshareurl; } else { //android系统输出 baseurl = url; } const that = this; axios .get( that.globalApiUrl + “api/user/share/getNoAppWxShareParams?platform=” + that.platform + “&type=” + type + “&target=” + target + “&url=” + baseurl ) .then(res => { if (res.errorCode == 0) { that.shareData = res.data; // alert(JSON.stringify(that.shareData)); that.shareStatus = true; that.shareConfig(); // Vue.set(that.shareStatus); } else { response.response(res); } }) .catch(error => { // console.log(error, “请求失败”); }); }, // 点击背景隐藏 hide() { const that = this; that.shareStatus = false; Vue.set(that.shareStatus); }, shareConfig() { const that = this; // 微信分享 wx.config({ debug: false, appId: that.shareData.appId, // 和获取Ticke的必须一样——必填，公众号的唯一标识 timestamp: that.shareData.timeStamp, // 必填，生成签名的时间戳 nonceStr: that.shareData.nonceStr, // 必填，生成签名的随机串 signature: that.shareData.signature, // 必填，签名，见附录1 //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间 jsApiList: [ “onMenuShareAppMessage”, “onMenuShareTimeline”, “onMenuShareQQ”, “onMenuShareQZone” ] }); //处理验证失败的信息 wx.error(function (res) { that.$message.error(“验证失败返回的信息”, res); }); //处理验证成功的信息 wx.ready(function () { //              alert(window.location.href.split(‘#’)[0]); //分享到朋友圈 wx.onMenuShareTimeline({ title: that.shareData.title, // 分享标题 link: that.shareData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: that.shareData.imagePath, // 分享图标 success: function (res) { // 用户确认分享后执行的回调函数 // that.$message.error(“分享到朋友圈成功返回的信息为:”, res); // that.$message.error(“分享成功!”); that.hide(); }, cancel: function (res) { // 用户取消分享后执行的回调函数 // that.$message.error(“取消分享到朋友圈返回的信息为:”, res); } }); //分享给朋友 wx.onMenuShareAppMessage({ title: that.shareData.title, // 分享标题 desc: that.shareData.content, // 分享描述 link: that.shareData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: that.shareData.imagePath, // 分享图标 type: “”, // 分享类型,music、video或link，不填默认为link dataUrl: “”, // 如果type是music或video，则要提供数据链接，默认为空 success: function (res) { // 用户确认分享后执行的回调函数 // that.$message.error(“分享给朋友成功返回的信息为:”, res); that.hide(); }, cancel: function (res) { // 用户取消分享后执行的回调函数 // that.$message.error(“取消分享给朋友返回的信息为:”, res); } }); //分享到QQ wx.onMenuShareQQ({ title: that.shareData.title, // 分享标题 desc: that.shareData.content, // 分享描述 link: that.shareData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: that.shareData.imagePath, // 分享图标 success: function (res) { // 用户确认分享后执行的回调函数 // that.$message.error(“分享到QQ好友成功返回的信息为:”, res); that.hide(); }, cancel: function (res) { // 用户取消分享后执行的回调函数 // that.$message.error(“取消分享给QQ好友返回的信息为:”, res); } }); //分享到QQ空间 wx.onMenuShareQZone({ title: that.shareData.title, // 分享标题 desc: that.shareData.content, // 分享描述 link: that.shareData.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: that.shareData.imagePath, // 分享图标 success: function (res) { // 用户确认分享后执行的回调函数 // that.$message.error(“分享到QQ空间成功返回的信息为:”, res); that.hide(); }, cancel: function (res) { // 用户取消分享后执行的回调函数 // that.$message.error(“取消分享到QQ空间返回的信息为:”, res); } }); }); }

但是，vue版的微信分享在ios会出现问题，主要是因为vue的路由模式是history，ios只记住第一次进入页面的路由，所以只能用第一次进入页面的路由去生成签名，如下图

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/25420.html

微信打赏

支付宝打赏

感谢您对作者Miya的打赏，我们会更加努力！    如果您想成为作者，请点我