第一步:安装weixin-js-sdk
npm install weixin-js-sdk
第二步:
在assets文件下新建个common文件夹 ,然后再新建个utils.js文件
import wx from "weixin-js-sdk";
/*
* 微信分享
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{shareData}:分享配置参数
*/
export const wexinShare = (data, shareData) => {
let appId = data.appId;
let timestamp = data.timestamp;
let nonceStr = data.nonceStr;
let signature = data.signature;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
//分享到朋友圈”及“分享到QQ空间”
wx.updateTimelineShareData({
title: shareData.title, // 分享标题
link: shareData.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.imgUrl, // 分享图标
success: function (res) {
// 设置成功
// console.log("分享成功返回的信息为:", res);
}
})
//“分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享链接
imgUrl: shareData.imgUrl, // 分享图标
success: function (res) {
// console.log("分享成功返回的信息为:", res);;
}
})
});
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log('验证失败返回的信息:', res);
});
}
第三步:调用
import {wexinShare} from "@/common/utils.js";
//请求微信配置参数接口(获取签名),由后台给接口给
get_share(){
var that = this;
var urls = that.$qs.stringify(window.location.href.split('#')[0]);
//看后台请求接口是get/post
that.$axios.post("/xxx",urls).then((res) => {
if (res.data) {
//微信加签
var obj = {
appId: res.data.appId,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
timestamp: res.data.timestamp
}
//分享数据,这段主要是为了在hash模式下分享出去的链接不被浏览器截取,保证完全把链接分享出去
var shareWxLink = window.location.href.split('#')[0] + 'static/redirect.html?redirect=' + encodeURIComponent(window.location.href) + '&pid_uid=' + userinfo.uid;
// console.log('shareWxLink', shareWxLink)
let shareData = {
title: '标题', // 分享标题
link: shareWxLink,
imgUrl: 'http://xxx.jpg', // 分享图标
desc: '这里填写简介文字'
}
//引用
wexinShare(obj, that, shareData);
} else {
that.$toast('获取sdk参数失败!');
}
})
}