作为一个web开发者，今天第一次开发微信公众号，本文章仅记录本次开发心得。

第一步：认识微信公众号开发

首先要认识微信公众号开发，本质上是H5手机页面的开发，但其开发方式要准备的东西又有所不同，因此开发前的准备工作要做好。
如果是vue开发的前后端分离项目，实际上前端就是将h5网站发布到线上然后使用域名访问而已，其中和真正的h5发布区别是多了微信授权以及微信api等一些功能而已

第二步：准备微信公众号开发所需的东西

1、准备开发所需的内网穿透工具及其开发配置

认识微信访问网站的方式
微信公众号访问网站项目都是通过正式域名来进行访问的。因此我们要准备好域名，然而开发过程中是不可能直接给正式域名的，因此我们需要一些工具的帮助
认识内网穿透
我使用的vue脚手架搭建的项目，因此项目启动后都可以通过本地路径访问项目。如：

使用浏览器访问：http://10.101.80.134:80 即可进入项目。
然而其他人通过外网要访问这个路径是做不到的。而内网穿透工具可以帮助我们实现要求。
内网穿透工具帮你可以使用外网访问本地项目，并且提供访问域名。
内网穿透工具现在市场上有不少，如ngrok、qydev、飞鸽 … 等一些工具，我开发使用的是ngrok,因此这里仅做ngrok的说明

1. 首先进入ngrok

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

2. 然后注册一个账号，并且登录进去
   
   这里可以选择查看教程来学习(通常开了付费通道速度会快很多)，如果完成了有如下的内容：
   
   注意：
   开通的隧道端口内容要与本地的ip和端口对上
   协议选择http即可，前缀域名随你填。
   完成之后隧道id和赠送域名要留着有用

3. 下载客户端，然后解开压缩进入文件夹
   点击.bat文件打开放上隧道id即可
   
   这样就准备好第一个内容了。此时可以直接使用赠送域名通过浏览器访问本地。

2、准备微信开发测试号以及测试号相关的配置

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

3、准备微信开发者工具，使用公众号网页模式，并且使用关注了测试号的那个微信登录，使用赠送域名访问即可

第三步：使用vue开发H5页面

使用vue-cli3脚手架搭建的一个简单的移动端项目
我使用的配置是：

vue
vue-router
vant(移动端UI框架)
axios
weixin-js-sdk(微信公众号接口api,调用内置接口必须使用的,如:扫码)

weixin-js-sdk 使用方式

npm install weixin-js-sdk

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

// 需要使用对应api的方法中，参考官网
wx.config({
	.....
})

vue中开发公众号其实和移动端H5页面开发差不多，现在就可以开始开发公众号了。

开发疑问
1、需不需要开发微信公众号底部的菜单栏？
答： 不需要，微信公众号底部的菜单栏都是通过微信的菜单相关的接口进行生成的。
https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html
直接使用postman根据其要求填入内容生成即可，注意：url必须要完整的路径，如http://xxx.vip3gz.idcfengye.com/#/register
项目内的跳转和PC的跳转是一样的如：$router.push(’/register’);

2.通过微信接口生成了菜单，但微信开发者平台为什么没有展示出底部菜单？
微信接口生成的菜单只是在进入微信公众号的时候才看到的，而点击内容后仅是做了一个页面跳转，因此开发时不需要管什么底部菜单。如：

进入此页面，页面本身没底部菜单的。而顶部菜单仅仅只是用于返回

3、顶部菜单栏要怎么定义?
微信公众号，顶部菜单是固定的，没办法自定义。左边固定是返回按钮，右边固定是分享按钮。中间标题由当前页面的html文件的title属性决定

所以开发过程中不需要在意什么底部的菜单和顶部栏之类的。

vue开发微信公众号—JS-SDK授权以及api的使用方式

vue开发微信公众号—微信测试号

vue开发微信公众号—测试号菜单生成

vue开发微信公众号—手机访问被微信拦截