# Snowy-Mobile **Repository Path**: littlecoder/snowy-mobile ## Basic Information - **Project Name**: Snowy-Mobile - **Description**: 💖小诺团队下Snowy产品的移动端前端，基于Uniapp开发，可搭配Snowy单体后端或Snowy-Cloud微服务后端使用，让业务迁移到手机端管理，更方便更快捷。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://xiaonuo.vip - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 248 - **Created**: 2023-07-14 - **Last Updated**: 2023-07-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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源码头部的版权与作者声明及出处