这几天公司需要做一个微信分享功能 把自己踩坑到实现功能真是不容易啊，话不多说。先讲开始
1、公众号配置：
如果你们的公众号有专人保管，那么跟他说把安全域名加一下，安全域名用于微信的验证，没有这一步操作，下面的都白搭。比如我们的测试公众号，绑定的就是我们测试服务器的域名。同理，生产也是如此。
2、后端配置VUE:
要想使用微信的JS-SDK功能，需要生成签名，配合appId才能使用，这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名，反正你找后端同学就对了。
3、前端配置
终于轮到我们前端上场了，啰嗦了那么多，下面让我们正式起飞。
3.1安装微信JS-SDK
首先我们通过npm 安装 微信的js-sdk，当然你也可以在index.html页面中直接加
npm install weixin-js-sdk --save
3.2微信JS-SDK初始化
接着，我们写一个微信初始化的方法，用来初始化微信的JS-SDK。该方法接受一个参数，用于传入后续调用的微信功能（如分享，获取地理位置等等）。因为微信的签名等数据是由后端同学生成的，所以我们需要通过ajax来获取这些数据。
在获取到后端同学的数据之后，我们调用wx.config方法，来校验是否可以使用微信的JS-SDK。注意，jsApiList是用来配置可以注册哪些微信功能的，这里举例了2个，一个是分享给朋友，一个是分享到朋友圈，其他功能请到微信JS-SDK文档中自行查看。之后我们调用wx.ready方法，用来处理验证成功后的事件。
以上是copy简书作者 小太阳可可 的 因为 配置都一样，所以没啥自己要写的
链接：https://www.jianshu.com/p/d7f71883806f
新的注意
因为js安全域名配置问题，跟后端争了无数回 ，最后还是浪费了两次机会，因为我们公司是用svn 然后前后端代码是分离的，最坑的是后端一个服务器，前端一个服务器，导致最后功能测试都是报错 签名未生效
只有三次机会 别乱试，一定要按照文档要求配置！！！！！！
上源码
这是html部分
<div class="banner-footer" v-if="$store.state.token" @click="copy()">
<img :src="footer.imagesUrl" alt=" " >
</div>这是功能部分 写在mounted生命周期里面，created也可，看自己喜好 首先在需要使用的页面先引入
import wx from "weixin-js-sdk";在mounted生命周期里面 调接口，接口封装的这个我就不用多说了把，按照正常你做项目的时候那也封装接口，引入、使用
// 微信分享 （HttpChatShare 这是接口，我取的名字而已，别在意）
HttpChatShare().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: [
"updateAppMessageShareData",
"updateTimelineShareData"
] // 必填，需要使用的JS接口列表
});
/**
* 通过ready接口处理成功验证
* config信息验证成功后会执行ready方法
* 需在用户可能点击分享按钮前就先调用
*/
wx.ready(function() {
//
let imgs = "https://project-1259069896.cos.ap-chengdu.myqcloud.com/Assistance.png", //图片貌似只能用有安全域名的图片，本地不行。
links = location.href.split('#')[0]; // 分享链接
// let user_id = sessionStorage.getItem('user_id')
// let join_code = sessionStorage.getItem('user_code')
let shareData = {
title: "哈哈哈哈哈哈",
desc: "呵呵呵呵呵呵呵呵呵",
link: links + '#/Allowinvite' + '?user_id=' + this.userId + '&join_code=' + this.joinCode,//分享的url是两个接口不同字段的拼接，怎么获取接口字段拼接这个就不用我说了把！！！！
imgUrl: imgs
};
//调试，需单独处理回调使用 打包测试
wx.updateAppMessageShareData({
// 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
title: "哈哈哈哈哈哈", // 分享标题
desc: "呵呵呵呵呵呵呵呵呵", // 分享描述
link: links + '#/Allowinvite' + '?user_id=' + this.userId + '&join_code=' + this.joinCode, // 测试 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgs, // 分享图标
// 用户确认分享后执行的回调函数
// 取消
cancel() {
// 用户取消分享后执行的回调函数
alert("分享给朋友取消");
},
success() {
// alert("分享给朋友成功");
},
// 失败
fail(res) {
// alert("分享给朋友失败");
// alert(JSON.stringify(res));
}
});
wx.updateTimelineShareData({
//分享朋友圈
shareData, //直接调用配置好的参数 其实分享给朋友也可以这样写，
success() {
// 用户确认分享后执行的回调函数
// alert("成功");
},
cance() {
// 用户取消分享后执行的回调函数
alert("取消");
},
fail(res) {
// alert(JSON.stringify(res));
}
});
});
wx.error(res => {
//通过error接口处理失败验证
// config信息验证失败会执行error函数
console.log(res);
});
});大概功能就这样写，html那边有个点击事件，其实就是为了增加点效果，判断下浏览器的，并没有多大用处，因为我这个不是小程序，类似混合开发，ps：接口项目。。所以要做浏览器判断，也不妨分享出来看
copy() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
let ua = window.navigator.userAgent.toLowerCase(); //判断是否是微信
//判断是否Opera浏览器
if (isOpera) {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
//判断是否Firefox浏览器
else if (userAgent.indexOf("Firefox") > -1) {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
}
//判断是否chorme浏览器
else if (userAgent.indexOf("Chrome") > -1) {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
}
//判断是否Safari浏览器
else if (userAgent.indexOf("Safari") > -1) {
return this.$confirm('邀请链接已复制，可直接发送至聊天窗口', '邀请分享', {
customClass: 'message-logout',
}).then(() => {
// 唤起微信app
window.location.href="weixin://";
}).catch(() => {})
}
//判断是否IE浏览器
else if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
}
//判断是否Edge浏览器
else if (userAgent.indexOf("Trident") > -1) {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
} else if(ua.match(/MicroMessenger/i) == "micromessenger") {
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
}else{
//这边效果自己写
// 唤起微信app
return window.location.href="weixin://";
}
},打完收工，不清楚的可以私聊我
