Résumer plusieurs méthodes de transmission et d'obtention de valeurs dans le développement de mini-programmes WeChat

Cet article présente principalement des informations pertinentes et résume plusieurs méthodes de transfert et d'obtention de valeurs​​dans les mini-programmes WeChat. Voici des explications détaillées de ces méthodes, et des exemples de codes ci-joints peuvent s'y référer

.

Valeur de transmission de l'applet WeChat

Les valeurs communes ​​​​dans l'applet sont les suivantes Si vous écrivez un projet complet, la probabilité de l'utiliser est de près de 100 %. .

• Valeur de l'indice d'index de la liste

• Valeur de la page passant

• valeur du formulaire de formulaire

1. Liste de la valeur de l'indice d'index

La méthode d'implémentation est : data-index="{{index}}" creuser des trous et e .currentTarget.dataset .index pour remplir la fosse

1.1 Générer de la valeur

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

Ajouter data-index="{ dans l'icône de suppression et le texte {index} }" Attributs personnalisés et événements de clic de liaison bindtap="delete"

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

implémente la méthode de suppression et obtient la valeur de l'indice d'index.

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

Que se passe-t-il si e.target est utilisé à la place de e.currentTarget ?

entraînera la sortie de la valeur d'index uniquement en cliquant sur , et l'élément de clic ou

A quoi sert target ? Il est utilisé pour distinguer les sous-éléments des éléments externes lorsqu'ils doivent être traités séparément. Par exemple, lors du changement d'avatar de l'utilisateur, cliquez sur l'avatar lui-même pour prévisualiser la grande image, puis cliquez sur toute la ligne où se trouve l'avatar pour changer d'avatar.

Pour une explication détaillée de la différence entre les deux, veuillez consulter le document : https://mp.weixin.qq.com/debug/wxadoc/dev/framework/ view/wxml /event.html

1.2 Retirer la valeur

Essayer de trouver l'adresse de suppression de l'élément correspondant à partir des données d'index

// 找到当前地址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. Transmettez la valeur sur la page

Transmettez l'identifiant d'adresse de la page de liste d'adresses de livraison à la page d'édition pour lire l'adresse d'origine à modifier.

La page d'adresse/liste implémente le code suivant

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

La page d'adresse/ajouter implémente la méthode onLoad(options) pour obtenir l'objectId de le chemin de l'url

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

Ensuite, il est temps d'accéder au réseau et d'afficher la page.

3. Valeur du formulaire de formulaire

3.1 Méthode 1, via

Les balises > sont utilisées avec la mise en page

comme suit :

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

valeur js :

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

Source du document : https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html

3.2 Méthode 2,

Réussi< ; input bindconfirm="realnameConfirm"> Implémentation

// 实现相应多个**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;
}

Il ressort de la comparaison entre la première méthode et la deuxième que, bien que l'objectif d'obtenir la valeur puisse également être réalisé, mais leurs scénarios d'utilisation sont différents. Le premier convient à la soumission d'un grand nombre d'éléments de formulaire, tels que les utilisateurs remplissant des informations personnelles et remplissant l'adresse de livraison, tandis que le second ne convient qu'à un ou deux éléments de formulaire. comme la saisie d'un numéro de coursier et la liaison d'un numéro de téléphone portable.

Si vous avez besoin d'une réponse immédiate similaire à ajax, vous devez choisir cette dernière, car la saisie peut utiliser la zone de recherche de produits tels que iPhone7, Mate8 et d'autres mots candidats devraient apparaître.

Source du document : https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html

Résumé :

Liste Valeur d'indice d'index, transfert de valeur de page, transfert de valeur de formulaire, le premier type est utilisé tout le temps, le deuxième type est également très couramment utilisé, mais les petites pages de programme ont généralement moins de pages, mon projet actuel n'a que 12 pages, le troisième Ce type est relativement rarement utilisé, car le téléphone mobile n'est finalement pas un outil de productivité et est utilisé sur les pages d'inscription, les pages de commentaires, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!