Das WeChat-Applet lernt Array-Operationen

Vorwort

Ich glaube, dass sich nach dem Start des Miniprogramms in der öffentlichen Beta bereits viele Freunde beeilt haben, sich für die Registrierung für das Miniprogramm zu bewerben. Während der Entwicklungsphase sind wir auch auf viele Probleme gestoßen, z. B. war die Datenanforderung „wx.request“ während des Array-Vorgangs nicht erfolgreich, wir wussten nicht, wie wir Daten in das Array übertragen sollten, wie die Eingabe den Status der Benutzereingabe überwacht und wie der Hintergrund funktioniert. Das Bild von CSS konnte keine lokalen Ressourcen usw. abrufen. In diesem Blog gibt es ein spezielles Thema, um Lösungen für Freunde bereitzustellen, die auf diese Probleme stoßen.

Array-Operationen

Worüber wir heute hauptsächlich sprechen, sind Array-Operationen.
Ich glaube, dass für Kinder, die vuejs, reactjs und andere mvvmFrameworks verwendet haben, die Array-Operation des WeChat-Applets sehr einfach ist. Das Prinzip ist dasselbe.

Dies ist eine einfache Demo, die auf git hochgeladen wurde Hub, jeder kann es direkt herunterladen. Wir werden hauptsächlich über einige häufig verwendete Operationsmethoden in Arrays sprechen, einschließlich des Vorwärts- und Rückwärtseinfügens neuer Daten in das Array, des Änderns des Arrays, des Löschens des Arrays, des Löschens des Arrays und anderer Vorgänge, die ich Ihnen vorstellen werde Ideen zum Lernen.

Beispielpfad für den Demo-Array-Betrieb:
/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array <code>/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array</a>/array.w<a href="http://www.php.cn/wiki/1527.html" target="_blank">xml</a>/array.wxml

Weiterleiten Neu einfügen Daten rückwärts

Page({
  data: {
        list:[{
        id:1,
        name:'应季鲜果',
        count:1
        },{
        id:2,
        name:'精致糕点',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'无辣不欢生猛海鲜',
        count:5
        }]
  }
})

<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> concat()Wir initialisieren einige Daten. Wir müssen der Liste neue Daten hinzufügen. Wir müssen die <code>concat()JavaScript
concat()-Methode verwenden 🎜>-Methode wird verwendet, um zwei oder mehr Arrays zu verbinden. Diese Methode ändert das vorhandene Array nicht. Tatsächlich sagen wir über das Einfügen von Daten vorwärts und rückwärts this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data() eigentlich, zwei Arrays zu einem neuen Array zu kombinieren und dann dies zu verwenden.<a href="http://%20www.php.cn/code/8209.html" target="_blank">set<br>Data()</a>, um es auf der Seite darzustellen.

Werfen wir einen Blick auf den Code im WeChat-Applet.

Demo für Daten vorwärts einfügen

 //向前增加数据
  add_before:function (){


//要增加的数组
var newarray = [{
    id:6,
    name:'向前增加数据--'+new Date().getTime() ,
    count:89
}];

//使用concat()来把两个数组合拼起来
this.data.list = newarray.concat(this.data.list);

//将合拼之后的数据，发送到视图层，即渲染页面
//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。
this.setData({
      'list':    this.data.list
 });


  }

Demo für Daten rückwärts einfügen

  //向后增加数据
  add_after:function (){

    //要增加的数组
    var newarray = [{
            id:5,
            name:'向后增加数据--'+new Date().getTime() ,
            count:89
    }];


    this.setData({
        'list':this.data.list.concat(newarray)
    });


  },

<code>concat()Aufmerksame Freunde Das sollten Sie finden Wenn die beiden Absätze mit

kombiniert werden, sind die Daten in verketteten Klammern unterschiedlich. Der Unterschied zwischen dem Einfügen von Daten vorwärts und rückwärts besteht darin.

//假设这一段是我们要新增的数组
var newarray = [{
        id:5,
        name:'向后增加数据--'+new Date().getTime() ,
        count:89
}];

//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);

//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

Array ändern

Das Ändern der angezeigten Daten kommt im Entwicklungsprozess sehr häufig vor.

  //修改数组
  edit:function (e){

//这个参数“e”的具体作用，请参考微信小程序官方提供的说明，地址为https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107

var dataset = e.target.dataset;
var Index = dataset.index; //在通过在wxml页面里使用 data-index="{{index}}"传递过来的，是为识别正在编辑修改哪个数组。

//我们要修改的数组
this.data.list[Index].name = '修改了内容'+new Date().getTime();

//将合拼之后的数据，发送到视图层，即渲染页面
//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。
this.setData({
    list:this.data.list
});



  }

Ein bestimmtes Datenelement löschen

Was auch immer hinzugefügt, geändert oder gelöscht wird. JavaScript splice()Das Löschen erfordert die Verwendung der Methode splice(). Die Methode

fügt Elemente zum Array hinzu bzw. entfernt sie und gibt dann das gelöschte Element zurück.

//删除
  remove:function (e){

    var dataset = e.target.dataset;
    var Index = dataset.index;

    //通过`index`识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1
    this.data.list.splice(Index,1);

    //渲染数据
    this.setData({
        list:this.data.list
    });


  }

Daten löschen

Nach dem Hinzufügen, Bearbeiten oder Löschen müssen Sie die Daten erneut löschen.

//清空
  clear:function (){

    //其实就是让数组变成一个空数组即可
      this.setData({
          list:{}
      });

  }

Zusammenfassung

Heute haben wir hauptsächlich über das Hinzufügen, Ändern, Löschen und Löschen gesprochen. Tatsächlich gibt es viele Möglichkeiten, Arrays zu bedienen.

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet lernt Array-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!