# wbc小程序
## 安装依赖
```
npm install
```
### 运行
```
npm run serve
```
# 代码功能兼容显示
`
<!-- 只有微信小程序显示 -->
#ifdef MP-WEIXIN
#endif
<!-- 只有 H5 显示 -->
#ifdef H5
#endif
`
# 日志打印
- 有多个地方使用了微信的日志打印 $log
- 接口报错会默认有 $log.error
- 在比较重要的节点请使用 $log.setFilterMsg("xx") xx 为过滤关键词只字母数字大小写
- 当前已添加的节点
. UserInfo 登录节点 保存用户信息和 token 可以用这个过滤拿用户的 token 最好拿到用户的微信号不然找起来很麻烦
. register 注册节点 保存注册参数和结果
. pay 支付节点 保存调用支付接口的参数和结果
# 授权路由
- 项目`onLaunch`时会自动触发登录获取 token 方法/获取用户信息方法 请求 code`401`或`4442`会自动跳转 登录/注册页
- 在常量里的`NO_AUTH_ROUTES_NAME`数组里的路由请求 401 时不会触发 上述自动跳转
- 在`onLaunch`时，如果当前路由的`meta.isAuthFree`为`true` 不会触发第一项里的登录/获取用户信息方法 建议分享进来的页面根据情况添加此参数
# 说明
- 善用 uni-app 的条件编译注释，在开发的过程中就做好多端的兼容
- css 预处理器统一使用 `scss`
- 异步请求使用 `uni.request`，所有的`api`接口都在 `/src/services` 目录下
- 使用 `postcss-pxtorpx-pro`和`amfe-flexible` 进行 rpx 适配，尺寸以设计稿的`375px`为基准，例如在宽度为`375px`的设计稿上，元素的宽度为：`30px`，则在代码中也是直接写入 `30px`
- 不参与打包的文件放置在 `/public` 目录下，例如某些共用的静态脚本
- `/src/services/fetch.js` 是 `uni.request` 的再次封装，可以在 `Vue` 的实例上调用：`this.$fetch`
- `/src/components` 为公共组件目录，超过两个页面使用过的组件统一放在此目录，单个页面的独占组件放置在对应的页面目录下，例如： `/src/pages/pageName/components`
- `src/mixins` 全局的 `混入 (mixin)` 放置目录
- `/src/pages` 里的每一个页面都以新建一个目录，页面以路由名命名目录，目录下包含页面对应的独占组件和图片，然后再在目录下新建文件 `index.vue`，例如：`/src/pages/MyInfo/index.vue`
- 可以通过路由实体的 `meta.title` 字段设置页面的 `setNavigationBarTitle`
- 为了优化 css 性能，css 样式嵌套不能超过 3 层
- `/src/utils/index.js` 函数工具包，存放全项目使用的工具函 数，对于工具方法，必须需要加上用法的注释
- `/src/utils/filters.js` 全局过滤器，例如 金钱格式化方法
- `/src/utils/constant.js` 统一定义常量的模块，项目所有的常量都必须在此定义，对于复用的常量必须抽离到 `src/utils/constant.js` 中，并且命名规范统一为大写加下划杠
- `/env.config` 目录为配置打包中环境变量 `process.env` ,必须配置 `.env` 的 `VUE_APP_ENV_ID` 值使用
- 环境变量（例如 API 调用地址等）的配置统一放到`env.config`目录下，开发时在根目录下新建 `.env.local` 进行切换
- 多处复用的组件尽量考虑使用 store 进行状态管理，减少 `prop` 和 `$emit` 的使用
- 善用`src/utils/hack.js`来处理从其它项目迁移过来的页面中不兼容的代码
- 全局使用的 scss 变量和 mixin，统一在`src/uni.scss`引入，根据 ui 提供的颜色规范表来进行声明颜色变量，如果设计图中出现了颜色规范表中未什么的色号（#FFFFFF 除外），和 ui 沟通做出更改
- 公共的图片统一添加到`src/static/images/`目录下
- 页面跳转使用第三方包 `uni-simple-router` 进行跳转
- 如果需要 `uni-ui` 的组件，则单独下载到`src/components/uni-ui/`目录下使用
- 命名规范：`pages`目录下的页面，统一先新建一个以小驼峰命名的文件夹，再新建一个 `index.vue` 作为页面;自定义组件的命名统一使用大驼峰;`Buic`组件的命名统一使用小驼峰
- 代码规范使用 `ESLint + Prettier`，在 `vscode` 安装好对应的插件可以按照规范自动格式化，禁止提交`ESLint`冒红的代码
- store 中的 `actions` 模块中方法命名的时候后缀加上`Actions`, 例如 `aaaActions` 方法， 方便页面中快速辨别改方法是属于 actions 里面的