小程序页面传值的5种方式

微信   2025-01-15 09:30   85   0  

1. URL参数传值:

wx.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=John'
});

目标页面:

onLoad: function(options) {
  console.log(options.id);   // 输出:123
  console.log(options.name); // 输出:John
}


2. 全局变量:

在app.js中定义全局变量:

App({
  globalData: {
    id: null,
    name: ''
  }
});

源页面:

getApp().globalData.id = 123;
getApp().globalData.name = 'John';
wx.navigateTo({
  url: '/pages/targetPage/targetPage'
});

目标页面:

onLoad: function() {
  console.log(getApp().globalData.id);   // 输出:123
  console.log(getApp().globalData.name); // 输出:John
}


3.缓存存储:

wx.setStorageSync('id', 123);
wx.setStorageSync('name', 'John');
wx.navigateTo({
  url: '/pages/targetPage/targetPage'
});

目标页面:

onLoad: function() {
  console.log(wx.getStorageSync('id'));   // 输出:123
  console.log(wx.getStorageSync('name')); // 输出:John
}

4.路由传参:

wx.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=John'
});

目标页面:

onLoad: function(options) {
  console.log(options.id);   // 输出:123
  console.log(options.name); // 输出:John
}


5.事件触发传参:

// 源页面的wxml文件中
<button bindtap="navigateToPage" data-id="123" data-name="John">跳转</button>

// 源页面的js文件中
navigateToPage: function(event) {
  wx.navigateTo({
    url: '/pages/targetPage/targetPage'
  });
  var id = event.currentTarget.dataset.id;
  var name = event.currentTarget.dataset.name;
  getApp().globalData.id = id;   // 存入全局变量
  getApp().globalData.name = name; // 存入全局变量
}


目标页面:

onLoad: function() {
  console.log(getApp().globalData.id);   // 输出:123
  console.log(getApp().globalData.name); // 输出:John
}

以上是几种常见的小程序页面传值的方式的代码示例。根据实际需求选择合适的方式进行页面间的传值操作。

来源:https://blog.csdn.net/qq_61950936/article/details/131654465

博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。