116
社区成员
发帖
与我相关
我的任务
分享啊对对队——代码规范
| 这个作业属于哪个课程 | 2302软件工程 |
|---|---|
| 这个作业要求在哪里 | 团队作业—bate冲刺+事后诸葛亮 |
| 这个作业的目标 | 代码规范 |
| 团队名称 | 啊对对队 |
| 团队置顶随笔 | 啊对对队——Beta冲刺置顶集合随笔 |
| 其他参考文献 | 无 |
目录
- uniapp规范
- 一、开发规范
- 二、 目录结构
- 2.1 TIP
- 三、导入静态资源
- 3.1模板内引入静态资源
- 3.1.2 TIP
- 3.2 js文件引入
- 3.2.1 WARNING
- 3.3 css引入静态资源
- WARNING
- TIP
- 四、命名规范
- 4.1规范方式
- 4.2 整体规范
- 4.3 命名严谨性
- 4.4 项目命名
- 4.5 目录（文件夹）命名
- 4.6 文件命名
- 4.7 组件命名
- 4.8 css命名
- 4.9 js命名
- 变量&函数
- 五、 vue规范
- 5.1 Router规范
- 页面跳转数据传递使用路由参数
- 5.2使用路由懒加载（延迟加载）机制
- 5.3 router中的命名规范
- 5.4 Vue组件及内容规范
- 标签顺序保持一致
- 4.5 组件/实例的选项的顺序
- 5.7 模板中的组件名
- 5.8 组件数据
- 5.9 Prop定义
- 5.10 多个attribute的元素
- 5.11 模板中使用简单的表达式
- 5.12 指令推荐都使用缩写形式
- 5.13 v-show 与 v-if 选择
- 5.14 为v-for设置键值
- 5.15 避免 v-if 和 v-for 同时用在一个元素上（性能问题）
- 提示
- 六、小程序规范
- 6.1 规范细则
uniapp规范
参考uniapp官网
一、开发规范
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范，详见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和注册组件，然后才能使用. - 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
- 为兼容多端运行，建议使用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 }}
<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>
...全文
请发表友善的回复…
发表回复
