Detaillierte Erläuterung der Ansichtsschicht (xx.xml) und der Logikschicht (xx.js) in der WeChat-Entwicklung

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Einführung der Ansichtsebene (xx.xml) und der Logikebene (xx.js) des WeChat-Applets vorgestellt.

Die Das WeChat-Applet kann das Konzept des Cloud-Betriebssystems verstehen. Das WeChat-Ökosystem selbst ist ein Betriebssystem. Darüber hinaus sind die öffentliche WeChat-Plattform und die WeChat-Entwicklungsplattform selbst bereits sehr ausgereifte Strukturen, die perfekt zu den Funktionen von Apps passen. Gleichzeitig können sie auch ein ultimatives interaktives Erlebnis bieten und das Potenzial haben, Apps zu ersetzen . Die Bedeutung des Apple App Store-Modells besteht darin, Drittanbietern von Software eine bequeme und effiziente Software-Verkaufsplattform zur Verfügung zu stellen. Die von Nutzern für den Kauf von Apps gezahlten Gebühren werden im Verhältnis 3:7 zwischen Apple und den App-Entwicklern aufgeteilt. Wenn auch das WeChat-Miniprogramm-Einkaufszentrum ein ähnliches Provisionsmodell übernimmt, werden die mehr als 800 Millionen Nutzer ein sehr großer immaterieller Vermögenswert sein und nach Spielen, Mitgliedschaften und Werbung zu einer weiteren Goldquelle für Tencent werden.

Mit WeChat-Miniprogrammen können Benutzer Apps nutzen, ohne sie herunterladen und installieren zu müssen. Benutzer können den QR-Code auf WeChat scannen, um das Programm zu öffnen. Das WeChat-Applet kann auf verschiedenen Systemen wie Android und iOS angewendet und auch auf verschiedenen Plattformen geteilt werden, da es selbst einer Website-Seite ähnelt.

Miniprogrammansichtsschicht (xx.xml) und Logikschicht (xx.js)

Das gesamte System ist unterteilt in Das aus zwei Teilen bestehende Framework der Ansichtsschicht (View) und der Logikschicht (App Service)

kann die Synchronisierung von Daten und Ansichten sehr einfach machen. Wenn Sie Daten ändern, müssen Sie nur die Daten in der logischen Ebene ändern, und die Ansichtsebene wird entsprechend aktualisiert.

Sehen Sie sich dieses einfache Beispiel an:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. Der Entwickler bindet den Namen in den Logikschichtdaten über das Framework an den Namen in der Ansichtsschicht Die Seite wird geöffnet, Hallo WeChat wird angezeigt!

2. Wenn auf die Schaltfläche geklickt wird, sendet die Ansichtsebene das ChangeName-Ereignis an die Logikebene und die Logikebene findet das entsprechende Ereignis Ereignisverarbeitungsfunktion

3. Die Logikschicht hat die setData-Operation ausgeführt und den Namen von WeChat in MINA geändert. Da die Daten an die Ansichtsebene gebunden wurden, ändert sich die Ansichtsebene automatisch in „Hallo“. MINA!.

Die Ansichtsebene ist xx.xml

Die Logikebene ist xx.js

Beim Lesen werden zunächst die Anfangsdaten der Logikschicht untersucht, um die Ansichtsschicht zu füllen. Die Ansichtsschicht löst Ereignisse in der Logikschicht aus, und die Logikschicht gibt den Inhalt der Ansichtsschicht zurück und ändert ihn.

Logikschicht (App Service)

Die Logikschicht des Applet-Entwicklungsframeworks wird von JavaScript geschrieben.

Die Logikschicht verarbeitet die Daten und sendet sie an die Ansichtsschicht und akzeptiert gleichzeitig Ereignisrückmeldungen von der Ansichtsschicht. Basierend auf JavaScript haben wir einige Modifikationen vorgenommen, um die Entwicklung kleiner Programme zu erleichtern.

1. Fügen Sie App- und Seitenmethoden hinzu, um Programme und Seiten zu registrieren.

2. Bietet umfangreiche API, wie z. B. Scannen, Bezahlen und andere WeChat-spezifische Funktionen.

3. Jede Seite hat einen unabhängigen Umfang und bietet modulare Funktionen.

4. Da das Framework nicht im Browser läuft, können einige Funktionen von JavaScript nicht im Web verwendet werden, wie z. B. Dokument, Fenster usw.

5. Der gesamte vom Entwickler geschriebene Code wird schließlich in ein JavaScript gepackt und beim Start des Miniprogramms ausgeführt, bis das Miniprogramm zerstört wird. Ähnlich wie bei ServiceWorker wird die Logikschicht auch App Service genannt.
   

Initialisierungsdaten

Initialisierungsdaten werden beim ersten Rendern der Seite verwendet. Die Daten werden in Form von JSON von der Logikschicht an die Rendering-Schicht übertragen. Daher müssen die Daten in einem Format vorliegen, das in JSON konvertiert werden kann: Zeichenfolgen, Zahlen, boolesche Werte, Objekte und Arrays.

Die Rendering-Ebene kann Daten über WXML binden.

Beispielcode:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

setData-Funktion wird verwendet Senden Sie Daten von der Logikschicht an die Ansichtsschicht und ändern Sie den entsprechenden Wert von this.data.

Hinweis:

1. Das direkte Ändern dieser Daten ist ungültig und kann den Status der Seite nicht ändern, was ebenfalls zu Dateninkonsistenzen führt .
2. Der Datensatz darf nicht größer als 1024 KB sein.

setData()-Parameterformat

Accept Ein Objekt in der Form key, value, stellt die Änderung des Werts dar, der dem Schlüssel in this.data entspricht, in value.

Der Schlüssel kann sehr flexibel sein und in Form eines Datenpfads angegeben werden, z. B. array[2].message, a.b.c.d, und muss nicht in this.data vordefiniert werden.

Beispielcode:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

Ansichtsebene

Die Ansichtsebene des Frameworks wird von WXML und WXSS geschrieben , angezeigt nach Komponenten.

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

2. 事件可以将用户的行为反馈到逻辑层进行处理。

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如id, dataset, touches。
   

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

3. 利用组件开发微信小程序日历的详细方法

4. 小程序开发之利用co处理异步流程的实例教程

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ansichtsschicht (xx.xml) und der Logikschicht (xx.js) in der WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!