notepad++ 微信小程序页面传值的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文件中

跳转

// 源页面的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

}

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

相关链接

 您阅读本篇文章共花了：