微信小程序脚手架-项目安装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打开:

  1. wechat-api: 后端项目,由SpringBoot构建,你需要使用配置了Maven环境的IDEA打开该项目,IDEA会自动加载该项目的Maven依赖
  2. wechat-app: 前端项目,微信小程序端,你需要使用HBuilderX打开该项目(请注意我的Version 2.7.9

运行wechat-api项目

image-20200612104207442
image-20200612104243572

当IDEA完全加载了该项目的Maven依赖,将看到左侧树形目录中:javaresources文件夹已经变色,这就证明项目加载正常,可以运行了:

image-20200612104519786

在运行项目之前,需要先导入数据库,本项目的数据库文件在上图/wechat-api/db.sql,使用Navicat创建名称为wechat_api的数据库,然后将db.sql中的表结构复制进去执行即可完成创建:

image-20200612173421312
image-20200612173543853

修改项目配置文件中有关数据库的配置。在wechat-api项目中依次找到src/main/resources/application.yml

image-20200612174659650

注意:

  1. application.yml 项目主配置文件
  2. application-dev.yml 项目开发环境配置
  3. 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: 关注公众号查看

联系

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335