Grundlagen der Miniprogrammentwicklung – Datenbindung Teil 1 (7)

Wie im vorherigen Tutorial geschrieben, unterteilt das WeChat-Applet-Framework das Programm in eine Logikebene (.js-Datei) und eine Ansichtsebene (.wxml-Datei). Dies ist eine gängige Programmiermethode, die Benutzeroberfläche und Logik trennt. Das entwickelte Programm ist flexibler und einfacher zu erweitern.

Diese Programmiermethode löst normalerweise zwei Probleme:

UI-Schicht reagiert auf Änderungen in Logik und Daten in der Logikschicht
UI-Schicht gibt Benutzeroperationen an die Logikschicht zurück

Im Allgemeinen können die UI-Schicht und die Logikschicht Schnittstellen zueinander offenlegen. Aus Gründen der Flexibilität und Skalierbarkeit wird jedoch eine mittlere Schicht für die Verwaltung eingeführt, die die UI-Schicht vermeiden kann . und direkte Abhängigkeiten zwischen Logikschichten.

Das WeChat-Applet-Framework basiert auf diesem Modell. Die .wxml-Datei beschreibt die UI-Ebene (der offizielle Name von WeChat ist Ansichtsebene, und im Tutorial wird auch verwendet in der zukünftigen Ebene zum Namen anzeigen), die .js-Datei verwaltet die Logikebene und das WeChat-Framework dient als mittlere Ebene, um die Anrufe zwischen den beiden zu verwalten.

Um Entwicklern besser bei der Entwicklung von WeChat-Applets zu helfen, definiert WeChat einige Syntax und Regeln, um Entwicklern dabei zu helfen, die Ansichtsebene und die Logikebene zu verbinden.

Datenbindung

String-Inhalt anzeigen

//page.wxml
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

Durch Einbettung von „{{motto}}“ in der Ansicht Layer-Code, die Schnittstelle zeigt „Hello World“ an

Ändern Sie den String-Inhalt

setData({
  motto:'Hello My World'
  })

Wenn der obige Code ausgeführt wird, zeigt die Schnittstelle „Hello My“ an Welt“ „

Es gibt zwei Punkte, die im obigen Teil erklärt werden müssen:

1: Die Ansichtsebene ist mit {{motto}} anstelle von {{data.motto}} eingebettet Das WeChat-Framework legt die an die Ansichtsebene gebundene Variable fest, die im Datenattribut des Seitenobjekts definiert werden muss. Wenn also die Variable an die Ansichtsebene gebunden werden muss, müssen Sie sie unbedingt definieren das Datenattribut in

2: Durch Aufrufen des Seitenobjekts. Die Methode setData (Seitenobjekt vordefiniert) kann Schnittstellendaten aktualisieren, aber das direkte Setzen von Variablen ist ungültig Verwenden Sie daher für Variablen, die an die Ansichtsebene gebunden sind, immer die Methode setData, um sie festzulegen. Variablenwert

Bild anzeigen
Auf der Programm-Homepage, die standardmäßig vom Entwicklungstool generiert wird , der Avatar des Benutzers wird wie folgt angezeigt:

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

//index.js
onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }

image Das src-Attribut des Tags ist an die userInfo.avatarUrl-Variable gebunden und wird in -Methode durch Aufrufen der onLoad-Methode. setDatauserInfo

Attributbindung

kann Variablen an die Attributwerte der Ansichtskomponente binden (z. B. das

-Attribut des

-Tags oben). ), image Beachten Sie, dass Sie beim Binden an eine Eigenschaft außen ein Paar doppelte Anführungszeichen hinzufügen müssen. src

Zusätzlich zur Anzeige von Bildern hat die Attributbindung viele Funktionen.

src="{{userInfo.avatarUrl}}"

Zugehörige Daten

Angenommen, Sie möchten ein Studentenverwaltungsprogramm erstellen, um Benutzerdaten anzuzeigen. Die Daten des Schülers werden auf den Seiten eingegeben.

Wenn das Klickereignis des Benutzers abgerufen wird, muss bekannt sein, auf welche Schülerdaten geklickt wird. Zu diesem Zeitpunkt kann die Schüler-ID zur Datenzuordnung an das ID-Attribut der Ansichtskomponente gebunden werden.

Steuern Sie das Ausblenden/Anzeigen der Ansicht

Sie können Variablen an das ausgeblendete Attribut der Ansichtskomponente binden, indem Sie den Wert des ausgeblendeten Attributs der Komponente ändern können Sie steuern, ob die Komponente angezeigt wird.

Attribute steuern

Wie oben erwähnt, können Sie steuern, ob die Ansichtskomponente durch Attributbindung angezeigt wird, und Sie können diese Funktion auch durch die Steuerung von Attributen erreichen.

Durch die Bindung von Daten an das Attribut

//Page.wxml
<view wx:if="{{condition}}"> </view>

//Page.js
Page({
  data: {
    condition: true
  }
})

können Sie steuern, ob die Komponente angezeigt wird.

Das Framework bietet auch die Attribute wx:elif und wx:else. Die Verwendung ist wie folgt:wx:if

Wenn Sie mehrere Ansichtskomponenten gleichzeitig steuern möchten, können Sie

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

verwenden

block wx:if

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

Ebenso müssen Sie auch doppelte Anführungszeichen hinzufügen, wenn Sie die Attributbindung steuern

wx:if vs versteckt

Im Allgemeinen hat wx :if höhere Wechselkosten und versteckt hat höhere anfängliche Rendering-Kosten. Wenn häufiges Umschalten erforderlich ist, ist es daher besser, „hidden“ zu verwenden. Wenn es unwahrscheinlich ist, dass sich die Bedingungen zur Laufzeit ändern, ist „wx:if“ besser.

Schlüsselwörter

Das Framework stellt zwei Schlüsselwörter zur Darstellung von Wahr und
Falsch bereit: wahr von boolescher Typ, der den wahren Wert darstellt.
: boolescher Typ false, der einen falschen Wert darstellt. true
Codebeispielfalse

Besonderer Hinweis: Schreiben Sie „checked="false"“ nicht direkt. Das Berechnungsergebnis ist eine Zeichenfolge, die in einen booleschen Typ konvertiert wird, um a darzustellen wahrer Wert.

<checkbox checked="{{false}}"> </checkbox>

Weitere Informationen zur Datenbindung finden Sie hier.

Grundlagen der Miniprogrammentwicklung – Datenbindung (Teil 8)

Das obige ist der detaillierte Inhalt vonGrundlagen der Miniprogrammentwicklung – Datenbindung Teil 1 (7). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!