WeChat Template01项目介绍
0 Views wechat with
本文字数:1.1k 字 | 阅读时长 ≈ 4 min

WeChat Template01项目介绍

0 Views wechat with
本文字数:1.1k 字 | 阅读时长 ≈ 4 min

WeChat Template

一套基于SpringBoot & Shiro 以及 Uni-app构建的微信小程序脚手架

开源地址: https://github.com/TyCoding/wechat-template 欢迎Star、Fork支持作者。

项目介绍

仓库 中包含了两个项目:

你能学到什么

  1. Uni-app与Java Web项目结合的最佳实践
  2. SpringBoot与Shiro的集成,以及身份校验、Token交互的实现
  3. 如何优雅的封装一套Uni-app(微信小程序)脚手架,包括:request api封装、vuex存储、router页面路由、与Java后端数据交互
  4. 如何优雅的封装一套SpringBoot&Shiro权限项目脚手架,如何处理前后端分离Token交互
  5. 如何处理小程序端Request请求,后续将从Login请求展开逐步分析前后端交互流程

技术选型

开发环境:

Name Version
JDK 1.8
MySql 5.7
IDEA 2020.1
HBuilderX 2.7.9
微信开发者工具 1.03

wechat-api小程序后端:

Name Version
SpringBoot 2.1.3.RELEASE
Spring-Shiro 1.3.2
Mybatis 2.1.0
Mybatis-Plus 3.2.0

wechat-app小程序前端:

Name Version
uni-app 2.7.9
thorui 1.5.0
luch-request 3.0.2
uni-simple-route 1.8.4

目录结构

wechat-api

源码:https://github.com/TyCoding/wechat-template/tree/master/wechat-api

└── src
    ├── main
    │   ├── java
    │   │   └── cn
    │   │       └── tycoding
    │   │           ├── Application.java
    │   │           ├── biz
    │   │           │   ├── controller    -- 控制层
    │   │           │   ├── entity        -- 实体类
    │   │           │   ├── mapper        -- Mybatis映射接口
    │   │           │   └── service        -- 业务层
    │   │           └── common            -- 公共层
    │   │               ├── auth        -- Shiro鉴权相关
    │   │               ├── config        -- 项目配置相关
    │   │               ├── constants    -- 项目公共常量
    │   │               ├── controller    -- 控制层公共方法提取
    │   │               ├── exception    -- 异常类
    │   │               ├── handler        -- 处理器类
    │   │               ├── properties    -- 框架配置参数
    │   │               └── utils        -- 工具类
    │   └── resources
    │       ├── application-dev.yml        -- 开发环境配置
    │       ├── application-prod.yml    -- 生产环境配置
    │       ├── application.yml            -- 项目基础配置
    │       ├── mapper                    -- Mybatis接口映射XML文件
    │       └── tycoding.properties        -- 项目自定义参数配置

wechat-app

源码:https://github.com/TyCoding/wechat-template/tree/master/wechat-app

├── App.vue            -- 小程序入口(Vue)
├── api                -- 项目接口方法(对URL、Params的统一封装,仅需调用其下的方法便可发送请求)
│   └── user.js        -- 用户层接口(建议命名和后端Controller对应)
├── common            -- 通用文件
├── components        -- 组件,HBuilderX新版支持easycom模式:无需手动引入组件仅需按照目录格式
├── config.js        -- 项目配置(包含了项目生产环境和开发环境BaseURL配置)
├── main.js            -- 项目入口
├── manifest.json    -- 应用配置
├── pages            -- 页面(vue组件)
│   ├── common        -- 通用层页面
│   └── tabbar        -- 小程序底部tarbar对应页面
├── pages.json        -- 页面属性配置、编译配置
├── permission.js    -- 路由守卫,页面Router将被路由守卫拦截处理(判断token是否失效等)
├── router            -- 页面路由相关配置,页面的路由path需要和pages.json相对应
│   └── index.js
├── static            -- 静态文件
├── store            -- vuex相关store缓存配置
│   ├── getters.js    -- 定义getters,用于获取store中的参数属性
│   ├── index.js    -- Vuex声明、定义
│   └── modules        -- 具体需要缓存的数据对象
└── utils            -- 工具类
    ├── auth.js        -- 管理Token
    ├── request.js    -- 全局请求封装
    └── util.js        -- 一些方法的封装

文档

项目文档将在公众号:程序员涂陌 中陆续发布。首先作为后端程序员我们要先阅读微信小程序相关文档:

Tips

由于本人是做后端的,所以本小程序中服务端接口全部由wechat-api项目提供,请各位开发者把重点放在学习该项目是如何封装的、以及数据是如何交互的,这是核心。Uni-app最大的优势就是基于Vue实现,熟悉了Vue则对用Uni-app开发小程序也会很快熟悉;需要提各位,Uni-app框架与HBuilder软件是捆绑的,HBuilder的版本号即是Uni-app框架的版本号,而只能通过HBuilder编译uni-app项目,最后微信开发者工具上预览小程序界面。

以上是对 https://github.com/TyCoding/wechat-template 项目的介绍,后续公众号会陆续发布该项目各个功能模块的实现逻辑,请大家持续关注~~


交流

QQGroup:671017003

WeChatGroup: 关注公众号查看

联系

如果这篇文章帮助到了你,你可以请作者喝一杯咖啡