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

原生微信小程序页面传值的5种方式

微信小程序页面传值的方式有以下几种：

1.URL参数传值：通过在跳转链接中附加参数，在目标页面的onLoad函数中获取参数。
2.全局变量：通过在app.js文件中定义全局变量，在源页面设置变量的值，目标页面通过getApp().globalData获取变量的值。
3.缓存存储：使用wx.setStorageSync()在源页面设置存储的值，目标页面通过wx.getStorageSync()获取值。
4.路由传参：使用wx.navigateTo()传递参数，目标页面通过options参数获取传递的值。
5.事件触发传参：通过事件绑定，在源页面触发事件传递需要的参数，目标页面通过事件对象获取传递的值。

传值方式的代码示例：

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://www.toymoban.com/news/detail-616060.html

到了这里，关于微信小程序页面传值的5种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！