vue页面分享微信朋友圈
注:1.web的分享只能通过微信右上角自带的三个点分享,只有app才能实现自定义按钮的分享。
步骤:
1.安装 :npm i -S weixin-js-sdk
2.新建js导入
import wx from ‘weixin-js-sdk’ //微信sdk依赖
3.js文件
import wx from 'weixin-js-sdk' //微信sdk依赖
import axios from 'axios'; // 引用全局
//要用到微信API
function getJSSDK (url, dataForWeixin) {
// 调用后台接口换取参数
axios({
url: "/news-serve/admin/wx-index/share",// 需要改成自己对应的接口
params: {
url: url
}
}).then(res => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名
// jsApiList: jsApiList // 必填,需要使用的JS接口列表
jsApiList: [ //需要调用的JS接口列表
'updateAppMessageShareData', //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) 新接口
'updateTimelineShareData', //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) 老接口
// 'getLocation' //获取定位
]
})
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: dataForWeixin.title,
desc: dataForWeixin.desc,
link: dataForWeixin.linkurl,
imgUrl: dataForWeixin.img,
trigger: function trigger (result) { },
success: function success (result) {
//console.log('已分享');
},
cancel: function cancel (result) {
//console.log('已取消');
},
fail: function fail (result) {
//alert(JSON.stringify(result));
}
});
wx.updateAppMessageShareData({
title: dataForWeixin.title,
desc: dataForWeixin.desc,
link: dataForWeixin.linkurl,
imgUrl: dataForWeixin.img,
trigger: function trigger (result) { },
success: function success (result) {
//console.log('已分享');
},
cancel: function cancel (result) {
//console.log('已取消');
},
fail: function fail (result) {
//alert(JSON.stringify(result));
}
});
});
wx.error(function (result) {
// alert(JSON.stringify(res)+"微信验证失败");
});
})
}
export default {
// 获取JSSDK
getJSSDK: getJSSDK
}
- 页面中引用 (在页面信息请求回来时调用这个share()方法,加载微信配置)
import weiXinShare from "../util/shareWx"
/**
* @Description: 分享朋友圈
* @date 2021/1/25
*/
share (title, desc, img) {
// 分享朋友圈
var ip1 = location.href.split("#")[0];
let dataForWeixin = {
title: title, //分享标题
desc: desc, //分享内容
linkurl: location.href, //分享链接
img: img //分享内容显示的图片(图片必须是正方形的链接)
};
weiXinShare.getJSSDK(ip1, dataForWeixin);
}
_this.share(_this.options.title,_this.options.content.replace(/<[^>]+>/g,''),_this.options.img);
- 效果: