一环境准备

JDK8+
Maven
自己喜欢的IDE+lombok插件
Mysql5.7+
Node.js 16
一个微信公众号（开发测试可使用微信公众号测试号）
一个外网可访问的域名（开发测试可使用内网穿透工具ngrok，可参考几个内网端口映射服务网站）

二开发环境启动

2.1 后端wx-api启动
通过git下载源码，仓库地址：https://github.com/niefy/wx-api
idea、eclipse需安装lombok插件，不然会提示找不到entity的get set方法
创建数据库wx，数据库字符集utf8mb4，编码规则utf8mb4_general_ci（如未正确设置可能影响昵称表情及特殊符号存储）
执行db/mysql.sql文件，初始化数据，需要Mysql版本5.7+
Eclipse、IDEA打开项目，等待maven自动引入依赖
修改application-dev.yml，更新MySQL账号和密码
运行BootApplication.java，则可启动项目
启动后可查看swagger文档：http://localhost:8088/wx/swagger-ui.html

2.2 管理后台前端wx-manage启动
通过git下载源码，仓库地址：https://github.com/niefy/wx-manage
安装依赖

npm install
编译启动

npm run serve
日志提示启动成功后，浏览器打开如下地址：
- 首页：http://localhost:8001
- 登录账号：admin / 123456
  2.3 配置内网穿透（以ngrok为例）

如开发环境无公网域名，需使用ngrok开启反向代理，映射:localhost:8088到外网80端口

ngrok http  8088
// 结果示例 Forwarding：http://xxx.ngrok.io -> http://localhost:8088
// 表示可以通过http://xxx.ngrok.io访问到开发机器8088端口

2.4 添加公众号

进入管理后台 - 微信管理 - 公众号账号，进入页面后点“新增”
填写微信公众号或测试号appid、secret、token信息后保存提交
在页面列表上面点“接入”会显示接入所需信息
进入公众号后台填写公众号开发配置（如配置失败请检查反向代理是否配置正确）
- url：接入信息中的url，需使用域名，端口限80或433
- Token：接入信息中的token
进入公众号后台填写公众号JS接口安全域名（如未配置会受影响微信分享）
- 如：xxx.ngrok.io
进入公众号后台填写授权回调页面域名（如未配置会受影响微信登录）
- 如：xxx.ngrok.io

因为移动端UI一般都会自己设计定制，这个项目仅提供demo，包括：微信授权登录、微信分享、文章搜索、文章详情

启动wx-api项目,具体流程参考对应项目介绍
安装依赖

npm install
修改.env.development开发环境配置文件
- VUE_APP_WX_APPID 公众号APPID
- VUE_APP_WX_QRCODE 公众号二维码链接
编译并启动

npm run serve
浏览器打开如下地址：
- 首页：http://localhost:8080
  2.5.1 体验微信分享、微信授权登录等功能
  由于微信分享和微信登录功能需在正式域名下使用，有如下两种方式体验
  方式一：部署到生产环境再看
  生产环境建议打包后将文件部署到nginx,后端请求使用nginx转发功能 nginx.conf配置
```
location /wx/ { #转发后端接口
proxy_pass   http://127.0.0.1:8088/wx/;
}
```
  方式二：更改内网穿透配置，如使用ngrok穿透到内网
  然后配置ngrok映射到nginx端口:http://xxx.ngrok.io -> http://localhost:8080
```
ngrok http  8080
```
  不管哪种方式都需要检查如下配置：
公众号/测试号后台：接口配置是否成功
公众号/测试号后台：JS接口安全域名，只填域名，不要带协议及URL,如：xxx.ngrok.io
公众号/测试号后台：网页授权回调域名，只填域名，不要带协议及URL,如：xxx.ngrok.io