Entwicklung von WeChat-Applet-Komponenten: Visuelle Sitzplatzauswahlfunktion im Kino

1. Einleitung

Ich glaube, viele Leute gehen schon einmal mit ihrem Freund oder ihrer Freundin ins Kino. Fragen Sie Ihre Freundin oder Ihren Freund bei der Sitzplatzwahl immer nach ihrer Meinung? Warum? Kein Werben? ! Dann sind Sie fertig!

Damit die Zuschauer bei vielen Kinoticket-Apps und Miniprogrammen auf dem Markt ihre Lieblingsplätze online besser auswählen können, sind praktische und visuelle Sitzplatzauswahldaten unerlässlich. Werfen wir hier einen Blick auf diese nützliche visuelle Sitzplatzauswahlkomponente!

Der Ansichtseffekt ist wie folgt:

Bei Interesse lesen Sie bitte weiter!

1. Bauteildaten

Zunächst müssen wir der Komponente zwei Daten übergeben, damit sie bei der Anzeige der Komponente verwendet werden können. Eines davon ist die Nummer des Kinosaals und das andere ist die Anordnung der Sitze, und zwar wie folgt:

Hallennummer: Ziffernfolge in Großbuchstaben

Sitzplatzdaten: Array-Punktmatrix, leere Felder links und rechts werden durch 0 dargestellt, normale Sitzplätze werden durch 1 dargestellt, bevorzugte Sitzplätze werden durch 2 dargestellt und Sitzplätze, die von anderen Zuschauern ausgewählt wurden, werden durch 3 dargestellt. Die Ausgangsdaten lauten wie folgt:

Die übergebenen Daten müssen in der JS-Datei der Komponente deklariert werden. Anders als bei der Seitendeklarationsmethode muss der Datentyp beim Deklarieren von Daten in den Eigenschaften der Komponente geschrieben werden.

  Eigenschaften:
    Sitzplätze: Array,
    Hallennummer: String
  },

2. Komponentenseitenlayout

Es gibt bewegliche und unbewegliche Teile auf der Seite und natürlich einige, die sich selbst bewegen lassen. In dieser Komponente ist der obere Logobereich ein statischer Teil und der Sitzbereich ist beweglich und kann mit zwei Fingern vergrößert und verkleinert werden. Die spezifische Struktur ist wie folgt:

1. Zusammensetzung des Logobereichs

Dieser Bereich dient hauptsächlich als Eingabeaufforderung und bietet Sitzinformationen, einschließlich des normalen Bereichs und des bevorzugten Bereichs. Natürlich kann der Code den WXSS-Stil der Sitze im Sitzbereich direkt stehlen, indem er die Klassennamen signs_normal und seat_Excellent verwendet. Natürlich, wer mag die C-Position nicht?

    <Ansichtsklasse="signs_normal">
      <view class="seatNormal"></view> <text>Normaler Bereich</text> 
    </Ansicht>
    <Ansichtsklasse="signs_excellent">
      <view class="seatExcellent"></view> <text>Bevorzugter Bereich</text> 
    </Ansicht>
  </Ansicht>

2. Zusammensetzung des Sitzbereichs

Wir haben diesen Abschnitt in drei kleine Teile unterteilt: die Leinwand, die Kinoeinführung und den Sitzbereich. Lassen Sie es mich Ihnen im Detail erzählen!

2.1 Filmleinwand:

Um den gekrümmten Bildschirmeffekt zu erzielen, können wir die Maskierungsmethode verwenden, die sehr nützlich ist! Verwenden Sie zunächst ein rechteckiges Feld, um die Länge und Breite des Bildschirms zu konstruieren, verwenden Sie dann die Kante eines elliptischen Kreises, um ihn im rechteckigen Feld anzuzeigen, und verwenden Sie das Attribut overflow: hidden, um den Rest abzudecken. Passen Sie dann die Hintergrundfarbe und die Rahmenfarbe an, um den Bildschirmeffekt zu erzielen.

Der HTML-Code lautet wie folgt:

<Ansichtsklasse="visueller_Bildschirm">
   <view class="Bildschirm"></view>
</Ansicht>

wxss lautet wie folgt:

.visueller_Bildschirm {
  Höhe: 30rpx;
  Breite: 100 %;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Überlauf: versteckt;
  Rand unten: 10rpx;
}
.Bildschirm {
  Rand oben: 0;
  Polsterung: 0;
  Höhe: 30vw;
  Breite: 100vw;
  Box-Größe: Rahmenbox;
  Rand: 15rpx durchgezogen #c9cdd3;
  Randradius: 50 %;
}

2.2 Einführung in den Kinosaal:

Dieser Teil ist relativ einfach. Fügen Sie einfach die übertragenen Daten ein und optimieren Sie den Stil.

wxml:

wxml:
<view class="visual_title">Saal {{hallNumber}} - (Für Kinder über 1,3 Meter Körpergröße bitte Maske tragen und Tickets kaufen)</view>
wxss:
.visueller_Titel {
  Schriftgröße: 23rpx;
  Breite: 100 %;
  Höhe: 20rpx;
  Textausrichtung: zentriert;
  Farbe: #6d6d6d;
  Rand unten: 30rpx;
}

2.3 Sitzbereich:

Infrastruktur:

Grundeinheit: Da die Breite des Sitzes als Grundeinheit vw festgelegt ist, ist es praktisch, die Einheit zu vereinheitlichen und an das Modell anzupassen. Daher werde ich hier auch die Höhe in vw entwerfen.

Sitzstil: Aus dem zuvor übermittelten Sitzarray wissen wir, dass wir fünf Sitztypen haben, nämlich: seatNormal (normaler Sitz), seatExcellent (bevorzugter Sitz), seatNone (leerer Sitz), seatChosen (nicht auswählbarer Sitz) und selected (aktuell ausgewählter Sitz). Die Grundstile der Sitze sind hier gleich und können vereinheitlicht werden, und dann können ihre eigenen einzigartigen Stile separat geschrieben werden. Bei leeren Sitzen lässt sich der Effekt erzielen, indem man die Rahmenfarbe einfach auf transparent setzt.

.seatNormal, .seatExcellent, .seatNone, .seatChosen {
  Höhe: 4vw;
  Breite: 4vw;
  Rand: 1vw;
  Rahmenradius: 8rpx;
  Box-Größe: Rahmenbox;
}
.seatNormal {
  Rand: 1rpx durchgezogen #63c0c0;
}
.SitzplatzAusgewählt {
  Rand: 1rpx durchgehend rot;
  Hintergrundfarbe: rot;
}
.ausgewählt {
  Rand: 1rpx durchgezogen #05ca90;
  Hintergrundfarbe: #05ca90;
}
.seatExcellent {
  Rand: 1rpx durchgezogen #f18e14;
}
.seatNone {
  Rand: 1rpx durchgezogen rgba(0, 0, 0, 0);
}

Empfohlene nützliche Stile: In wxss verwenden wir einen sehr nützlichen Stil „box-sizing: border-box;“. Dieser Stil legt die Breite und Höhe des Elements fest, um die Rahmenbox des Elements zu bestimmen. Das heißt, alle für das Element angegebenen Abstände und Ränder werden innerhalb der festgelegten Breite und Höhe gezeichnet. Die Breite und Höhe des Inhalts können durch Subtrahieren der Ränder und Abstände von der festgelegten Breite bzw. Höhe ermittelt werden, wodurch die Größe des Elements leichter gesteuert werden kann.

Gesamtlayout: Der Sitzbereich verwendet eine flexible Layoutanzeige: Flex und verwendet Flex-Wrap: Wrap, um die Sitze automatisch zu umhüllen, wenn sie besetzt sind. Die große Box umhüllt eine andere Box, sodass die Box im Inneren flexibel zentriert werden kann, wodurch ein allgemeiner Zentriereffekt erzielt wird.

.visual_seatings {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Breite: 100 %;
  Höhe: 43vw;
}
.visual_seating {
  Breite: 90%;
  Höhe: 43vw;
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}

Beweglicher und skalierbarer Bereich: Um die Sitzplatzauswahl zu erleichtern, haben wir den Sitzbereich so eingerichtet, dass er mit zwei Fingern bewegbar und skalierbar ist. Daher müssen wir eine API des WeChat-Applets verwenden: beweglicher Bereich und bewegliche Ansicht.

beweglicher Bereich: Für diesen Bereich müssen Breiten- und Höhenattribute festgelegt sein. Wenn nicht festgelegt, beträgt der Standardwert 10px. Gleichzeitig gilt: Wenn die bewegliche Ansicht kleiner als der bewegliche Bereich ist, liegt der Bewegungsbereich der beweglichen Ansicht innerhalb des beweglichen Bereichs. Wenn die bewegliche Ansicht größer als der bewegliche Bereich ist, muss der Bewegungsbereich der beweglichen Ansicht den beweglichen Bereich umfassen (die Richtungen der X- und Y-Achse werden separat berücksichtigt).

moving-view: Tag-Attribute legen die Bewegungsrichtung fest direction="all"; unterstützt Zwei-Finger-Zoom scale="{{true}}"; maximales und minimales Zoom-Vielfaches scale-min="0,3" und scale-max="1,5"; wenn Sie die Auslösebedingung binden möchten, können Sie auch eine Bindungsmethode hinzufügen, das Bindungsereignis ziehen: bindchange, Zoom-Bindungsereignis bindscale usw.

Kleine Tipps: Wenn der bewegliche Ansichtsbereich vergrößert wird, bleiben die x- und y-Koordinaten unverändert, was dazu führt, dass der Ansichtsbereich den Bereich überschreitet. Um zu verhindern, dass der bewegliche Ansichtsbereich die oberen Elemente blockiert, können Sie die Obergrenze der Vergrößerung verringern und oben einen leeren Bereich hinzufügen, um die Ästhetik der Seite zu verbessern.

Detaillierte Informationen zur Verwendung finden Sie im Handbuch auf der offiziellen Website des WeChat Mini-Programms:
developer.weixin.qq.com/miniprogram…

3. Komponenten-Geschäftslogik

Sitzdatenausgabe: Wie beim letzten Mal erwähnt, werden Sitzdaten in einem Array gespeichert, und verschiedene Sitze werden durch unterschiedliche Zahlen dargestellt. Daher müssen wir bei der Datenausgabe Urteile fällen. Hier werden die Array-Daten durch das Block-Tag in einer Schleife ausgegeben, und dann werden die Array-Daten beurteilt und in verschiedenen Formaten ausgegeben.

Sitze auswählen: Wenn der Benutzer auf einen Sitz klickt, ändert sich der Sitzstil und die Sitzdaten werden aufgezeichnet. Zuerst müssen die Indexdaten in der Schleife übertragen werden wx:for="{{seatings}}" wx:key="Index" data-index="index", das ausgewählte Ereignis ist an die Ansicht jedes Sitzes gebunden und die Indexdaten werden in der ausgewählten Methode der js-Datei empfangen;

Wir müssen die Gesamtzahl der ausgewählten Sitze (begrenzt auf sechs) und das Index-Array (zum Speichern der angeklickten Sitze) verwenden, daher deklarieren wir selectedIndex: [], selectedNum: 0 in data und deklarieren die Methode in methods;

Die Logik der ausgewählten Methode: Speichern Sie zuerst den Index des Indexes und prüfen Sie dann, ob das Element im Index-Array vorhanden ist (mithilfe der indexOf()-Methode des Arrays). Wenn es vorhanden ist, bedeutet dies, dass es zuvor ausgewählt wurde, und Sie klicken erneut auf Abbrechen. Wenn Sie es löschen müssen, löschen Sie den Index aus dem Index-Array und verringern Sie die Gesamtzahl der ausgewählten Sitze um eins. Andernfalls, wenn er nicht vorhanden ist, prüfen Sie, ob die Gesamtzahl der ausgewählten Sitze kleiner als 6 ist. Wenn sie kleiner ist, fügen Sie die Daten in das Array ein und erhöhen Sie die Gesamtzahl der ausgewählten Sitze um eins. Wenn sie nicht kleiner ist, bedeutet dies, dass Sie bis zu sechs Tickets auswählen können.

An diesem Punkt verfügen wir über die Daten in der folgenden Tabelle und können komplexere Geschäftsvorgänge durchführen! !

Tipp: Da das Array keine Methode zum Entfernen eines Elements hat, wird separat eine remove()-Methode deklariert, um zuerst den Elementindex abzurufen und ihn dann zu löschen.

ausgewählt(e) {
      let index = e.currentTarget.dataset.index;
      wenn(diese.Daten.selectedIndex.indexOf(index) != -1){
        Lassen Sie selectedIndex = this.remove(this.data.selectedIndex, index);
        let selectedNum = this.data.selectedNum - 1;
        dies.setData({
          ausgewählterIndex,
          ausgewählteAnzahl
        })
      }anders{
        wenn(diese.Daten.ausgewählteAnzahl < 6){
        Lassen Sie selectedNum = this.data.selectedNum + 1;
        Lassen Sie selectedIndex = this.data.selectedIndex.concat(index);
            dies.setData({
              ausgewählterIndex,
              ausgewählteAnzahl
            })
        }anders{
            wx.showToast({
              Titel: 'Wählen Sie bis zu sechs Tickets aus',
              })
            }
        }
    },
    entfernen(arr, ele) {
      var index = arr.indexOf(ele); 
      wenn (Index > -1) { 
      arr.splice(index, 1); 
        }
        Rückflug an;
      }

Ausgewählte Stiländerungen: In der Sitzansicht verwenden wir den ternären Operator, um die Daten zu beurteilen: class="{{tools.indexOf(selectedIndex, index)?'selected': ''}}" Wenn das vorherige Ergebnis wahr ist, d. h. der Index dieser Daten im Array vorhanden ist, fügen Sie den ausgewählten Klassennamen und die Sitzstiländerungen hinzu; andernfalls fügen Sie einen leeren Klassennamen hinzu.

Tipps: Da die IndexOf-Methode des Arrays in WXML ungültig ist, müssen wir eine IndexOf-Funktion im Util-Ordner im selben Verzeichnis wie die Seiten deklarieren, damit die ternäre Operation aufgerufen werden kann, und das selbst tun! Wenn Sie es verwenden, deklarieren Sie es einfach über wxs src="../../util/indexof.wxs" module="tools", und Sie können die Methode tools.indexOf verwenden, die denselben Effekt hat wie die mit dem Array gelieferte Methode indexOf~

// indexOf-Methode Funktion indexOf(arr, value) {
  wenn (arr.indexOf(Wert) < 0) {
      gibt false zurück;
  } anders {
      gibt true zurück;
  }
}
modul.exports.indexOf = indexOf;

Wenn Sie den Quellcode einer bestimmten Komponente benötigen, holen Sie ihn sich bitte bei Gitee!
gitee.com/jensmith/so…

Zusammenfassen

Dies ist das Ende dieses Artikels über die visuelle Sitzplatzauswahlfunktion für Kinos, die von WeChat-Miniprogrammkomponenten entwickelt wurde. Weitere relevante Inhalte zur visuellen Sitzplatzauswahl für Miniprogramme finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!