1、應(yīng)用框架為Vue、history模式
2、注意：
2-1、微信jssdk應(yīng)用：通過命令配置依賴包"weixin-js-sdk": "^1.2.0"會報(bào)錯(cuò)_wx.onMenuShareWechat is not a function，解決方法：去掉命令安裝的jssdk的包，在index.html中引入CDN鏈接
index.html
<!-- 引入微信js-sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2-2、企業(yè)微信中調(diào)用wx.config方法 appId傳的參數(shù)值是企業(yè)微信的corpID
wx.config({
beta: true,// 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題
debug: wxOpt.debug, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
appId: localStorage.getItem('corpId'), // 必填，企業(yè)微信的corpID
timestamp: sign.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: sign.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: sign.signature,// 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法
jsApiList: wxOpt.jsApis // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進(jìn)來
});
2-3、獲取簽名需要的頁面url不需要做另外處理（安卓和ios都是去當(dāng)前頁url，微信公眾號ios必須取落地頁的url）
export function getWxSign(cb) {
if (localStorage.getItem('appid')) {
// 根據(jù)微信要求獲取簽名的算法要在服務(wù)器端實(shí)現(xiàn)。由后端給出接口,前端傳遞 隨機(jī)字符串、分享鏈接、時(shí)間戳、公眾號code名稱
// 公眾號的code是為了尋找到當(dāng)前的公眾號的token從而獲取簽名
// 后端會處理token，因?yàn)閠oken是2小時(shí)就過期，謹(jǐn)記如果過期就再請求一次刷新token
if (localStorage.getItem('userAgent') === 'corpWechat') {
// 企業(yè)微信
// 企業(yè)微信邏輯 安卓和ios上獲取簽名的地址一致
let signLink = document.location.href.split('#')[0]
signLink = encodeURIComponent(signLink).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
get(`/api/wechat/cp/portal/${localStorage.getItem('agentId')}/jsSign?url=${signLink}`, {}, {}, handleJsSignErr).then(rsp => {
let sign = rsp.data;
// if (cb && typeof cb === "function") {
console.log('signature: ', sign)
wx.config({
beta: true,// 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會有問題
debug: wxOpt.debug, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
appId: localStorage.getItem('corpId'), // 必填，企業(yè)微信的corpID
timestamp: sign.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: sign.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: sign.signature,// 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法
jsApiList: wxOpt.jsApis // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進(jìn)來
});
wx.ready(() => {
setTimeout(() => {
if (cb && typeof cb === "function") {
console.log("ready");
cb(wx);
}
});
}, 500);
wx.error(function(res) {
console.log('config err: ', res);
});
});
} else {
// 微信
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
let signLink
if (isiOS) {
signLink = window.entryUrl
} else {
signLink = document.location.href.split('#')[0]
}
signLink = encodeURIComponent(signLink).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
get(`/wechat/server/response/get_js_sign?url=${signLink}`, { appid: localStorage.getItem('appid') }, {}, handleJsSignErr).then(rsp => {
let sign = rsp.data;
// if (cb && typeof cb === "function") {
console.log('signature2: ', sign)
wx.config({
debug: wxOpt.debug, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
appId: localStorage.getItem('appid'), // 必填，公眾號的唯一標(biāo)識
timestamp: sign.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: sign.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: sign.signature, // 必填，簽名，見附錄1
jsApiList: wxOpt.jsApis2, // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline',
'showOptionMenu',
"showMenuItems",
"showAllNonBaseMenuItem",
"hideAllNonBaseMenuItem"
]
});
wx.ready(() => {
setTimeout(() => {
if (cb && typeof cb === "function") {
console.log("ready");
cb(wx);
}
});
}, 500);
wx.error(function(res) {
console.log('config err: ', res);
});
});
}
}
}
3、分享接口應(yīng)用場景
3-1、獲取“轉(zhuǎn)發(fā)”、“微信”、“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口 【具體作用：控制頁面左上角菜單按鈕的顯示】
效果如下：
3-2、自定義轉(zhuǎn)發(fā)到會話、自定義轉(zhuǎn)發(fā)到微信【應(yīng)用場景：頁面自定義按鈕，點(diǎn)擊調(diào)用該方法調(diào)取微信會話列表，或者企業(yè)微信的會話列表；具體作用：選擇好友即可分享】
效果如下：
點(diǎn)擊按鈕：
自定義轉(zhuǎn)發(fā)到會話的效果：
自定義轉(zhuǎn)發(fā)到微信的效果：
3-3、將H5頁面通過個(gè)人群發(fā)發(fā)送給客戶和將H5頁面通過群發(fā)助手發(fā)送給客戶群
點(diǎn)擊的按鈕：
將H5頁面通過個(gè)人群發(fā)發(fā)送給客戶效果：
將H5頁面通過群發(fā)助手發(fā)送給客戶群效果：
4、wx.config方法的調(diào)用：
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對于變化url的SPA（single-page application）的web app可在每次url變化時(shí)進(jìn)行調(diào)用）。
5、wx.ready方法的調(diào)用：
config信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
