微信小程序编码规范

1. 文件结构

Bad

pages/
  index.js
  index.wxml
  index.wxss

Good

pages/index/
  index.js
  index.wxml
  index.wxss
  index.json

每个页面应该有自己的目录，包含.js、.wxml、.wxss和.json文件。

2. 使用Page生命周期函数

Bad

Page({
  onLoad: function(options) {
    console.log(options);
  }
})

Good

Page({
  onLoad(options) {
    console.log(options);
  }
})

使用ES6的箭头函数或函数声明，而不是传统的function关键词。

3. 数据绑定

Bad

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

Good

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

在数据绑定中使用空格来增加可读性。

4. 使用事件绑定

Bad

<button bindtap="handleTap">Tap Me</button>

Good

<button bindtap="handleTap">Tap Me</button>

使用标准的事件绑定语法，注意大小写。

5. 代码分割

Bad

<view wx:for="{{items}}" wx:key="*this">
  {{item.name}}
</view>

Good

<view wx:for="{{items}}" wx:key="*this">
  {{ item.name }}
</view>

在wx:for和wx:key中使用空格来增加可读性。

6. 使用组件

Bad

<view class="header">
  <text>Header</text>
</view>

Good

<view class="header">
  <text class="header-text">Header</text>
</view>

或

<my-header></my-header>

使用特定的类名或自定义组件来封装复用的代码。

7. 使用数据驱动

Bad

<view>Today's date is {{ currentDate }}</view>

Good

Page({
  data: {
    currentDate: new Date().toLocaleDateString()
  }
})

使用数据驱动来更新视图，而不是在模板中硬编码值。

8. 使用条件渲染

Bad

<view wx:if="{{ show }}">
  Show this if true
</view>

Good

<view wx:if="{{ show }}">
  Show this if true
</view>

使用wx:if来根据条件渲染元素。

9. 使用循环渲染

Bad

<view wx:for="{{ items }}" wx:key="*this">
  <view>{{ item }}</view>
</view>

Good

<view wx:for="{{ items }}" wx:key="*this">
  <view>{{ item }}</view>
</view>

使用wx:for来循环渲染列表。

10. 避免过度使用setData

Bad

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

Good

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

合并多个setData调用以提高性能。

11. 使用API

Bad

wx.request({
  url: 'https://example.com/api',
  success(res) {
    console.log(res.data);
  }
})

Good

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

在API调用中添加错误处理。

12. 使用云函数

Bad

wx.cloud.callFunction({
  name: 'myFunction'
})

Good

wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    // parameters
  },
  success(res) {
    console.log(res.result);
  },
  fail(err) {
    console.error(err);
  }
})

在调用云函数时传递参数和错误处理。

13. 使用uni-app

Bad

// 使用原生小程序API

Good

// 使用uni-app API，以获得更好的跨平台支持

使用uni-app可以编写一次代码，在多个平台上运行。

14. 使用国际化

Bad

Page({
  data: {
    greeting: 'Hello'
  }
})

Good

// pages/index/index.json
{
  "i18n": {
    "greeting": {
      "zh_CN": "你好",
      "en_US": "Hello"
    }
  }
}

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

15. 使用微信支付

Bad

// 直接调用微信支付API

Good

wx.requestPayment({
  // payment parameters
}).then(() => {
  console.log('Payment successful');
}).catch(err => {
  console.error('Payment failed:', err);
});

使用wx.requestPayment来处理微信支付。

16. 使用动画API

Bad

// 手动控制元素的样式变化

Good

const animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease-in-out',
});
animation.translateX(100).step();
this.setData({
  animationData: animation.export()
});

使用动画API来创建平滑的动画效果。

17. 使用API文档

Bad

// 不查阅API文档直接编写代码

Good

// 查阅API文档，确保使用正确的参数和方法

查阅官方API文档来确保代码的正确性和效率。

18. 使用调试工具

Bad

// 不使用调试工具，直接上线代码

Good

// 使用微信开发者工具调试代码

使用微信开发者工具来调试和优化小程序。

19. 使用代码审查

Bad

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

Good

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

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

20. 使用版本控制

Bad

// 不使用版本控制系统

Good

// 使用Git进行版本控制

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

以上规范涵盖了微信小程序编码中的一些关键点，但请记住，编码规范应该随着项目需求和团队共识而灵活调整。在实践中，你可能还需要关注诸如代码风格、命名约定、错误处理、测试策略等方面的规范，以确保你的项目能够长期维护和扩展。此外，随着微信小程序框架的更新和生态系统的演变，最佳实践也可能发生变化，因此持续学习和跟进社区的最新发展是非常重要的。