作為一個web開發(fā)者，今天第一次開發(fā)微信公眾號，本文章僅記錄本次開發(fā)心得。

第一步：認(rèn)識微信公眾號開發(fā)

首先要認(rèn)識微信公眾號開發(fā)，本質(zhì)上是H5手機(jī)頁面的開發(fā)，但其開發(fā)方式要準(zhǔn)備的東西又有所不同，因此開發(fā)前的準(zhǔn)備工作要做好。

第二步：準(zhǔn)備微信公眾號開發(fā)所需的東西

1、準(zhǔn)備開發(fā)所需的內(nèi)網(wǎng)穿透工具及其開發(fā)配置

認(rèn)識微信訪問網(wǎng)站的方式
微信公眾號訪問網(wǎng)站項(xiàng)目都是通過正式域名來進(jìn)行訪問的。因此我們要準(zhǔn)備好域名，然而開發(fā)過程中是不可能直接給正式域名的，因此我們需要一些工具的幫助
認(rèn)識內(nèi)網(wǎng)穿透
我使用的vue腳手架搭建的項(xiàng)目，因此項(xiàng)目啟動后都可以通過本地路徑訪問項(xiàng)目。如：

使用瀏覽器訪問：http://10.101.80.134:80 即可進(jìn)入項(xiàng)目。
然而其他人通過外網(wǎng)要訪問這個路徑是做不到的。而內(nèi)網(wǎng)穿透工具可以幫助我們實(shí)現(xiàn)要求。
內(nèi)網(wǎng)穿透工具幫你可以使用外網(wǎng)訪問本地項(xiàng)目，并且提供訪問域名。
內(nèi)網(wǎng)穿透工具現(xiàn)在市場上有不少，如ngrok、qydev、飛鴿 … 等一些工具，我開發(fā)使用的是ngrok,因此這里僅做ngrok的說明

1. 首先進(jìn)入ngrok

   http://www.ngrok.cc 或者百度搜索

2. 然后注冊一個賬號，并且登錄進(jìn)去
   
   這里可以選擇查看教程來學(xué)習(xí)(通常開了付費(fèi)通道速度會快很多)，如果完成了有如下的內(nèi)容：
   
   注意：
   開通的隧道端口內(nèi)容要與本地的ip和端口對上
   協(xié)議選擇http即可，前綴域名隨你填。
   完成之后隧道id和贈送域名要留著有用

3. 下載客戶端，然后解開壓縮進(jìn)入文件夾
   點(diǎn)擊.bat文件打開放上隧道id即可
   
   這樣就準(zhǔn)備好第一個內(nèi)容了。此時可以直接使用贈送域名通過瀏覽器訪問本地。

2、準(zhǔn)備微信開發(fā)測試號以及測試號相關(guān)的配置

https://editor.csdn.net/md?articleId=109066238

3、準(zhǔn)備微信開發(fā)者工具，使用公眾號網(wǎng)頁模式，并且使用關(guān)注了測試號的那個微信登錄，使用贈送域名訪問即可

第三步：使用vue開發(fā)H5頁面

使用vue-cli3腳手架搭建的一個簡單的移動端項(xiàng)目
我使用的配置是：

vue
vue-router
vant(移動端UI框架)
axios
weixin-js-sdk(微信公眾號接口api,調(diào)用內(nèi)置接口必須使用的,如:掃碼)

weixin-js-sdk 使用方式

npm install weixin-js-sdk

// vue組件中
var wx = require('weixin-js-sdk');

// 需要使用對應(yīng)api的方法中，參考官網(wǎng)
wx.config({
	.....
})

vue中開發(fā)公眾號其實(shí)和移動端H5頁面開發(fā)差不多，現(xiàn)在就可以開始開發(fā)公眾號了。

開發(fā)疑問
1、需不需要開發(fā)微信公眾號底部的菜單欄？
答： 不需要，微信公眾號底部的菜單欄都是通過微信的菜單相關(guān)的接口進(jìn)行生成的。
https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
直接使用postman根據(jù)其要求填入內(nèi)容生成即可，注意：url必須要完整的路徑，如http://xxx.vip3gz.idcfengye.com/#/register
項(xiàng)目內(nèi)的跳轉(zhuǎn)和PC的跳轉(zhuǎn)是一樣的如：$router.push(’/register’);

2.通過微信接口生成了菜單，但微信開發(fā)者平臺為什么沒有展示出底部菜單？
微信接口生成的菜單只是在進(jìn)入微信公眾號的時候才看到的，而點(diǎn)擊內(nèi)容后僅是做了一個頁面跳轉(zhuǎn)，因此開發(fā)時不需要管什么底部菜單。如：

進(jìn)入此頁面，頁面本身沒底部菜單的。而頂部菜單僅僅只是用于返回

3、頂部菜單欄要怎么定義?
微信公眾號，頂部菜單是固定的，沒辦法自定義。左邊固定是返回按鈕，右邊固定是分享按鈕。中間標(biāo)題由當(dāng)前頁面的html文件的title屬性決定

所以開發(fā)過程中不需要在意什么底部的菜單和頂部欄之類的。