这篇文章主要讲解了“小程序中的页面传参方式是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序中的页面传参方式是什么”吧！
url传参
方式和web中的方式一致。
index1 页面
计算
安全
数据库
网络和加速
企业服务
<navigator url="/pages/index2/index2?name=海贼王">页面2</navigator>或者
wx.navigateTo({
url: "/pages/index2/index2?name=海贼王"
})index2 页面
onLoad: function (options) {
console.log(options);// { name : 海贼王}
},需要注意的是，如果
index2是tabbar页面，那么无法在onLoad中获取页面参数。【相关学习推荐：小程序开发教程】
事件通道 EventChannel
如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：
被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。
index1.wxml
<view>
来自于页面2 传递的数据: {{msg}}
</view>index1.js
Page({
data: {
msg: ""
},
onLoad: function () {
// 1 跳转到页面2
wx.navigateTo({
url: "/pages/index2/index2",
// 2 在成功的回调函数中获取事件通道对象
success: ({ eventChannel }) => {
// 3 监听自定义事件
eventChannel.on("data", (e) => {
// 4 获取页面2传递过来的数据 设置到 data中
this.setData({
msg: e.name
})
})
}
});
},
})index2.js
Page({
onLoad: function () {
// 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象
const EventChannel = this.getOpenerEventChannel();
// 触发事件和传递参数到 页面1中
EventChannel.emit("data", { name: '海贼王' });
}
})本地存储
小程序中的本地存储用法类似web中，可以实现在整个应用中获取数据和存储数据
index1.js
wx.setStorageSync('data', {name:'海贼王'});// 可以直接存任意类型的数据index2.js
wx.getStorageSync('data');// 获取应用全局变量
不同的页面都是处于一个共同的应用当中的，这个应用可以理解为 app.js
app.js
在这里可以定义公共数据
App({
myData: {
name: "悟空"
}
})index1.js
页面中可以通过 getApp 来获取
let app = getApp();
console.log(app.myData);当然也可以直接修改
let app = getApp();
app.myData.name="八戒";公共变量
单独定义一个独立的js文件，把数据存储进去，即可
common.js
const data = {
name: "海贼王"
};
module.exports = data;index1.js
const data = require("../../common");
Page({
onLoad: function () {
console.log(data);
},
})感谢各位的阅读，以上就是“小程序中的页面传参方式是什么”的内容了，经过本文的学习后，相信大家对小程序中的页面传参方式是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
