# uni-test

**Repository Path**: xiaowenele/uni-test

## Basic Information

- **Project Name**: uni-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-04
- **Last Updated**: 2024-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[TOC]

# 代码规范
前置条件 开发者需要掌握的
- Html

- Javascript(ES6)

- CSS(Sass)

- <a href="https://cn.vuejs.org/index.html" target="_blank">Vue</a>

- <a href="https://uniapp.dcloud.io/" target="_blank">Uni-app</a>

## 运行环境

[Node.js](http://nodejs.cn/) + [HBuilderX](https://www.dcloud.io/hbuilderx.html)

## 安装

 命令行切换到代码目录下，执行以下命令安装依赖

    ```shell script
    npm install
    ```
    
## 规范

### Git规范
- master为正式环境分支，不允许在上面进行开发
- dev为公共开发分支，开发提交的内容请提交至dev；

- git提交尽量以每一项修改提交一次，尽量不要多项修改一次提交，备注信息请勿提交“111”，“aaaa”这样不明意思的内容；

- 项目发布后，涉及到比较大的改动或新功能开发，建议自己创建分支进行开发；

- 自己创建的分支需要经常把dev合并到自己的分支，以面差异过多产生冲突；

- 自己分支开发的内容确认开发完成需要测试时，合并到dev分支；

### 代码基础规范


- 代码结尾不允许有分号；

- Html代码标签属性使用双引号，示例

    ```html
    <view msg="hello"></view><!--正确示范-->
    <view msg='hello'></view><!--错误示范-->
    ```
- CSS代码风格规范
    -  使用scss编辑css代码 示例
    ```css
    /* 正确示范 */
    .item-name {
        .name {
        
        }
    }
     /* 错误示范 */
    .item-name {}  
    .item-name .name{
        
    }
    ```
    
- JavaScript代码字符串优先使用''或``，示例

    ```javascript
    const str = 'hello'; // 正确示范
    const str = `hello`; // 正确示范
    
    const str = "hello"; // 错误示范
    ```


- 组件规范  [https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83)





### 静态图片

- 图片 ./static/image/


## 代码说明

### 目录结构

    ```
    api                  // 所有接口
    components           // 组件
    config               // 全局配置
    core                 // js工具库
		└──  request         // 接口请求封装
		└──  utils       		 // 全局公共方法
    mixins               // 全局混入
    pages                // 页面布局组件
    static               // 静态资源
    store                // vuex
    App.vue              // 全局生命周期控制
    index.html           // html入口
    main.js              // 入口文件
    manifest.json        // uni配置文件
    pages.json           // 页面配置
    uni.scss             // 全局样式
    ```
### 生命周期

页面的生命周期使用页面的生命周期，参见

[https://uniapp.dcloud.io/frame?id=页面生命周期]

组件生命周期使用vue组件的生命周期，参见

[https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子]

### 组件使用规范

#### 样式 穿透
- 在vue文件中的style标签上，有一个特殊的属性：scoped。
当一个style标签拥有scoped属性时，
它的CSS样式就只能作用于当前的组件，
也就是说，该样式只能适用于当前组件元素。
通过该属性，可以使得组件之间的样式不互相污染。
如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
```html
<style>
    /* global styles */
</style>
```

```html
<style scoped>
    /* local styles */
</style>
```

- 编译前

```html
<style scoped>
    .example {
      color: red;
    }
</style>

<template>
    <div class="example">hi</div>
</template>

```

- 编译后

```html
<style>
    .example.data-v-5558831a. {
      color: red;
    }
</style>

<template>
  <div class="example" data-v-5558831a>hi</div>
</template>
```

穿透方法
```
<style scoped>
    外层 /deep/ 第三方组件 {
        样式
    }
</style>
```


### vuex

- modules 模块化 以及 组件中引入 mapGetters、mapActions 和 mapStates的使用
index.js
```javascript
    import Vue from 'vue'
    import Vuex from 'vuex'
    // 模块引入
    import user from './modules/user.js'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        modules:{
             user: user,
        }
    })
```

```javascript
    // store/modules/user.js
    const user = {
        state: {
            userName: '',  //初始化数据
        },
        mutations: { // 只能做同步操作
            setUserName(state,data){   //如何变化collects,插入items    
                state.userName = data
            }
        },
        actions: {// 可以做异步操作
            actionsUserName(context,item){ // 调用setUserName ,传入数据形参item 对应到items
                return new Promise((resolve, reject) => {
                        context.commit('setUserName',item)
                    })
                }
        }
    }
    export default user
```
- getters写法参考store/getters.js

```javascript
import { mapState,mapGetters,mapActions } from 'vuex'
export default {
    computed: {
        ...mapState({ //ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
            userName: (state)=> state.user.userName
        }),
        ...mapGetters([{ //用mapGetters来获取user.js里面的getters
          userName: 'getUserName'
        }])
    },
    mounted() {
        this.$store.dispatch('actionsUserName') // 执行 user.js里的 actions里的方法
    },
    methods: {
        ...mapActions([ //user是指modules文件夹下的user.js
          'actionsUserName'  //user.js文件中的actions里的方法，在上面的@click中执行并传入实参
        ])
    }
}
```