1、公众号配置：
如果你们的公众号有专人保管，那么跟他说把安全域名加一下，安全域名用于微信的验证，没有这一步操作，下面的都白搭。比如我们的测试公众号，绑定的就是我们测试服务器的域名。同理，生产也是如此。
2、后端配置VUE:
要想使用微信的JS-SDK功能，需要生成签名，配合appId才能使用，这些步骤通常是由后端生成的。这里省去3000字描述如何生成签名，反正你找后端同学就对了。
3、前端配置
终于轮到我们前端上场了，啰嗦了那么多，下面让我们正式起飞。
3.1安装微信JS-SDK
首先我们通过npm 安装 微信的js-sdk，当然你也可以在index.html页面中直接加<script>引用，哪种方式都可以。
npm install weixin-js-sdk --save
3.2微信JS-SDK初始化
接着，我们写一个微信初始化的方法，用来初始化微信的JS-SDK。该方法接受一个参数，用于传入后续调用的微信功能（如分享，获取地理位置等等）。因为微信的签名等数据是由后端同学生成的，所以我们需要通过ajax来获取这些数据。
在获取到后端同学的数据之后，我们调用wx.config方法，来校验是否可以使用微信的JS-SDK。注意，jsApiList是用来配置可以注册哪些微信功能的，这里举例了2个，一个是分享给朋友，一个是分享到朋友圈，其他功能请到微信JS-SDK文档中自行查看。之后我们调用wx.ready方法，用来处理验证成功后的事件。
wxRegister (callback) {
let shareParam = {
url: window.location.href.split("#")[0]
};
$.ajax({
type: "post",
url: share_path,
data: shareParam,
cache: false,
dataType: 'json',
success: function (data) {
if(data.code == 200) {
let appId = data.data.appId;
let nonceStr = data.data.nonceStr;
let signature = data.data.signature;
let timestamp = data.data.timestamp;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
}
},
error: function (data) {
//alert("请求异常");
}
//async: false
});
wx.ready(function (){
// 如果需要定制ready回调方法
if (callback) {
callback()
}
})
},
3.3微信分享到朋友圈
初始化之后，我们接着往下写，这里拿分享到朋友圈举例。写一个方法，用来调用微信的分享朋友圈。因为不同的页面分享的内容不一样，成功或者失败后的回调函数也不同，所以我们这里做个简单配置。传一个参数。
ShareTimeline (opstion) {
//分享给朋友
wx.onMenuShareAppMessage({
title: opstion.title, // 分享标题
link: opstion.link, // 分享链接
imgUrl: opstion.imgUrl, // 分享图标
desc: opstion.dec, // 分享描述
success () {
opstion.success()
},
cancel () {
opstion.error()
}
});
wx.onMenuShareTimeline({
title: opstion.title, // 分享标题
link: opstion.link, // 分享链接
imgUrl: opstion.imgUrl, // 分享图标
desc: opstion.dec, // 分享描述
success () {
opstion.success()
},
cancel () {
opstion.error()
}
})
}
3.4页面中调用微信功能
通过以上代码，我们封装了一个简单的微信JS-SDK功能，那么在页面中如何调用这些封装好的方法呢。首先我们编写一个方法用来作为wx.ready中的callback，然后在通过配置opstion的方式，将自定义信息注入到之前封装好的通用分享方法中。实现随用随调，灵活配置的微信功能。
wxShareTimeline () {
let opstion = {
title: '药渡药神', // 分享标题
link: window.location.href+"?home=1",
imgUrl: share_img,// 分享图标
dec:'寻找希望，战胜病魔，药渡药神竭诚为您服务',
success: function () {
},
error: function () {
}
}
// 将配置注入通用方法
wxApi.ShareTimeline(opstion)
},
