修订记录
| 版本号 | 修订说明 | 时间 | 修订人 |
|---|---|---|---|
| V1.0 | 初版 | 2021.03 | 王阳 |
| V2.0 |
- 概述
编写目的：通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险，从而确保优化的页面加载、性能以及可维护的代码。
- 开发环境
- 开发IDE
推荐 VScode
下载地址：https://code.visualstudio.com/
安装最新版本即可
1. **推荐VsCode插件**
-Chinese (Simplified) Language Pack for Visual Studio Code-汉化
-Prettier-Code formatter
-Code Spell Checker-拼写检查
-Vetur-Vue tooling for VS Code
-GitLens-git历史
-Document This-注释
-TODO Highlight 高亮显示
-Todo Tree 目录好找
-JavaScript (ES6) code snippets Code snippets for JavaScript in ES6 syntax
-Bracket Pair Colorizer 2 A customizable extension for colorizing matching brackets
-cssrem（px 转 rem 工具）
2. Prettier - Code formatter 必须使用此插件
- 添加配置：
在项目根目录下添加配置文件.prettierrc。
配置内容如下：
{
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
- 替换默认格式化工具
安装完成后，替换默认的格式化工具为Prettier。
在文档空白处使用右键，选择文档格式设置方式。
[图片上传失败...(image-922bb5-1615526386406)]
[图片上传失败...(image-34ecec-1615526386406)]
注意：如果在其他类型的文档（如 html）中格式化后发现没有效果，需要按照上面设置的流程再重新设置一遍。
以后就可以使用Shift+Alt+F快捷键快速格式化了。
3. **cssrem插件**
下载插件后更改根字体大小：
设置=>搜索设置中输入csssrem
[图片上传失败...(image-7bc433-1615526386406)]
- Vue.js
Vue.js文档
- 微信小程序
微信小程序开发文档
微信开发者工具下载地址：[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html]
- 微信公众号
微信公众号开发文档
- 规范
- 项目规范
- 文件命名
文件夹/文件的命名统一用小写，单词之间使用短横线“-”分割
文件夹使用模块或页面的英文直译名字进行命名，文件根据页面功能命名，范例如下：
围栏信息页面
文件夹：fence-information
文件夹下的文件：新增 add.html/add.js 编辑 edit.html/edit.js
2. **图片命名**
图片若有语义化后缀，使用单下划线连接，范例如下：
| 功能页面名称_状态（可选）.png | |
|---|---|
| ico_main_arrow_n.png | ico_main_arrow_p.png |
| btn_main_success_n.png | btn_main_success_p.png |
| line_main_menu_n.png | line_main_menu_p.png |
| img_main_shop_n.png | img_main_shop.p.png |
3. **项目结构**
vue项目结构与小程序项目结构不同，详见下文。
- HTML开发规范
- 语法
- 缩进使用soft tab（2个空格）
- 嵌套的节点应该缩进
- 在属性上，使用双引号，不要使用单引号
- 属性名全小写，用中划线做分隔符
- 要求
- 减少标签数量
- 实用高于完美
- 尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价
- 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题
- CSS开发规范
- 命名
- 类名使用小写字母，以中划线分隔，不允许使用大写字母或_
- id采用驼峰式命名
- Less中的变量、函数、混合、placeholder采用驼峰式命名
- 【Less.js开发文档】:(https://less.bootcss.com/)
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 变量 */
$colorBlack: #000;
/* 函数 */
@function pxToRem($px) {
...
}
/* 混合 */
@mixin centerBlock {
...
}
/* placeholder */
%myDialog {
...
}
2. 引号
- 最外层统一使用双引号
- url的内容要用引号
- 属性选择器中的属性值需要引号
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
3. 缩进
- 使用soft tab（2个空格）。
- 分号
- 每个属性声明末尾都要加分号。
- 空格
- 以下几种情况不需要空格:
- 属性名后
- 多个规则的分隔符','前
- !important '!'后
- 属性值中'('后和')'前
- 行末不要有多余的空格
- 以下几种情况需要空格：
- 属性值前
- 选择器'>', '+', '~'前后
- '{'前
- !important '!'前
- @else 前后
- 属性值中的','后
- 注释'/'后和'/'前
/* not good */
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/* good */
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
/* not good */
.element ,
.dialog{
...
}
/* good */
.element,
.dialog {
}
/* not good */
.element>.dialog{
...
}
/* good */
.element > .dialog{
...
}
/* not good */
.element{
...
}
/* good */
.element {
...
}
/* not good */
@if{
...
}@else{
...
}
/* good */
@if {
...
} @else {
...
}
6. 空行
- 以下几种情况需要空行：
- 文件最后保留一个空行
- '}'后最好跟一个空行，包括LESS中嵌套的规则
- 属性之间需要适当的空行，具体见属性声明顺序
/* not good */
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
/* good */
.element {
...
}
.dialog {
color: red;
&:after {
...
}
}
7. 属性
- 属性声明顺序(推荐)
.declaration-order {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #e5e5e5;
border-radius: 3px;
width: 100px;
height: 100px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
color: #333;
background-color: #f5f5f5;
opacity: 1;
}
8. 颜色
- 颜色16进制用小写字母
- 颜色16进制尽量用简写
/* not good */
.element {
color: #ABCDEF;
background-color: #001122;
}
/* good */
.element {
color: #abcdef;
background-color: #012;
}
9. 其他
- 元素选择器用小写字母
- 去掉小数点前面的0
- 去掉数字中不必要的小数点和末尾的0
- 属性值'0'后面不要加单位
- 同个属性不同前缀的写法需要在垂直方向保持对齐
- 无前缀的标准属性应该写在有前缀的属性后面
- 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系
- 不要在一个文件里出现两个相同的规则、不允许有空的规则
- 用 border: 0; 代替 border: none
- 选择器不要超过4层（在LESS中如果超过4层应该考虑用嵌套的方式来）
- 发布的代码中不要有 @import
- 尽量少用'*'选择器
/* not good */
.element {
}
/* not good */
LI {
...
}
/* good */
li {
...
}
/* not good */
.element {
color: rgba(0, 0, 0, 0.5);
}
/* good */
.element {
color: rgba(0, 0, 0, .5);
}
/* not good */
.element {
width: 50.0px;
}
/* good */
.element {
width: 50px;
}
/* not good */
.element {
width: 0px;
}
/* good */
.element {
width: 0;
}
/* not good */
.element {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: linear-gradient(to bottom, #fff 0, #eee 100%);
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}
/* good */
.element {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
background: -moz-linear-gradient(top, #fff 0, #eee 100%);
background: linear-gradient(to bottom, #fff 0, #eee 100%);
}
/* not good */
.element {
color: rgb(0, 0, 0);
width: 50px;
color: rgba(0, 0, 0, .5);
}
/* good */
.element {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, .5);
}
- JavaScript开发规范
- 命名
- 变量
- 命名
命名方式：小驼峰
命名规范：前缀名词
命名建议：语义化
// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
2. 常量
命名方式：全部大写
命名规范：使用大写字母和下划线来组合命名，下划线用以****分****割单词
命名建议：语义化
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
3. 函数
命名方式：小驼峰式命名法。
命名规范：前缀****应****当为动词。
命名建议：语义化
可以参考如下的动作
|动词|含义|返回值|
|:----:|:----|:----:|:----|:----:|:----|
|can|判断是否可执行某个动作(权限)|函数返回一个布尔值。true：可执行；false：不可执行|
|has|判断是否含有某个值|函数返回一个布尔值。true：含有此值；false：不含有此值|
|is|判断是否为某个值|函数返回一个布尔值。true：为某个值；false：不为某个值|
|get|获取某个值|函数返回一个非布尔值|
|set|设置某个值
|无返回值、返回是否设置成功或者返回链式对象|
|load|加载某些数据|无返回值或者返回是否加载完成的结果|
4. 类、构造函数
命名方式：大驼峰式命名法，首字母大写
命名规范：前缀为名称。
命名建议：语义****化
class Person {
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
公共属性和方法：跟变量和函数的命名一样。
5. 其他
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
构造函数，大写第一个字母
-
jquery对象必须以'$'开头命名
- 注释
- 单行注释
- 注释
// 这个函数的执行条件，执行结果大概说明
dosomthing()
2. **多行注释**
/*
* xxxx 描述较多的时候可以使用多行注释
* xxxx
*/
dosomthing();
3. **注释规则**
给逻辑代码添加适当注释，以便于后期人员交接维护
3. 类型判断
- 在使用接口返回的数组元素和对象前，必须做非空验证。
//错误
const arr = res[0];
//正确
const arr = res.length?res[0]:[];
4. 方法/函数
每个方法大小不要超过50行，否则要拆解
嵌套循环不要超过三层，超过了就要单独抽函数/方法
无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格
函数调用括号前不需要空格
立即执行函数外必须包一层括号
-
参数之间用', '分隔，注意逗号后有一个空格
- 数组对象
对象属性名不需要加引号
对象以缩进的形式书写，不要写在一行
数组、对象最后不要有逗号
// not good
var a = {
'b': 1
};
var a = {b: 1};
// good
var a = {
b: 1,
c: 2
};
6. 引号
- 最外层统一使用单引号
// not good
var x = "test";
// good
var y = 'foo',
z = '';
7. 分号
以下几种情况后需加分号：
- 变量声明
- 表达式
- return
- throw
- break
- continue
- do-while
/* var declaration */
var x = 1;
/* expression statement */
x++;
/* do-while */
do {
x++;
} while (x < 10);
8. 空格
- 除了缩进，不要使用多个空格
- 属性、函数/方法、参数类型中间加空格
- 逗号后面加空格
- 行末不留空格
- 属性前不要加空格
// not good
const id = 1234;
const result:number;
emitData():void {
}
emitData(data:string): void {
}
greet(name: string,options: Option) { ... };
user .name
// good
const id = 1234;
const result: number;
emitData(): void {
}
emitData(data: string): void {
}
greet(name: string, options: Option) { ... };
user.name
9. 其他
- 始终使用 === 替代 ==
例外： obj == null 可以用来检查 null || undefined。
// not good
if (name == 'John');
if (name != 'John');
// good
if (name === 'John');
if (name !== 'John');
- 不使用 var 定义变量
let result; // good
var result; // not good
- 语句结束需要分号结尾
- 不使用无意义的变量名
- if 后只有一行也需要使用花括号
- 函数/方法中间需要空一行, 但是不要空多行
- return 语句中的赋值必需有括号包裹
// not good
sum(a, b) {
return result = a + b ;
}
// good
sum(a, b) {
return (result = a + b);
}
- return，throw，continue 和 break 后不要再跟代码
doSomething () {
return true;
console.log('never called'); // not good
}
- 代码块中避免多余留白
// not good
if (user) {
// ✗
const name = getName();
// ✗
}
// good
if (user) {
const name = getName(); // ✓
}
- import, export 和解构操作中，禁止赋值到同名变量
import { config } from './config'; // good
import { config as config } from './config'; // not good
- 类似于保存/修改等操作，需要实现 ajax 防止重复提交的功能。
- 重要的表单字段需要加非空及格式校验
- git规范（必看）
请参考git规范
- vue规范
- 目录结构
dist/ 编译目录（发布目录）
docs/ 项目文档及编码指南
node_modules/ 包管理
src/ 项目源代码
|- assets/ 应用程序资源 (imgs,css,js,icons)
|- router/ 路由配置
|- | | - index.ts
|- shared/
|- | |- components/ 公共组件
| |- |- |- title/ title组件
| | |- |- form/ 表单组件
|- | |- filter/ 全局过滤器
|- | |- utils/ 工具
|- | |- |- util.ts 公共方法
|- | |- validate.ts 验证配置、方法
|- | |- service.ts 接口访问地址(IP后)
|- | |- wx.js 微信方法封装
|- store/ vuex配置
|- | |- index.ts vuex入口文件
|- | |- state.ts vuex数据
|- | |- mutition.ts mutition方法
|- | |- action.ts action方法
|- plugins/ 三方插件
|- styles/ 样式目录
|- | |- common.less 公用样式
|- | |- variable.less 全局样式(fontSize,Color)
|- | |- mixin.less 样式混写文件
|- views/ 视图组件
|- | |- shared 模块之间公用部分
|- | |- home
|- | | |- shared 模块内公共部分
|- | | |- home-demo.vue
|- | |- order
|- | | |- shared 模块内公共部分
|- | | |- |- order-operate-template.vue
|- | | |- list
|- | | |- |- order-list.vue
|- | | |- create
|- | | |- |- create-order.vue
|- App.vue 入口vue文件
|- main.ts 入口js文件
static/ 不打包的公共静态资源
|- environments-config
|- |- environment.js 环境变量
public/ 公共静态资源
.gitignore git提交忽略内容
babel.config.js bable配置
package.json 项目及工具的依赖配置文件
tsconfig.json ts配置
tslint.json ts检查配置
vue.config.js 工程化配置
README.md 项目说明文件
- 环境变量配置
1、运行命令请对应镜像项目/非镜像项目中的"scripts"设置。
2、若下方链接无权限访问，请找部门负责人配置权限。
- 非镜像项目环境变量配置：(https://gitlab.lunz.cn/mobile-development/wechat-wiki/wikis/Vue%E7%9B%B8%E5%85%B3/Vue-Cli2-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE(%E9%9D%9E%E9%95%9C%E5%83%8F%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE))
- 镜像项目配置环境变量配置：(https://gitlab.lunz.cn/mobile-development/wechat-wiki/wikis/Vue%E7%9B%B8%E5%85%B3/Vue-Cli2-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE(%E9%95%9C%E5%83%8F%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE))
- 风格指南（必看）
请参照vue官方风格指南
- 微信小程序规范
- 目录结构
docs/ 项目文档及编码指南
pages/ 项目源代码(主包)
|- package-main/ 主包
|- | |- home
|- | | |- shared 模块内公共部分
|- | | |- home-demo
|- | | | |-home-demo.wxml 模板文件
|- | | | |-home-demo.wxss 样式文件
|- | | | |-home-demo.json 配置文件
|- | | | |-home-demo.js 脚本逻辑文件
|- | |- order
|- | | |- shared 模块内公共部分
|- | | |- list
|- | | |- |- order-list.wxml 模板文件
|- | | | |- order-list.wxss 样式文件
|- | | | |- order-list.json 配置文件
|- | | | |- order-list.js 脚本逻辑文件
|- package-a/ 项目源代码(分包A)
|- |- shared/
|- | |- components/ 分包公共组件
|- | |- assets 静态资源
|- |- views/ 视图组件
|- package-b/ 项目源代码(分包B)
|- |- shared/
|- | |- components/ 分包公共组件
|- | |- assets 静态资源
|- |- views/ 视图组件(结构与主包相同)
|- shared/
|- | |- login.js 登录方法封装
|- | |- token.js 对token进行操作
|- | |- assets/ 应用程序资源 (imgs,wxss,js)
|- | |- components/ 主包公共组件
|- | |-assets/ 公共静态资源(image,wxss)
|- | | |- style/
|- | | | |- weui.wxss 基础样式库
|- | | | |- common.wxss 公用样式
|- | | |- image/ 图片资源
|- | | |- dist/ 三方插件
utils 工具
|- filter.wxs 公共过滤器
|- api
|- |- api.js 公共api
|- |- request.js 公共request封装
|- |- env.js 环境变量配置
app.js 全局变量
app.json 全局配置
app.wxss 全局样式
sitemap.json 页面索引配置文件
project.config.json 工具配置
README.md 项目说明文件
- 小程序框架
git地址(https://gitlab.lunz.cn/wx-code/miniproject.git)