So implementieren Sie Seitensprung und Wertübertragung im WeChat-Miniprogramm

Dieser Artikel stellt hauptsächlich die Methode des Seitensprungs und der Wertübertragung im WeChat-Miniprogramm vor. Er fasst und analysiert die gängigen Operationstechniken des Seitensprungs und der Wertübertragung im WeChat-Miniprogramm in Form von Beispielen Folgendes

Das Beispiel in diesem Artikel beschreibt die Methode des WeChat-Applets, um Seitensprünge zu realisieren, Werte zu übertragen und Werte zu erhalten. Ich teile es Ihnen als Referenz mit:

In Android werden Seitensprünge und Seitenwerte über Bundles weitergegeben.

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

Das WeChat-Applet legt die ID-Methoden-ID fest, um den Wert

zu übergeben Legen Sie am zu überspringenden Element eine ID fest und weisen Sie der aktuellen ID den entsprechenden Schlüsselwert zu, z. B.
id="{{item.index}}". Wir erhalten ihn aus dem Antwortereignis von bindtap in js und übergeben ihn an den nächste Schnittstelle.
Den von der ID übergebenen Wert abrufen
Den eingestellten ID-Wert über
abrufen und den Wert durch Festlegen des globalen Objekts übergeben, e.currentTarget.id;Das globale Objekt abrufen
// Legen Sie die globale Anforderung fest. Greifen Sie auf die übergebenen Parameter zu. var app=getApp();app.requestDetailid=id;
Im Debug-Modus : Wir können auch den ID-Wert jedes Elements anzeigen, das wir in wxml

mithilfe von The festlegen Methodenbezeichner von Daten – xxxx wird zum Übergeben des Werts verwendet

Durch die Verwendung des Methodenbezeichners von Daten – xxxx zum Übergeben des Werts kann xxxx den Namen als Datenindex in my.wxml anpassen.

Wie erhalte ich den von data-xxxx übergebenen Wert?
Im Antwortereignis von bindtap in js:
Suchen Sie die Daten Schicht für Schicht durch Datenanalyse,
(benannt nach Ihrer Daten-ID)var id=e.target.dataset.indexZum Beispiel sind die beiden Ausdrucke in js durch Der Ausweis wird auf zwei verschiedene Arten erhalten.

So erhalten Sie Werte über WeChat-Applet-Seiten hinweg

Legen Sie den zu übergebenden Wert gemäß der oben genannten Methode fest. Nach den Seitensprüngen müssen wir die Werte abrufen Wert auf der nächsten Seite Die Daten (

diese Daten wurden als globale Variable festgelegt, bevor sie übergeben werden) entsprechen dem Hinzufügen eines neuen Schlüssels zur globalen Variablen, und der Wert wird in empfangen js-Seite nach dem Sprung. Die Daten detail.js
nehmen den Wert auch über die globale Methode entgegen (das heißt, es ist dasselbe wie das Nehmen des Werts einer bestimmten Variablen in app.js)

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

Parameter über den Link übergeben:

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

Übergeben, wenn Sie klicken, um zur Seite zu springen? Methode zur Übergabe von Parametern. Führen Sie nach dem Sprung den folgenden Empfang im JS der Seite aus:

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

Ich denke, dass der bessere Weg darin besteht, Parameter über Links zu übergeben. Die erste Methode ähnelt in etwa dem Seitensprung in Android, bei dem einige übergeben werden Die Parameter werden in die Anwendung geschrieben und die zweite besteht darin, sie über die Bundle-Methode zu übergeben. Zusammenfassung des Front-End-Neulings: Ich hoffe, dass Studenten mit umfangreicher Erfahrung im Front-End weitere Ideen liefern können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Webversion des Rechners in JS

Wie Sie JS verwenden, um die parabolische Flugbahn zu implementieren einer kleinen Kugel

So implementieren Sie Binärbaum-Traversal mit JavaScript

So implementieren Sie Cookie-domänenübergreifend in Axios

In JavaScript So erzielen Sie einen elastischen Effekt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Seitensprung und Wertübertragung im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!