Wie verwende ich Komponentenkomponenten in Miniprogrammen? Praktischer Leitfaden zum Teilen

Wie verwende ich Component im Miniprogramm? Der folgende Artikel stellt Ihnen eine umfassende und praktische Anleitung zur benutzerdefinierten Komponente des Miniprogramms vor. Ich hoffe, er wird Ihnen hilfreich sein.

Wenn wir im Miniprogramm die Funktionsmodule innerhalb der Seite abstrahieren und auf verschiedenen Seiten wiederverwenden möchten, können wir die benutzerdefinierten Komponenten verwenden, die komplexe Seiten in mehrere Module mit geringer Kopplung aufteilen können ist nicht nur bequem zu verwenden, sondern hilft auch bei der Codepflege. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]VorwortIn diesem Artikel erfahren Sie

Wie man benutzerdefinierte Komponenten in kleinen Programmen verwendet

• Verschiedene Wertübertragungen zwischen benutzerdefinierten Komponenten

• Die Verwendung von Slots in benutzerdefinierten Komponenten

Minenräumung, das Miniprogramm in diesem Artikel bezieht sich auf das WeChat-Miniprogramm (die Ideen anderer Miniprogramme sollten jedoch ähnlich sein)

• Minenräumung, der Hauptinhalt dieses Artikels Es geht um benutzerdefinierte Komponenten und verschiedene Verwendungszwecke. Es geht nicht darum, Ihnen beizubringen, wie Komponenten verpackt werden!

• Grundlegende Vorbereitung (kann ignoriert werden)

Neuen Ordner hinzufügen

Erstellen Sie zunächst einen Ordner speziell für benutzerdefinierte Komponenten im Stammverzeichnis (der Ordnername ist beliebig und der Speicherort ist beliebig)

Neue Komponente Datei

Klicken Sie dann mit der rechten Maustaste in den Mini-Programmeditor und erstellen Sie eine neue Komponente

Warum müssen Sie diesen Schritt ausdrücklich erwähnen?

Ich weiß nicht, ob es Freunde gibt, die wie ich kleine Programmentwicklungstools nur als Vorschautools verwenden und dann andere Editoren für die Entwicklung verwenden.

Später habe ich herausgefunden, dass, wenn ich eine Komponente oder Seite direkt im Miniprogramm erstelle, alle vier Dateien auf einmal erstellt werden und auch die Inhaltsvorlage ausgefüllt wird, also jetzt zusätzlich zur Vorschau für den Entwickler Tools verwende ich auch zum Erstellen neuer Dateien.

Beispielhafte Hintergrundbeschreibung

Wir werden ein einfaches Komponentenbeispiel schreiben und dabei den Modulsegmentierungstitel im Bild unten als Beispiel verwenden (nur ein Blindbeispiel)

Wie führt man benutzerdefinierte Komponenten ein?

Zur Erstellung gibt es nicht viel zu sagen, befolgen Sie einfach die oben stehende [Neue Komponentendatei]. Wenn Sie sie manuell erstellen, vergessen Sie nicht, sie in der JSON-Datei zu deklarieren (sie ist standardmäßig im Miniprogramm-Entwicklungstool enthalten)

{
  "component": true
}

Stellen Sie die Komponentenmethode vor

Erstellen Sie eine Referenzdeklaration in der json-Datei der Seite

<!-- 引用组件的json文件 -->
{
  "usingComponents": {
    "x-title": "/components/title/title"
  }
}

Verwenden Sie die benutzerdefinierte Komponente im wxml der Seite genau wie die Grundkomponente (Name und Deklaration bleiben gleich)

<!-- 引用组件的wxml文件 -->
<x-title></x-title>

Wie übergebe ich einen Wert? json 文件中进行引用声明

<!-- 父级wxml -->
<x-title titleText="全部订单"></x-title>

<!-- 如果父级的值是一个变量则 -->
<x-title titleText="{{currentTitle}}"></x-title>

在页面的 wxml

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente.

Sie können sehen, dass wir den Inhalt des Titels oben aufgeschrieben haben, aber in der tatsächlichen Verwendung müssen wir auf jeden Fall unterschiedliche Titelinhalte entsprechend den verschiedenen Modulen übergeben, also brauchen wir verwenden Der zwischen Vater und Sohn weitergegebene Wert. Das Elternteil übergibt den Wert an das Kind Schaltfläche „Details-Operation“ Derzeit wurden mehrere Module durch Schleifen abgerufen. Jetzt möchte ich, dass das Kind die ID des aktuellen Moduls an das übergeordnete Modul weitergibt, wenn es auf die Details klickt.

Die untergeordnete Komponente übergibt Parameter an die übergeordnete Komponente.

<!-- 子级js -->
properties: {
        titleText:{
            type:String,
            value:&#39;其他&#39;
        }
    },

<!-- 子级wxml -->
 <view class="title-oper" bindtap="gotoDetail">详情</view>

Die übergeordnete Komponente empfängt die Parameter der untergeordneten Komponente untergeordnete Komponente

Die untergeordnete Komponente definiert eine Methode

<!-- 子级js -->
 gotoDetail(){
    this.triggerEvent(&#39;gotoDetail&#39;,this.data.titleId)
 }

Das übergeordnete Element gibt der untergeordneten Komponente zunächst eine ID

<!-- 父级 wxml -->
<x-title titleText="{{item.title}}"
             titleId="{{item.id}}"
             bind:gotoDetail="gotoDetail"></x-title>

Rufen Sie die Komponente im Lebenszyklus der js-Seite ab, speichern Sie sie dann in unserer benutzerdefinierten Variablen titleCom und rufen Sie sie dann direkt auf Methode in der untergeordneten Komponente

<!-- 父级 js -->
 onReady(){
    this.titleCom = this.selectComponent("#titleCom");
  },
  
triggerChildMethod(){
    this.titleCom.childMethod();
  }

如果this.selectComponent()返回为null

1、检查wxml定义的id和js使用的是否一致；

2、自定义组件是否渲染，例如你使用了wx:if，导致组件还未渲染

传值官网相关文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

在自定义组件中使用插槽（slot）

我们上面在自定义组件中加了【详情】查看的操作按钮，但是有的地方我们可能并不想用文字，想改成图标或者按钮，当某处放置的节点内容不确定时，我们就可以使用插槽来处理。

插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充html了。

单插槽

在子组件加入插槽

<!-- 子级 wxml -->
 <slot></slot>

父级即可在组件内任意填充内容，比如插入一个图标（如果子级没有加slot，及时填充了html也不会被渲染）

<!-- 父级 wxml -->
 <x-title>
 	<view class="oper-wrap">
            <van-icon name="arrow" />
    </view>
 </x-title>

多插槽

先在子组件的js开启一下多slot支持

 <!-- 子级 js -->
 options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

在子组件加上插槽需要给插槽加上名字

 <!-- 子级 wxml --> 
 <slot name="icon"></slot>
 
  <slot name="oper"></slot>

在父级使用

 <!-- 父级 wxml --> 
 <view class="icon-wrap" slot="icon">
    <van-icon name="orders-o" size="24"/>
 </view>

<view class="oper-wrap"  slot="oper">
   <van-button type="primary" custom-style="{{customStyle}}">更多</van-button>
</view>

注意

问：为什么加了插槽，却没有反应？

虽然我只在【子组件】加了1个插槽，但是因为加上了名字，所以同样需要在【子组件】的js里开启多插槽

 options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

插槽官网文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Component的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  //组件所在页面的生命周期
   pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

生命周期官网：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonWie verwende ich Komponentenkomponenten in Miniprogrammen? Praktischer Leitfaden zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!