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 <🎜 festgelegt >-Methode durch Aufrufen der onLoad-Methode. setDatauserInfo

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

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

src="{{userInfo.avatarUrl}}"

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

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.

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.

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

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

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

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

block wx:if

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

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

<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!