Une introduction à plusieurs méthodes de transmission et de récupération de valeurs dans le développement 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 une valeur

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

Ajouter un attribut personnalisé data-index="{{index}}" dans l'icône et le texte de suppression et lier l'événement de clic bindtap="delete"

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

pour implémenter la méthode delete et obtenir 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 89c662c6f8b87e82add978948dc499d2, et l'élément de clic dc0870658837139040642baa5555a380 ou 28f128881ce1cdc57a572953e91f7d0f

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.

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. Transfert de valeur de 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 pour modification.

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), à partir de l'url Obtenez l'objectId

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

dans le chemin, puis accédez au réseau et affichez la page.

3. Valeur du formulaire de formulaire

3.1 Méthode 1, via 8b0563f2b998c6d0b1307ef69602a791 > 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;
}

3.2 Méthode 2,

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

La comparaison entre la première et la deuxième méthodes montre que bien qu'elles puissent également atteindre l'objectif d'obtenir des valeurs, leurs scénarios d'utilisation sont différents. Le premier convient à la soumission d'un grand nombre d'éléments de formulaire, par exemple lorsque l'utilisateur complète des informations personnelles et indique l'adresse de livraison, tandis que le second convient à seulement un ou deux éléments de formulaire, tels que Express saisie du numéro de commande et liaison du 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 l'entrée peut utiliser 97657f03b0e24b396cac09fd405cebe1 pour obtenir la valeur instantanément, comme la recherche de produit

Entrez les mots-clés du téléphone mobile dans la case et des scènes telles que iPhone7, Mate8 et d'autres mots candidats devraient apparaître.

Résumé :

Valeur d'indice d'index de liste, 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é, il n'est qu'un petit programme Il y a généralement moins de pages. Mon projet actuel ne compte que 12 pages. Le troisième type est relativement moins utilisé car la version mobile n'est finalement pas un outil de productivité. Elle est utilisée sur les pages d'inscription, les pages de commentaires, etc.

[Recommandations associées]

1

Téléchargement du code source de la plateforme de compte public WeChat

2

Système de micro-commerce PigCms. version d'exploitation (centre commercial Weidian indépendant + système de distribution à trois niveaux)

3

WeChat People Network v3.4.5 Advanced Business Edition Code source de WeChat Rubik's Cube

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!