uni-app编码规范

1. 文件命名

Bad

// 组件文件名为CamelCase
<template>
  <view>MyComponent</view>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

Good

// 组件文件名使用小写和短横线分隔
<template>
  <view>my-component</view>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

使用小写和短横线分隔的文件名（kebab-case），以保持一致性。

2. 组件命名

Bad

// 组件名称没有后缀
export default {
  name: 'MyComponent'
}

Good

// 组件名称包含后缀Component
export default {
  name: 'MyComponentComponent'
}

虽然uni-app并不强制要求，但添加后缀Component可以帮助区分组件和其他命名空间。

3. 数据绑定

Bad

<view>{{ message }}</view>

Good

<view>{{ message }}</view>

使用双大括号进行数据绑定。

4. 事件处理

Bad

<button @click="handleClick($event)">Click me</button>

Good

<button @click="handleClick">Click me</button>

在事件处理器中直接使用方法名，避免使用$event除非需要访问原始事件对象。

5. 使用条件渲染

Bad

<view v-if="isVisible">Visible</view>
<view v-else>Invisible</view>

Good

<view v-if="isVisible">Visible</view>

或

<view v-show="isVisible">Visible</view>

使用v-if或v-show进行条件渲染，根据性能需求选择。

6. 使用循环渲染

Bad

<view v-for="item in items" :key="item.id">
  {{ item.name }}
</view>

Good

<view v-for="item in items" :key="item.id">
  {{ item.name }}
</view>

使用v-for指令进行循环渲染，并使用:key来提高性能。

7. 避免过度使用setData

Bad

Page({
  onReady() {
    this.setData({ a: 1 });
    this.setData({ b: 2 });
  }
})

Good

Page({
  onReady() {
    this.setData({ a: 1, b: 2 });
  }
})

在一次setData调用中更新多个数据，以提高性能。

8. 使用API

Bad

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(err) {
    console.error(err);
  }
});

Good

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET'
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.error(err);
});

使用Promise或async/await来处理异步API调用。

9. 使用云函数

Bad

uniCloud.callFunction({
  name: 'myFunction',
  data: {},
  complete: function(res) {
    console.log(res);
  }
});

Good

uniCloud.callFunction({
  name: 'myFunction',
  data: {}
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

使用Promise来处理云函数调用。

10. 使用国际化

Bad

// 硬编码文本
<view>Hello World</view>

Good

// 使用国际化文件
<view>{{ $t('greetings.hello') }}</view>

使用国际化文件来支持多语言。

11. 使用性能优化

Bad

// 在页面加载时执行大量数据处理
onLoad() {
  this.loadData();
}

Good

// 延迟加载数据
onShow() {
  this.loadData();
}

将数据加载操作延迟到页面显示时执行，以提高首屏加载速度。

12. 使用组件通信

Bad

// 子组件直接修改父组件数据
this.$emit('update:parent-data', newValue);

Good

// 子组件通过事件通知父组件更新数据
this.$emit('data-updated', newValue);

使用事件来通知父组件更新数据，避免直接修改父组件的props。

13. 使用生命周期钩子

Bad

// 错误地使用生命周期钩子
mounted() {
  // 这个钩子在uni-app中不存在
}

Good

// 正确使用生命周期钩子
onLoad() {
  // 页面加载时执行初始化操作
}

使用正确的生命周期钩子进行页面和组件的初始化。

14. 使用代码审查

Bad

// 不进行代码审查直接提交代码

Good

// 提交代码前进行代码审查

进行代码审查以确保代码质量和团队一致性。

15. 使用版本控制

Bad

// 不使用版本控制系统

Good

// 使用Git进行版本控制

使用版本控制系统来管理代码变更历史。

16. 使用自动化构建

Bad

// 手动构建和打包项目

Good

// 使用自动化构建工具如npm scripts

使用自动化构建工具来简化开发流程。

17. 使用文档和注释

Bad

// 缺少文档和注释

Good

// 保持良好的文档和注释习惯

编写清晰的文档和注释，方便他人理解和维护代码。

18. 使用单元测试

Bad

// 不编写单元测试

Good

// 使用Jest或Mocha编写单元测试

编写单元测试，确保应用的健壮性和可维护性。

19. 使用性能分析工具

Bad

// 不使用性能分析工具

Good

// 使用Chrome DevTools或uni-app提供的性能分析工具

使用性能分析工具来识别和优化性能瓶颈。

20. 使用异常捕获

Bad

// 不捕获异常

Good

// 在全局或局部使用try-catch捕获异常

使用异常捕获来处理运行时错误，避免应用崩溃。

以上规范只是uni-app编码实践中的一部分，实际项目中还会有更多细节需要考虑。重要的是要建立一套适合团队的规范，并且随着项目的进展不断调整和完善。这些规范应该促进代码的可读性、可维护性和性能优化，同时也要考虑到团队的开发效率和项目需求。