À partir de la version 1.6.3 de la bibliothèque de base du mini programme, le mini programme prend en charge la programmation de composants simples. Les développeurs peuvent résumer les modules fonctionnels de la page en composants personnalisés afin qu'ils puissent être réutilisés dans différentes pages; ils peuvent également diviser des pages complexes en plusieurs modules à faible couplage pour faciliter la maintenance du code.
Les détails du composant ne seront pas présentés. Pour plus de détails, veuillez vous référer au document officiel
[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html]
Entrez dans le sujet
Procédure d'utilisation des composants
- Composants du package
- Présentation du composant parent
- Appel du composant parent (communication parent-enfant)
1. Emballage des composants
Le composant comprend également quatre fichiers: xx.json, xx.js, xx.wxml, xx.wxss
Pour écrire un composant personnalisé, vous devez d'abord déclarer le composant personnalisé dans le fichier json (définissez le champ de composant sur true pour définir ce groupe de fichiers en tant que composants personnalisés):
/**
*组件中不使用组件
/
{
"component": true, // 这是一个组件
"usingComponents": {} // 是否使用组件---组件中依然可以继续使用组件
}
/**
* 组件中使用组件
* /
{
"component": true, // 这是一个组件
"usingComponents": {
"warm-prompt": "/components/warm-prompt/warm-prompt" // 组件中还使用了warm-prompt组件
}
}
Vient ensuite le fichier JS
Component({
properties: {
/**
* 这里定义的变量都是父组件传过来的， innerText是父组件传过来的字段名
* type是传过来的数据格式，可以是 String，Number， array等等
* value是默认值，例如果type是String时，value可以是 '' 空字符串， 也可以是 ‘hello’
* 如果默认了hello，那么当父组件没传值时，innerText='Hhello'
* /
innerText: {
type: String,
value: 'default value',
observer: function (newVal, oldVal, changedPath) {
/**
* 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串
* 通常 newVal 就是新设置的数据， oldVal 是旧数据
* 这里通常进行父组件传值的接收
* 例如
* this.setData({
* specGroups: this.data.goodsDetail
* })
* /
}
}
},
data: {
// 这里是一些组件内部数据
someData: {
xxx: xxx,
}
},
methods: {
// 这里是一个演示向父组件传值的方法
customMethod(event){
// 定义一个对象用于传给父组件
var dates= {
id: event.currentTarget.dataset.id,
num: event.currentTarget.dataset.num
}
// 传给父级的方法
var setFunction = {}
// 使用 triggerEvent 传递给父组件 指定事件名、detail对象和事件选项
this.triggerEvent('close', dates, setFunction )
// 父组件将通过 close 拿到 dates 数据 以及 setFunctoin 方法 (setFuncton 是可选参数，可传也可不传)
}
}
})
Les fichiers HTML et les fichiers wxss sont utilisés comme des pages normales
Fini de parler des composants, parler de l'utilisation des composants de symboles
Introduisez d'abord le composant dans le fichier JSON de la page où vous souhaitez utiliser le composant
{
"usingComponents": {
"warm-prompt": "/components/warm-prompt/warm-prompt" // 前面是使用的标签名，后面是组件的路径
},
"navigationBarTextStyle": "black",
"navigationBarTitleText": "首页"
}
Utilisez les composants de la page là où vous souhaitez les utiliser
/**
* showPrompt 是控制组件的显示/隐藏
* closePrompt 是接收组件传回来的close方法
* innerText是传给组件的值，(因为MVVM的开发方式，所以是可以动态更新修改的)
* 此处接收方法的应该是bindclose而不是close，使用格式：bind+自定义名称
* /
<warm-prompt wx:if="{
{showPrompt}}" bindclose="closePrompt" innerText='{
{innerText}}'></warm-prompt>
Recevoir les paramètres dans le JS de la page où vous souhaitez utiliser le composant
Page({
/**
* 页面的初始数据
*/
data: {
someValue: []
},
// 当自定义组件使用 triggerEvent 来传值时触发函数
closePrompt(event) {
// 自定义组件触发事件时提供的detail对象，用来获取子组件传递来的数据
var id = event.detail.id;
var num = event.detail.num ;
console.log('子组件传递来的数据 id:', id, '子组件传过来的数据num:',num);
// 其他操作...
}
})
C'est la fin de l'utilisation des composants, puis quelques points à noter
Notes sur les détails
Quelques détails à noter:
- Étant donné que les noms d'étiquette de nœud WXML ne peuvent être qu'une combinaison de lettres minuscules, de traits de soulignement et de traits de soulignement, les noms d'étiquette des composants personnalisés ne peuvent contenir que ces caractères.
- Les composants personnalisés peuvent également faire référence à des composants personnalisés. La méthode de référence est similaire à la façon dont la page fait référence aux composants personnalisés (à l'aide du champ usingComponents).
- Le nom du répertoire racine du projet dans lequel se trouvent les composants personnalisés et les pages ne peut pas être précédé de "wx-", sinon une erreur sera signalée.
Notez que l'utilisation de usingComponents dans le fichier de page rendra le prototype de l'objet this de la page légèrement différent, notamment:
使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
使用 usingComponents 时会多一些方法，如 selectComponent 。
出于性能考虑，使用usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj })后
this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）