带大家聊聊小程序中的几种页面传参方式（小程序组件传参）

带大家聊聊小程序中的几种页面传参方式（小程序组件传参）

本篇文章给大家介绍一下小程序中的几种页面传参方式，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

小程序中页面传参的方式

url传参

方式和web中的方式一致。

index1 页面

页面2-

或者

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

来自于页面2 传递的数据: {{msg}}-

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); },})-

更多编程相关知识，请访问：编程视频！！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。