公眾號
為識別用戶，每個用戶對每個公眾號有一個唯一的OpenID澎语，如果要在多個公眾號途事、移動應(yīng)用之間做用戶互通验懊，則需前往開放平臺，將它們綁定到同一開放平臺賬號下尸变，綁定后义图，一個用戶雖然對多個公眾號和應(yīng)用有多個不同的OpenID，但是只有一個唯一的UnionID召烂，可以通過獲取 用戶信息 中的 UnionID 來區(qū)分用戶的唯一性碱工。
公眾號主要通過 公眾號消息會話 和 公眾號內(nèi)網(wǎng)頁 來為用戶提供服務(wù)。
公眾號分為 訂閱號奏夫、服務(wù)號 和 企業(yè)號怕篷。
訂閱號 和 服務(wù)號 的區(qū)別：
- 功能使用：服務(wù)號比訂閱號可使用的更多的功能，訂閱號只能使用大部分功能酗昼，已認(rèn)證的服務(wù)號可使用全部功能廊谓；
- 群發(fā)消息的能力：訂閱號每天可以發(fā)送一條群發(fā)消息，服務(wù)號為每月4次麻削；
- 適用群體：訂閱號適用于個人和媒體蒸痹，服務(wù)號適用于企業(yè)、政府或其他組織呛哟；
獲取access_token
access_token是公眾號的全局唯一接口調(diào)用憑據(jù)电抚，公眾號調(diào)用各接口時都需使用access_token。
這里access_token的獲取只需服務(wù)端調(diào)用微信接口獲取并存儲即可竖共，無需前端通過接口調(diào)用蝙叛。
網(wǎng)頁授權(quán)
網(wǎng)頁授權(quán)流程（詳細(xì)流程可查看 微信公眾號開發(fā)文檔），以Vue項目為例：
- 初次進(jìn)入頁面時先訪問微信授權(quán)頁面進(jìn)行授權(quán)公给，獲取code借帘；
<!-- App.vue -->
<script>
import { weChatConfig } from "utils/weChatConfig";
export default {
async created() {
// 獲取url上的參數(shù)
const params = getUrlParams(window.location.href);
// 通過是否已經(jīng)獲取到用戶openid，或者是url上是否攜帶了code參數(shù)來判斷是否需要進(jìn)行授權(quán)操作
// 授權(quán)成功頁面回調(diào)時redirect_uri/?code=CODE&state=STATE會在url上攜帶相關(guān)的參數(shù)
if (!getSessionItem(process.env.VUE_APP_STORAGE_OPENID) && !params.code) {
// 授權(quán)回調(diào)地址需要進(jìn)行 urlEncode 處理
const backUrl = encodeURIComponent(`${window.location.protocol}//${window.location.host}`);
// 授權(quán)成功后可在回調(diào)地址中通過state添加參數(shù)淌铐，最多128字符
const backParmas = JSON.stringify(params);
// process.env.VUE_APP_AUTH_URL = https://open.weixin.qq.com/connect/oauth2/authorize
// 如果無需獲取用戶信息肺然，此處使用靜默授權(quán)scope=snapi_base即可
window.location.href = `${process.env.VUE_APP_AUTH_URL}?appid=${process.env.VUE_APP_APPID}&redirect_uri=${backUrl}&response_type=code&scope=snsapi_base&state=${backParmas}#wechat_redirect`;
return;
}
/* 授權(quán)完成后可調(diào)用服務(wù)端接口獲取用戶openid */
if (params.code) {
// 將授權(quán)回調(diào)回來的code傳給服務(wù)端進(jìn)行openid的獲取
const result = await Api.getOpenid({
code: params.code
});
setSessionItem(process.env.VUE_APP_STORAGE_OPENID, result.openid); // 緩存openid
// 調(diào)用服務(wù)端接口獲取簽名，進(jìn)行JS-SDK的初始化
Api.getWechatConfig({
url: window.location.host
}).then(res=> {
const { timestamp, nonceStr, signature } = res.data;
weChatConfig({
timestamp: parseInt(timestamp),
nonceStr,
signature
});
});
}
}
};
</script>
<!-- wechatConig.js -->
export function weChatConfig({
timestamp,
nonceStr,
signature
}) {
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來腿准，若要查看傳入的參數(shù)际起，可以在pc端打開，參數(shù)信息會通過log打出吐葱，僅在pc端時才會打印街望。
appId: process.env.VUE_APP_APPID, // 必填，公眾號的唯一標(biāo)識
timestamp, // 必填弟跑，生成簽名的時間
nonceStr, // 必填灾前，生成簽名的隨機(jī)串
signature, // 必填，簽名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'], // 必填孟辑，需要使用的JS接口列表
});
}
注意：
- 由于同一個開放平臺可綁定多個移動應(yīng)用哎甲，一個用戶對多個公眾號或移動應(yīng)用有多個openid蔫敲，因此openId建議使用sessionStorage進(jìn)行存儲，而不使用localStorage炭玫；
- 測試帳號只能對關(guān)注者網(wǎng)頁授權(quán)奈嘿，因此在使用測試賬號掃碼直接進(jìn)入網(wǎng)頁進(jìn)行授權(quán)時，會出現(xiàn)未關(guān)注測試號微信登錄失敗的彈窗提示吞加，正式帳號可以對未關(guān)注者授權(quán)指么，因此可以忽略此問題；
image.png
- 授權(quán)成功榴鼎，通過code換取網(wǎng)頁授權(quán)access_token和openid：
這里通過code換取的是一個特殊的網(wǎng)頁授權(quán)access_token，與基礎(chǔ)支持的access_token不同（該access_token用于調(diào)用其他接口晚唇，區(qū)別可查看獲取基礎(chǔ)access_token）巫财，如果網(wǎng)頁授權(quán)的作用域為snsapi_base，則本步驟中獲取到網(wǎng)頁授權(quán)access_token的同時哩陕，也獲取到了openid平项。
由于公眾號的secret和獲取到的access_token安全級別都非常高，必須只保存在服務(wù)器悍及，不允許傳給客戶端闽瓢。后續(xù)刷新access_token、通過access_token獲取用戶信息等步驟心赶，也必須從服務(wù)器發(fā)起扣讼。
測試號申請
掃碼 公眾平臺測試號申請，填寫相應(yīng)的配置：
image.png
注意：
- 這里的URL缨叫，需要服務(wù)端提供一個完整的接口路徑椭符；
- 為方便調(diào)試，JS接口安全域名支持配置本地IP地址耻姥，但訪問頁面時的端口號必須是80端口销钝，否則在頁面進(jìn)行授權(quán)時會報redirect_uri參數(shù)錯誤；
<!-- vue.config.js -->
module.exports = {
devServer: {
port: 80 // 指定端口號為80端口
}
};
-
配置授權(quán)回調(diào)頁面域名：
image.png此處同樣支持配置本地IP地址琐簇，但端口號也只能是80端口
微信公眾平臺接口調(diào)試工具
利用 微信公眾平臺接口調(diào)試工具 進(jìn)行相關(guān)的配置蒸健。
image.png
access_token由服務(wù)端提供。
image.png
微信瀏覽器緩存清理
微信瀏覽器是在webview的上層做的緩存：如果請求過了這個地址婉商，就會存在本地似忧，之后不取線上了。因此在做公眾號網(wǎng)頁開發(fā)時經(jīng)常要做瀏覽器緩存的清理：
- 用微信內(nèi)置瀏覽器打開這個網(wǎng)頁debugx5.qq.com或http://debugtbs.qq.com/丈秩；
-
勾選相應(yīng)的緩存清理
image.png
