整理一下通過h5做微信分享相關配置。
流程介紹
- 公衆號配置（AppID、IP白名單、JS接口安全域名）
- 網頁授權
- JSSDK配置使用
1. 公衆號配置
登錄微信公衆號，獲取AppID，配置白名單，然後配置JS接口安全域名。
1.1 獲取AppID
登錄公衆號後，左側菜單欄選擇：開發 => 基本配置，直接複製開發者ID(AppID)即可：
1.2 配置白名單
注意使用公網IP
1.3 配置JS接口安全域名
左側菜單欄選擇：設置 => 公衆號設置：
2. 網頁授權
網頁授權主要是獲取微信openId使用，如果只是用分享操作，本步可以略過。
大致步驟是：
- 跳微信網頁授權鏈接
- 獲取code值
- 傳給後端，後端操作，得到用戶openId
2.1 網頁授權鏈接
在配置完前面AppId、白名單及安全域名後，開始處理網頁授權。
網頁授權這一塊兒內容主要是後端需要處理的內容較多，前端還是很簡單的，僅需要跳入微信鏈接即可。爲什麼要走這一步呢因爲有些操作，例如微信支付、播放微信錄音、獲取微信地址、微信卡券、商品、小店等等許多功能必須在微信瀏覽器彙總打開操作纔可以，因此需要跳入微信瀏覽器及微信鏈接來處理後續操作。當配置後，鏈接便只有在微信瀏覽器中打開纔會生效了，不然會提示：
鏈接如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect
參數分解
| 參數 | 值 | 備註 |
|---|---|---|
| appid | appid值 | 公衆號的唯一標識 |
| redirect_uri | urlEncode | 授權後重定向的回調鏈接地址， 請使用 urlEncode 對鏈接進行處理,要與1.3中配置的域名對應 |
| response_type | code | 應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到暱稱、性別、所在地。並且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ） |
| scope | snsapi_base | 重定向後會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節 |
| #wechat_redirect | 後綴 | 固定填寫即可,無論直接打開還是做頁面302重定向時候，必須帶此參數 |
可見，上面需要填入的變量有二，一個是前面回去的AppId，另外一個則是url，需要寫的是與配置域名所對應域名下的url，並且要進行urlEncode編碼處理使用。
2.2 獲取code值
在拿到上述完整鏈接後，通過window.location.href = ${url}進行網頁授權即可。在授權成功後，頁面會重定向到自己設置的url頁面去，然後在該連接上會有code值，取出即可：
// 取出code值
function getCode() {
let obj = {};
let url = window.location.search; // 從問號 (?) 開始的 URL（查詢部分
let str = url.substring(1,url.length); // 去掉問號
let arr = str.split('&'); // 以'&'分割爲數組
// 將所有參數搞成鍵值對形式放入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接口注入權限驗證配置
- 通過ready接口處理成功驗證
- 通過error接口處理失敗驗證
3.1 綁定域名
在步驟 1.3 中已經配置。
3.2 引入JS文件
在需要調用JS接口的頁面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
備註：支持使用 AMD/CMD 標準模塊加載方法加載
3.3 通過config接口注入權限驗證配置
配置需要如下幾個參數：
wx.config({
debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
appId: '', // 必填，公衆號的唯一標識
timestamp: '', // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '', // 必填，簽名
jsApiList: [], // 必填，需要使用的JS接口列表
});
那這些參數從哪兒來呢？依舊不用擔心，依然是交給後端處理，後端返回時間戳、隨機串及簽名，其他的自己配置即可。
通過後端獲取需要進行一個小交互，將此時的鏈接地址(window.location.href)傳給後端即可。
於是就有了上述的除了最後一個以外的所有參數。最後一個jsApiList則是寫分享接口，如我們想要分享到朋友圈、QQ、騰訊微博這3個，那就寫：
wx.config({
debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
appId: 'xxx', // 必填，公衆號的唯一標識
timestamp: 'xxx', // 必填，生成簽名的時間戳
nonceStr: 'xxx', // 必填，生成簽名的隨機串
signature: 'xxx', // 必填，簽名
jsApiList: ['checkJsApi,''updateTimelineShareData','updateAppMessageShareData','onMenuShareWeibo'], // 必填，需要使用的JS接口列表
});
可以發現，我們其實多配置了一個checkJsApi，這個是一個判斷配置，可以判斷當前客戶端版本是否支持指定JS接口。
3.4 通過ready接口處理成功驗證
接下來就可以寫分享信息配置了。配置信息一般都是通過wx.ready處理的:
wx.ready(function(){
// config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
例如我們要分享到朋友圈，配置則如下：
// 需在用戶可能點擊分享按鈕前就先調用，在不影響資源處理的情況下儘早配置即可
wx.ready(function () {
wx.updateAppMessageShareData({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 操作成功後要做的事兒
}
})
});
注意：不要出現誘導分享
3.5 通過error接口處理失敗驗證
同樣，一般都是通過wx.error處理失敗相關信息：
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
});
小結
其實微信分享（地理位置、掃一掃、卡券等微信各類接口）都是通過上述步驟配置的，可舉一反三，在面對不同需求時通過微信開發文檔來進行更爲複雜的操作。