更新记录

1.0.1（2023-07-10）

优化

1.0.0（2023-07-10）

上传

平台兼容性

开发注意

uniapp 模板，APP 及微信小程序

基本事项

1. 一个页面/组件文件夹下应包含三个基础文件：.scss、.vue、.ts 文件，便于代码区分及维护，页面文件命名格式：语义化小驼峰，组件文件命名格式：语义化大驼峰
2. .vue 页面文件中中的 name，即原 vue2 的 name
3. ts 中同一个功能的放在一块
4. scss 中相关通用颜色使用变量
5. 公共样式文件：src/static/css/global.scss，公共 css 变量文件：uni.scss，有需要在这里写公共样式/变量，写之前先浏览原有的是否存在相关样式
6. 字体图标文件：src/static/css/zoicon.css
7. @mosowe2/js 包含了开发的常用部分功能函数，优先选择，额外的功能函数在/utils/index.ts 中添加，注意写好注释，文档地址
8. APP 全局水印：/utils/appWaterMark.ts，已在 App.vue 中配置
9. uniapp 二次封装 api：/utils/uniMethods.ts，已挂载全局 app.globalData，可减少代码量及重复性配置
10. APP 项目环境配置文件：env.js，process.env.NODE_ENV运行模式下是 development，发行模式下是 production，如需发行其他环境，修改本文件

关于权限校验

权限校验有两个，声明都在/src/directives/permission.ts文件：

1. 一个是v-permission自定义指令，用于挂载 html 代码上，接收一个 string，值为当前元素权限值，【仅 APP 支持】
2. 另一个是hasPermission全局校验函数【APP，微信小程序】，使用方法为：

<!-- html中 -->
<div v-if="hasPermission('123')"></div>
<!-- 同 -->
<div v-permission="'123'"></div>

// ts中
const app = getCurrentInstance()?.appContext.config.globalProperties;
console.log(app?.hasPermission('123'));
console.log(app?.hasPermission('523'));

关于 接口 配置说明

1. 接口请求采用 uni.request 方法
2. 相关文件在/api/目录下，以下提及文件均在此文件夹下
3. /services/文件夹下是相关功能页面接口函数声明文件，文件命名格式：语义化小驼峰，建议每个接口函数名以 Api 结尾，避免与页面中函数名冲突
4. apiNames.ts 该文件用户存放后端接口名称，支持接口名中带{}格式，例：/crp/user/{id}/detail，命名格式为：语义化小驼峰，同一功能模块的前置单词保持一致，写好注释
5. requestConfig.ts 该文件是对 uni.request 的统一封装，内部处理了相关的网络状态、接口异常 code 的处理流程，使用方法参考 services 下文件
6. 在页面引用/service/进行接口联调时，建议使用 then/catch 方式，其中 then 返回的是 http status=200 且 api 返回 code 为成功时的值（即在 then 中无需判断 apiCode，因为这里面永远是无异常成功返回），其他均在 catch 中。
7. APP 端项目环境配置文件：env.js，process.env.NODE_ENV运行模式下是 development，发行模式下是 production，如需发行其他环境，修改本文件
8. APP 端接口域名等配置文件：api/urlConfig.ts
9. 微信端接口域名等配置文件：：api/wxUrlConfig.ts
10. 可使用 getApp().globalData?.cancelRequest()方法终止接口请求

关于 pinia 状态库

1. /src/store 下是状态管理库文件，以下提及文件均在此文件夹下
2. index.ts 文件用于状态库的配置，配置方式参考内部，不同功能的不要写在一个 hook 里面，写好注释，state 的变量格式为：PI_ 开头的语义化下划线全大写，actions 的方法命名格式为：set 开头的语义化小驼峰
3. persistentData.ts 文件用于数据持久化，即刷新页面的时候，状态库从缓存取值
4. typing.d.tsts 的类型声明，状态库增删改的时候维护一下这个文件，在页面中使用的时候 ts 类型引用，格式：store 开头语义化小驼峰 Type 结尾，建议 store 后面跟 defineStore() 的第一个参数，例：storeUserType

关于缓存

缓存命名格式：例项目为 crp，所以格式为：crp-开头语义化小写短横线

关于自定义指令

自定义指令文件夹为：/directives/，文件夹下的每一个 ts 文件对应一个自定义指令，不要合并为一个 ts 文件，命名格式为：语义化小写短横线

关于自定义 hook

自定义指令文件夹为：/hook/，每一个 hook 的命名格式为：use 开头语义化小驼峰

1. pageShare：全局分享，已挂载全局 globalData，使用方式（vue 文件中使用有效）：

getApp().globalData?.pageShare(options); // options值为{title，path，imageUrl，desc}，无options则取默认分享配置，默认为小程序机基础分享配置
('onShareAppMessage'); // 这两个需要显式声明下
('onShareTimeline'); // 这两个需要显式声明下
// path中传递pid可绑定用户上下级关系，pid值为当前已登录用户id

2. checkLogin：全局登录校验，已挂载全局 globalData，校验状态库PI_TOKEN，false 则跳转登录页且携带目标页面地址及相关参数，使用方式（在需要登录的页面）：

getApp().globalData?.checkLogin(boolean); // 在需要登录的页面js片段最前面放置这行代码即可
// boolean，可选，默认false，为true则强制跳转首页

3. checkLoginBefore：全局登录校验，已挂载全局 globalData，校验方式同上，需要传入登录后重定向路径 path，使用方式（在进入页面前校验），返回 true/false

const isLogin = getApp().globalData?.checkLoginBefore(path);

4. isLogin：全局仅校验登录，已挂载全局 globalData，校验方式同上，返回 true/false

const isLogin = getApp().globalData?.isLogin();

5. checkPermission：全局数据权限校验，已挂载全局 globalData，返回 true/false

getApp().globalData?.checkPermission('permissionString');

使用中有其他问题及时提出，优化改进

记得要分包！

欢迎好评！