WeChat Mini-Programmentwicklung (6) Seitenentwicklung „Visitenkarte bearbeiten“.

Es gibt zwei Wege zum Bearbeiten von Visitenkarten, die in den Prozess des Hinzufügens einer Visitenkarte und den Prozess des Änderns der Visitenkarte unterteilt sind. Der Vorgang für Benutzer zum manuellen Hinzufügen einer neuen Visitenkarte ist wie folgt:

Zuerst gelangen Sie zu unserer neuen Visitenkartenseite 1. Sie müssen die aktuelle Benutzer-ID des Benutzers übergeben, wx.navigateTo springt mit dem Wert. „Manuell“ ist wahr, um den Benutzer so einzustellen, dass er die neue Route wählt.
Vertikal Das Hinzufügen bedeutet vertikales Verschieben, das Entfernen bedeutet das Verschieben nach links und rechts. Der Gesamtaufbau ist wie folgt:

Visitenkartenseite 1 hinzufügen. Das Grundlayout ist wie folgt:

Benutzer-ID abrufen.

Es ist auch sehr einfach, die mit WeChat gelieferte Eingabekomponentenüberprüfung zu verwenden, wie z. B. das maxLength -Attribut , das kann die Länge der Benutzereingabe begrenzen. Beispielsweise beträgt die Länge meines Namens bis zu 5 Ziffern, also verwenden Sie einfach die Zahl 5.

Sie können auch einige Überprüfungseffekte anpassen. Insbesondere können Sie einige Überprüfungskonfigurationen entsprechend Ihren Anforderungen durchführen und die von der eingegebenen Werte abrufen Benutzer zugreifen und Vorgänge ausführen.

Die integrierte modale Box-Eingabeaufforderungskomponente ist hier gebunden.

wobei modalHidden2 der modale Boxschalter ist.
Darüber hinaus ist proptText der Inhalt, der aufgefordert werden muss.
Sogar viele Eingabefelder unterstützen dynamische Datenänderungen, was sehr praktisch ist.

Der tatsächliche Effekt ist sehr schnell. Beim Schreiben kleiner Programme kann das der größte Vorteil sein Wir müssen keine Reihe von Kompatibilitätsproblemen berücksichtigen.

Endlich gibt es einen Avatar zum Hochladen von Bildern. Nach dem Testen gibt es immer noch Probleme beim Hochladen Der Backend-Server kann an der Unvollkommenheit der internen Beta-Version liegen.

legt das Hintergrundbild direkt fest.

Senden Sie das Formular und springen Sie.
Das Übermittlungsformular verwendet einfach die integrierte bindsubmit-Ereigniskomponente. Fügen Sie einfach formType="submit" zur Schaltflächenkomponente hinzu. Beachten Sie außerdem, dass bei Verwendung der Formularübermittlungsfunktion der Name hinzugefügt werden muss Attribut. Die Übermittlungsmethode erfolgt in Form von Schlüssel-Wert-Paaren.

Zu diesem Zeitpunkt wird zur Bearbeitungsseite 2 gesprungen. Diese Seite identifiziert das passende Unternehmen anhand der vom Benutzer eingegebenen Mobiltelefonnummer. Die Seite ist sehr einfach. Es handelt sich nur um eine Datenschleife. Möglicherweise muss das Optionsfeld in Zukunft verschönert werden.

sind auch einige

Datenbindungs-

und Verifizierungseffekte.

Der tatsächliche Rendering-Effekt ist zu sehen.

Dies ist im Grunde die gleiche Logik wie auf der ersten Bearbeitungsseite, einige grundlegende Überprüfungen und Übermittlungen, hier nur Sprechen Sie über die ersten beiden Schritte. Das Gleiche gilt für die Bearbeitung von Seite 3. Ich werde hier nicht zu sehr ins Detail gehen.

Ändern Sie die Darstellungen und Anforderungen des Visitenkartenprozesses. Durch das Ändern der Visitenkarte werden alle zuvor eingegebenen persönlichen Informationen auf einmal gerendert, damit Benutzer sie ändern können:

Dieses Kartenbildmodul hat vorerst einige Probleme beim Hochladen von Bildern. Es wird empfohlen, wx.navigateTo zu verwenden, um die Seite zu steuern Ein Punkt: wx.navigateTo bietet uns drei verschiedene Sprung-Routen, die alle gut gekapselt sind, und viele Sprungseiten beinhalten Wert und dergleichen, was möglich ist Durch die einheitliche Verwaltung können auch einige unsichtbare Fehler vermieden werden. Kurz gesagt, es sollte entsprechend den Geschäftsanforderungen festgelegt werden:

Name und Mobiltelefon erforderliches Modul:

Persönliches Informationsmodul, direkt ausschalten (blockieren):

Onload fordern wir erforderliche und optionale Daten an:

• requiredGroup erforderliche chinesische Informationen

• notRequiredGroup topic Chinese information

• requiredGroupEn Erforderliche englische Informationen

• notRequiredGroupEn Thema Englische Informationen

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

Chinesische und englische Informationen erforderlich Mit optionaler Darstellung :

Die Konvertierung der Formularübermittlungsdaten ist hier etwas kompliziert (Sie können sie entsprechend den Geschäftsanforderungen durchführen, Sie müssen keine Zeit aufwenden Wenn Sie die Methoden hier studieren), wird ein Array erhalten, das gemäß dem vom Hintergrund benötigten Datenformat konvertiert und übergeben wird.

Heute werde ich zurückgehen und besprechen, wie die Festkomma-Sprungfunktion der Homepage A, B und C implementiert wird.

Das erste ist das kleine Indexlayout auf der rechten Seite und die Datenbindung ist die gleiche wie beim Brief im Unternehmen Kartenliste. Wenn eine Visitenkarte vorhanden ist, muss diese nicht gerendert werden. Die ID ist auch der aktuelle Brief und der Inhalt wird rechts angezeigt

Daten sortieren und gruppieren. Die .name-Daten sind die gleichen:

Dies liegt daran, dass # das Festlegen auf id (d. h. id="#") nicht unterstützt, sodass eine Konvertierung durchgeführt wurde.

Klickereignis: Aktuelle ID abrufen und Daten an View an die aktuelle ID binden.

Zuallererst befinden sich die Visitenkartenliste und das Buchstabenverzeichnis auf der Visitenkarte in der Scroll-Ansicht auf eine feste Höhe eingestellt werden, auf 100 % und 100 Vh eingestellt werden, sind ungültig. Der Scroll-Schalter der y-Achse ist aktiviert und das Scrollen in die Ansicht muss zur ID seines untergeordneten Elements springen.

Sie können sich Folgendes ansehen:

diese Gruppe. name ==sortmsg ist äquivalent zu A==A, B==B. Es gilt das gleiche Prinzip.

Wenn es eine Menüleiste gibt Hier müssen Sie auf das Layout achten, da sonst die Höhe der Menüleiste nach unten versetzt wird. Tatsächlich können Sie dieses Problem vermeiden, solange sie sich auf der gleichen Ebene wie der alphabetische Index (das obere Menü) befindet Hier wird von der Vorlage getrennt, und die getrennte Vorlage Es ist zu beachten, dass einige Daten, die hier an die Vorlage gebunden werden müssen, ungültig sind und die Details nicht weiter untersucht werden.

Die Sprungfunktion ist grundsätzlich implementiert (anderes ist # unten).

【Verwandte Empfehlungen】

1. Laden Sie den vollständigen Quellcode des WeChat Mini-Programms herunter

2.Klicken Sie auf das Änderungssymbol in der Tableiste

Demo des WeChat Mini-Programms: Lezhu

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programmentwicklung (6) Seitenentwicklung „Visitenkarte bearbeiten“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!