1. npm install weixin-jsapi
2. 对应文件引用 import wx from 'weixin-jsapi'
微信文档
参考链接
3. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。（一般后端配置）
后端配置
4. 前端需要调取后端的接口，获取微信的congfig所需要的参数
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
5.遇到的问题
- invalid url domain 当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名
导致的原因是：
1.后端没有配置 '对应公众号' 的 'js接口安全域名'，
2. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
3. 接口修改了，没有通知前端修改 - invalid signature 签名错误
导致原因：1.请求后端接口传值没有取当前页面完整的URL （window.localhost.url）2.一定要去掉&from=timeline&isappinstalled=0 - 一开始分享还是链接地址，等两秒就正常了
导致原因：没有把微信的js以及对应的配置放在前面
index.vue
import CONFIG from './config';
import wx from 'weixin-jsapi';
export default {
created(){ // A页和A页里面的子页B都需要分享，需要处理一下
let me = this
const imgUrl = 'banner.jpg';// 直接拿服务器里面图片地址
const title = '这是标题';
const desc = '这是副标题';
let tempUrl = window.location.href;
if(tempUrl.indexOf("from") > -1){ // 二次分享会自动拼接&form=来源，需要切割掉
tempUrl = tempUrl.indexOf("?from") > -1?tempUrl.split('?from')[0] :tempUrl.split('&from')[0]
// location.href= tempUrl+"#hashchat"; // 如果子页面需要分享,就用这个
window.location.href= tempUrl // 只有一个页面分享，就不用带参数
}
// 如果A页面里面的子页B也需要分享，就加这个,不需要就删掉 start
// if(tempUrl.indexOf("#hashchat") > -1){
// if(CONFIG.platform.android){ // 安卓需要监听退出事件，安卓返回需要点击两次才会完全退出
// pushHistory();
// window.addEventListener("popstate", function(e) {
// if(tempUrl.indexOf("#hashchat") > -1){
// wx.closeWindow();
// }
// }, false);
// function pushHistory() {
// var state = {
// title: "title",
// url: "#"
// };
// pushState 改变网址却不需要刷新页面
// window.history.pushState(state, "title", "#hashchat");
// }
// }
// }
// end
// 如果根据后端接口来变更分享的内容，只需要在接口成功返回内，调用这个方法
this.getWeChat(imgUrl,title,desc)
},
mounted:{
getWeChat(imgUrl,title,desc){
this.$request({ // 改成自己的接口请求方式
url: "/接口",
method: "get",
query: {
// 必须跟地址栏的地址一模一样， 必须跟地址栏的地址一模一样， 必须跟地址栏的地址一模一样
url : window.location.href //URL 完整的链接
}
}).then((res) => {
if(!res) return
wx.config({
debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: [ // 用的方法都要加进来
'updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline'
]
});
CONFIG.getWxReady(imgUrl,title,desc)
})
}
}
}
config.js
export default {
// 判断机型 可不要
platform: (function() {
var nav = window.navigator;
var platform = {
"iphone": false,
"ipad": false,
"android": false,
"pc": false,
"ios": false,
"version": "0"
};
var ua = nav.userAgent;
var android = ua.match(/(Android)\s+([\d.]+)/);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
if (ipad) {
platform.ipad = ipad[1] && true || false;
platform.version = ipad[2] && ipad[2].replace(/-/g, ".") || "";
platform.ios = true;
} else if (iphone) {
platform.iphone = iphone[1] && true || false;
platform.version = iphone[2] && iphone[2].replace(/-/g, ".") || "";
platform.ios = true;
} else if (android) {
platform.android = android[1] && true || false;
platform.version = android[2];
} else {
platform.pc = true;
}
return platform;
})(),
//微信分享
getWxReady() {
// 一开始打印支持哪些方法
// wx.checkJsApi({
// jsApiList:['updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage'],
// success:function(res){
// console.log('checkJsApi -> res',res)
// }
// })
wx.ready(function() {
const url = window.location.href // 要取当前URL
// onMenuShareAppMessage 文档上说即将废弃，但是安装的这个weixin-jsapi版本只有这个可以用，不支持updateAppMessageShareData
//分享给朋友
if (wx.updateAppMessageShareData) {
wx.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// 设置成功
}
})
} else {
//分享给朋友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
success: function() {
// 用户点击了分享后执行的回调函数
}
})
}
if (wx.updateTimelineShareData) {
//分享到朋友圈
wx.updateTimelineShareData({
title: title, // 分享标题
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// 设置成功
}
});
} else {
wx.onMenuShareTimeline({
title: title, // 分享标题
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// 设置成功
}
})
}
// 分享QQ
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// 设置成功
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
})
})
}
}
微信二次分享bug集合