# uni-basic

**Repository Path**: wangbin3162/uni-basic

## Basic Information

- **Project Name**: uni-basic
- **Description**: uni-app基础工程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-09
- **Last Updated**: 2023-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-basic

## 一、介绍

uni-app基础工程

## 二、目录结构

整个目录结构的介绍，分别代表每个文件夹和文件的作用，开头*标识的，不需要进行操作，可以忽略的文件夹

      ├── api                       // 所有请求相关资源，modules文件里存放具体模块的接口，统一请求
      │   ├── modules               // modules文件里存放具体模块的接口，后缀统一增加.api予以区分
      │   ├── config.js             // 请求封装配置文件，区分不同环境，不同参数配置
      │   └── request.js            // 统一封装的请求文件，包含请求的拦截器和接口包装函数
      ├── assets                    // 资源文件，存储公共资源
      │   └── styles                // 公共样式文件夹
      ├── components                // 公共组件，存储和页面没有关联的通用组件，采用一级层级，内部组件会自动注册
      │   └── c-xxx                 // 通用组件编写方式，内部组件和文件夹同名，以c-开头，方便与其他引入的组件区分
      ├── docs                      // *打包部署h5的静态资源，不用管，实际项目删除即可
      ├── node_modules              // *依赖安装文件夹
      ├── pages                     // 实际存放的页面文件夹，里面包含所有页面级别的内容，采用一级路径，如包含子页面则在内部添加编写即可
      │   ├── index                 // 首页
      │   ├── login                 // 登录配置页面
      │   └── mine                  // 我的页面
      ├── router                    // 路由文件夹
      │   └── router.js             // 路由文件，集成路由导航守卫，监听路由跳转
      ├── static                    // 静态无需编译的文件夹，里面主要存放所有图片资源
      ├── store                     // vuex状态管理文件夹
      │   ├── modules               // modules存放不同状态管理模块，注意，其实一般情况下，大部分功能状态都无需放置到全局
      │   └── index.js              // store入口文件
      ├── uni_modules               // *uni插件安装目录
      ├── unpackage                 // *打包部署后的文件
      ├── utils                     // util工具包，自定义工具函数放置在这
      ├── .gitignore                // *git 忽略项
      ├── App.vue                   // 入口页面
      ├── index.html                // *入口静态文件
      ├── main.js                   // 入口文件 加载组件 初始化等
      ├── mainifest.json            // *项目配置文件，用于设置打包等相关参数
      ├── package.json              // *依赖包文件
      ├── page.json                 // 页面相关配置文件，每个页面路由，全局参数都需要在此添加和编辑
      ├── uni.scss                  // 全局样式属性定义，用于定义主题等相关属性。自动注入，全局可用。
      └── vue.config.js             // vue配置文件


## 三、部分配置项说明

### 1、请求接口的封装
api文件夹统一封装了请求模块，request.js 封装了统一的请求拦截，和接口调用函数，不同模块的api需要在不同的modules里进行分别管理，用法参考user
config文件配置了请求相关的配置信息，如baseURL，header等。需要根据实际业务进行配置和修改。

### 2、路由拦截器
全局借助了uni-simple-router插件封装了路由的跳转拦截器，部分代码如下。

```js
//全局路由前置守卫
router.beforeEach(async (to, from, next) => {
  // 判断当前窗口是白名单，如果是则不重定向路由
  const pass = whiteList.some((item) => item === to.fullPath)
  const token = uni.getStorageSync('token')

  if (!pass && !token) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }

  if (token && token !== 'undefined') {
    const userInfo = store.state.user.userInfo
    if (!userInfo) {
      try {
        await store.dispatch('user/getUserInfo')
      } catch (error) {
        await store.dispatch('user/logout')
      }
    }
  }
  next()
})
```

其中前置路由拦截，主要会根据是否存在token及白名单进行处理，调取不同的业务逻辑

### 3、全局状态管理
store文件夹封装了全局vuex状态管理，其中index.js为入口文件，如需要增加模块，则需要在modules文件夹里编写。参考app模块，自行
根据业务模块增加，但实际业务中不太推荐状态全局化。

### 4、页面配置
pages.json用于配置全部页面相关的信息，如新增一个页面需要在pages文件夹里创建，同时也需要在当前json文件中进行增加和编辑。

### 5、vue.config
暂时不用增加额外配置，借助uni-read-pages插件，项目会自动读取pages.json中的页面信息自动生成路由并生成路由表，同时，借助unplugin-vue2-script-setup/webpack
插件，实现了vue2使用script setup语法糖的功能

### 6、通用组件封装
components文件夹统一封装与页面无关的通用组件，统一使用c-开头，并在pages.json中配置easycom进行自动注入。

## 四、规范要求说明

1、新增页面后必须在pages.json中进行注入，在pages文件夹右键新增时可以勾选自动添加至json进行创建。
2、图片引用统一使用<image></image>标签进行设置，以此来实现多端兼容，<img/>原生标签不用
3、所有样式表class，推荐使用全小写加中划线-连字符，如login-box类似这种。
4、所有通用组件，均以第一层级添加至components文件夹内进行自动注入，如组件过于复杂，可在组件文件夹内增加多个vue文件进行组装。
5、默认依赖vue2，但项目中引入了@vue/composition-api插件，和setup插件，以供vue2使用composition-api和setup语法糖。
6、推荐使用vue3的兼容setup兼容写法，但使用时可能会遇到部分问题，因此，不强求所有页面组件等全用vue3兼容写法，但仍需要优先考虑vue3写法。