README.md · wushuai/Snowy-Mobile

# Snowy-Mobile

## 介绍
Snowy谐音“小诺”，恰应小诺团队名称；意思为”下雪的、纯洁的“，寓意框架追求简洁至上，大道至简。

## 演示截图

### 1、环境配置
![](README_files/29.jpg)
### 2、动态主页
![](README_files/30.jpg)
### 3、主页-日程
![](README_files/31.jpg)
### 4、工作台-消息-我的
![](README_files/32.jpg)
### 5、机构管理

机构树：

![](README_files/33.jpg)
### 6、职位管理

机构树+职位列表：

![](README_files/34.jpg)
### 7、人员管理

机构树+人员列表-表单中动态职位：

![](README_files/35.jpg)
### 8、文件管理

代码中有表单中使用文件示例：

![](README_files/36.jpg)
### 9、企业版功能-发起流程

动态表单+自定义表单+草稿箱：

![](README_files/37.jpg)
### 9、企业版功能-已发申请
![](README_files/38.jpg)
### 10、企业版功能-待办事宜
![](README_files/39.jpg)
### 11、企业版功能-已办事宜
![](README_files/40.jpg)
### 12、企业版功能-抄送事宜
![](README_files/41.jpg)
### 13、企业版功能-流程监控

功能太多了，就不一一截图了：

![](README_files/42.jpg)
## 软件架构
1、项目主体架构使用的是vue3和vite

2、UI方面用的是uni-ui（主要）、ucharts （图表）

3、请求和页面跳转用的都是uniapp官方的，没有用框架

4、伪路由拦截，实际上使用的是uniapp官方的跳转拦截器，自己封装的也没有用任何框架

## 安装教程

1. 启动snowy2.x的后端服务，注意：后端服务中得有【移动端管理】的菜单，才能使用当前项目
2. 控制台执行npm命令，下载依赖，主要是js的相关依赖：sm-crypto（加密）、xe-utils（js工具类）、vxe-utils（可以让xe-utils在标签中进行使用）

```shell
npm install
```

|  包名称   |             用途             |                         官方链接                         |
| :-------: | :--------------------------: | :------------------------------------------------------: |
| sm-crypto |            加解密            |                                                          |
| xe-utils  |           js工具类           |          https://x-extends.gitee.io/xe-utils/#/          |
| vxe-utils | 可以在template中使用xe-utils | https://gitee.com/x-extends/vxe-utils?_from=gitee_search |

## 使用说明

### 页面注册：

所有页面都必须在page.js中进行注册
![](README_files/2.png)

### 配置页面：

项目中存在一个配置文件：config.js 关于前端的配置信息基本上都在这个配置文件中，当然还有一部分配置信息是加载的服务端的信息，主要是系统基础配置，服务端的信息会覆盖config.js的基础信息
![](README_files/1.png)

### 关于鉴权：

鉴权主要使用的uniapp拦截器和应用生命周期回调函数实现的 ，无论是用户在web端通过输入url的方式进行页面的跳转，还是通过uniapp的方法进行跳转，都会触发鉴权。

![](README_files/3.png)

移动端鉴权的逻辑，将页面分为三种页面：

#### 无需登录可访问页面

![](README_files/1.jpg)

#### 需登录才可访问页面

![](README_files/2.jpg)

#### 需要登录且需授权

该页面的入口主要集中在移动端的工作台中
![](README_files/5.jpg)

##### **模块配置**

该页面的所有配置均在PC web端进行配置【移动端管理】-》【模块管理】
![](README_files/4.jpg)

##### **目录或菜单配置**

菜单要在pc端的【移动端管理】-》【菜单管理】中进行【新增】，**移动端的菜单管理为树形数据结构，也就意味着移动端的工作台也是支持树形数据结构的**。

![](README_files/4.png)

**注意：**

- **界面的路径要与移动端page.js中的路径保持对应关系**
![](README_files/3.jpg)
- **是否使用正则**

为了方便开发与管理，鉴权在拦截菜单的页面的菜单的时候会校验您是否使用正则，如果启用了正则，那么就会对同级目录下路径进行放行：如配置的界面地址为：/pages/biz/org/index且启用了正则，那么鉴权在拦截的时候会放行/pages/biz/org/**下的所有路径；反之，则只会放行/pages/biz/org/index路径，具体逻辑如下图所示：
![](README_files/6.jpg)

使用场景：菜单中为什么会有这种设计，原因是因为，一个菜单从某种意义上来说对应的是一个页面，但一个页面可能会跟其他页面进行关联，在pc端中可以使用弹窗来替代页面来解决这个问题；但是在移动端中，弹窗不能完全替代页面，通常情况下的办法是，写多个页面通过跳转来解决这个问题，但如果使用完全匹配的拦截方式，那么就意味每个页面我们都需要pc端进行配置，每个页面都要进行配置且还要进行授权，太过繁琐，所以正则匹配的方式就是为了解决该问题而存在的。

总结：pc端的菜单其实代表的就是一个页面，但在移动端则不一样，如果不使用正则的情况下，那它代表的确实就是一个页面，但是如果启用了正则的话，那么它代表的是几个页面的集合，当然这些页面的权限是统一集中式管理的。

##### 按钮权限

PC端的按钮权限在移动端，同样也有这样的功能，基本的逻辑也都是一直的，它是控制页面中的按钮是否显示的。
![](README_files/7.jpg)
![](README_files/8.jpg)
![](README_files/9.jpg)

当然最后要在pc端要进行授权
![](README_files/10.jpg)
![](README_files/11.jpg)

### 内置组件及相关参考：

为便于开发移动端封装了几个比较常用的组件：

#### 部门选择器

部门选择器为树形数据结构，支持单选、多选以及任意级别选择，此外，部门选择器还内置了一个【顶级（可选择性进行使用）】效果如下图：
![](README_files/13.jpg)
![](README_files/12.jpg)

代码位置和使用方式
![](README_files/14.jpg)
![](README_files/15.jpg)

#### 人员选择器

支持单选、多选以及任意级别选择，效果如下图：
![](README_files/16.jpg)
组件位置和使用方式
![](README_files/5.png)
![](README_files/6.png)

#### picker选择器

支持单选、多选；但不支持树形数据结构，效果如下图：
![](README_files/17.jpg)
![](README_files/18.jpg)
![](README_files/19.jpg)

#### 字典使用

表单中使用：
![](README_files/20.jpg)
index中使用：
![](README_files/21.jpg)

#### icon图标
效果
![](README_files/22.jpg)
![](README_files/23.jpg)
参考
![](README_files/25.jpg)
![](README_files/24.jpg)

#### 上拉刷新，下拉加载分页
![](README_files/26.jpg)
![](README_files/28.jpg)
![](README_files/27.jpg)
## 团队成员

|  成员  | 技术 |    昵称    |
| :----: | :--: | :--------: |
| 俞宝山 | 全栈 |   俞宝山   |
| 徐玉祥 | 全栈 | 就是那个锅 |
| 董夏雨 | 全栈 |    阿董    |
|  王鹏  | 全栈 |  每天一点  |

如果您也想贡献技术成为团队中的一员，请与我们联系吧！

## 联系方式

- QQ：1253070437
- 微信：xiaonuobase
- 手机：如需电话沟通请通过微信或QQ索要

## 版权说明

- Snowy生态技术框架全系版本采用 Apache License2.0协议
- 代码可用于个人项目等接私活或企业项目脚手架使用，Snowy全系开源版完全免费
- 二次开发如用于开源竞品请先联系群主沟通，未经审核视为侵权
- 请不要删除和修改Snowy源码头部的版权与作者声明及出处

wushuai/Snowy-Mobile

简介

发行版

贡献者

近期动态

wushuai/Snowy-Mobile .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

wushuai/Snowy-Mobile