Que savez-vous des spécifications de développement de mini-programmes ?

Spécifications de développement de petits programmes :

(Partage de vidéos d'apprentissage : Vidéo de programmation)

Aperçu du répertoire

Fichiers de composants

Tous les fichiers liés aux composants sont placés dans le répertoire des composants.

Fichiers image

Les fichiers image du projet sont placés dans le dossier images du répertoire racine, et les images uniques au composant sont placées dans le répertoire images du composant actuel

Modèle fichiers

Les fichiers modèles sont principalement utilisés pour écrire divers modèles commerciaux. Le fichier de modèle de projet est placé dans le dossier models du répertoire racine et les modèles liés aux composants sont placés dans le dossier models du répertoire des composants.

Fichiers de comportement

Les fichiers de comportement sont placés dans le répertoire du composant référencé.

Spécification WXML

1. Spécification WXML

Lorsque la balise wxml peut apparaître seule, essayez d'apparaître seule, par exemple <input />.

<input />

Contrôlez le nombre de codes dans chaque ligne de code HTML à 50 caractères près pour faciliter la lecture et la navigation. Le code redondant sera renvoyé à la ligne et les attributs de la balise seront renvoyés à la ligne.

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

Affichez le contenu séparé de manière appropriée et n'utilisez pas de styles en ligne.

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

2. Spécifications des commentaires

À l'exception des composants, les autres éléments de niveau bloc doivent commenter leurs fonctions et laisser une ligne au-dessus et en dessous d'eux pour les distinguer des autres codes.

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

Spécification CSS

1. Spécification CSS

Rpx et px peuvent être utilisés pendant le processus de développement. Par exemple, rpx est généralement utilisé pour l'espacement, la taille de la police et. frontière, etc. En utilisant px, les développeurs décident en fonction des conditions réelles.

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

Le code CSS doit avoir une indentation de code évidente. Laissez une ligne vide entre chaque classe de style.

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

Utilisez autant que possible des attributs abrégés et placez les mêmes attributs ensemble pour éviter l'encombrement.

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

Utilisez flex pour la mise en page, et float et vertical-align sont interdits.

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

2. Spécification des commentaires

Utiliser des commentaires de bloc entre des groupes de règles wxss. Ne commentez pas directement après le code.

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

Spécification JS

1. Spécification JS

Spécification de dénomination

Les noms de variables et les noms de fonctions utilisent uniformément la dénomination en casse chameau. sont préfixés. Un verbe clair doit être ajouté pour indiquer la fonction fonction, et les fonctions ou propriétés privées doivent être indiquées en commençant par un trait de soulignement. Les constantes doivent être déclarées avec const.

La première lettre du nom de la classe doit être en majuscule.

Utilisez le mot-clé ES6 let pour définir des variables, essayez de ne pas utiliser var

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

Spécifications de la fonction de rappel

Les fonctions de rappel sont écrites uniformément à l'aide de la fonction Promise, et les paramètres pour les rappels réussis sont unifiés est res et le paramètre d'erreur est 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);
});

Les fonctions privées et les fonctions de rappel sont placées après la fonction de cycle de vie.

Supprimez les fonctions de cycle de vie inutilisées dans les fichiers js pour garder le code propre.

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

Structures séparées avec une ligne vierge entre chaque fonction.

Spécifications de définition des variables de liaison de données

Toutes les variables impliquées dans la liaison de données doivent être initialisées dans data. Il est interdit de setData directement sans le définir.

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

Spécification de l'événement de clic

La méthode de dénomination de la fonction d'événement de clic est on + nom de l'événement ou nom de l'entreprise.

onLike: function(event){
}

Spécification du composant

Spécification de nom du composant

Lors de l'utilisation du composant, le nom du composant commence par "v-". noms Il est formé en utilisant la connexion '-'. Il est recommandé d'utiliser une seule balise de fermeture lorsque les balises de composant sont utilisées sur les pages de page (cette contrainte n'est pas valable pour les composants contenant des slots)

<v-movies />

Spécifications de l'événement déclencheur

Il est recommandé que le composant clique les événements déclencheurs doivent être séparés par des deux-points

Détecter automatiquement

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

Convention de dénomination des classes externes

Le format de dénomination adopte la forme suivante : v-class-{name}, le nom peut être défini par vous-même

v-class-icon

Spécification du style du composant

Tous les styles de composants produits par l'équipe doivent être écrits en classe et le nom doit commencer par v-. Les styles en ligne et les styles d'identification ne sont pas autorisés<🎜. >

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

Tutoriel de développement de mini-programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!