Detaillierte Erläuterung der vom WeChat-Applet implementierten Datenverarbeitung

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Datenverarbeitung in WeChat-Miniprogrammen ein. Die Einführung im Artikel ist sehr detailliert und bietet einen gewissen Referenz- und Lernwert für alle, die einen Blick darauf werfen zusammen. .

Vorwort

Der Kern der WeChat-Applet-Datenverarbeitung sind die Daten der js-Dateiseite. Es ist eine wichtige Brücke zwischen WXML und js. Die Daten, die auf der WXML-Seite angezeigt werden müssen, müssen in Daten definiert werden, sonst können sie nicht auf der Seite angezeigt werden. Die Daten in data werden durch Netzwerkanforderungen oder eine logische Verarbeitung festgelegt und initialisiert.

Es gibt zwei Möglichkeiten, Datendaten festzulegen. Beispielsweise gibt es einen Namen in unseren Daten und dieser wird so initialisiert, dass er leer ist

data:{
 name:'我是初始化的name'
}

Wenn mehrere Daten durch Kommas „,“ getrennt sind, können wir, wenn wir die Daten ändern möchten,

 //方式1
 this.data.name='我现在name值是Code4Android'
 //方式2
 this.setData({
 name:'我现在name值是Code4Android'
 })

Aber welche Methode wird verwendet Nach der Verarbeitung ändert sich der Wert von Name in „Mein aktueller Namenswert ist Code4Android“. Wir können this.data.name verwenden, um den Wert von Name abzurufen. Vielleicht haben Sie Fragen, was ist der Unterschied zwischen diesen beiden Methoden?

Dann erstellen wir nun eine Ansicht in WXML, um den Wert des Namens anzuzeigen

<view>{{name}}</view>

Wenn wir die Daten in Daten anzeigen müssen während auf der Seite. Sie müssen geschweifte Klammern verwenden, um den Wert in den Daten abzurufen und anzuzeigen. Durch die beiden oben genannten Methoden wird festgestellt, dass sich die Daten auf der Seite nicht geändert haben und immer noch der initialisierte Wert sind Methode Wenn sich die Daten ändern, sollten Sie den Unterschied zwischen den beiden verstehen.

Wenn die Daten ein Objekt sind, wie z. B.

data:{
people:{
 name:'Code4Android',
 address:'河南'
}
}

, dann möchten wir das Personenobjekt und die Anzeige ändern

 this.setData({
 people:{
 name:'Code4Android1',
 address:'河南'
 }
 })

Zu diesem Zeitpunkt wurde das Personenobjekt vollständig geändert. Manchmal müssen wir nur einen Teil der Daten ändern Das Namensattribut und der Wert der Adresse ändern sich nicht. Es kann wie folgt sein: Ändern Sie die Methode

 this.setData({
 'people.name': 'Code4Android'
 })

Wenn ein Array vorhanden ist, das Personenobjekte enthält

 this.setData({
 'peoples[0].name': 'Code4Android'
 })

Wenn wir einen Typwert in den Daten haben und verschiedene Werte unterschiedliche Wörter anzeigen sollen, hat der Typ beispielsweise drei Werte: 1, 2 , und 3, die jeweils für die Mittelschule, die Oberschule und die Universität stehen. Wenn der Server den Wert zurückgibt, wie konvertieren wir dann den Typwert in die entsprechende Zeichenanzeige? Hier werden drei Methoden bereitgestellt

 <!--方式1，使用三元表达式-->
 <view>{{type==1 ?&#39;初中&#39;:(type==2?&#39;高中&#39;:&#39;大学&#39;)}}</view>
<!--方式2，使用条件渲染-->
<view wx:if="{{type==1}}">初中</view>
<view wx:elif="{{type==2}}">高中</view>
<view wx:else>大学</view>
<!--方式3，js对数据预处理，jsdata中增加typeName-->
js文件相应预处理：
 var typeName = &#39;&#39;
 if (this.data.type == 1) {
 typeName = &#39;初中&#39;
 } else if (this.data.type = 2) {
 typeName = &#39;高中&#39;
 } else {
 typeName = &#39;大学&#39;
 }
 this.setData({
 typeName: typeName
 })

WXML:中显示
<view>{{typeName}}</view>

In WXML-Dateien zeigen wir häufig unterschiedliche Stile je nach Status an. Zu diesem Zeitpunkt müssen wir sie je nach Status anzeigen . Verschiedene Stile, zum Beispiel, wenn isSelected in den Daten einer Ansicht wahr ist, der Hintergrund rot und die Schriftfarbe weiß ist, andernfalls ist der Hintergrund grau (#ddd), dann können die folgenden zwei Möglichkeiten implementiert werden

<!--方式1，直接使用style -->
 <view style="{{isSelected==true ? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}">按钮</view>
<!--style也可以style="{{isSelected? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}"-->
<!--方式2，使用class-->
 <view class="{{isSelected ?&#39;isSelected&#39;:&#39;noSelected&#39;}}">按钮</view>

wxss:
.isSelected {
 background-color: #f00;
 color: #fff;
}

.noSelected {
 background-color: #ddd;
 color: #000;
}

Seitendatenübertragung

Wenn wir eine neue Seite öffnen, verwenden wir oft wx.navigateTo Wenn wir es auf die neu geöffnete Seite übertragen möchten, können die Daten in Form von ？key=value nach der URL gespleißt werden, und mehrere Parameter werden durch & getrennt, zum Beispiel

wx.navigateTo({
 url: '/pages/mypage/mypage?name=Code4Android',
 })`

Nach dem Öffnen einer neuen Seite über „navigationTo“ wird die neue Seite Es wird eine restriktive onLoad-Methode geben, die über einen Optionsparameter verfügt, und dann können die übergebenen Daten über options.name abgerufen werden.

Wenn wir Objektobjekte wie die oben deklarierten Personen übergeben möchten, stellen wir beim Spleißen von '?people='+people fest, dass die Daten beim Empfang nicht normal analysiert werden können Die folgende Methode zum Übergeben

var string = JSON.stringify(this.data.people)
wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string ,
 })`

Übergeben Sie nach Erhalt

var string =options.people
var obj=JSON.parse(string)

und dann obj Mit unserem JSON-Objekt können wir obj.name den Attributwert abrufen. Glaubst du, dass auf diese Weise alles gut wird? Natürlich nicht; zum Beispiel sehen die oben genannten Personenobjektdaten so aus:

data:{
 people: {
 name: '名字&名字',
 age: 25,
 address: '河南'
 }
}

Zu diesem Zeitpunkt werden die Daten durch die obige Methode geleitet und es liegt ein Fehler vor Über JSON.parse wird der Fehler verursacht. Es ist leicht zu erkennen, dass die zu diesem Zeitpunkt erhaltene Zeichenfolge nicht vollständig ist. Der Grund dafür ist, dass das Namensattribut „&“ enthält und das Applet davon ausgeht vor & ist der Wert von Personen, und die Daten nach & sind die Teildaten von sieben Tagen. Daher ist „people“ kein vollständiges JSON-Objekt, was dazu führt, dass die Analyse ungewöhnlich fehlschlägt.

Wie soll ich zu diesem Zeitpunkt Daten übertragen? Eine davon besteht darin, alle &-Symbole in der obigen Zeichenfolge zu ersetzen, z. B.

var string = JSON.stringify(this.data.people)
wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
 })`

Dann können die zu diesem Zeitpunkt empfangenen Daten normal analysiert werden, aber Sie werden feststellen, dass das & im Namen fehlt, wenn Sie keine besonderen Anforderungen an das Symbol & haben, das heißt, wenn & nicht vorhanden ist eine besondere Bedeutung darstellen, können Sie es ersetzen oder durch andere eindeutige Zeichen ersetzen und diese dann wieder ersetzen.

Natürlich können wir auch wx.setStorageSync("people", this.data.people) verwenden, um die Daten zu speichern und dann die Daten auf der neu geöffneten Seite wx.getStorageSync("people") abzurufen, und die abgerufene Datenstruktur ist dieselbe wie die gespeicherte .

有很多时候，我们需要将当前页面选择的数据，返回到上一个页面，那么该如何操作呢，例如页面1显示一个地址信息，并且有一个更改地址按钮，跳转新页面2选择地址，并将选择的地址在1页面展示。

 var pages = getCurrentPages()
 pages[pages.length - 2].setData({
 address: address
 })

说道页面传递数据，我们常见的就是当前页面是一个列表数据，点击某一个item时将数据传递到新的页面，那么我们如何确定当前点击项的数据呢？

 <block wx:for="{{peoples}}" wx:for-index="id" data-index="{{id}}" bindtap="select">
 <!---给每个菜单定义一个index值 -->
 <view data-name="{{item.name}}">
 <text >{{item.address}}</text>
 </view>
 </block>

wx:for="{{peoples}}"就是讲peoples数据循环渲染，和Android ListView效果一样， wx:for-index是自定义当然显示item的索引键名字，data-是自定义数据，data-后面部分是自定义的，在data-自定义的数据通过e.currentTarget.dataset获取。例如上面点击事件

select: function (e) {
 var index = e.currentaTrget.dataset.index
 var people = this.data.peoples[index]
 var string = JSON.stringify(this.data.people)
 wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
 })`
 },

总结

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der vom WeChat-Applet implementierten Datenverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!