最新消息:文章中包含代码时,请遵守代码高亮规范!

分享功能之pc端分享和微信分享(vue版)

原创文章 user 221浏览 0评论

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

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

   1.pc端分享:

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

image.png
// 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

如下图

image.png

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只记住第一次进入页面的路由,所以只能用第一次进入页面的路由去生成签名,如下图

image.png

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


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情