Detaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich die relevanten Informationen zu benutzerdefinierten WeChat-Applet-Komponenten im Detail vorgestellt, die einen gewissen Referenzwert haben.

Vorwort

Ich bin kürzlich auf WeChat-Miniprogramme gestoßen. Wieder einmal war das von der Firma verwendete Front-End-Framework vue. Nach dem Vergleich stellte ich fest, dass die Entwicklung von Miniprogrammen verschiedene Einschränkungen aufweist und für Entwickler sehr unfreundlich ist. Es gibt zu viele verschiedene Punkte, über die ich mich beschweren kann, deshalb werde ich hier nicht näher darauf eingehen. Ich habe vor, das nächste Mal einen speziellen Artikel zu schreiben, um mich darüber zu beschweren. Dieses Mal teile ich hauptsächlich einige Ideen zu benutzerdefinierten Komponenten von Miniprogrammen. Das von Miniprogrammen bereitgestellte offizielle Framework ist relativ einfach, primitiv, schlecht wiederverwendbar und implementiert nicht die Funktionen benutzerdefinierter Komponenten -Endentwicklung sehr unangenehm. Es gibt verschiedene Beschwerden im Internet und es werden auch Methoden zur Implementierung benutzerdefinierter Komponenten geteilt, aber sie sind entweder zu kompliziert oder das WeChat-Applet ist nach dem Upgrade nicht kompatibel. Wie auch immer, es sind alle Arten von Fallstricken, über die man nicht diskutieren kann. Hier möchte ich mitteilen, wie ich es im Projekt umgesetzt habe. Korrekturen und Kritik sind willkommen und wir können voneinander lernen.

Implementierung benutzerdefinierter Toast-Komponenten

• Hier ist die einfachste Toast-Komponente als Beispiel

• Das offizielle Framework stellt nur Seitenvorlagenfunktionen bereit: WXML stellt Vorlagen (Vorlagen) bereit, und in den Vorlagen können Codeausschnitte definiert und dann an verschiedenen Stellen aufgerufen werden.

• Diese Funktion unterstützt jedoch kein js und keine Stilkapselung und muss auf der entsprechenden Seite verarbeitet werden. Außerdem verfügt die Vorlage über einen eigenen Bereich, der bei der Verwendung übergeben werden muss Daten.

• Kapseln Sie die Funktion in eine unabhängige Komponente, die unabhängig von der Seite sein muss. Bei der Verwendung wird die Komponente auf der entsprechenden Seite gemountet, sodass die Komponente die Seite übergeben muss Dieses (Seiten-)Objekt soll implementiert werden. Der Code lautet wie folgt
  

Verzeichnisstruktur

|------components
| ------toast
|------toast.js
                                                                                                                               🎜>
toast.wxml

toast.js

So verwenden Sie

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

1. wxml-Referenzseitenvorlage

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

2. js-Dateireferenzen toast.js

3 🎜>

Verbesserungen und weitere Erweiterungen

import { toast } from '../../../project/component/toast/toast.js'

In tatsächlichen Projekten wird es Toast-Ladebestätigungen geben ... und viele andere gemeinsame Komponenten, sowie a Wir können js in eine js-Datei einführen und diese (Seite) dann beim Laden der Seite registrieren, sodass Sie sich nur einmal registrieren müssen, um alle Komponenten zu verwenden, z. B.

toast(this, '填写详细信息')

wird zu

Mit der gleichen Idee können wir etwas Ähnliches in vue implementieren. Die Funktion von Mixin verbessert die Wiederverwendbarkeit und Wartbarkeit von Code in komplexen Geschäftsprojekten erheblich.

toast(this,'填写详细信息'')

Ich bin der Einzige, der die Miniprogramme des Unternehmens entwickelt. Es gibt keine Situation, in der mehrere Personen zusammenarbeiten, um Miniprogramme zu entwickeln, daher investiere ich nicht viel Mühe in diesen Aspekt.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!