Implementierung der Nummernschild-Eingabefunktion im WeChat-Applet

Inhaltsverzeichnis

Vorwort
Hintergrund
Große Vermutung
Muster finden
Struktur und Stil
Komponentenimplementierung

Parameter
Bestimmen Sie den Tastaturtyp
Eingabeinhalt abrufen
Übergabe von Komponentenparametern
Komponentenverwendung
prüfen
Beheben Sie den Fehler bei der Tastaturtypbeurteilung

Abschluss

Komponentencode
Seitencode verwenden

Vorwort

Hahahaha, ein neuer Artikel. Ich habe schon lange keine Updates mehr gemacht. Heute mache ich eine Pause, um die WeChat-Komponente zusammenzufassen, die ich zuvor verwendet habe und die eine benutzerdefinierte Tastatur zur Eingabe von Fahrzeugkennzeichen verwendet. Hier ist das Effektbild, viel Spaß beim Betrachten:

Hintergrund

Ich habe kürzlich an einem Projekt zum Thema Autos gearbeitet. Wenn es ein Auto gibt, muss es ein Nummernschild geben. Wir alle wissen, dass für Nummernschilder bestimmte Regeln gelten. Wenn wir einfach ein Eingabefeld angeben. . . . . . Zehntausend Wörter werden hier ausgelassen. Seit meiner Kindheit hat mir mein Programmierlehrer gesagt, dass ich nichts vertrauen soll, was der Benutzer eingibt. Äh-hm! Wenn ich darüber nachdenke, ist es tatsächlich so. Es gibt immer einige einzigartige Benutzer, die gerne das Gegenteil tun. Ich weiß nicht, ob sie es wirklich nicht verstehen oder nur sabotieren wollen. Ein anderer Lehrer sagte mir, ich solle Benutzer immer wie Idioten behandeln. Obwohl ich auch ein Benutzer bin und es sich nicht gut anfühlt, macht es Sinn, weil man nie weiß, wer das, was man schreibt, verwenden wird. . . . . (Nicht einmal ein Mensch). Wenn Sie in diesem Zusammenhang die Benutzer auffordern, ein korrektes Nummernschild einzugeben, ist das schwieriger, als in den Himmel zu klettern. Es ist zu schwierig. Ich kann es nicht.

Große Vermutung

In diesem Fall sollten wir selbst Benutzer sein und sehen, was passieren könnte. Komm, geh nicht weg, jetzt ist es an der Zeit, deine Vorstellungskraft zu nutzen.

Ich a.12345
Ea.ii111
Xa.6666666
za.Hahahahahaha
. . . . . .

Wow, ich glaube, ich schaffe es nicht, das an einem ganzen Tag fertig zu schreiben. Ich werde später sehen, wie ihr das macht. Es gibt hier die Prämisse, dass wir Nummernschilder, die mit englischen Wörtern beginnen, nicht berücksichtigen. Wenn Sie das berücksichtigen müssen, können Sie daraus lernen.

Muster finden

Tatsächlich ist kein Muster zu erkennen. Suchen Sie einfach auf Baidu und Sie erfahren die Regeln für Nummernschilder. Die erste Ziffer ist die Abkürzung der Provinz, die zweite Ziffer ist ein Buchstabe und der Rest ist eine Mischung aus Buchstaben und Zahlen. Es gibt hier einige Besonderheiten, darunter Trainingswagen, Autos aus Hongkong und Macao, die auf das Festland einreisen, und Konsulatswagen. Außerdem sind die Buchstaben i und o sowie die Zahlen 1 und 0 schwer zu unterscheiden, sodass die Buchstaben i und o entfernt werden und schließlich das Muster entsteht.

Struktur und Stil

Sobald Sie die Regeln kennen, können Sie mit der Bedienung beginnen. Schauen Sie sich zunächst das Tastaturlayout des Entwurfs an:

Das Bild oben zeigt das Tastaturlayout der Provinzabkürzung

Das Bild oben zeigt das Tastaturlayout für den zweiten Buchstaben

Das Bild oben zeigt das Tastaturlayout der folgenden Ziffern

Schreiben wir die Struktur basierend auf diesen Layouts:

<view class="Tastatur" wx:if="{{isShow}}">
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr1}}" wx:key="eindeutig" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr3}}" wx:key="eindeutig" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Ansichtsklasse="Artikel" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</Ansicht>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

Packen wir die Daten jeweils in vier Arrays. Da die zweite Ziffer fehlt, löschen wir einfach eine Zeile, außerdem gibt es noch einen Löschbutton und die letzte Maskenebene, die dazu dient, die Tastatur zu schließen, wenn man woanders hinklickt.

Fügen Sie als Nächstes einige Testdaten hinzu, um die Grundfarben zu schreiben:

Daten: {
  dataArr1:["Peking", "Shanghai", "Guangdong", "Tianjin", "Hebei", "Shanxi", "Liaoning", "Mongolei", "Heilongjiang", "Jilin"],
  DatenArr2: ["Su", "Zhe", "Anhui", "Fujian", "Gan", "Shandong", "Henan", "Hubei", "Xiang"],
  dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
  DatenArr4: ["Gan", "Qinghai", "Ningxia", "Xinjiang", "Taiwan"]
}

Hier nehmen wir die Eingabeprovinz als Beispiel

Im nächsten Schritt fügen wir unseren Stil hinzu. Nun können Sie den Effekt sehen:

.Tastatur {
    Position: fest;
    links: 0;
    unten: 0;
    Z-Index: 99999;
    Breite: 100 %;
    Hintergrund: #d1d6d9;
    Polsterung: 20rpx 10rpx 0;
    Polsterung unten: berechnen (30px + Umgebung (Safe-Area-Inset-Bottom)/2);
    Box-Größe: Rahmenbox;
}

.Tastatur .Element {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Rand unten: 20rpx;
}

.keyboard .item Ansicht {
    Breite: 9%;
    Höhe: 70rpx;
    Zeilenhöhe: 70rpx;
    Textausrichtung: zentriert;
    Rand rechts: 10rpx;
    Hintergrund: #ffffff;
    Rahmenradius: 10rpx;
    Schriftgröße: 28rpx;
}

.keyboard .item Ansicht:letztes-Kind {
    Rand rechts: 0;
}

.keyboard .delbtn {
    Position: fest;
    rechts: 10rpx;
    unten: berechnet (40px + Umgebung (Safe-Area-Inset-Bottom)/2);
    Höhe: 70rpx;
    Breite: 18%;
    Z-Index: 999999;
    Hintergrund: #adb3bd;
    Rahmenradius: 10rpx;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}

.keyboard .delbtn Bild{
    Breite: 60rpx;
    Höhe: 60rpx;
}

.Maske{
    Position: fest;
    links: 0;
    oben: 113rpx;
    unten: 0;
    rechts: 0;
    Z-Index: 99998;
}

Ich werde hier nicht näher auf die Stile eingehen, Sie können einfach nach Ihren eigenen Vorlieben wählen

Nun können Sie den Effekt sehen, wie in der Abbildung dargestellt:

Komponentenimplementierung

Die Implementierung der Komponente ist eigentlich sehr einfach. Sie müssen nur wissen, wie Sie die WeChat-Komponente verwenden.

Parameter

Bevor wir es umsetzen, schauen wir uns erst einmal an, welche Parameter benötigt werden. Da die Tastatur ein- und ausgeblendet werden muss, wird ein Anzeige- und Ausblendparameter benötigt, der hier isShow heißt. Schauen wir uns unseren Stil noch einmal an. Wenn wir die zweite Ziffer oder später eingeben, müssen dann die zuvor definierten Array-Daten geändert werden? Die Frage ist, wann sollten sie geändert werden? Soll es geöffnet werden, wenn Sie auf den Eingabeort klicken? Zu diesem Zeitpunkt wissen Sie, ob Sie die Provinz, die zweite Ziffer oder die spätere eingeben müssen. Daher muss hier ein Parameter vorhanden sein, der angibt, welcher Tastaturtyp derzeit angezeigt werden soll. Dieser Parameter wird vorübergehend „keyType“ genannt. Nachdem wir nun die Parameter haben, wollen wir sehen, ob wir den Standardwert festlegen müssen. Für isShow muss es am Anfang „false“ sein, was bedeutet, dass es nicht angezeigt wird. Was keyType betrifft, ist der Standardwert in Ordnung. Hier ist der Standardwert auf „province“ festgelegt. Bei den Parametern hier handelt es sich tatsächlich um die Parameter, die beim Aufruf der Komponente übergeben werden müssen. Daher werden diese beiden Parameter als Eigenschaften der Komponente festgelegt.

Aus der obigen Analyse ergibt sich der allgemeine Umriss der Komponente. Der Code lautet wie folgt:

Komponente({
    Eigenschaften:
        Schlüsseltyp: {
            Typ: Zeichenfolge,
            Wert: „Provinz“
        },
        istAnzeigen:{
            Typ: Boolean,
            Wert: falsch
        }
    },
    Daten: {
        dataArr1:["Peking", "Shanghai", "Guangdong", "Tianjin", "Hebei", "Shanxi", "Liaoning", "Mongolei", "Heilongjiang", "Jilin"],
        DatenArr2: ["Su", "Zhe", "Anhui", "Fujian", "Gan", "Shandong", "Henan", "Hubei", "Xiang"],
        dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
        DatenArr4: ["Gan", "Qinghai", "Ningxia", "Xinjiang", "Taiwan"]
    }
})

Bestimmen Sie den Tastaturtyp

Ok, die für die Tastatur erforderlichen Parameter wurden oben berücksichtigt. Der nächste Schritt besteht darin, die Werte verschiedener Tastaturarrays entsprechend dem übergebenen Schlüsseltyp umzuschalten. Schreiben Sie einfach eine Methode zum Wechseln in die Komponentenmethode. Die Implementierung lautet wie folgt:

Komponente({
    Eigenschaften:
        Schlüsseltyp: {
            Typ: Zeichenfolge,
            Wert: „Provinz“
        },
        istAnzeigen:{
            Typ: Boolean,
            Wert: falsch
        }
    },
    Daten: {
        DatenArr1:[],
        DatenArr2:[],
        DatenArr3:[],
        DatenArr4:[]
    },
    Methoden: {
        Typ ändern(){
            wenn(this.data.keyType == 'letter'){
                dies.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                    dataArr3:["Z","X","C","V","B"],
                    DatenArr4:[]
                })
            }sonst wenn(this.data.keyType == 'Provinz'){
                dies.setData({
                    dataArr1:["Peking", "Shanghai", "Guangdong", "Tianjin", "Hebei", "Shanxi", "Liaoning", "Mongolei", "Heilongjiang", "Jilin"],
                    DatenArr2: ["Su", "Zhe", "Anhui", "Fujian", "Gan", "Shandong", "Henan", "Hubei", "Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    DatenArr4: ["Gan", "Qinghai", "Ningxia", "Xinjiang", "Taiwan"]
                })
            }sonst wenn(this.data.keyType == 'Autolizenz'){
                dies.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hongkong","Macau","Studie","Leitung"]
                })
            }
        }
    }
})

Da wir nun die Schneidemethode haben, müssen wir sie nur noch während der Initialisierung aufrufen. Ändern Sie den Code wie folgt:

Komponente({
    Eigenschaften:
        Schlüsseltyp: {
            Typ: Zeichenfolge,
            Wert: „Provinz“
        },
        istAnzeigen:{
            Typ: Boolean,
            Wert: falsch
        }
    },
    Daten: {
        DatenArr1:[],
        DatenArr2:[],
        DatenArr3:[],
        DatenArr4:[]
    },
    beigefügt(){
        dies.changeType()
    },
    Methoden: {
        Typ ändern(){
            wenn(this.data.keyType == 'letter'){
                dies.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                    dataArr3:["Z","X","C","V","B"],
                    DatenArr4:[]
                })
            }sonst wenn(this.data.keyType == 'Provinz'){
                dies.setData({
                    dataArr1:["Peking", "Shanghai", "Guangdong", "Tianjin", "Hebei", "Shanxi", "Liaoning", "Mongolei", "Heilongjiang", "Jilin"],
                    DatenArr2: ["Su", "Zhe", "Anhui", "Fujian", "Gan", "Shandong", "Henan", "Hubei", "Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    DatenArr4: ["Gan", "Qinghai", "Ningxia", "Xinjiang", "Taiwan"]
                })
            }sonst wenn(this.data.keyType == 'Autolizenz'){
                dies.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hongkong","Macau","Studie","Leitung"]
                })
            }
        }
    }
})

Zu diesem Zeitpunkt sind die Grundfunktionen der Komponente abgeschlossen, aber wenn wir auf den Inhalt auf der Tastatur klicken, werden Sie feststellen, dass keine Reaktion erfolgt, hmm. . . . . Hier scheint etwas zu fehlen. Da es sich um eine Tastatur handelt, muss sie das Eingabeergebnis erhalten.

Eingabeinhalt abrufen

Um den über die Tastatur eingegebenen Inhalt abzurufen, müssen Sie jeder Taste der Tastatur ein Ereignis hinzufügen, um den eingegebenen Inhalt abzurufen. Fügen Sie der vorherigen Struktur ein Ereignis hinzu. Einzelheiten finden Sie im ersten Absatz des Artikels. Der spezifische Implementierungscode lautet wie folgt:

Methoden: {
  Eingabeschlüssel(e){
    Konsole.log(e.currentTarget.dataset.value)
  },
  delKey(e){
    Konsole.log(e.currentTarget.dataset.value)
  },
  Tastatur verbergen(){
    dies.setData({
        isShow:false
    })
  }
}

Die Zeit zum Löschen und Schließen der Tastatur wird hier ebenfalls hinzugefügt. Der Eingabewert kann durch die beiden oben genannten Methoden abgerufen werden. Wenn wir jetzt auf ein Zeichen klicken, wird der gerade ausgewählte Wert im Bedienfeld ausgedruckt angezeigt.

Aber ich muss den Wert nicht ausdrucken, ich muss den Wert auf der Seite anzeigen. Hier muss ich den von der Komponente erhaltenen Wert an die Seite übergeben, die die Komponente aufruft. Wie übergebe ich ihn an die Seite, die die Komponente aufruft?

Übergabe von Komponentenparametern

Hier können wir zur offiziellen Dokumentation des WeChat Mini-Programms gehen. Schließlich ist eine offizielle Dokumentation eine gute Sache. Suchen Sie den in der folgenden Abbildung gezeigten Ort:

Was wir hier verwenden, ist das zweite Ereignis der Komponentenkommunikation, das beliebige Daten übergeben kann. Laut der Einführung im offiziellen Dokument weiß meiner Meinung nach jeder auf einen Blick, wie man es verwendet. Der Code lautet wie folgt:

Methoden: {
  Eingabeschlüssel(e){
    this.triggerEvent('Eingabewort', {Typ:'Eingabe',Wert:e.currentTarget.dataset.value})
  },
  delKey(e){
    this.triggerEvent('Eingabewort', {Typ:'del'})
  },
  Tastatur verbergen(){
    dies.setData({
        isShow:false
    })
    this.triggerEvent('Eingabewort', {Typ:'Unschärfe'})
  }
}

Hierbei werden sämtliche Vorgänge über ein Ereignis übermittelt und zusätzlich ein Typ hinzugefügt, um zu unterscheiden ob es sich um eine Eingabe, ein Löschen oder das Schließen der Tastatur handelt.

Komponentenverwendung

Nun, es ist nicht einfach. Endlich ist es Zeit, die Komponente zu verwenden. Hier sind die Schritte entsprechend der Verwendung von WeChat-Komponenten:

Geben Sie die Komponentenadresse in die Seitenkonfigurationsdatei ein. Fügen Sie das Komponenten-Tag auf der Seite hinzu. Fügen Sie die Parameter und ereignisbezogenen Codes, die an das hinzugefügte Tag weitergegeben werden müssen, wie folgt hinzu:

{
  "navigationBarTitleText": "Neues Fahrzeug hinzufügen",
  "Komponenten verwenden": {
    "Tastatur": "../../Komponenten/Tastatur/Index"
  }
}

Fügen Sie den obigen Code zur Konfigurationsdatei der Seite hinzu, auf der die Komponente verwendet werden soll

<Ansichtsklasse="Bind-Car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </Ansicht>
    <view class="Autonummer {{focusCode?'active':''}}" bindtap="chooseCarCode">{{AutoCode}}</view>
</Ansicht>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

Fügen Sie die letzte Codezeile oben auf der Seite hinzu, auf der sie verwendet wird, und fügen Sie die erforderlichen Parameter und Ereignisse hinzu.

Der nächste Schritt besteht darin, die entsprechenden Parameter und Ereignisse im JS der Seite zu verarbeiten. Der spezifische Code lautet wie folgt:

Seite({
  Daten: {
    FokusProvinz:false,
    Fokuscode:false,
    setKeyType:'Provinz',
    Tastatureingaben anzeigen:false,
    Schlüsselindex: 0,
    ProvinzCn:'',
    Provinzcode:'',
    Autocode:''
  },
  Eingabewort(e){
    wenn(e.detail.typ == 'Eingabe'){
      wenn(dieser.data.keyIndex == 0){
        dies.setData({
          ProvinzCn:e.detail.value
        })
      }sonst wenn(this.data.keyIndex == 1){
        dies.setData({
          Provinzcode:e.detail.value
        })
      }sonst wenn(this.data.keyIndex == 2){
        wenn(diese.Daten.AutoCode.Länge < 6){
          dies.setData({
            Autocode:diese.Daten.Autocode + e.Detail.Wert
          })
        }
      }
    }sonst wenn(e.detail.type == 'del'){
      wenn(dieser.Daten.AutoCode){
        dies.setData({
          Autocode:diese.Daten.Autocode.substr(0, diese.Daten.Autocode.Länge - 1)
        })
      }
    }sonst wenn(e.detail.type == 'unscharf'){
      dies.setData({
        Fokuscode:false,
        FokusProvinz:false
      })
    }
  },
  wähleProvinzCn(){
    dies.setData({
      setKeyType:'Provinz',
      Tastatureingaben anzeigen:true,
      Schlüsselindex: 0,
      FokusProvinz:true,
      Fokuscode:false
    })
  },
  wähleProvinzCode(){
    dies.setData({
      setKeyType:'Buchstabe',
      Tastatureingaben anzeigen:true,
      Schlüsselindex: 1,
      FokusProvinz:true,
      Fokuscode:false
    })
  },
  wähleCarCode(){
    dies.setData({
      setKeyType:'Autolizenz',
      Tastatureingaben anzeigen:true,
      Schlüsselindex: 2,
      FokusCode:true,
      FokusProvinz:false
    })
  }
})

Das inputWord auf der Seite ist das Ereignis, das wir am Ende verarbeiten müssen. Die anderen sind Schalter, die den Fokus steuern und nach der Eingabe das entsprechende rote Kästchen anzeigen.

prüfen

Dies ist der Schritt, vor dem die Programmierer am meisten Angst haben. Die Tester werden einfach an dem Code herumspielen, den sie geschrieben haben, hahaha, und schließlich Fehler darin finden. Wenn wir hier verschiedene Eingabetypen auswählen, werden wir feststellen, dass sich der Inhalt der Tastatur nicht geändert hat. Hmm, es stellt sich heraus, dass ich mir selbst einen Fehler geschrieben habe.

Beheben Sie den Fehler bei der Tastaturtypbeurteilung

Nach dem einfachen Test oben habe ich festgestellt, dass es einen Fehler gibt, der behoben werden muss. Tatsächlich liegt das Problem darin, dass der an die Komponente übergebene Schlüsseltyp jedes Mal zwischengespeichert wird, wenn die Tastatur angezeigt wird. Daher ist es notwendig, die Änderungen in der Eigenschaftsdeklaration in der Komponente zu überwachen. Ich habe es sofort getan und bin gleich nach der Korrektur mit der Arbeit gegangen. Der Code lautet wie folgt:

Komponente({
  Eigenschaften:
    Schlüsseltyp: {
      Typ: Zeichenfolge,
      Wert: „Buchstabe“,
      Beobachter:Funktion(neuerWert,alterWert){
          dies.changeType()
      }
    },
    istAnzeigen:{
      Typ: Boolean,
      Wert: falsch
    }
  }
})

Fügen Sie den Eigenschaften eine Beobachter-Abhörfunktion hinzu und rufen Sie bei einer Änderung die Funktion auf, um den Typ zu bestimmen. Auf diese Weise können Sie es mit Freude verwenden. Schließlich checkte ich ein und ging mit meinem Rucksack los. . . . Warten Sie, später gibt es noch mehr.

Abschluss

Derzeit wird diese Komponente nur geschrieben, um die Anforderungen zu erfüllen. Im tatsächlichen Verwendungsprozess können noch viele Probleme auftreten. Jeder ist herzlich eingeladen, Fragen zu stellen. Geben Sie abschließend den vollständigen Code jeder Datei ein

Komponentencode

WXML

<view class="Tastatur" wx:if="{{isShow}}">
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr1}}" wx:key="eindeutig" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr2}}" wx:key="eindeutig" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Klasse anzeigen="Artikel">
        <view wx:for="{{dataArr3}}" wx:key="eindeutig" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <Ansichtsklasse="Artikel" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </Ansicht>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</Ansicht>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

WXSS

.Tastatur {
    Position: fest;
    links: 0;
    unten: 0;
    Z-Index: 99999;
    Breite: 100 %;
    Hintergrund: #d1d6d9;
    Polsterung: 20rpx 10rpx 0;
    Polsterung unten: berechnen (30px + Umgebung (Safe-Area-Inset-Bottom)/2);
    Box-Größe: Rahmenbox;
}

.Tastatur .Element {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Rand unten: 20rpx;
}

.keyboard .item Ansicht {
    Breite: 9%;
    Höhe: 70rpx;
    Zeilenhöhe: 70rpx;
    Textausrichtung: zentriert;
    Rand rechts: 10rpx;
    Hintergrund: #ffffff;
    Rahmenradius: 10rpx;
    Schriftgröße: 28rpx;
}

.keyboard .item Ansicht:letztes-Kind {
    Rand rechts: 0;
}

.keyboard .delbtn {
    Position: fest;
    rechts: 10rpx;
    unten: berechnet (40px + Umgebung (Safe-Area-Inset-Bottom)/2);
    Höhe: 70rpx;
    Breite: 18%;
    Z-Index: 999999;
    Hintergrund: #adb3bd;
    Rahmenradius: 10rpx;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}

.keyboard .delbtn Bild{
    Breite: 60rpx;
    Höhe: 60rpx;
}
.Maske{
    Position: fest;
    links: 0;
    oben: 113rpx;
    unten: 0;
    rechts: 0;
    Z-Index: 99998;
}

Komponente({
    Eigenschaften:
        Schlüsseltyp: {
            Typ: Zeichenfolge,
            Wert: „Buchstabe“,
            Beobachter:Funktion(neuerWert,alterWert){
                dies.changeType()
            }
        },
        istAnzeigen:{
            Typ: Boolean,
            Wert: falsch
        }
    },
    Daten: {
        DatenArr1:[],
        DatenArr2:[],
        DatenArr3:[],
        DatenArr4:[]
    },
    beigefügt(){
        dies.changeType()
    },
    Methoden: {
        Typ ändern(){
            wenn(this.data.keyType == 'letter'){
                dies.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                    dataArr3:["Z","X","C","V","B"],
                    DatenArr4:[]
                })
            }sonst wenn(this.data.keyType == 'Provinz'){
                dies.setData({
                    dataArr1:["Peking", "Shanghai", "Guangdong", "Tianjin", "Hebei", "Shanxi", "Liaoning", "Mongolei", "Heilongjiang", "Jilin"],
                    DatenArr2: ["Su", "Zhe", "Anhui", "Fujian", "Gan", "Shandong", "Henan", "Hubei", "Xiang"],
                    dataArr3:["Chuan","Gui","Yun","Chongqing","Guangxi","Qiong","Tibet","Shaanxi"],
                    DatenArr4: ["Gan", "Qinghai", "Ningxia", "Xinjiang", "Taiwan"]
                })
            }sonst wenn(this.data.keyType == 'Autolizenz'){
                dies.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","Hongkong","Macau","Studie","Leitung"]
                })
            }
        },
        Eingabeschlüssel(e){
            this.triggerEvent('Eingabewort', {Typ:'Eingabe',Wert:e.currentTarget.dataset.value})
        },
        delKey(e){
            this.triggerEvent('Eingabewort', {Typ:'del'})
        },
        Tastatur verbergen(){
            dies.setData({
                isShow:false
            })
            this.triggerEvent('Eingabewort', {Typ:'Unschärfe'})
        }
    }
})

Seitencode verwenden

JSON

{
  "navigationBarTitleText": "Neues Fahrzeug hinzufügen",
  "Komponenten verwenden": {
    "Tastatur": "../../Komponenten/Tastatur/Index"
  }
}

WXML

<Ansichtsklasse="Bind-Car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </Ansicht>
    <view class="Autonummer {{focusCode?'active':''}}" bindtap="chooseCarCode">{{AutoCode}}</view>
</Ansicht>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

WXSS

.bind-car {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Hintergrund: #FFFFFF;
    Polsterung: 25rpx 30rpx;
}

.bind-car .car-provinz {
    Rand rechts: 30rpx;
    Breite: 170rpx;
    Höhe: 88rpx;
    Rand: 1rpx durchgezogen #999999;
    Rahmenradius: 4rpx;
    Anzeige: Flex;
}

.bind-car .car-province Ansicht {
    Breite: 86rpx;
    Höhe: 88rpx;
    Zeilenhöhe: 88rpx;
    Textausrichtung: zentriert;
    Schriftgröße: 34rpx;
    Schriftstärke: 500;
    Farbe: #333333;
}

.bind-car .car-province Ansicht: erstes Kind {
    Position: relativ;
}

.bind-car .car-province Ansicht:erstes-Kind::nach {
    Inhalt: '';
    Position: absolut;
    rechts: 0;
    oben: 50 %;
    Breite: 1rpx;
    Höhe: 40rpx;
    Hintergrund: #999999;
    Rand oben: -20rpx;
}

.bind-car .car-province.aktiv {
    Rahmenfarbe: #FF5152;
}

.bind-car .car-province.active Ansicht:erstes-Kind::nach {
    Hintergrund: #E83333;
}

.Autonummer {
    Breite: 100 %;
    Höhe: 88rpx;
    Zeilenhöhe: 88rpx;
    Rand: 1rpx durchgezogen #999999;
    Rahmenradius: 4rpx;
    Schriftgröße: 34rpx;
    Schriftstärke: 500;
    Farbe: #333333;
    Textausrichtung: zentriert;
}

.Autonummer.aktiv {
    Rahmenfarbe: #E83333;
}

Seite({
    Daten: {
        FokusProvinz:false,
        Fokuscode:false,
        setKeyType:'Provinz',
        Tastatureingaben anzeigen:false,
        Schlüsselindex: 0,
        ProvinzCn:'',
        Provinzcode:'',
        Autocode:''
    },
    Eingabewort(e){
        wenn(e.detail.typ == 'Eingabe'){
            wenn(dieser.data.keyIndex == 0){
                dies.setData({
                    ProvinzCn:e.detail.value
                })
            }sonst wenn(this.data.keyIndex == 1){
                dies.setData({
                    Provinzcode:e.detail.value
                })
            }sonst wenn(this.data.keyIndex == 2){
                wenn(diese.Daten.AutoCode.Länge < 6){
                    dies.setData({
                        Autocode:diese.Daten.Autocode + e.Detail.Wert
                    })
                }
            }
        }sonst wenn(e.detail.type == 'del'){
            wenn(dieser.Daten.AutoCode){
                dies.setData({
                    Autocode:diese.Daten.Autocode.substr(0, diese.Daten.Autocode.Länge - 1)
                })
            }
        }sonst wenn(e.detail.type == 'unscharf'){
            dies.setData({
                Fokuscode:false,
                FokusProvinz:false
            })
        }
    },
    wähleProvinzCn(){
        dies.setData({
            setKeyType:'Provinz',
            Tastatureingaben anzeigen:true,
            Schlüsselindex: 0,
            FokusProvinz:true,
            Fokuscode:false
        })
    },
    wähleProvinzCode(){
        dies.setData({
            setKeyType:'Buchstabe',
            Tastatureingaben anzeigen:true,
            Schlüsselindex: 1,
            FokusProvinz:true,
            Fokuscode:false
        })
    },
    wähleCarCode(){
        dies.setData({
            setKeyType:'Autolizenz',
            Tastatureingaben anzeigen:true,
            Schlüsselindex: 2,
            FokusCode:true,
            FokusProvinz:false
        })
    }
})

Dies ist das Ende dieses Artikels über die Implementierung der Kennzeicheneingabefunktion im WeChat-Applet. Weitere relevante Inhalte zur WeChat-Kennzeicheneingabe 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!

Das könnte Sie auch interessieren:

Beispielcode für ein WeChat-Applet mit der Nummernschild-Eingabemethode
Implementierungscode für die Tastatureingabefunktion zur Nummernschildsimulation für das WeChat-Applet

<<: So installieren Sie das ZSH-Terminal in CentOS 7.x

>>: Praktische Optimierung des MySQL-Paging-Limits