# uniapp-cli

**Repository Path**: git_zs/uniapp

## Basic Information

- **Project Name**: uniapp-cli
- **Description**: 使用uniapp-cli，加入eslint检测语法规范（可配合vscode插件Eslint进行格式化）， commitlint 提交代码时校验代码风格，并规范commit内容
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-04
- **Last Updated**: 2022-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 运行项目

**node 版本:** **^14.19.1**
**包管理工具:** **yarn**
**开发工具:** **vscode**

1. 使用 `yarn install` 下载项目依赖
2. 使用 `yarn prepare` 准备本地的 commitlint; (仅 `install` 后执行一次)
3. 成功下载依赖后使用 `yarn dev` 启动项目

# vscode 插件

`Vetur` vue 插件
`eslint` 语法规范校验和格式化
`uniapp devtools` uni 配置文件语法提示
`uniapp-snippet` uni 语法代码块提示
`Path Intellisense` 路径提示 配合`tsconfig.json`文件提示别名

可选：
`GitHub Copilot` AI 智能代码生成(需 github 申请权限)
`Auto Rename Tag` 关联 html 标签 `tab` 键快捷生成标签
`Highlight Matching Tag` html 标签匹配高亮
`A-super-change-case` 命名方式快捷切换

更多命令可以参考: https://uniapp.dcloud.net.cn/worktile/CLI.html#uni-cli

# UI 库

uni-ui : https://uniapp.dcloud.io/component/uniui/uni-ui.html

# 代码风格

项目使用 `eslint` + `prettier` 作为代码格式检查工具和代码风格格式化工具。

> 使用时需在 `vscode` 中下载 `eslint` 插件, 并开启 `eslint` 插件的格式化功能, 使用时选择 `eslint` 插件作为代码格式化工具即可使用快捷键对代码进行格式化

# 代码提交语法检测

1. 提交 `git` 时保证语法风格是按照 `eslint` 规范的
2. commit 信息需要使用下方表格中的前缀开头，与自定义 commit 信息使用 `英文冒号` + `空格` 的形式隔开 (`feat: 添加了一个新功能`)
3. 注意: 自定义 commit 信息不能以大写字母或一些特殊字符开头
   | 前缀 | 描述 |
   | :---: | --- |
   | `build` | 编译相关的修改，例如发布版本、对项目构建或者依赖的改动 |
   | `chore` | 其他修改, 比如改变构建流程、或者增加依赖库、工具等 |
   | `ci` | 持续集成修改 |
   | `docs` | 文档修改 |
   | `feat` | 新特性、新功能 |
   | `fix` | 修改 bug |
   | `perf` | 优化相关，比如提升性能、体验 |
   | `refactor` | 代码重构 |
   | `revert` | 回滚到上一个版本 |
   | `style` | 代码格式修改, 注意不是 css 修改 |
   | `test` | 测试用例修改 |

# 命名规范

|          类目           |                                        规则                                        |                                   备注                                    |
| :---------------------: | :--------------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
|       页面文件夹        |                                多个单词用 `-` 隔开                                 |        指 `pages` 中的页面文件夹, 内部一般为一个 `index` 页面文件         |
| 全局公共组件(全局注册)  |                        多个单词用 `-` 隔开, 以 `pub` 为前缀                        | 指 `components` 中的全局组件, `easycom` 会自动全局注册 `pub` 为前缀的组件 |
|  公共组件(非全局注册)   |                        多个单词用 `-` 隔开, 以 `wk` 为前缀                         |             指 `components` 中的公共组件,使用时需要手动引入的             |
|        私有组件         | 多个单词用 `-` 隔开, 以 `页面模块名称或缩写` 为前缀, 如 `order-form` 可简写为 `of` |          指 `pages` 下的某个模块下的 `components` 文件夹中的组件          |
|       引入组件时        |                                 帕斯卡命名(大驼峰)                                 |         指 `import` 语句后的组件变量, 例如`import SmtFab form ''`         |
| `template` 中的组件标签 |                                多个单词用 `-` 隔开                                 |                            例如 `<smt-fab />`                             |
|         js 文件         |                                      驼峰命名                                      |                               指 `js` 文件                                |

> 注: 其余规则按照 eslint 即可

# 组件库设计

`customComponents` 为自定义组件库内容
后续会将其发布至 `npm` 私服

|   组件名称    |        组件描述        |
| :-----------: | :--------------------: |
|    `theme`    | 暂时用于管理组件库主题 |
|   `smt-fab`   |      悬浮按钮组件      |
|  `smt-icon`   |        图标组件        |
| `smt-nav-bar` |      自定义导航栏      |
|  `smt-tabs`   |      tab 切换组件      |

# 平台差异

### 0. 不要做 dom 操作 !!!

### 1. createSelectorQuery

```js
const query = uni
  .createSelectorQuery()
  // #ifndef MP-ALIPAY
  .in(this);
// #endif
```

上方代码中 `微信小程序` 需要 in(this)，`支付宝小程序` 不需要, 且微信必须要写