整理一下通過h5做微信分享相關(guān)配置烫扼。
流程介紹
- 公眾號配置（AppID姻政、IP白名單浩考、JS接口安全域名）
- 網(wǎng)頁授權(quán)
- JSSDK配置使用
1. 公眾號配置
登錄微信公眾號婶肩，獲取AppID，配置白名單说搅，然后配置JS接口安全域名炸枣。
1.1 獲取AppID
登錄公眾號后，左側(cè)菜單欄選擇：開發(fā) => 基本配置，直接復(fù)制開發(fā)者ID(AppID)即可：
1.2 配置白名單
注意使用公網(wǎng)IP
1.3 配置JS接口安全域名
左側(cè)菜單欄選擇：設(shè)置 => 公眾號設(shè)置：
2. 網(wǎng)頁授權(quán)
網(wǎng)頁授權(quán)主要是獲取微信openId使用抛虏，如果只是用分享操作博其，本步可以略過。
大致步驟是：
- 跳微信網(wǎng)頁授權(quán)鏈接
- 獲取code值
- 傳給后端迂猴，后端操作慕淡，得到用戶openId
2.1 網(wǎng)頁授權(quán)鏈接
在配置完前面AppId、白名單及安全域名后沸毁，開始處理網(wǎng)頁授權(quán)峰髓。
網(wǎng)頁授權(quán)這一塊兒內(nèi)容主要是后端需要處理的內(nèi)容較多，前端還是很簡單的息尺，僅需要跳入微信鏈接即可携兵。為什么要走這一步呢因為有些操作，例如微信支付搂誉、播放微信錄音徐紧、獲取微信地址、微信卡券炭懊、商品并级、小店等等許多功能必須在微信瀏覽器匯總打開操作才可以，因此需要跳入微信瀏覽器及微信鏈接來處理后續(xù)操作侮腹。當(dāng)配置后嘲碧，鏈接便只有在微信瀏覽器中打開才會生效了，不然會提示：
鏈接如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect
參數(shù)分解
| 參數(shù) | 值 | 備注 |
|---|---|---|
| appid | appid值 | 公眾號的唯一標(biāo)識 |
| redirect_uri | urlEncode | 授權(quán)后重定向的回調(diào)鏈接地址父阻， 請使用 urlEncode 對鏈接進(jìn)行處理,要與1.3中配置的域名對應(yīng) |
| response_type | code | 應(yīng)用授權(quán)作用域愈涩，snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)加矛，只能獲取用戶openid）履婉，snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱斟览、性別谐鼎、所在地。并且趣惠， 即使在未關(guān)注的情況下，只要用戶授權(quán)身害，也能獲取其信息 ） |
| scope | snsapi_base | 重定向后會帶上state參數(shù)味悄，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié) |
| #wechat_redirect | 后綴 | 固定填寫即可,無論直接打開還是做頁面302重定向時候塌鸯，必須帶此參數(shù) |
可見侍瑟，上面需要填入的變量有二，一個是前面回去的AppId，另外一個則是url涨颜，需要寫的是與配置域名所對應(yīng)域名下的url费韭，并且要進(jìn)行urlEncode編碼處理使用。
2.2 獲取code值
在拿到上述完整鏈接后庭瑰，通過window.location.href = ${url}進(jìn)行網(wǎng)頁授權(quán)即可星持。在授權(quán)成功后，頁面會重定向到自己設(shè)置的url頁面去弹灭，然后在該連接上會有code值督暂，取出即可：
// 取出code值
function getCode() {
let obj = {};
let url = window.location.search; // 從問號 (?) 開始的 URL（查詢部分
let str = url.substring(1,url.length); // 去掉問號
let arr = str.split('&'); // 以'&'分割為數(shù)組
// 將所有參數(shù)搞成鍵值對形式放入obj對象
for(let i = 0; i < arr.length; i ++){
obj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
}
if(obj.code) {
return obj.code;
}
}
getCode();
2.3 換取openId
將拿到的code值傳給后端即可，看具體需求決定是否前端使用openId穷吮，如果非必要則不在前端獲取保存或者由后端加密后傳給前端使用逻翁。
3. JSSDK配置使用
大致分為五個步驟：
- 綁定域名
- 引入JS文件
- 通過config接口注入權(quán)限驗證配置
- 通過ready接口處理成功驗證
- 通過error接口處理失敗驗證
3.1 綁定域名
在步驟 1.3 中已經(jīng)配置。
3.2 引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
3.3 通過config接口注入權(quán)限驗證配置
配置需要如下幾個參數(shù)：
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來捡鱼，若要查看傳入的參數(shù)八回，可以在pc端打開，參數(shù)信息會通過log打出驾诈，僅在pc端時才會打印缠诅。
appId: '', // 必填，公眾號的唯一標(biāo)識
timestamp: '', // 必填翘鸭，生成簽名的時間戳
nonceStr: '', // 必填滴铅，生成簽名的隨機串
signature: '', // 必填，簽名
jsApiList: [], // 必填就乓，需要使用的JS接口列表
});
那這些參數(shù)從哪兒來呢汉匙？依舊不用擔(dān)心，依然是交給后端處理生蚁，后端返回時間戳噩翠、隨機串及簽名，其他的自己配置即可邦投。
通過后端獲取需要進(jìn)行一個小交互伤锚，將此時的鏈接地址(window.location.href)傳給后端即可。
于是就有了上述的除了最后一個以外的所有參數(shù)志衣。最后一個jsApiList則是寫分享接口屯援，如我們想要分享到朋友圈、QQ念脯、騰訊微博這3個狞洋，那就寫：
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)绿店，可以在pc端打開吉懊，參數(shù)信息會通過log打出庐橙，僅在pc端時才會打印。
appId: 'xxx', // 必填借嗽，公眾號的唯一標(biāo)識
timestamp: 'xxx', // 必填态鳖，生成簽名的時間戳
nonceStr: 'xxx', // 必填，生成簽名的隨機串
signature: 'xxx', // 必填恶导，簽名
jsApiList: ['checkJsApi,''updateTimelineShareData','updateAppMessageShareData','onMenuShareWeibo'], // 必填浆竭，需要使用的JS接口列表
});
可以發(fā)現(xiàn)，我們其實多配置了一個checkJsApi甲锡，這個是一個判斷配置兆蕉，可以判斷當(dāng)前客戶端版本是否支持指定JS接口。
3.4 通過ready接口處理成功驗證
接下來就可以寫分享信息配置了缤沦。配置信息一般都是通過wx.ready處理的:
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法虎韵，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作缸废，所以如果需要在頁面加載時就調(diào)用相關(guān)接口包蓝，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口企量，則可以直接調(diào)用测萎，不需要放在ready函數(shù)中。
});
例如我們要分享到朋友圈届巩，配置則如下：
// 需在用戶可能點擊分享按鈕前就先調(diào)用硅瞧，在不影響資源處理的情況下盡早配置即可
wx.ready(function () {
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function () {
// 操作成功后要做的事兒
}
})
});
注意：不要出現(xiàn)誘導(dǎo)分享
3.5 通過error接口處理失敗驗證
同樣恕汇，一般都是通過wx.error處理失敗相關(guān)信息：
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)腕唧，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看瘾英，也可以在返回的res參數(shù)中查看枣接，對于SPA可以在這里更新簽名。
});
小結(jié)
其實微信分享（地理位置缺谴、掃一掃但惶、卡券等微信各類接口）都是通過上述步驟配置的，可舉一反三湿蛔，在面對不同需求時通過微信開發(fā)文檔來進(jìn)行更為復(fù)雜的操作膀曾。
