公衆号 H5 測試号 注冊 和 授權 擷取code 前端部分

@

目錄

• 一、前置準備-注冊配置測試賬号
  • 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; //傳回參數值
},