1.开发基本规范

文件命名规则

  • 图片文件写法

    1. 例如：images/icon/icon-error.png、images/icon/icon-error-large.png等。

  • 公共样式

    1. 例如：styles/common.less、styles/icon.less、styles/taro-ui.less等。

  • 页面文件

    1. 例如：pages/home/index.js、pages/detail/index.js、pages/searchResult/index.js等。

  • 页面组件

    1. 例如：pages/detail/modules/Slider.js、pages/detail/modules/Map.js等。

  • 公共组件

    1. 例如：components/Panel/index.js、components/SearchResult/index.js、components/LoadingMore/index.js等。

2.脚本书写规范

  • 组件的自定义事件必须试用on前缀

    1. <LoadMore
    2. onComplete={this.handleMoreComplete}
    3. />

  • 事件处理函数统一使用handle前缀

    1. // 跳转至详情页
    2. handleNavToDetail = (id) => {
    3. Taro.navigateTo({ url: `/pages/detail/index?id=${id}` })
    4. }

  • 动态className命名统一采用classnames第三库进行

    1. <View
    2. className={classnames({
    3.   'order-list__item': true,
    4.   'order-list__item--first': index === 0
    5. })}
    6. />

  • 页面的state声明尽可能添加注释

    1. this.state = {
    2. // 列表数据
    3. listData: [],
    4. // 头部筛选定位样式
    5. listFixedStyle: '',
    6. // 工单状态
    7. workOrderStatus: '',
    8. // 工单记录的数量
    9. orderCount: '',
    10. }

  • import的书写顺序按npm库、功能脚本、组件、样式依次进行

为了便于import导入语句的阅读，不同种类的导入代码之间空一行，示例如下：

  1. // NPM库
  2. import Taro from '@tarojs/taro'
  3. import {View} from '@tarojs/components'
  4. import classnames from 'classnames'
  6. // 功能脚本
  7. import Actions from '../../../actions/actions'
  8. import Util from "../../../utils/util"
  9. import Dict from '../../../utils/dict'
  11. // 组件
  12. import ListScrollLoad from "../../../components/ListScrollLoad/index"
  13. import ListStatus from "../../../components/ListScrollLoad/ListStatus"
  14. import Field from '../../../components/FormFied/Field'
  16. // 样式
  17. import './index.less'

3.开发注意事项微信小程序调试需要关闭的项目设置

  • 微信小程序调试需要关闭的项目设置

    1. 需要设置关闭 ES6 转 ES5 功能，开启可能报错。
    2. 需要设置关闭上传代码时样式自动补全，开启可能报错。
    3. 需要设置关闭代码压缩上传，开启可能报错。

  • 微信自定义组件的注意事项

    1. 微信组件不支持传递函数，只有自定义事件。
    2. 组件之间传递对象为值的拷贝，而非引用。
    3. 在Form组件的onSubmit事件中，无法收集自定义组件中使用的表单控件的值，需要通过自定义组件的 behaviors: ['wx://form-field'] 设置让自定义组件拥有类似表单控件的行为，这样才能被父级的Form识别。

  • 向组件传递jsx内容的props命名必须以render开头 ```javascript 在微信小程序中，向组件传递wxml内容是通过 slot 的方式进行的，而 Taro 在实现这一功能时必须给 slot 取名，所以要求必须以 render 开头，这样便于识别 slot 命名。

class Dialog extends Component { render () { return ( {this.props.renderHeader} {this.props.children} ) } }

  2. - 无法使用无状态组件或者js定义函数拆分页面模块
  3. ```javascript
  4. 我们在进行以 React 开发的项目中，可能会使用 无状态组件 或者 jsx定义函数 来将页面的结构进行拆分，而不是以组件的形式进行拆分。
  6. 但是到了 Taro 这里，由于编译的局限性：
  8. Taro 不支持 无状态组件（参见说明）。
  9. Taro 不支持在 render() 之外的地方定义 jsx 内容（参见说明）。
  10. 所以到了 Taro 这里，我们就只剩下组件的方式来拆分页面模块了。