前言：
一、現在越來越多的web專案都整合到微信公眾號中，針對小型專案有諸多好處：一是可以免去專門編寫一個用處不大的app，縮短開發週期；二是可以獲取更多的潛在使用者；三是後期維護簡單。

二、在開發階段一般不會將專案直接放到線上伺服器，並且開發使用到的公眾號一般也是測試賬號，造成一個相對封閉、獨立的研發環境。由於微信開發文件要求必須在公網能訪問到專案，這就使得我們在開發過程中不得不使用內網穿透工具，將本地專案對映到公網上，完成與微信公眾號的對接，完成我們的開發任務。

三、將自己在開發過程中的一些經驗分享出來，給更多有同樣需求的同學，如有錯誤還望指正。

本篇文章分為兩大部分介紹：

1. 微信公眾號申請及後臺相關設定；
2. 多種內網穿透工具配置；

一、微信公眾號申請
1、訪問微信公眾平臺：https://mp.weixin.qq.com/ 點選註冊，賬號型別選擇訂閱號即可，按照提示完成註冊。

2、登入微信公眾號平臺，拉到頁面底部，點選【開發者工具】，在右側有六個模組。

開發者工具圖

3、開發者工具圖中先點選【1】，進入測試賬號配置頁面。首頁要配置【介面配置資訊】。（該模組僅需配置一次即可，這裡需要聯絡研發輔助）

4、在頁面中找到【網頁服務】中的【網頁賬號】，點選【修改】。

5、配置授權回撥頁面域名。（這裡填入的域名不包含【http://或https://】，它對映的是後端地址，可以是域名+埠號的形式）

6、開發者工具圖中再點選【2】，進入介面除錯工具。

（1）從【1】中獲取到【appID】和【appsecret】。

（2）填入到下圖對應位置，此時會顯示校驗通過，點選檢查問題按鈕，獲取access_token資訊。

（3）完整複製access_token，（即橙色引號內的字串資訊）

（4）在該頁面【介面型別】處選擇【自定義選單】選項。

（5）【介面列表】如果是第一次配置，先選擇【自定義選單建立介面】；否則先選擇【自定義選單刪除介面】，刪除原有的設定。

7、配置6（6）中body資訊。

編碼、解碼資訊：（這裡的域名就是在5中配置的那個，這裡要帶上協議【http://或https://】，對自己的域名編碼後替換掉示例中相應部分即可）

示例：
{
“button”: [
{
“name”: “11111”,
“sub_button”: [
{
“type”: “view”,
“name”: “去考試”,
“url”: “https://open.weixin.qq.com/connect/oauth2/authorize?
appid=wx23a7ffcd3a45e676&redirect_uri=http%3A%2F%2Fexam.ngrok.6cm.top%2FweChat%2F
getOAuth&response_type=code&scope=snsapi_userinfo&state=SAMING&connect_redirect=1#we
chat_redirect”,
“sub_button”: [ ]
}
]
},
{
“name”: “內網測試”,
“sub_button”: [
{
“type”: “view”,
“name”: “去考試”,
“url”: “https://open.weixin.qq.com/connect/oauth2/authorize?
appid=wx23a7ffcd3a45e676&redirect_uri=http%3A%2F%2F1u50t87871.imwork.net%2FweChat%
2FgetOAuth&response_type=code&scope=snsapi_userinfo&state=SAMING&connect_redirect=1#
wechat_redirect”,
“sub_button”: [ ]
}
]
}
]
}
8、微信公眾號配置好後掃碼關注即可進行測試。

二、內網穿透配置（按自己需求任選）
1、花生殼配置
（1）訪問https://hsk.oray.com/download/下載對應版本的工具。

（2）點選【3.0使用幫助】http://service.oray.com/question/4287.html，檢視使用幫助。
以Ubuntu為例
1.Ubuntu預設登入普通使用者，可通過sudo -s切換為管理員；

2.安裝
32位：dpkg -i phddns_i386.deb
64位：dpkg -i phddns_3.0_x86_64.deb

3.解除安裝：dpkg -r phddns

4.輸入phddns回車後，可以看到擴充套件的功能：
phddns start（啟動）| stop（停止）| status（狀態）| restart（重啟）|
phddns reset（重置）
phddns version（版本）

2、自建ngrok配置
如果有公網伺服器，建議搭個ngrok,具體搭建步驟在此就不贅述，詳見：
Ubuntu下內網穿透ngrok安裝流程
將linux版本工具上傳至本地測試伺服器，執行命令online代表連線成功。

啟動命令：./ngrok -config=ngrok.cfg -subdomain exam 8866

3、natapp配置
（1）訪問https://natapp.cn/ 對隧道引數進行配置。

（2）下載對應版本軟體

（3）使用方法參見：https://natapp.cn/article/natapp_newbie
在Linux/Mac 下 需要先給執行許可權
chmod a+x natapp
取得authtoken 在網站後臺,我的隧道處,可以看到剛才購買的隧道
./natapp -authtoken=9ab6b9040a624f40
注意引數輸入正確性,不要有多餘的空格等!

三、程式碼中properties檔案修改（修改成前端對映的地址，重啟專案）