微信公眾號測試號內網配置以及微信網頁授權

內網下載方式以及代理：https://natapp.cn/

我這里用的是natapp，其他代理工具可以自行百度就不多說了。

申請一個賬號然后頁面如下：

 

然后點擊購買隧道

 

 

 

 

 申請完畢后就跟我上面一樣有一條隧道了，然后點擊最右側得到界面進行配置：

 

 

 

請注意你的authtoken碼，還沒完，接着看下面：

 

點擊客戶端下載，選擇你的系統以及版本

 

我這里只講解windows，下載完畢后雙擊natapp.exe，會有一個運行的命令窗口。

 

 

此時這里會出現報錯，接着來（我們需要下載一個文件config.ini）

無法上傳文件，貼文件內容:

#將本文件放置於natapp同級目錄 程序將讀取 [default] 段
#在命令行參數模式如 natapp -authtoken=xxx 等相同參數將會覆蓋掉此配置
#命令行參數 -config= 可以指定任意config.ini文件
[default]
authtoken=                      2f0eef7f83382cf3
clienttoken=                    #對應客戶端的clienttoken,將會忽略authtoken,若無請留空,
log=none                        #log 日志文件,可指定本地文件, none=不做記錄,stdout=直接屏幕輸出 ,默認為none
loglevel=ERROR                  #日志等級 DEBUG, INFO, WARNING, ERROR 默認為 DEBUG
http_proxy=                     #代理設置 如 http://10.123.10.10:3128 非代理上網用戶請務必留空

 

雙擊打開這個文件並把這個文件放置在natapp.exe同級目錄下

 

 

然后重新雙擊natapp.exe

 

微信公眾號測試號申請

 

首先申請一個微信公眾平台賬號並登陸。

地址:https://mp.weixin.qq.com/

然后 開發 > 開發者工具 >公眾平台測試賬號，掃描二維碼用自己的公眾號申請一個測試號。

申請完測試號頁面

 

 然后把當前頁面往下拉，找到

 

 

下一步在當前頁面掃描測試號二維碼，會有一個測試號公眾號點擊關注，但是頁面上什么操作都沒有。

 

 

 

所以要進入我們的菜單生成接口調用：找到在線接口調試工具

 

 

 

填入appid以及secret。這兩個參數就是測試號頁面的兩個參數，復制粘貼：

 

生成自定義菜單

 

 

{
    "button": [
        {
            "name": "我的服務", 
            "sub_button": [
                {
                    "type": "view", 
                    "name": "個人中心", 
                    "url": ""
                }, 
                {
                    "type": "view", 
                    "name": "下單", 
                    "url": ""
                }, 
                {
                    "type": "view", 
                    "name": "我的訂單", 
                    "url": ""
                }, 
                {
                    "type": "view", 
                    "name": "發票管理", 
                    "url": ""
                }
            ]
        }
    ]
}

 

最后掃描二維碼可以看見菜單：

 

 

最后就是微信授權這一塊了，目前我們可以通過菜單的按鈕打開我們的項目了：

先找到我們的公眾號設置js接口安全域名：

 

 

 

回到我們的測試號頁面：

 

 

 然后我們可以把下面的地址在微信里打開，可以看見授權窗口的彈出：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=123456&redirect_uri=132465&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

 

注意事項：

接下來上頁面代碼：

 created() {
    // 檢測是瀏覽器端還是微信端
    let ua = navigator.userAgent.toLowerCase();
    if (String(ua.match(/MicroMessenger/i)) === "micromessenger") {
      this.isWechat = true;
    } else {
      this.isWechat = false;
    }
    if (this.isWechaty) {
      //如果為微信端就進行code
      this.getCode();
    }
  },
  methods: {
    getCode() {
      let Appid = "";//為測試號id
      let code = this.getUrlParam("code"); //是否存在code
      console.log(code);
      let local = window.location.href;
      if (code == null || code === "") {
        //不存在就打開上面的地址進行授權
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          Appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        //存在則通過code傳向后台調用接口返回微信的個人信息
      }
    },
    //判斷code信息是否存在
    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;
    }
  }

 

 

目前就能通過內網授權訪問我們的項目了.注意測試號不能彈出授權窗口，只能通過微信開發者工具測試。通過正式公眾號也可以。

新手踩坑，有錯歡迎糾正。