这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	团队作业—bate冲刺+事后诸葛亮
这个作业的目标	代码规范
团队名称	啊对对队
团队置顶随笔	啊对对队——Beta冲刺置顶集合随笔
其他参考文献	无

目录

uniapp规范

参考uniapp官网

一、开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 1. 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 2. 组件标签靠近小程序规范，详见uni-app 组件规范 有几点特别要注意：
• （1） 所有组件与属性名都是小写，单词之间以连字符-连接；
• （2）每个vue文件的根节点必须为 template，且这个 template下只能且必须有一个根 view 组件；
• （3）不推荐使用HTML标签，为了管理方便、策略统一，新写代码时仍然建议使用view等组件；
• （4）组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"；
• （5）uni-app支持的组件分为vue组件和小程序自定义组件；如果扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用；如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用.
• 3. 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 4. 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 5. 为兼容多端运行，建议使用flex布局进行开发

二、 目录结构

一个uni-app工程，默认包含如下目录及文件：

markdown
┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─api                            接口接口目录
│─asses                       css、icon资源目录 
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
│─config                      公共配置文件比如请求域名、端口、缓存等。
│─libs                        第三方sdk工具包
│─mixins                     混入对象
├─hybrid                App端存放本地html文件的目录，
├─platforms             存放各平台专用页面的目录，
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
│─plugin                     第三方插件包
├─static                  存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│─store                     vuex状态管理目录
│─utils                     自定义工具类
├─uni_modules           存放uni_module规范的插件。
├─wxcomponents          存放小程序组件的目录，
├─main.js                 Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

2.1 TIP

• 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

三、导入静态资源

3.1模板内引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

3.1.2 TIP

• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 引入的静态资源在非h5平台，均不转为base64。
• H5平台，小于4kb的资源会被转换成base64，其余不转。
• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

3.2 js文件引入

js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

3.2.1 WARNING

js文件不支持使用/开头的方式引入

3.3 css引入静态资源

• css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

WARNING

自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

• css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）。

  /* 绝对路径 */
  background-image: url(/static/logo.png);
  background-image: url(@/static/logo.png);
  /* 相对路径 */
  background-image: url(../../static/logo.png);
  

TIP

• 引入字体图标请参考，字体图标
• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• h5平台，小于4kb会转base64，超出4kb时不转。
• 其余平台不会转base64

四、命名规范

4.1规范方式

• 帕斯卡拼写法，英文为PascalCase，特点是所有连接单词的首字母大写，可以简称为大坨峰

• 骆驼拼写法，英文为camelCase，特点是第一个连接的单词的首字母小写，其余大写，可以简称为小坨峰；

• 短横拼写法，英文为kebab-case，特点是所有连接的单词以中划线（-）连接，可以简称为中划线。

• 文件和文件夹中除components中组件文件夹要使用 大坨峰规则外，其他文件和文件夹都为中划线分隔。

  4.2 整体规范

• 命名不可使用中文拼音

• 字母统一小写，专有名词可大写

• 共性在前，个性在后

• 语义要清楚完整，不要过分简写

4.3 命名严谨性

• 与后端命名统一。比如权限：后端privilege, 前端无论router , store, api等都必须使用privilege单词！

• 文件和代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解，避免歧义。 注：beijing、henan、rmb 等国际通用的名称，可视同英文。

4.4 项目命名

• 字母组成，中划线拼接,全部采用小写方式，以中划线分隔。前面为项目英文名称，后面为项目的类型。尽量不要用mall-management-system，因为被后台占用。

4.5 目录（文件夹）命名

• 文件夹代表着功能或者模块的名字，应该简洁明了。 除components组件目录，使用大坨峰命名， node_modules 依赖外,其余全部采用字母组成，中划线拼接。 有复数结构时，要采用复数命名法

• 普通示例：
  scripts/、styles/、images/、utils/、layouts、company-news/、img/、js/、doc/、api/、order/

• 特殊：
  node_modules示例：node_modules/、 components示例：SvgIcon、Upload、TestUnit

4.6 文件命名

• 文件包括.js .css .html .vue .sass .less 图片等文件

• 字母组成，中划线拼接

• 例：sass-index.scss dialog-user-info.vue

4.7 组件命名

• 声明&使用：首字母大写，驼峰拼接

// 声明
import DialogUserInfo form '@/components/dialog-user-info'
components: {
    DialogUserInfo
}
// 使用
<DialogUserInfo></DialogUserInfo>

4.8 css命名

• 字母组成，中划线拼接 id采用驼峰式命名

• 例：.color-white #theDialog

4.9 js命名

变量&函数

• 常量：大写字母、数字组成，下划线拼接，例：CONSULT_TYPE 私有变量：字母、数字组成，驼峰拼接，下划线开头，例：_self 普通变量：字母、数字组成，驼峰拼接，例：idCard 构造函数：字母组成，驼峰拼接，首字母大写，例：Vue() 普通函数：字母组成，驼峰拼接，动词+名词方式组合，例：getList()

五、 vue规范

5.1 Router规范

页面跳转数据传递使用路由参数

• 页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });

5.2使用路由懒加载（延迟加载）机制

{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上传附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

5.3 router中的命名规范

• path命名规范选择单个单词组成，如果一个单词不能代表页面意思，可以采用kebab-case命名规范。与vue文件的目录命名的单词保持一致。必须以 / 开头，即使是children里的path也要以 / 开头，这样很方便找到对应的文件。
• name命名规范采用kebab-case命名规范且和component组件名保持一致！（因为要保keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
• meta里面至少要有title属性，并且命名与页面路由和文件名意思相同。

  export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: () =>{
        import('@/views/reload/reload.vue')
    },
    meta: { title: '加载页面' },
    children: [
      {
        path: '/reload/list',
        name: 'reload-list',
        component: () =>{
            import('@/views/reload/reload-list/reload-list.vue')
        },
        meta: { title: '加载列表' },
        children: [
          {
              path: '/reload/list/file',
              name: 'reload-list-file',
              component: () =>{
                import('@/views/reload/reload-list/reload-list-file.vue')
              },
              meta: { title: '加载列表文件' }
          }
        ]
      }
    ]
  }
  ];
  

  5.4 Vue组件及内容规范

  标签顺序保持一致

• 单文件组件应该总是让标签顺序保持为：

<template>...</template>
<script>...</script>
<style>...</style>

4.5 组件/实例的选项的顺序

组件/实例的选项应该有统一的顺序。下面是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

• 常见顺序展示：

  name > components > filters > mixins >  props > data > computed > watch > 钩子函数（按其执行顺序） > methods
  

• 详细展示：
  ```md

//副作用 (触发组件外的影响)
el
//全局感知 (要求组件以外的知识)
name
parent
//组件类型 (更改组件的类型)
functional
//模板修改器 (改变模板的编译方式)
delimiters
comments
//模板依赖 (模板内使用的资源)
components
directives
filters
//组合 (向选项里合并 property)
extends
mixins
//接口 (组件的接口)
inheritAttrs
model
props/propsData
//本地状态 (本地的响应式 property)
data
computed
//事件 (通过响应式事件触发的回调)
watch
//生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
//非响应式的 property (不依赖响应系统的实例 property)
methods
//渲染 (组件输出的声明式描述)
template/render
renderError

### 5.6 组件名字
组件名应该始终是多个单词的，根组件 App 以及 transition 、component 之类的 Vue 内置组件除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

```js

Vue.component('todo-item', { 
// ...
})
import TodoItem from './todo-item'
import TodoItem from './todo/todo-item.vue'
export default { 
  name: 'todo-item', // ... 
}

5.7 模板中的组件名

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是大坨峰命名，并且使用自闭合组件。但是在 DOM 模板中总是中划线命名，并且需要有闭合标签。

//在单文件组件和字符串模板中
<MyHeader>
<MyComponent/>
<table :column="data" />
</MyHeader>
//在 DOM 模板中
<my-component>
<table :column="data"></table>
</my-component>

5.8 组件数据

组件的 data 必须是一个函数。 当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

Vue.component('todo-item', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})

5.9 Prop定义

Prop 定义应该尽量详细。在你提交的代码中，prop 的定义应该尽量详细；至少需要指定其类型；必须加上注释，表明其含义；必须加上required或者default，两者二选其一；如果有业务需要，必须加上 validator 验证

props: {
  status: String
}
props: {
// 组件状态，用于控制组件的颜色
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'version-conflict',
      ].indexOf(value) !== -1
    },
     // 用户级别，用于显示皇冠个数
userLevel：{
type: String,
required: true
   }
  }
}

5.10 多个attribute的元素

大于两个attribute的元素应该分多行撰写，每个attribute一行。

<div class="main"></div>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

5.11 模板中使用简单的表达式

正例：

<template>
  <p>{{ normalizedFullName }}</p>
</template>
// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

5.12 指令推荐都使用缩写形式

用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot

<input
  @input="onInput"
  @focus="onFocus"
>

5.13 v-show 与 v-if 选择

如果运行时，需要非常频繁地切换，使用v-show；如果在运行时，条件很少改变，使用 v-if。另外v-if比较耗性能，大量元素和内容进行判断，建议用v-show。

5.14 为v-for设置键值

总是用 key 配合 v-for。在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

5.15 避免 v-if 和 v-for 同时用在一个元素上（性能问题）

*（1）将数据替换为一个计算属性，让其返回过滤后的列表

<ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
 </ul>
<script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
</script>

• 将 v-if 移动至容器元素上 (比如 ul, ol)#
  ```html

• {{ user.name }}

``` ### 5.16 为组件样式设置作用域 公共样式单独新建css或less、sass文件进行引入，组件内style使用scoped特性。

<style scoped>
.btn-close {
    background-color: red;
}
</style>

提示

• 尽量不要手动操作 DOM，因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。

六、小程序规范

6.1 规范细则

• 单位：rpx
• 生命周期钩子书写顺序：
  ```js

• mixin
• components
• props
• data
• computed
• watch
• onLoad
• onShow
• onPullDownRefresh
• onReachBottom
• onHide
• onUnload
• updated
• methods
  ```

• 页面载入存在脏数据，在 onLoad 钩子进行数据初始化：

  onLoad () {
    Object.assign(this, this.$options.data())
  }
  

• 获取翻页列表格式规范

  // 列表只需加载一次用onLoad，返回该页面会导致列表数据改变用onShow
  onLoad/onShow () {
    wx.startPullDownRefresh()
  }
  // 下拉刷新
  onPullDownRefresh () {
    this.getXxxList(true, false).then(() => {
      wx.stopPullDownRefresh()
    })
  },
  // 上拉翻页
  onReachBottom () {
    this.getXxxList(false, true)
  },
  // 获取xxx列表
  async getXxxList (isRefresh, isLoading) {
    if (isRefresh) {
        this.pageNo = 1
        this.mainList = []
    } else {
        this.pageNo++
    }
    await this.$post({
        isLoading: isLoading,
        loadingText: '加载中...',
        url: this.$apis.list,
        param: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          ...
        }
    }).then(res => {
        this.mainList.push(...res.data.list)
        this.nodata = this.$util.switchNodata(this.mainList)
    }, () => {
        isRefresh && this.nodata = true
    })
  }
  

• van-ui 组件中，动画效果有两个组件，popup 和transition

1.折叠展开之类，用 transition
2.城市下拉树之类，用 popup

• van-ui 组件中的以下情况，样式需要另起一个 style，不加 scoped，必要的话对页面根元素加命名空间

1.单页面重写组件样式
2.custom-class自定义的样式

• 上传图片并提交的一般的逻辑是，提交的时候再做上传操作，上传成功之后调提交的接口
  ```js
  // common.js
  /**
• 上传图片
• @param {String} url 接口路径
• @param {Array} fileArr 图片文件数组
• @param {String} belong 唯一标识
• @param {Number} index 索引，默认从0开始递归
• @return promise异步方法
• /
  const uploadOneImg = (url, fileArr, belong, index = 0) => { // wx.uploadFile只能一张一张传
  return new Promise((resolve, reject) => {
  if (fileArr.length === 0) {

  return resolve('complete')
  

  }
  wx.uploadFile({

  url: url,
  filePath: fileArr[index].path,
  name: 'file',
  header: {
    'content-type': 'application/x-www-form-urlencoded',
    token: store.state.userInfo.token
  },
  formData: {
    belong: belong,
    type: 2 // 1.一般图片2.咨询图片3.pdf4.pdf图片5.反馈与意见图片 6.历史图片中重复的图片 7.白处方图片
  },
  success: res => {
    if (index < fileArr.length - 1) {
      resolve(uploadOneImg(url, fileArr, belong, ++index))
    } else {
      resolve('complete')
    }
  },
  fail: res => {
    reject(res)
  }
  

  })
  })
  }
  // xxx.vue
  import { uploadOneImg } from '@/utils/common'
  submitFeedBack () {
  uploadOneImg(this.$apis.uploadFeedBackImage, this.fileArr, this.belong).then(res => {

    if (res === 'complete') {
        // 提交操作
        ...
    }
  

  }, () => {

    // 上传失败
  

  })
  }
  ```
• 按钮统一用小程序原生

  <button :disabled="!ableSubmit" class="width100 bgcolor-orange color-white" @tap="buy">立即购买</butt>