開發(fā)微信公眾號h5頁面，使用微信的東西。需要處理2點。
1、網頁授權拿的code，調用后端同學的接口，把code提交給后端，返回openId，進行業(yè)務處理。
2、使用JS-SDK的方法，必須先wx.config權限驗證通過后才能使用SDK方法。
微信公眾號配置問題
1、公眾號設置->功能設置->網頁授權域名和JS接口安全域名添加我們的域名，添加校驗文件。
2、接口權限->檢查自己使用的功能是否開通或者已開啟，比如位置授權和網頁授權。
3、基本配置->公眾號開發(fā)信息->IP白名單 添加ip白名單這里后端需要注意，不然服務端獲取的 access_token 會有問題。
一、網頁授權
網頁授權官網地址
業(yè)務梳理問題
1、進入頁面先判斷緩存中是否有用戶信息，如果沒有用戶信息，需要調用微信的網頁授權地址。
2、回調后，從url中獲取code參數(shù)。通過code調用后端接口，拿到openId,
3、獲取到openId,通過openId,調用后端接口獲取用戶信息，緩存用戶信息。
/*
this.appId 是微信公眾號的appId window.location.href 是當前的url地址 用戶微信回調打開，傳遞code。
1、window.location.replace 替換當前連接，打開微信授權地址https://open.weixin.qq.com/connect/oauth2/authorize
2、打開微信授權地址后，微信會打開回調我們的連接地址，把code拼接在后邊，
3、回調連接打開后，從url中獲取code。
*/
window.location.replace(
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=${encodeURIComponent(
`${window.location.href}`
)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
)
注意：如果使用vue項目，路由模式如果是hash模式，會存在問題，建議使用history模式。
二、微信JS-SDK wx.config權限校驗
// 權限驗證所需要的字段是通過調用后端接口獲取的。
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
如果微信權限校驗出現(xiàn)問題，建議查看 附錄5-常見錯誤及解決方法 根據(jù)自己報錯的情況檢查排查問題。
注意：安卓config校驗成功，ios失敗。解決辦法，ios記錄進入的第一個頁面地址，調用wx.config校驗時，傳第一次進入頁面的地址。
三、本地開發(fā)調試問題
下載微信開發(fā)者工具
因為網頁授權域名和JS接口安全域名不支持ip地址，所以我們使用網頁授權和SDK校驗就會受到限制，有兩個處理辦法。
1、申請微信公眾平臺接口測試帳號
無需公眾帳號、快速申請接口測試號
直接體驗和測試公眾平臺所有高級接口
使用測試帳號，網頁授權和sdk就不會校驗，直接能成功。我們本地開發(fā)調試大部分功能。
開發(fā)完成后，后續(xù)把測試賬號替換成我們的真實的微信公眾號信息。
如果涉及到支付問題，測試賬號是無法完成的。這個時候需要真實的微信公眾號。換成真實的微信公眾號，需要配置網頁授權域名和JS接口安全域名，調試可能每次修改代碼之后，就需要部署一次。很不方便。
2、內網穿透
使用 natapp 實現(xiàn)內網穿透。
在natapp平臺購買隧道，配置隧道，連接到我們本地項目地址，這個時候，我們就可以通過隧道的域名配置微信公眾號，配置成功后，我們可以本地開發(fā)，通過隧道域名訪問我們的本地項目。實現(xiàn)本地調試。
推薦閱讀 使用Natapp本地調試微信公眾號H5
