Eine Einführung in verschiedene Methoden zum Übergeben und Abrufen von Werten in der WeChat-Entwicklung

零下一度
Freigeben: 2017-05-22 11:53:02
Original
2069 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen vorgestellt und verschiedene Methoden zum Übertragen und Abrufen von Werten in WeChat-Miniprogrammen zusammengefasst. Hier finden Sie detaillierte Erläuterungen zu diesen Methoden und beigefügte Beispielcodes.

WeChat-Applet-Übergabewert

Die allgemeinen Werte im Applet sind wie folgt. Wenn Sie ein vollständiges Projekt aufschreiben, beträgt die Wahrscheinlichkeit, es zu verwenden, fast 100 %. .

  • Indexindexwert auflisten

  • Seitenwertübergabe

  • Formularwert

1. Index-Indexwert auflisten

Die Implementierungsmethode lautet: data-index="{{index}}" digging hole and e .currentTarget.dataset .index zum Ausfüllen der Grube

1.1 Wert generieren

<image src="../../../images/icon_delete.png" /><text>删除</text>
Nach dem Login kopieren

Benutzerdefiniertes Attribut data-index="{{index}}" im Löschsymbol und Text hinzufügen und das Klickereignis binden bindtap="delete"

<image src="../../../images/icon_delete.png" /><text>删除</text>
Nach dem Login kopieren

, um die Löschmethode zu implementieren und den Index-Indexwert abzurufen.


delete: function (e) {
  var index = parseInt(e.currentTarget.dataset.index);
  console.log("index" + index);
}
Nach dem Login kopieren

Was passiert, wenn e.target anstelle von e.currentTarget verwendet wird?

bewirkt, dass der Indexwert nur durch Klicken auf ausgegeben wird, und das Klickelement gibt NaN aus.

Wozu dient das Ziel, um Unterelemente von externen Elementen zu unterscheiden, wenn sie beispielsweise den Avatar des Benutzers ändern müssen? Klicken Sie auf den Avatar selbst, um eine Vorschau des großen Bildes anzuzeigen, und klicken Sie auf die gesamte Zeile, in der sich der Avatar befindet, um den Avatar zu wechseln.

1.2 Herausnehmen des Werts

Versuchen, die Löschadresse des entsprechenden Elements aus den Indexdaten zu finden


// 找到当前地址AVObject对象
var address = that.data.addressObjects[index];
// 给出确认提示框
wx.showModal({
  title: &#39;确认&#39;,
  content: &#39;要删除这个地址吗?&#39;,
  success: function(res) {
    if (res.confirm) {
      // 真正删除对象
      address.destroy().then(function (success) {
        // 删除成功提示
        wx.showToast({
          title: &#39;删除成功&#39;,
          icon: &#39;success&#39;,
          duration: 2000
        });
        // 重新加载数据
        that.loadData();
      }, function (error) {

      });
    }
  }
})
Nach dem Login kopieren

2. Seitenwertübertragung

Übergeben Sie die Adress-ID von der Lieferadresslistenseite an die Bearbeitungsseite, um die ursprüngliche Adresse zur Änderung zu lesen.

Adresse/Listenseite implementiert den folgenden Code


<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>编辑</text></view>

edit: function (e) {
  var that = this;
  // 取得下标
  var index = parseInt(e.currentTarget.dataset.index);
  // 取出id值
  var objectId = this.data.addressObjects[index].get(&#39;objectId&#39;);
  wx.navigateTo({
    url: &#39;../add/add?objectId=&#39;+objectId
  });
},
Nach dem Login kopieren

Adresse/Seite hinzufügen implementiert die Methode onLoad(Optionen), von der URL Holen Sie sich die Objekt-ID

onLoad: function (options) {
  var objectId = options.objectId
}
Nach dem Login kopieren

im Pfad, greifen Sie dann auf das Netzwerk zu und rendern Sie die Seite.

3. Formularwert

3.1 Methode 1, über

>-Tags werden zusammen mit dem

-Layout wie folgt verwendet:

<form bindsubmit="formSubmit">
  <input name="detail" placeholder="详情地址" />
  <input name="realname" placeholder="收件人姓名" />
  <input name="mobile" placeholder="手机号码" type="number"/>
  <button formType="submit" type="primary">Submit</button>
</form>
Nach dem Login kopieren

js-Wert:

formSubmit: function(e) {
  // detail
  var detail = e.detail.value.detail;
  // realname
  var realname = e.detail.value.realname;
  // mobile
  var mobile = e.detail.value.mobile;
}
Nach dem Login kopieren

3.2 Methode 2,

besteht< ; input bindconfirm="realnameConfirm">Implementation

// 实现相应多个**Confirm方式
detailConfirm: function(e) {
  var detail = e.detail.value;
}
realnameConfirm: function(e) {
  var realname = e.detail.value;
}
mobileConfirm: function(e) {
  var mobile = e.detail.value;
}
Nach dem Login kopieren

Aus dem Vergleich zwischen Methode eins und Methode zwei geht hervor, dass sie zwar auch das Ziel des Erhaltens von Werten erreichen können, ihre Verwendungsszenarien jedoch unterschiedlich sind. Ersteres eignet sich für die Übermittlung einer großen Anzahl von Formularelementen, z. B. wenn der Benutzer persönliche Daten vervollständigt und die Lieferadresse eingibt, während letzteres nur für ein oder zwei Formularelemente geeignet ist, z. B. Express Eingabe der Bestellnummer und Bindung der Mobilfunknummer.

Wenn Sie eine sofortige Antwort ähnlich wie bei Ajax benötigen, sollten Sie Letzteres wählen, da die Eingabe verwenden kann, um den Wert sofort abzurufen, z. B. die Produkt--Suche Geben Sie Mobiltelefon-Schlüsselwörter in das Feld ein, und es sollten Szenen wie iPhone7, Mate8 und andere Kandidatenwörter angezeigt werden.

Zusammenfassung:

Listenindex-Indexwert, Seitenwertübertragung, Formularwertübertragung, der erste Typ wird ständig verwendet, der zweite Typ wird auch sehr häufig verwendet ist nur ein kleines Programm. Mein aktuelles Projekt hat nur 12 Seiten. Der dritte Typ wird relativ selten verwendet, da es sich bei der mobilen Version schließlich nicht um ein Produktivitätstool handelt.

[Verwandte Empfehlungen]

1. Quellcode der WeChat-Plattform herunterladen

2. PigCms Micro-Commerce-System Betriebsversion (unabhängiges Weidian-Einkaufszentrum + dreistufiges Vertriebssystem)

3. WeChat People Network v3.4.5 Advanced Business Edition WeChat Rubik's Cube Quellcode

Das obige ist der detaillierte Inhalt vonEine Einführung in verschiedene Methoden zum Übergeben und Abrufen von Werten in der WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage