微信小程序注释规范

WXML

1. WXML主要是各类控件的定义，也包括一些控件样式控制的程序，基本上程序是以一块块控件组拼接而成的。因此注释的作用主要是将各个控件组区分开来并且对各控件组的必要信息做出展示。
2. 控件组的区分标准：以内容区分，而不是以程序逻辑区分。如将道路等级作为一个控件组，其中包括text与picker。
3. 控件组的分隔：在控件组的开头和结尾前以下面的形式进行分隔。

<!-- 道路等级 开始 -->
空一行
程序主体
空一行
<!-- 道路等级 结束 -->

<!-- 道路等级 开始 -->

<view>
  <text class="tte" >道路等级：</text>
  <view wx:if="{{bridgeActive.dldj}}">
  <view>
    <picker bindchange="bind_dldj" value="{{index_dldj}}" range="{{arr_dldj}}">
    <view class="content">{{bridgeReveal.dldj}}</view>
    </picker>
  </view>
  </view>
  <view wx:else>
  <view>
    <picker bindchange="bind_dldj" value="{{index_dldj}}" range="{{arr_dldj}}">
    <view class="content">{{bridgeInfo.dldj}}</view>
    </picker>
  </view>
  </view>
  <view class="divLine"></view>
</view>

<!-- 道路等级 结束 -->

4. 在每一个.wxml文件的开头对基本信息做出注释（包括功能、作者、时间）。此外，每次由他人修改后虽然通过git拉取可以看出程序增加与删除的部分，但是还是需要花一定的时间理解修改的内容。因此我们可以在每一个.wxml文件的开头进行注释。

<!--pages/qljc/qljc.wxml-->

<!-- @wuyidan
2021.4.1
@桥梁检测页面的整体框架
（描述整体框架的内容）

@leichenyuan
@2021.6.2
@修改数字框与单位框的的width分别为80%与10%
<view style="width:80%;"></view>
<view style="width:10%; text-align:center" ></view> -->

<!-- 桥梁检测记录页面 开始 -->

Javascript

变量

1. 变量名和函数名统一采用一种命名方法
   驼峰命名法或者下划线

arr_sqxjcfx: ['/','由南往北', '由西往东', '由东往西', '由北往南'],
index_sqxjcfx: 0,
arr_hqxjcfx: ['/','由西往东', '由南往北', '由东往西', '由北往南'],
index_hqxjcfx: 0,
arr_qmjg: ['/','沥青砼', '水泥砼', '其他'],
index_qmjg: 0,


arrSqxjcfx: ['/','由南往北', '由西往东', '由东往西', '由北往南'],
indexSqxjcfx: 0,
arrHqxjcfx: ['/','由西往东', '由南往北', '由东往西', '由北往南'],
indexHqxjcfx: 0,
arrQmjg: ['/','沥青砼', '水泥砼', '其他'],
indexQmjg: 0,

函数

1.私有方法使用下划线开头

_getPromoteAmount: function() {}

2.点击事件函数命名方式为 on + 事件名 或者业务名

  onContactServiceTap: function() { },

3.函数名前缀需加上清晰的动词表示函数功能

• 采用 ES6 关键字 let 定义变量，尽量不使用 var

    // 定义常量
    const a = 1
  
    // 定义变量
    let imageContent =  res.data
    
    // 函数命名
    getInfo:function(){
      return '';
    }
    
    // 私有函数
    _getInfo:function(){
      return '';
    }

• 回调函数统一使用 Promise 函数的方式进行编写，回调成功的参数统一为 res，错误参数为 err

    // promise 处理回调

    let back = new Promise((resolve, reject) => {
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    back.then((res) => {
        console.log('成功回调！', res);
    }).catch((err) => {
        console.log('失败回调！', error);
    });

• 数据绑定变量定义规范：所有涉及到数据绑定的变量均需在 data 中初始化。禁止在不定义的情况下直接 setData

Pages({
 
    data:{
        id : null
    },
    onLoad:function(event){
        let id = event.target.dataset.id
        this.data.id = id
    }
})

程序开头进行基本信息和每次修改后的注释

// @wuyidan
// 2021.4.1
// @qljc.js的整体框架
// （描述整体框架的内容）

// @leichenyuan
// @2021.6.2
// @驼峰变量名的修改
// （内容描述）
// arrSqxjcfx: ['/','由南往北', '由西往东', '由东往西', '由北往南'],
// indexSqxjcfx: 0,
// arrHqxjcfx: ['/','由西往东', '由南往北', '由东往西', '由北往南'],
// indexHqxjcfx: 0,
// arrQmjg: ['/','沥青砼', '水泥砼', '其他'],
// indexQmjg: 0,