Comment implémenter le saut de page et le transfert de valeur dans le mini-programme WeChat

Cet article présente principalement la méthode de saut de page et de transfert de valeur dans le mini-programme WeChat. Il résume et analyse les techniques de fonctionnement courantes du saut de page et du transfert de valeur dans le mini-programme WeChat sous forme d'exemples auxquels les amis dans le besoin peuvent se référer. ce qui suit

L'exemple de cet article décrit la méthode de l'applet WeChat pour réaliser un saut de page, transférer une valeur et obtenir une valeur. Je le partage avec vous pour votre référence. Les détails sont les suivants :

Sous Android, les sauts de page et les valeurs sont transmis via des bundles. Étudions maintenant les sauts de liste et les valeurs de page des mini-programmes.

my.wxml

<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="info_list">
  <block wx:for="{{userListInfo}}" >
   <view class="weui_cell" data-index="{{item.index}}" id="{{item.index}}"
    bindtap="userinfo_item">
    <view class="weui_cell_hd">
     <image src="{{item.icon}}"></image>
    </view>
    <view class="weui_cell_bd">
     <view class="weui_cell_bd_p"> {{item.text}} </view>
    </view>
    <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
    <view class="with_arrow"></view>
   </view>
  </block>
 </view>
</view>

my.js

var app = getApp()
Page({
 data: {
  userInfo: {},
  userListInfo: [{
   icon: '../../images/iconfont-dingdan.png',
   text: '我的订单',
   isunread: true,
   unreadNum: 2,
   index:1
  }, {
   icon: '../../images/iconfont-kefu.png',
   text: '联系客服',
   index: 5
  }, {
   icon: '../../images/iconfont-help.png',
   text: '常见问题',
   index: 6
  }]
 },
 onLoad: function () {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function (userInfo) {
   //更新数据
   that.setData({
    userInfo: userInfo
   })
  })
 },
 userinfo_item: function (e) {
  var index = e.target.dataset.index;
  console.log("----index----" + index)
  console.log('-----id-----'
   + e.currentTarget.id)
  var app = getApp();
  //设置全局的请求访问传递的参数
  app.requestId = e.currentTarget.id;
  app.requestIndex = index;
 }
})

L'applet WeChat définit l'identifiant de la méthode id pour transmettre la valeur

Au niveau de l'élément à sauter, définissez un identifiant et attribuez la valeur de clé correspondante à l'identifiant actuel
Par exemple, id="{{item.index}}"
puis nous l'obtenons dans l'événement de réponse de bindtap en js et passons. it Allez à l'interface suivante ;
Obtenez la valeur transmise par l'identifiant
Obtenez la valeur de l'identifiant définie via e.currentTarget.id; et transmettez la valeur en définissant l'objet global,
Obtenez l'objet globalvar app=getApp(); // Définir les paramètres transmis par l'accès aux requêtes globales app.requestDetailid=id;
En mode débogage  : Nous pouvons également afficher la valeur id de chaque élément que nous avons défini dans wxml

Par en utilisant l'identifiant de méthode de data - xxxx pour transmettre la valeur

En utilisant l'identifiant de méthode de data - xxxx pour transmettre la valeur, xxxx peut personnaliser le nom que l'index de données dans my.wxml.
Comment récupérer la valeur transmise par data-xxxx ?
Dans l'événement de réponse de bindtap en js :
Trouvez les données couche par couche grâce à l'analyse des données, var id=e.target.dataset.index(nommé en fonction de votre identifiant de données)
Par exemple, les deux impressions en js sont via ID obtenue de deux manières différentes.

Comment obtenir des valeurs sur les pages de l'applet WeChat

Définissez la valeur à transmettre selon la méthode ci-dessus. Après les sauts de page, nous devons obtenir le. valeur sur la page suivante Les données ( ces données ont été définies comme variable globale avant d'être transmises) équivaut à ajouter une nouvelle clé à la variable globale, et la valeur
est reçue dans le js après le saut. Les données detail.js
prennent également la valeur via la méthode globale (c'est-à-dire que cela revient à prendre la valeur d'une variable dans app.js)

var id=getApp().requestId;
var index=getApp().requestIndex;
console.log(id);
console.log(index);

Transmettre les paramètres via le lien :

wx.navigateTo({
 url: '/pages/account/feedback/feedback?test=feedback_test&name=jia',
 success: function(res) {},
 fail: function(res) {},
 complete: function(res) {},
})

Réussi lorsque vous cliquez pour accéder à la page ? méthode pour passer des paramètres. Faites la réception suivante dans le JS de la page après le saut :

onLoad: function (e) {
  var movieid = getApp().requestId;
  var movieIndex = getApp().requestIndex;
  console.log("-----feedback--movieid--" + movieid +" " + movieIndex);
  console.log("-----feedback--test--" + e.test);
  console.log("-----feedback--name--" + e.name);
 },

Je pense que la meilleure façon est de transmettre les paramètres via des liens. La première méthode est un peu comme le saut de page dans Android. Certains paramètres transmis sont écrits dans l'application et le second est transmis via la méthode bundle. Résumé du novice front-end, j'espère que les étudiants ayant une riche expérience en front-end pourront fournir plus d'idées.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter une version web de la calculatrice en JS

Comment utiliser JS pour implémenter la trajectoire parabolique d'une petite boule

Comment implémenter la traversée d'arbre binaire à l'aide de JavaScript

Comment implémenter un cookie cross-domain dans axios

En JavaScript Comment obtenir un effet élastique en

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!