Wie viel wissen Sie über die Entwicklungsspezifikationen für Miniprogramme?

Kleine Programmentwicklungsspezifikationen:

(Lernvideo-Sharing: Programmiervideo)

1. Verzeichnisübersicht

Komponentendateien

Alle komponentenbezogenen Dateien werden im Komponentenverzeichnis abgelegt.

Bilddateien

Projektbilddateien werden im Bilderordner des Stammverzeichnisses abgelegt, und komponentenspezifische Bilder werden im aktuellen Komponentenbildverzeichnis abgelegt

Modelldateien

Modelldateien werden hauptsächlich zum Schreiben verschiedener Geschäftsmodelle verwendet. Die Projektmodelldatei wird im Modellordner im Stammverzeichnis abgelegt, und die komponentenbezogenen Modelle werden im Modellordner im Komponentenverzeichnis abgelegt.

Verhaltensdateien

Verhaltensdateien werden im Verzeichnis der referenzierten Komponente abgelegt.

WXML-Spezifikation

1. WXML-Spezifikation

Wenn das WXML-Tag alleine erscheinen kann, versuchen Sie, es alleine zu erscheinen, z. B. 73a3ca28445b1c625f2086a50cb8c7df.

<input />

Kontrollieren Sie die Anzahl der Codes in jeder HTML-Zeile auf 50 Zeichen, um das Lesen und Durchsuchen zu erleichtern. Der redundante Code wird umgebrochen, und die Attribute des Tags werden umgebrochen.

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

Zeigen Sie getrennte Inhalte angemessen an und verwenden Sie keine Inline-Stile.

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

2. Kommentarspezifikationen

Mit Ausnahme von Komponenten müssen andere Elemente auf Blockebene ihre Funktionen auskommentieren und eine Zeile darüber und darunter hinterlassen, um sie von anderen Codes zu unterscheiden.

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

CSS-Spezifikation

Während des Entwicklungsprozesses können sowohl rpx als auch px verwendet werden, und px wird entsprechend verwendet die tatsächliche Situation.

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

CSS-Code muss eine offensichtliche Codeeinrückung aufweisen. Lassen Sie zwischen jeder Stilklasse eine Zeile leer.

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

Versuchen Sie, abgekürzte Attribute zu verwenden und dieselben Attribute zusammenzufügen, um Unordnung zu vermeiden.

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

Verwenden Sie Flex für das Layout, und Float und Vertical-Alignment sind verboten.

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

2. Kommentarspezifikationen

Verwenden Sie Blockkommentare zwischen Gruppen von WXSS-Regeln. Kommentieren Sie nicht direkt nach dem Code.

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

JS-Spezifikation

1. JS-Spezifikation

Benennungsspezifikation

Variablennamen und Funktionsnamen verwenden einheitlich die Benennungsmethode Camel Case. Dem Funktionsnamenpräfix muss ein klares Verb hinzugefügt werden, um die Funktionsfunktion anzugeben , und private Funktionen oder Attribute sind unterstrichen Der Anfang zeigt. Konstanten müssen mit const deklariert werden.

Der erste Buchstabe des Klassennamens muss großgeschrieben werden.

Verwenden Sie das ES6-Schlüsselwort let, um Variablen zu definieren, und versuchen Sie, var nicht zu verwenden.

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

Private Funktionen und Rückruffunktionen werden einheitlich nach der Lebenszyklusfunktion platziert.

Löschen Sie nicht verwendete Lebenszyklusfunktionen in JS-Dateien, um den Code sauber zu halten.

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

Trennen Sie Strukturen mit einer Leerzeile zwischen den einzelnen Funktionen.

Spezifikationen zur Definition von Datenbindungsvariablen

Alle an der Datenbindung beteiligten Variablen müssen in Daten initialisiert werden. Es ist verboten, Daten direkt festzulegen, ohne sie zu definieren.

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

Click-Event-Spezifikation

Die Benennungsmethode der Click-Event-Funktion ist „+ Eventname“ oder „Firmenname“.

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

Komponentenspezifikation

Bezeichnungsspezifikation für Komponentennamen

Bei Verwendung einer Komponente beginnt der Komponentenname mit „v-“. Wenn der Komponentenname in mehrere Wortnamen gespleißt ist, verwenden Sie „-“, um eine Verbindung herzustellen. Es wird empfohlen, einzelne schließende Tags zu verwenden, wenn Komponenten-Tags auf Seitenseiten verwendet werden (diese Einschränkung gilt nicht für Komponenten, die Slots enthalten). Erkennung: Benennungsspezifikation für externe Klassen Klasse und der Name muss mit v beginnen. Am Anfang sind Inline-Stile und ID-Stile nicht zulässig Backticks `` oder einfache Anführungszeichen '' in JS, verwenden Sie keine doppelten Anführungszeichen.

Doppelte Anführungszeichen sollten in WXML, CSS und JSON verwendet werden.

Die Doppelpunkte in CSS-Attributen werden durch ein Leerzeichen getrennt.

Konsistente Einrückung erzwingen (4 Leerzeichen)

Konsistenten Zeilenumbruchstil ('Unix') erzwingen,

Verwandte Empfehlungen:

Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonWie viel wissen Sie über die Entwicklungsspezifikationen für Miniprogramme?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!