微信小程序脚手架-项目安装03
WeChat Template
一套基于SpringBoot & Shiro 以及 Uni-app构建的微信小程序脚手架
开源地址： https://github.com/TyCoding/wechat-template 欢迎Star、Fork支持作者。
安装项目
首先你需要阅读之前的文章：
阅读了上述文章相信你已经在本地电脑上配置好了SpringBoot项目开发环境和Uni-app 微信开发工具等开发环境。下面讲解如何安装项目。
下载项目源码
如果你的本地已经安装了git客户端，那么可以直接使用git clone命令下载项目。（如果没有安装就在GitHub仓库网页上点击download）按钮：
git clone https://github.com/TyCoding/wechat-template.git
image-20200612103027973
或者：
image-20200612103107603
运行项目
如果已经下载了源码，将会看到如下文件：
image-20200612103313437
注意：
之前我的开源项目中，仓库也是如此包含了两个子文件夹，他是代表了两个项目，但是莫名其妙有人会认为这是一个项目，而直接用IDEA打开wechat-template这个文件夹，这要是能运行成功就怪了，所以大家无论在运行我的项目还是别人的项目都首先要观察项目目录结构再做其他的。
那么上图片中两个文件夹分别代表两个项目，需要用不同的IDE打开：
-
wechat-api： 后端项目，由SpringBoot构建，你需要使用配置了Maven环境的IDEA打开该项目，IDEA会自动加载该项目的Maven依赖 -
wechat-app： 前端项目，微信小程序端，你需要使用HBuilderX打开该项目（请注意我的Version 2.7.9）
运行wechat-api项目
image-20200612104207442
image-20200612104243572
当IDEA完全加载了该项目的Maven依赖，将看到左侧树形目录中：java和resources文件夹已经变色，这就证明项目加载正常，可以运行了：
image-20200612104519786
在运行项目之前，需要先导入数据库，本项目的数据库文件在上图/wechat-api/db.sql，使用Navicat创建名称为wechat_api的数据库，然后将db.sql中的表结构复制进去执行即可完成创建：
image-20200612173421312
image-20200612173543853
修改项目配置文件中有关数据库的配置。在wechat-api项目中依次找到src/main/resources/application.yml：
image-20200612174659650
注意：
-
application.yml项目主配置文件 -
application-dev.yml项目开发环境配置 -
application-prod.yml项目生产环境配置
上述三者文件区别，后续文章中会深入讲解。现在我们需要修改的是application-dev.yml文件中username, password, url三个参数信息。
启动项目：
image-20200612104720736
测试项目
首先要明白，这是基于SpringBoot、Shiro构建的后端项目，项目中对身份认证、Token校验、全局异常处理等都做了封装（后续文章将讲解如何封装），那么我们直接使用Postman工具测试请求项目登录接口：localhost:8080/login
image-20200612173114414
如上，说明项目启动成功。（上图显示了由全局统一异常处理器自定义的异常返回信息）
运行wechat-app项目
使用HBuilderX打开wechat-app项目，在顶部菜单栏找到：运行 -> 运行到小程序模拟器 -> 微信开发者工具：
image-20200612174357943
HBuilderX将自动编译项目，并自动打开微信开发者工具：
image-20200612175035218
以上，项目就启动成功了。
注意：
如果你此时点击了登录按钮应该会是正常登录项目，但要注意的是我推送到 https://github.com/TyCoding/wechat-template 仓库中 wechat-app 配置文件中写的服务端URL其实连接是我自己的云端服务器。为什么我直接放自己的服务器地址？因为当前是在PC上使用微信开发工具运行的小程序，可能细节体验不如真实手机，而在手机是哪个运行又肯定无法连接到PC上运行的后端项目IP，所以这里为了方便大家体验就这样做了。
具体可以看wechat-app项目中wechat-app/config.js文件：
image-20200612180207170
后续文章我将教大家这些参数的含义以及如何修改这些参数。
手机端预览
效果就是，点击微信开发者工具右上方预览按钮，用该App ID绑定的微信号扫描二维码预览小程序：
image-20200612180736027
手机端打开小程序，点击登录按钮弹出网络连接异常的信息，此时需要手动点击右上方选择打开调试按钮重新打开小程序便可以正常登录了：
| 初次打开小程序弹出登录异常 | 打开调试重新登录 | 登录成功 |
|---|---|---|
IMG_9BC7AC07030B-1
|
01F742B17FF57192D5FB566DD322DC15
|
1443FFA9286E5ECE750902A7F83E3DBA
|
Tips
如果你是一个有关项目启动的细节配置等信息，我在后续文章中会详细讲解。
请大家持续关注公众号最新消息。
交流
QQGroup：671017003
WeChatGroup: 关注公众号查看
