小程序开发语言规范

小程序目录规范

组件文件

所有组件相关文件统一放在components目录下。

图片文件

项目图片文件放置于根目录的image文件夹下，组件独有的图片放在当前组件image目录下

模型文件

模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的models文件夹下，组件相关模型放置于components目录下的models文件夹中。

WXML规范

1. WXML规范

wxml标签可以单独出现的情况，尽量单独出现，如

<input />

2. 注释规范

除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。

CSS规范

1. CSS规范

采用flex进行布局，禁止使用float以及vertical-align。
单位采用vw跟vh做到兼容不同设备。

JS规范

1. JS规范

1. 变量名以及函数名统一采用驼峰命名法；
2. 常量需用const 声明；
3. 采用ES6 关键字let定义变量，尽量不使用var；
4. 删除js文件中未用到的生命周期函数，保持代码的整洁。
5. 点击事件函数命名方式为 on + 事件名 或者业务名。
6. 每个函数之间用一个空行分离结构。

javascript语言规范（补充）

约定JavaScript使用ES6标准开发

关键字

任何时候，避免使用语言保留关键字命名。

变量声明

使用let代替var声明变量，

 let loadding = -1;
 loadding = 0;

使用const声明常量，常量名要求大写，多个词之间以下划线_连接。

 const { HOST, GET_URL } = require("../../utils/api.js");

js允许一个声明可以有多个变量。我们约定，一个声明只有一个变量。

//推荐写法
let a = 0; 
let b = 1;
let c = 2;
//不推荐写法
let a = 0, b = 1, c = 2;

字符串

字符串统一使用单引号’’，不使用双引号""

 let title = '标题标题标题标题标题标题标题';

字符串需要换行或由代码生成的字符串时使用模板字符串 ``

//推荐写法
// 字符串换行
let content = `文本文本文本文本文本文本文本文本文本`;
  
// 代码拼接生成字符串
let editor = '编辑内容';
let text = `本文本文本文本文本文${editor}`; 
//不推荐写法
// 字符串换行,使用 \n
let content = '文本文本文本文本文本文本文本文本文本、 \n 文本文本文本文本文本 \n文本文本文本。';
  
// 代码拼接生成字符串
let editor = '编辑内容';
let text = '本文本文本文本文本文' + editor; 

标题函数

使用箭头函数。箭头函数不仅简洁，还可以保留this指向

 [1,2,3].map((item, index) => {
   let res = item + index;
   return res + 1;
 });

函数只有一个参数时，参数的()省略:

let show = a => {
    alert(a*2);
 }

函数体只有一个return语句时，函数体的{}省略：

 let show = (a,b) => a+b;

数组

使用字面量创建数组

 let arr = [];

使用新方法forEach，map，filter，reduce处理数组数据，代码书写更简洁

//推荐写法
// 取出数组里的偶数
let arr = [1,2,3,4,5,6,7,8];
let result = arr.filter(item=>item%2===0)
// 输出：[2, 4, 6, 8]
//不推荐写法
// 取出数组里的偶数
let arr = [1,2,3,4,5,6,7,8];
let result = [];
for(let i=0; i<arr.length; i++) {
  let item = arr[i];
  if(item%2===0) {
      result.push(item)
  }
}
// 输出：[2, 4, 6, 8]

this

用到this转换的地方，统一使用that

let that = this;