@
目錄- 一、前置準備-注冊配置測驗賬號
- 1.注冊測驗號
- 2、配置網頁回掉域名
- 二、H5 獲取授權資訊
- 1、微信授權分為靜默授權（snsapi_base）和非靜默授權（snsapi_userinfo）
- 2、代碼實作
Tips：因為申請公眾號需要 ￥300， so 我用的是測驗號，【白嫖永遠不虧】
需要注意的是 測驗號是和個人微信號關聯起來的，不是公眾號主體關聯，，也就是每個人都可以申請，而不是必須有公眾號主題才可以，測驗號和公眾號是獨立的，
一、前置準備-注冊配置測驗賬號
1.注冊測驗號
去微信公眾平臺注冊一個測驗號，注意這是測驗賬號【白嫖的快樂】你會進入到這個界面，會生成測驗用的appid 讓你測驗授權，記下來等會要用，
2、配置網頁回掉域名
還是這個界面往下滑 你會看到 一個，體驗介面權限表
在這個表的 【網頁服務】- 【網頁賬號】- 【網頁授權獲取用戶基本資訊】這一項 點擊【修改】按鈕
點擊按鈕會讓你 設定網頁回呼域名 無需以"http://"開頭，直接寫域名就可以,例如 "aa.bb.com"，
因為是開發除錯， 所以我們需要用手機連接電腦啟動的H5服務，你可以把這個路徑寫成自己啟動的H5 專案的服務地址，然后在手機上訪問，具體怎么訪問的流程之后會講，我這邊填寫的就是我啟動的H5服務地址，
end：到這里就已經可以進行授權了，其他的一些功能就不嘰歪了，
二、H5 獲取授權資訊
1、微信授權分為靜默授權（snsapi_base）和非靜默授權（snsapi_userinfo）
我選擇的是靜默授權
靜默授權流程：以snsapi_base為scope發起網頁授權得到code，再用公眾號的appid和secret獲取微信公眾號的全域唯一憑證access_token，然后用拿到的access_token呼叫公眾號的“用戶管理介面”中的“獲取用戶資訊介面”獲得unionID，
前端需要做的是以snsapi_base為scope發起網頁授權得到code，呼叫后臺介面獲取unionId
2、代碼實作
廢話不多說上代碼：
URl就是你上面配置的 那個路徑 這里 是使用當前獲取授權的 界面地址，我們用的是測驗號， 所以你上面 配置了什么路徑就在這里用什么路徑，這樣直接獲取當前界面的路徑 我沒試也不知道測驗號行不行，小伙伴們可以嘗試一下
getBaseInfos() {
if (this.isWeiXin()) {
const code = this.getUrlParam("code"); // 截取路徑中的code
if (code == null || code === "") {
let url = sessionStorage.getItem("originUrl");
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申請的appkey&redirect_uri=" +
encodeURIComponent(url) +
"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
} else {
///
///暫時不知道怎么寫不是微信瀏覽器怎么搞，
///
}
if (code != "" && code != null) {
this.wxCode = code;
console.log(code)
//這里就是把code給服務端了，沒我們的事啦，【撒花】
this.getOpenid(code)
}
} else {
}
},
//判斷是不是微信瀏覽器，
isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
},
// 編碼函式
getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標引數的正則運算式物件
var r = window.location.search.substr(1).match(reg); //匹配目標引數
if (r != null) return unescape(r[2]);
return null; //回傳引數值
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/498851.html
標籤：HTML5
上一篇：JS 從螢屏上下左右滑入滑出效果
下一篇：HTML詳解