一、项目目录规范
项目名
项目名要求使用语义清晰，简短，统一使用英文小写，并且使用-隔开，后缀要加-wx以区分是小程序项目，例如：dp-esa-wx、dp-cbell-wx。
项目结构
├─ miniprogram # 小程序源码目录
├─ miniprogram_npm # 构建后的npm依赖包
├─ components # 组件目录
├─ config # 配置文件
├─ assets # 静态资源
├─ pages # 页面目录
├─ home # 页面文件夹
├─ index.wxml # 页面wxml结构
├─ index.json # 页面json
├─ index.js # 页面js
├─ index.less # 页面样式
├─ other
├─ index.wxml
├─ index.json
├─ index.js
├─ index.less
...
├─ utils # 工具方法文件夹
├─ app.js
├─ app.json
├─ app.less
├─ sitemap.json # 小程序检索相关配置
├─ node_modules # 依赖包
├─ .gitignore # git相关配置
├─ package.json # 项目依赖json
├─ project.config.json # 项目配置文件
页面目录
1. 由历史原因和个人习惯导致目录命名不统一，语义不清晰，不同成员在维护时难以快速识别。
- 目录命名应遵循以下规范：
- 尽量简短
- 采用英文小写方式
- 单词间以下划线连接
- 英文语义需与当前目录实现的功能保持一致
- 如有复数，应采用复数命名
- 不应该出现数字和除下划线以外的特殊符号
- 示例：
// Bad
├─ pages/
├─ About/
├─ grouplist/
├─ group-list/
├─ group_list3/
├─ groupList/
├─ gl/
├─ yong_hu/
// Good
├─ pages/
├─ about/
├─ group_list/
├─ users/
2. 小程序规定，一个页面由wxml，wxss，js，json四个文件组成。为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
- 示例：
// Bad
├─ home/
├─ index.wxml
├─ index.wxss
├─ index.js
└─ index.json
// Good
├─ home/
├─ home.wxml
├─ home.wxss
├─ home.js
└─ home.json
3. 非公共组件和资源可放入对应页面的的文件下的components和images里。
- 示例：
├─ home/
├─ home.wxml
├─ home.wxss
├─ home.js
└─ home.json
├─ mine/
├─ components/
├─ avatar/
├─ avatar.wxml
├─ avatar.wxss
├─ avatar.js
└─ avatar.json
├─ images/
└─ avatar.png
├─ mine.wxml
├─ mine.wxss
├─ mine.js
└─ mine.json
二、JS文件规范
1. 强类型检查，使用===代替==
0 == false // true
0 === false // false
2 == "2" // true
2 === "2" // false
// 例子
const value = "500"
fi (value === 500) {
console.log(value); // 没有打印输出
}
if (value == 500) {
console.og(value); // 打印出：500
}
2. 变量
- 给变量命名时，应该要使变量名具有代表意图的象征，使人易于搜索并且容易理解。
// Bad
let daysSLV = 10;
let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
ok = true;
}
//本人解释：y,ok这些什么玩意儿呢，30又是什么意思呢？
// Good
const MAX_AGE = 30; //哦，是最大的年龄
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();//哦，是当前年份
···
const isUserOlderThanAllowed = user.age > MAX_AGE;
- 不要在变量名中增加没必要的额外单词
// Bad
let nameValue;
let theProduct;
// Good
let name;
let product;
- 不要强行记忆变量的上下文
// Bad
const users = ["John", "Marco", "Peter"];
users.forEach(u => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
// 这u什么玩意儿呢？
register(u);
});
// Good
const users = ["John", "Marco", "Peter"];
users.forEach(user => {
doSomething();
doSomethingElse();
// ...
// ...
// ...
// ...
register(user);
});
- 变量名不要加上下文重复的单词
// Bad
const user = {
userName: "John",
userSurname: "Doe",
userAge: "28"
};
...
user.userName;
// Good
const user = {
name: "John",
surname: "Doe",
age: "28"
};
...
user.name;
3. 函数
- 统一使用省略
function函数标识符的写法
// Bad
// 变量函数
var getData = function(params) {
// do something
}
// 定义函数
getData: function(params) {
// do something
}
// 参数函数
getData: function(id, callback) {
// do something
}
// 调用
this.getData(id, functiion(res) {
// do something
});
// Good
// 变量函数
var getData = (params) => {
// do something
}
// 定义函数
getData(params) {
// do something
}
// 参数函数
getData(id, callback) {
// do something
}
// 调用
this.getData(id, (res) => {
// do something
});
- 函数名应该是动词或者短语，代表某种行为，描述它们在做什么
// Bad
notif(user) {
// implementation
}
// Good
notifyUser(emailAddress) {
// implementation
}
- 避免使用大量的参数，理想的情况就是使用两个或者更少的参数。参数越少，测试就越容易
// Bad
getUsers(fields, fromDate, toDate) {
// implementation
}
// Good
getUsers({ fields, fromDate, toDate }) {
// implementation
}
getUsers({
fields: ['name', 'surname', 'email'],
fromDate: '2019-01-01',
toDate: '2019-01-18'
});
- 函数应该使用默认参数，而不是条件语句
// Bad
createShape(type) {
const shapeType = type || "cube";
// ...
}
// Good
createShape(type = "cube") {
// ...
}
（至于为什么，在阮一峰ES6入门-函数参数的默认值中有说明）
- 一个函数应该做一件事，避免在一个函数中执行多个操作。
// Bad
notifyUsers(users) {
users.forEach(user => {
const userRecord = database.lookup(user);
if (userRecord.isVerified()) {
notify(user);
}
});
}
// Good
notifyVerifiedUsers(users) {
users.filter(isUserVerified).forEach(notify);
}
isUserVerified(user) {
const userRecord = database.lookup(user);
return userRecord.isVerified();
}
- 使用
Object.assign设置默认对象
// Bad
const shapeConfig = {
type: "cube",
width: 200,
height: null
};
createShape(config) {
config.type = config.type || "cube";
config.width = config.width || 250;
config.height = config.width || 250;
}
createShape(shapeConfig);
// Good
const shapeConfig = {
type: "cube",
width: 200
// Exclude the 'height' key
};
createShape(config) {
config = Object.assign(
{
type: "cube",
width: 250,
height: 250
},
config
);
...
}
createShape(shapeConfig);
- 不要使用标记作为参数，因为它们告诉你该函数正在做的比它应该做的更多。
// Bad
createFile(name, isPublic) {
if (isPublic) {
fs.create(`./public/${name}`);
} else {
fs.create(name);
}
}
// Good
createFile(name) {
fs.create(name);
}
createPublicFile(name) {
createFile(`./public/${name}`);
}
- 不要污染全局变量。如果需要扩展现有对象，请使用ES6类和继承，而不是在现有对象的原型链上创建函数
// Bad
Array.prototype.myFunc = function myFunc() {
// implementation
};
// Good
class SuperArray extends Array {
myFunc() {
// implementation
}
}
4. 条件语句
- 避免负面条件
// Bad
isUserNotBlocked(user) {
// implementation
}
if (!isUserNotBlocked(user)) {
// implementation
}
// Good
isUserBlocked(user) {
// implementation
}
if (isUserBlocked(user)) {
// implementation
}
- 使用条件语句尽量短点。这可能是微不足道的，但值得一提。此方法仅用于布尔值，并且如果您确定该值不是未定义的或为null
// Bad
if (isValid === true) {
// do something...
}
if (isValid === false) {
// do something...
}
// Good
if (isValid) {
// do something...
}
if (!isValid) {
// do something...
}
- 尽可能避免switch分支，请改用多态和继承。
// Bad
class Car {
// ...
getMaximumSpeed() {
switch (this.type) {
case "Ford":
return this.someFactor() + this.anotherFactor();
case "Mazda":
return this.someFactor();
case "McLaren":
return this.someFactor() - this.anotherFactor();
}
}
}
// Good
class Car {
// ...
}
class Ford extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() + this.anotherFactor();
}
}
class Mazda extends Car {
// ...
getMaximumSpeed() {
return this.someFactor();
}
}
class McLaren extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() - this.anotherFactor();
}
}
5. ES6类
- 类是JavaScript中的新语法糖，跟原型对象一样，只是它现在看起来不同，你应该更喜欢它们而不是ES5的使用构造函数。
// Bad
const Person = function(name) {
if (!(this instanceof Person)) {
throw new Error("Instantiate Person with `new` keyword");
}
this.name = name;
};
Person.prototype.sayHello = function sayHello() { /**/ };
const Student = function(name, school) {
if (!(this instanceof Student)) {
throw new Error("Instantiate Student with `new` keyword");
}
Person.call(this, name);
this.school = school;
};
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };
// Good
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
/* ... */
}
}
class Student extends Person {
constructor(name, school) {
super(name);
this.school = school;
}
printSchoolName() {
/* ... */
}
}
- 使用方法链接，许多库如jQuery和Lodash都使用这种模式。因此，您的代码将不那么冗长。在你的类中，只需在每个函数的末尾返回它，你就可以将更多的类方法链接到它上面。
// Bad
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
}
setAge(age) {
this.age = age;
}
save() {
console.log(this.name, this.surname, this.age);
}
}
const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();
// Good
class Person {
constructor(name) {
this.name = name;
}
setSurname(surname) {
this.surname = surname;
// Return this for chaining
return this;
}
setAge(age) {
this.age = age;
// Return this for chaining
return this;
}
save() {
console.log(this.name, this.surname, this.age);
// Return this for chaining
return this;
}
}
const person = new Person("John")
.setSurname("Doe")
.setAge(29)
.save();
6、常规的避免
一般来说，尽量不要重复自己，就是说不应该编写重复的代码，也不要在你身后留下尾巴，比如未使用的函数和死代码。
由于各种原因，你最终可能会有重复的代码。比如，你可能有两个略有不同的东西，它们有许多共同之处，有时期限不足的迫使你创建包含几乎同样代码的单独函数。
关于死代码，这正如它的名字。它没有做任何事情，因为在某些开发阶段，你已经决定不再用它，您应该在代码库中搜索这些不需要的函数和代码块并删除。 我建议你，一旦你决定不再需要它，就马上删除它， 以防你以后可能会忘记它的用途。
(以上JS规范大量参考//www.greatytc.com/p/2346cb6b7279)
三、WXSS文件规范
1. 注释
- 基本语法
- 注释代码以
/*开始，以*/结束 - 注释不能嵌套
- 示例
/* 单行注解 */ /* * 多行注解 * 1234567 */ - 注释代码以
- 注释内容
- 对于一般性注解，书写简单的短语；对于较长的注解，书写完整的句子。
- Bad
/* 这是用户头像的样式 */ .avatar { width: 200rpx; height: 200rpx; }- Good
/* 用户头像 */ .avatar { width: 200rpx; height: 200rpx; } - 注释位置
- 注释应该写在被注释代码块的上一行，或者单行注释时放在单行后面，不要放在代码块的
{后
/* Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ } - 注释应该写在被注释代码块的上一行，或者单行注释时放在单行后面，不要放在代码块的
- 注释格式
- 注释内容的第一个字符和最后一个字符皆为一个空格字符
- Bad
/*用户昵称*/ .name { ... }- Good
/* 用户昵称 */ .name { ... } /* * Modal header */ .modal-header { ... } - 单行注释
- Bad
.name { /* 用户昵称 */ color: #fff; /* 颜色 */ wight: 80rpx; /* 宽 */ }- Good
/* 用户昵称 */ .name { /* 颜色 */ color: #fff; widht: 80rpx; /* 宽 */ heigth: 80rpx; /* 高 */ } - 模块注释
- Bad
/* 模块A -------------------------------------------------- */ .modules_a {} /* 模块B -------------------------------------------------- */ .modules_b {}- Good
/* 模块A ----------------------------------------------------------- */ .modules_a {} /* 模块B ----------------------------------------------------------- */ .modules_b {}
2. 代码规范
-
代码风格
代码格式化
样式书写一般有两种：一种是紧凑格式 (Compact).jdc{ display: block;width: 50px;}一种是展开格式（Expanded）
.jdc{ display: block; width: 50px; }开发约定：统一使用展开式书写样式。
-
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。/* 推荐 */ .jdc{ display:block; } /* 不推荐 */ .JDC{ DISPLAY:BLOCK; } -
选择器
尽量少用通用选择器*
不使用 ID 选择器
不使用无具体语义定义的标签选择器/* 推荐 */ .jdc {} .jdc li {} .jdc li p{} /* 不推荐 */ *{} #jdc {} .jdc div{} -
代码缩进
统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）.jdc { width: 100%; height: 100%; } -
分号
每个属性声明末尾都要加分号；.jdc { width: 100%; height: 100%; } -
代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格/* 推荐 */ .jdc { width: 100%; } /* 不推荐 */ .jdc{ width:100%; }逗号分隔的取值，逗号之后一个空格
/* 推荐 */ .jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; } /* 不推荐 */ .jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; }为单个css选择器或新申明开启新行
/* 推荐 */ .jdc, .jdc_logo, .jdc_hd { color: #ff0; } nav{ color: #fff; } /* 不推荐 */ .jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; }颜色值
rgb()rgba()hsl()hsla()rect()中不需有空格，且取值不要带有不必要的 0/* 推荐 */ .jdc { color: rgba(255,255,255,.5); } /* 不推荐 */ .jdc { color: rgba( 255, 255, 255, 0.5 ); }属性值十六进制数值能用简写的尽量用简写
/* 推荐 */ .jdc { color: #fff; } /* 不推荐 */ .jdc { color: #ffffff; }不要为
0指明单位/* 推荐 */ .jdc { margin: 0 10px; } /* 不推荐 */ .jdc { margin: 0px 10px; } -
属性值引号
css属性值需要用到引号时，统一使用单引号/* 推荐 */ .jdc { font-family: 'Hiragino Sans GB'; } /* 不推荐 */ .jdc { font-family: "Hiragino Sans GB"; } -
属性书写顺序
建议遵循以下顺序：- 布局定位属性：display / position / float / clear / visibility / overflow
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } -
CSS3浏览器私有前缀写法
CSS3 浏览器私有前缀在前，标准前缀在后.jdc { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
四、WXXL文件规范
1. 选择器(class)命名规范
-
class选择器命名基本规则
以字母开头，全部字母小写
尽量简短、明确
单个名字如果由多个词组成，单词间以下划线_连接<text class="image_url"> ... </text>层级关系以中划线-连接
<text class="notice-title"> ... </text> -
继承式命名
为了保证我们设计的class样式既能重复利用，又能避免冲突。我们采用继承式来给class样式命名。
每个页面一般都可以分成几个模块，我们把每个模块最外层的class名作为祖先，模块内部的class样式名用祖先名作为前 缀，它们以中划线-连接。（通过这种方式来表示class样式的作用域// home是祖先模块，user和event是home的直接子模块 <view class="home"> <view class="home-user"> // 用户信息 </view> <view class="home-event"> // 动态详情 </view> </view>在页面结构里，模块内部可以有子模块，子模块下面可以有孙子模块，以此类推。class样式命名也按这个层级。
// home是祖先模块，user和event是home的直接子模块 // user下面又有两个子模块name和signature <view class="home"> <view class="home-user"> <view class="home-user-name"> // 用户信息 </view> <view class="home-user-signature"> // 个性签名 </view> </view> <view class="home-event"> // 动态详情 </view> </view> -
缩写
当页面结构复杂，层级过多，样式名的前缀就会太多太长，我们需要对前缀进行缩写。
当样式名的前缀太多(一般超过2个)或太长，我们把每两个前缀作为一组，取每个前缀的第一个字母合在一起组成新的前缀，前缀与前缀或class样式之间以中划线-连接。缩写时要保证新的前缀具有唯一性和可辨识性。// home是祖先模块，user和event是home的直接子模块 // user下面又有两个子模块name和signature <view class="home"> <view class="home-user"> // hu就home-user的缩写 <view class="hu-name"> // 用户信息 </view> <view class="hu-signature"> // 个性签名 </view> </view> <view class="photos-desc"> // he 是photos-desc缩写 <view class="he-photos"> <image class="he-photos-image" src="..."></image> <view class="he-photos-desc"> // pd 是photos-desc的缩写 <text class="he-pd-text">...</text> </view> </view> <view class="he-video"> ... </view> </view> </view> -
常用命名推荐
ClassName 含义 about 关于 account 账户 arrow 箭头图标 article 文章 aside 边栏 audio 音频 avatar 头像 bg,background 背景 bar 栏（工具类） branding 品牌化 crumb,breadcrumbs 面包屑 btn,button 按钮 caption 标题，说明 category 分类 chart 图表 clearfix 清除浮动 close 关闭 col,column 列 comment 评论 community 社区 container 容器 content 内容 copyright 版权 current 当前态，选中态 default 默认 description 描述 details 细节 disabled 不可用 entry 文章，博文 error 错误 even 偶数，常用于多行列表或表格中 fail 失败（提示） feature 专题 fewer 收起 field 用于表单的输入区域 figure 图 filter 筛选 first 第一个，常用于列表中 footer 页脚 forum 论坛 gallery 画廊 group 模块，清除浮动 header 页头 help 帮助 hide 隐藏 hightlight 高亮 home 主页 icon 图标 info,information 信息 last 最后一个，常用于列表中 links 链接 login 登录 logout 退出 logo 标志 main 主体 menu 菜单 meta 作者、更新时间等信息栏，一般位于标题之下 module 模块 more 更多（展开） msg,message 消息 nav,navigation 导航 next 下一页 nub 小块 odd 奇数，常用于多行列表或表格中 off 鼠标离开 on 鼠标移过 output 输出 pagination 分页 pop,popup 弹窗 preview 预览 previous 上一页 primary 主要 progress 进度条 promotion 促销 rcommd,recommendations 推荐 reg,register 注册 save 保存 search 搜索 secondary 次要 section 区块 selected 已选 share 分享 show 显示 sidebar 边栏，侧栏 slide 幻灯片，图片切换 sort 排序 sub 次级的，子级的 submit 提交 subscribe 订阅 subtitle 副标题 success 成功（提示） summary 摘要 tab 标签页 table 表格 txt,text 文本 thumbnail 缩略图 time 时间 tips 提示 title 标题 video 视频 wrap 容器，包，一般用于最外层 wrapper 容器，包，一般用于最外层
2. 注释规范
- 注释
代码是由人编写并维护的，我们要尽可能保证写的代码能够自描述、注释良好并且易于他人理解。好的注释能够传达上下文关系和代码目的。
注释代码以结尾。
标准写法
错误写法<!-- 动态列表 --><!--> 动态列表 --> <!---> 动态列表 <--> <!-- 动--态--列表 --> <!-- 动态列表 ---> - 单行注释
一般用于简单的描述，如状态描述，属性描述等。书写时应遵循以下规范：
注释内容前后各一个空格字符
注释位于注释代码上面
单独占一行
推荐：
不推荐：<!-- 支付模块 --> <div> ... </div><!--积--分--信息--> <view> ... </view> <!-- 积分信息 ---> <view> ... </view> <view> ... </view> <!-- 积分信息 --> <view> <!-- 积分信息 --> ... </view> - 代码块注释
一般用于描述某一块代码的名称或开始，结束位置。书写时应该遵循以下规范
注释内容前后各一个空格字符
表示代码块开始， 表示代码块结束
代码块与代码块之间相隔一行
推荐：
不推荐：<!-- S Comment Text A --> <div class="mod_a"> ... </div> <!-- E Comment Text A --> <!-- S Comment Text B --> <div class="mod_b"> ... </div> <!-- E Comment Text B --><!-- S Comment Text A --> <div class="mod_a"> ... </div> <!-- E Comment Text A --> <!-- S Comment Text B --> <div class="mod_b"> ... </div> <!-- E Comment Text B --> - 嵌套代码块注释
用于代码块内嵌套的代码块的注释，注释格式由
改为<!-- 注释内容 开始 --> <!-- 注释内容 结束 -->
推荐：<!-- /注释内容 -->
不推荐：<!-- 个人主页 开始 --> <view> <view class="personal_info"> ... </view> <!-- /个人信息 --> <view class="personal_event_list"> ... </view> <!-- /动态列表 --> </view> <!-- 个人主页 结束 --><!-- 个人主页 开始 --> <view> <!-- 个人信息 开始 --> <view class="personal_info"> ... </view> <!-- 个人信息 结束 --> <!-- 动态列表 开始 --> <view class="personal_event_list"> ... </view> <!-- 动态列表 结束 --> </view> <!-- 个人主页 结束 -->
3. 代码规范
-
标签
小程序视图层开发基于小程序框架为开发者提供的一系列基础组件，这些基础组件通常以双标签或单标签的形式使用。
双标签包括起始标签<标签>，结止标签</标签>和属性，内容在这两个标签之内
单标签只有一个<标签/>，有属性，没有内容
小程序规定，标签名有多个词时，词之间以连接符-连接。<tag-name property="value"> 内容放这里... </tag-name> <tag-name property="value"/>编码时要遵循标签的语义，要尽量使用最少的标签并保持最小的复杂度。
-
代码大小写
所有标签和属性，大部分属性值统一使用小写
推荐：<view class="demo">...</view>不推荐：
<view class="DEMO">...</view> <VIEW CLASS="DEMO"> ... </VIEW> -
标签的闭合
在小程序里，有些组件必须写成双标签，如视图容器类组件view；有些组件可以写成单标签，如媒体类组件image；但在小 程序运行时，它们都会解析成双标签。
在小程序里，所有的标签一旦使用都必须被闭合，使用标签不闭合会报错，导致程序无法运行。
正确写法：<view> <text>我是一段文字，我有始有</text> </view>错误写法：
<view> <text>我是一段文字，我有始有 </view>所有具有开始标签和结束标签的元素都要写上起止标签，某些可以省略结束标签的亦都要写上
推荐写法：<view> <input value="test"></input> <text>我是一段文字，我有始有</text> </view>不推荐：
<view><input value="test"></view> -
标签属性
标签属性值使用双引号语法
属性值可能写上的都写上
推荐:<input type="text"></input> <input type="radio" name="name" checked="checked" ></input>不推荐:
<input type=text></input> <input type='text'></input> <input type="radio" name="name" checked ></input> -
谨慎使用id属性
id属性具有唯一性，可以用来标识具体组件，应避免在样式上使用id属性（选择器）
属性书写顺序
标签属性应按照以下顺序依次排列，以确保代码的可读性id, class, wx:for wx:item wx:key, wx:if, src, 事件绑定类属性，如bind:tap, value, dataSet,(*需完善) 组件自带的其它属性, -
特殊字符
正常情况下的小程序里，文本和字符实体不能混合出现。
如需使用字符实体，需使用text组件并设置decode属性，并且decode目前仅可解析 < > & ' ，参考text文档
正确用法<text decode="">< ></text>错误用法
<text>< ></text> <view decode="">< ></view>特殊符号使用输入法输入即可
连续空格的使用
需使用text组件并设置space属性
无space属性的text内多个连续空格最终只显示一个
非text组件设置space属性不会有连续空格的效果
正确写法<text space="ensp">1 1 1 1</text> // 输出：1 1 1 1无效写法
<text>1 1 1 1</text> // 输出：1 1 1 1 -
代码缩进
统一使用4个空格字符进行代码缩进<view> <text>4个空格字符缩进</text> <view>...</view> <view>在微信开发者工具-设置-编辑设置，勾选用空格代码Tab，Tab大小设置为4，使用格式化代码可以自动缩进对</view> </view> -
代码嵌套
编写wxml代码时，需要保证页面结构稳固，同时需要避免多余的父元素，减少嵌套。
推荐写法<view class="user_info"> <text class="nickname">小明</text></view>不推荐写法
<view class="user_info"><view class="avatar"></view> <view class="nickname"><text>小明</text></view></view> -
块级标签的起止标签各占一行，行内标签的起止标签一般写在一行内，如果标签内容过多，起止标签则各占一行。
推荐写法<view class="user_info"> <text>小明</text> <text>原有奖励模式已改为积分奖励，针对部分未兑换礼品的用户，已为您补发积分奖励，如有疑问请联系微信客服：yiniankefu</text> </view>不推荐写法
<view class="user_info"> <text>小明</text></view>
