Fassen Sie verschiedene Methoden zum Übergeben und Erhalten von Werten bei der Entwicklung von WeChat-Miniprogrammen zusammen

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>

Data-index="{ im Löschsymbol und Text {index} hinzufügen }" Benutzerdefinierte Attribute und Bindungsklickereignisse bindtap="delete"

<image src="../../../images/icon_delete.png" /><text>删除</text>

implementieren die Löschmethode und erhalten den Index-Indexwert.

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

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

bewirkt, dass der Indexwert nur durch Klicken auf 617b7145c6dc209115e84bec282f9d38 ausgegeben wird, und das Klickelement 674124f83f7163c4669e42cbd8918a82 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.

Eine detaillierte Erklärung des Unterschieds zwischen den beiden finden Sie im Dokument: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/ view/wxml /event.html

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: '确认',
  content: '要删除这个地址吗？',
  success: function(res) {
    if (res.confirm) {
      // 真正删除对象
      address.destroy().then(function (success) {
        // 删除成功提示
        wx.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
        // 重新加载数据
        that.loadData();
      }, function (error) {

      });
    }
  }
})

2. Übergeben Sie den Wert auf der Seite

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

Die Adressen-/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
  });
},

Die Adressen-/Hinzufügenseite implementiert die onLoad(options)-Methode, um die Objekt-ID abzurufen der URL-Pfad

onLoad: function (options) {
  var objectId = options.objectId
}

Dann ist es Zeit, auf das Netzwerk zuzugreifen und die Seite zu rendern.

3. Formularwert

3.1 Methode 1, über 8b0563f2b998c6d0b1307ef69602a791 >-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>

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;
}

Dokumentquelle: https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html

3.2 Methode 2,

Bestanden< ; 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;
}

Aus dem Vergleich zwischen Methode eins und Methode zwei geht hervor, dass das Ziel zwar den Wert erhalten kann können ebenfalls erreicht werden, aber ihre Verwendungsszenarien sind unterschiedlich. Ersteres eignet sich für die Übermittlung einer großen Anzahl von Formularelementen, z. B. für das Ausfüllen persönlicher Daten durch Benutzer und das Ausfüllen der Lieferadresse, während letzteres nur für ein oder zwei Formularelemente geeignet ist. B. die Eingabe einer Kuriernummer und die Bindung einer Mobiltelefonnummer.

Wenn Sie eine sofortige Antwort ähnlich wie bei Ajax benötigen, sollten Sie Letzteres wählen, da die Eingabe mit 97657f03b0e24b396cac09fd405cebe1 den Wert sofort abrufen kann, z. B. bei der Eingabe von Schlüsselwörtern für Mobiltelefone Es sollten Szenarien wie „iPhone7“, „Mate8“ und andere Kandidatenwörter angezeigt werden.

Dokumentquelle: https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html

Zusammenfassung:

Liste Index-Indexwert, Seitenwertübertragung, Formularformwertübertragung, der erste Typ wird ständig verwendet, der zweite Typ wird auch sehr häufig verwendet, aber die kleinen Programmseiten haben im Allgemeinen weniger Seiten, mein aktuelles Projekt hat nur 12 Seiten 3. Dieser Typ wird relativ selten verwendet, da die mobile Version schließlich kein Produktivitätstool ist und auf Registrierungsseiten, Kommentarseiten usw. verwendet wird.

Das obige ist der detaillierte Inhalt vonFassen Sie verschiedene Methoden zum Übergeben und Erhalten von Werten bei der Entwicklung von WeChat-Miniprogrammen zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!