微信小程序页面传值的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
}

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

你可能感兴趣的:(微信小程序,微信小程序,notepad++,小程序)