Extraire des motifs répétés
réutilisation des styles
Nous constaterons que plusieurs fois dans le processus de développement, le même style est utilisé dans plusieurs pages. En fait, comme mentionné précédemment, le style commun peut être placé dans app.wxss afin qu'il puisse être réutilisé directement.
Par exemple : la disposition verticale de la mise en page flexible est définie dans app.wxss
.flex-col{
display: flex;
flex-direction: column;
}
Ensuite, d'autres pages peuvent utiliser directement les styles combinés :
Les généralistes sont écrits dans app.wxss, et les personnalisés sont écrits dans des pages spécifiques.
Ce qui précède est la réutilisation des styles, et une autre consiste à définir les valeurs d'attributs spécifiques couramment utilisées dans les styles en tant que variables pour une réutilisation facile.
Réutilisation des attributs
Utilisez les propriétés personnalisées CSS (variables)
pour déclarer une propriété personnalisée. Le nom de la propriété doit commencer par deux signes moins (–) et la valeur de la propriété peut être n'importe quelle valeur CSS valide.
page {
--color:#F8D300
}
Remarque : Il doit être défini dans app.wxss, afin que wxss de toutes les pages puisse être utilisé.
Lorsque vous utilisez une variable locale, enveloppez-la avec la fonction var() pour représenter une valeur de propriété valide :
.content-btn {
background: var(--color);
}
De même, en plus de la couleur, il existe également des marges, des tailles et d'autres attributs uniformes.
extraire la méthode dupliquée
Les étudiants qui ont développé de petits programmes doivent savoir que app.js peut être partagé à l'échelle mondiale. Donc, à ce stade, s'il existe des méthodes et des propriétés requises par plusieurs pages, elles peuvent toutes être écrites dans app.js.
Comme suit:
// app.js
App({
randomMsg(){
let msgs = this.globalData.msgs
let msg = msgs[Math.floor(Math.random() * msgs.length)];
return msg
},
globalData: {
msgs:["你好吗？","加油鸭！","早点睡！","奥利给！","别熬夜！"]
}
})
Comment utiliser la page :
const app = getApp()
Page({
onLoad: function (options) {
console.log(app.globalData)
console.log(app.randomMsg())
},
})
Scénario applicable : le partage dans l'applet concerne les données utilisées par plusieurs pages dans le cycle de vie de l'application. Après le redémarrage de l'applet, les variables globales seront réinitialisées.
Installer des packages tiers
En plus d'extraire des méthodes dans des utilitaires, il est facile à réutiliser. Parfois, il nous coûte cher de maintenir des classes d'outils communes et nous devons comprendre l'API en profondeur. À l'heure actuelle, nous utilisons des classes d'outils gérées par d'autres.
À ce stade, nous irons sur github pour trouver les bibliothèques open source pertinentes, et nous devons les utiliser lorsque nous trouverons les bonnes. Il existe généralement deux façons d'utiliser :
- Copiez l'original directement dans votre propre projet
- Références distantes à l'aide de packages npm
Pour des références spécifiques, veuillez vous référer à l'article que j'ai écrit auparavant : " Comment introduire les packages npm dans les applets WeChat ?" "
Résumer
- Les styles css et les méthodes js doivent être réutilisés de manière aussi abstraite que possible, afin d'améliorer l'efficacité globale.
- Dans le processus d'optimisation, d'abord partie puis global, il n'y a pas mieux mais mieux, et optimisez en fonction de scénarios métiers.
- Les outils couramment utilisés n'ont pas besoin de réinventer la roue, et apprendre à utiliser les bibliothèques open source tierces existantes peut améliorer l'efficacité.