当前位置: 首页 > news >正文

​微信小程序 页面间传递数据

在小程序中,给页面传递参数通常有以下几种方法:

  1. 通过URL传递参数
    在小程序中,可以在页面的路径后面添加参数,然后在页面的 onLoad 函数中获取这些参数。

    // 在app.json中配置页面路径
    "pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/detail/detail?id=123" // 这里的id就是传递的参数}
    ]// 在detail页面的js文件中获取参数
    Page({onLoad: function(options) {console.log(options.id); // 输出123}
    });
    
  2. 通过全局变量传递
    在小程序的 app 对象中设置全局变量,然后在需要的页面中获取。

    // 在app.js中设置全局变量
    App({onLaunch: function() {// 可以在这里设置全局变量this.globalData = {userInfo: null};},});// 在需要的页面中获取全局变量
    Page({onLoad: function() {const app = getApp();console.log(app.globalData.userInfo);}
    });
    
  3. 通过事件传递
    使用小程序的事件系统,可以在页面间传递数据。

    // 在发送事件的页面
    this.triggerEvent('customEvent', { data: '这里是传递的数据' });// 在接收事件的页面
    Page({onLoad: function() {this.on('customEvent', function(e) {console.log(e.detail.data); // 输出传递的数据});}
    });
    
  4. 通过wx.navigateTowx.redirectTo传递
    在跳转时,可以通过这些函数的第二个参数传递一个对象,对象中包含需要传递的数据。

    // 在当前页面中跳转到另一个页面,并传递参数
    wx.navigateTo({url: '/pages/detail/detail',events: {acceptData: function() {// 这里是发送数据的回调}},success: function(res) {res.eventChannel.emit('acceptData', { data: '这里是传递的数据' });}
    });// 在目标页面中接收数据
    Page({onLoad: function(options) {const eventChannel = this.getOpenerEventChannel();eventChannel.on('acceptData', function(data) {// data就是传递的数据console.log(data);});}
    });
    
  5. 使用wx.setStorageSyncwx.getStorageSync
    如果需要在页面间传递复杂的数据,可以使用小程序的本地存储。

    // 设置数据
    wx.setStorageSync('someKey', 'someValue');// 获取数据
    const value = wx.getStorageSync('someKey');
    

选择哪种方法取决于你的具体需求和场景。

http://www.lryc.cn/news/464980.html

相关文章:

  • 前端_005_Nodejs
  • SpringCache缓存介绍
  • python实战(一)——iris鸢尾花数据集分类
  • k8s-对命名空间资源配额
  • Failed to connect to github.com port 443
  • 【设计模式系列】简单工厂模式
  • 给定一个正整数n随机生成n个字节即生成2n个十六进制数将其组成字符串返回secrets.token_hex(n)
  • [Gtk] 工程
  • 基于Multisim的汽车尾灯控制电路设计与仿真
  • Leetcode 3326. Minimum Division Operations to Make Array Non Decreasing
  • redo文件误删除后通过逻辑备份进行恢复
  • 7805的输出电压如何调整?
  • git命令使用一览【自用】
  • MES系列-报表和分析
  • 如何在分布式环境中实现高可靠性分布式锁
  • Vue基础(4)
  • Redis高阶篇之Redis单线程与多线程
  • 【C++】STL——priority_queue优先级队列
  • 大数据新视界 --大数据大厂之大数据在智慧城市建设中的应用:打造智能生活的基石
  • 使用枚举来实现策略模式
  • 区块链技术原理
  • Spring Boot 接口数据加解密
  • 2018年计算机网络408真题解析
  • Javascript 脚本查找B站限时免费番剧
  • YoloV10改进策略:主干网络改进|DeBiFormer,可变形双级路由注意力|全网首发
  • C#学习笔记(一)
  • MATLAB边缘检测
  • Tortoise SVN 安装汉化教程(乌龟SVN)
  • 深入了解Spring重试组件spring-retry
  • 海南聚广众达电子商务咨询有限公司靠谱吗怎么样?