121
社区成员




这个作业属于哪个课程 | 2302软件工程 |
---|---|
这个作业要求在哪里 | 团队作业—bate冲刺+事后诸葛亮 |
这个作业的目标 | 代码规范 |
团队名称 | 啊对对队 |
团队置顶随笔 | 啊对对队——Beta冲刺置顶集合随笔 |
其他参考文献 | 无 |
参考uniapp官网
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
template
,且这个 template
下只能且必须有一个根 view
组件;bindchange="eventName"
事件,需要写成 @change="eventName"
;easycom
规范,则需要在代码里手动import和注册组件,然后才能使用.一个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 配置页面路由、导航条、选项卡等页面类信息
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>
js文件或script标签内(包括renderjs等)引入js文件时,可以使用相对路径和绝对路径,形式如下
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
js文件不支持使用/开头的方式引入
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
自HBuilderX 2.6.6起支持绝对路径引入静态资源,旧版本不支持此方式
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
帕斯卡拼写法,英文为PascalCase,特点是所有连接单词的首字母大写,可以简称为大坨峰
骆驼拼写法,英文为camelCase,特点是第一个连接的单词的首字母小写,其余大写,可以简称为小坨峰;
短横拼写法,英文为kebab-case,特点是所有连接的单词以中划线(-)连接,可以简称为中划线。
文件和文件夹中除components中组件文件夹要使用 大坨峰规则外,其他文件和文件夹都为中划线分隔。
命名不可使用中文拼音
字母统一小写,专有名词可大写
共性在前,个性在后
语义要清楚完整,不要过分简写
与后端命名统一。比如权限:后端privilege, 前端无论router , store, api等都必须使用privilege单词!
文件和代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解,避免歧义。 注:beijing、henan、rmb 等国际通用的名称,可视同英文。
文件夹代表着功能或者模块的名字,应该简洁明了。 除components组件目录,使用大坨峰命名, node_modules 依赖外,其余全部采用字母组成,中划线拼接。 有复数结构时,要采用复数命名法
普通示例:
scripts/、styles/、images/、utils/、layouts、company-news/、img/、js/、doc/、api/、order/
特殊:
node_modules示例:node_modules/、 components示例:SvgIcon、Upload、TestUnit
文件包括.js .css .html .vue .sass .less 图片等文件
字母组成,中划线拼接
例:sass-index.scss dialog-user-info.vue
// 声明
import DialogUserInfo form '@/components/dialog-user-info'
components: {
DialogUserInfo
}
// 使用
<DialogUserInfo></DialogUserInfo>
字母组成,中划线拼接 id采用驼峰式命名
例:.color-white #theDialog
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
{
path: '/uploadAttachment',
name: 'uploadAttachment',
meta: {
title: '上传附件'
},
component: () => import('@/view/components/uploadAttachment/index.vue')
}
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: '加载列表文件' }
}
]
}
]
}
];
<template>...</template>
<script>...</script>
<style>...</style>
组件/实例的选项应该有统一的顺序。下面是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。
name > components > filters > mixins > props > data > computed > watch > 钩子函数(按其执行顺序) > methods
//副作用 (触发组件外的影响)
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', // ...
}
对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是大坨峰命名,并且使用自闭合组件。但是在 DOM 模板中总是中划线命名,并且需要有闭合标签。
//在单文件组件和字符串模板中
<MyHeader>
<MyComponent/>
<table :column="data" />
</MyHeader>
//在 DOM 模板中
<my-component>
<table :column="data"></table>
</my-component>
组件的 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'
}
})
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
}
}
}
大于两个attribute的元素应该分多行撰写,每个attribute一行。
<div class="main"></div>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
正例:
<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>
用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot
<input
@input="onInput"
@focus="onFocus"
>
如果运行时,需要非常频繁地切换,使用v-show;如果在运行时,条件很少改变,使用 v-if。另外v-if比较耗性能,大量元素和内容进行判断,建议用v-show。
总是用 key 配合 v-for。在组件上总是必须用 key 配合 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy),也是一种好的做法。
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
*(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>
<style scoped>
.btn-close {
background-color: red;
}
</style>
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
})
}
1.折叠展开之类,用 transition
2.城市下拉树之类,用 popup
1.单页面重写组件样式
2.custom-class自定义的样式
return resolve('complete')
}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)
}
}) if (res === 'complete') {
// 提交操作
...
}
}, () => { // 上传失败
})<button :disabled="!ableSubmit" class="width100 bgcolor-orange color-white" @tap="buy">立即购买</butt>