How much do you know about mini program development specifications?

Small program development specifications:

(Learning video sharing: Programming video)

1. Directory overview

Component files

All component-related files are placed in the components directory.

Image files

The project image files are placed in the images folder of the root directory, and the unique images of the component are placed in the current component images directory

Model files

Model files are mainly used to write various business models. The project model file is placed in the models folder in the root directory, and the component-related models are placed in the models folder in the components directory.

Behavior file

The behavior file is placed in the directory of the referenced component.

WXML Specification

1. WXML Specification

If the wxml tag can appear alone, try to appear alone, such as <input />.

<input />

Control the number of codes in each line of HTML to within 50 characters to facilitate reading and browsing. The redundant code will be line-wrapped, and the attributes of the tag will be line-wrapped.

<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
</v-music>

Display separated content appropriately and do not use inline styles.

//推荐使用
<image class="tag"></image>

2. Comment specifications

Except for components, other block-level elements must comment out their functions, and leave a line above and below them to distinguish them from other codes.

<view>...</view>
//导航栏
<view>...</view>
<view>...</view>

CSS specification

1. CSS specification

Both rpx and px may be used during the development process. For example, usually rpx is used for spacing, font size and border, etc. Using px, developers decide according to the actual situation.

width: 100rpx;
font-size: 14px;

CSS code must have obvious code indentation. Leave one line empty between each style class.

.v-tag{
width: 100%;
}
.v-container{
width: 100%;
}

Try to use abbreviated attributes, and place the same attributes together to avoid clutter.

/**使用简写属性**/
.v-image{
margin: 0 auto;
}
/**同一属性放在一块**/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}

Use flex for layout, and float and vertical-align are prohibited.

.container{
disaplay: flex;
flex-dirextion: row
}

2. Comment specifications

Use block comments between groups of wxss rules. Do not comment directly after the code.

/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}

JS specification

1. JS specification

Naming specification

Variable names and function names uniformly use camel case naming. Under normal circumstances, the function name is prefixed A clear verb should be added to indicate the function function, and private functions or properties should be indicated by starting with an underscore. Constants need to be declared with const.

The first letter of the class name must be capitalized.

Use the ES6 keyword let to define variables, try not to use var

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

Callback function specifications

The callback functions are uniformly written using the Promise function, and the parameters for successful callbacks are unified is res, and the error parameter is 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);
});

Private functions and callback functions are placed after the life cycle function.

Delete unused life cycle functions in js files to keep the code clean.

Pages({
data:{
},
onLoad:function(event){
},
_self:function(){
}
})

Separate structures with a blank line between each function.

Data binding variable definition specifications

All variables involved in data binding must be initialized in data. It is forbidden to setData directly without defining it.

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

Click event specification

The naming method of the click event function is on event name or business name.

onLike: function(event){
}

Component specification

Component name naming specification

When the component is used, the component name starts with "v-". If the component name is a splicing of multiple word names It is formed by using '-' connection. It is recommended to use a single closed tag when component tags are used on page pages (this constraint is not valid for components containing slots)

<v-movies />

Trigger event specifications

It is recommended that component click trigger events be separated by colons

Automatic detection

<v-component-tag-name bind:myevent="onMyEvent" />

externalClasses naming convention

The naming format adopts the following form: v-class-{name}, name can be defined by yourself

v-class-icon

Component Style specification

All component styles produced by the team should be written in class, and the name must start with v-. Inline styles and id styles are not allowed

.v-container{
disaplay: flex;
flex-dirextion: row
}

Punctuation specification

JS statements do not need to end with a semicolon, and the semicolon is always omitted

In JS, backticks `` or single quotes ' ' are always used, and double quotes are not used.

Double quotes should be used in WXML, CSS, and JSON.

The colon in the CSS attribute is separated by a space.

Perform consistent indentation (4 spaces)

Perform consistent newline style ('unix'),

Related recommendations: 小program development tutorial

The above is the detailed content of How much do you know about mini program development specifications?. For more information, please follow other related articles on the PHP Chinese website!