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咪橙。該方法接受一個參數虚倒，用于傳入后續(xù)調用的微信功能（如分享，獲取地理位置等等）魂奥。因為微信的簽名等數據是由后端同學生成的，所以我們需要通過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:'尋找希望拭荤，戰(zhàn)勝病魔，藥渡藥神竭誠為您服務',
success: function () {
},
error: function () {
}
}
// 將配置注入通用方法
wxApi.ShareTimeline(opstion)
},
