How to implement page jump and value transfer in WeChat mini program

This article mainly introduces the methods of WeChat applet to realize page jump and value transfer and obtain value. It summarizes and analyzes the common operation skills of WeChat applet page jump and value transfer in the form of examples. Friends in need can refer to the following

The example in this article describes the method of WeChat applet to realize page jump, transfer value and obtain value. I share it with you for your reference. The details are as follows:

In Android, page jumps and values ​​​​are passed through bundles. Now let’s study the list jumps and page values ​​​​of mini programs.

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

WeChat applet sets the id method identifier to pass the value

In At the item to be jumped, set an id and assign the corresponding key value to the current id.
For example, id="{{item.index}}"
After that, we will use js Get it from the response event of bindtap and pass it to the next interface;
Get the value passed by the id
Get the set id value through e.currentTarget.id; Get the set id value and pass it through the setting Pass the value in the form of a global object,
Get the global object var app=getApp(); //Set the parameters passed by the global request access app.requestDetailid=id;
In debugging mode: We can also view the id value of each item we set in wxml

By using the data-xxxx method identifier to pass The value

is passed by using the method identifier of data - xxxx. xxxx can customize the name than the data-index in my.wxml.
How to get the value passed by data-xxxx?
In the response event of bindtap in js:
Find the data layer by layer through data analysis, var id=e.target.dataset.index(according to the name of your data-id )
For example, the two prints in js are IDs obtained in two different ways.

How WeChat applet gets values ​​across pages

Set the value to be passed according to the above method. After the page jumps, we need to get the value on the next page. The data (This data has been set as a global variable before being passed ) is equivalent to adding a new key to the global variable, and the value
is received in the js page after the jump. Data detail.js
The value is also obtained through the global method (that is, it is the same as the value of a variable in app.js)

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

Pass parameters through the link:

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

Passed when you click to jump to the page? method to pass parameters. Do the following reception in the JS of the page after the jump:

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

I feel that the better way is to pass parameters through links. The first method is somewhat like page jump in Android, passing some The parameters are written to the Application, and the second is to pass them through the bundle method. Summary of the front-end novice, I hope that students with rich experience in front-end can provide more ideas.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the web version of the calculator in JS

How to implement the parabolic trajectory of the ball using JS

How to implement binary tree traversal using JavaScript

How to implement cookie cross-domain in axios

In JavaScript How to achieve elastic effect

The above is the detailed content of How to implement page jump and value transfer in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!