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

devtools/2024/10/22 7:06:14/

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

  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.ppmy.cn/devtools/127762.html

相关文章

Flutter升级到3.24.0后web项目空白显示

前言 我将Flutter版本从3.19.3升级到3.24.0后我启动了以前可以运行的Flutter Web程序,结果页面空白并在控制台出现如下错误 Warning: In index.html:38: Local variable for "serviceWorkerVersion" is deprecated. Use "{{flutter_service_worker…

Sigrity-Power SI如何使用Model Extraction模式提取电源网络的S参数和阻抗操作指导(一)

Sigrity-Power SI如何使用Model Extraction模式提取电源网络的S参数和阻抗操作指导(一) Sigrity PowerSI是频域电磁场仿真工具,以下图为例介绍如果用它观测电源的网络的S参数以及阻抗的频域曲线. 观测IC端电源网络的自阻抗 1. 用powerSi.exe打开该SPD文件 2. 选…

Docker可视化管理工具DockerUI的使用

DockerUI是一个易用且轻量化的 Docker 管理工具,透过 Web 界面的操作,更方便对于 Docker 指令不熟悉的用户更容易操作 Docker 。 DockerUI拥有易操作化化界面,不须记忆Docker指令,仅需下载镜像即可立刻加入完成部署。基于 Docker…

ab命令深入解析:ApacheBench性能测试工具

软考鸭微信小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 引言 在Web开发和运维领域,性能测试是评估服务器和应用性能的重要手段。ApacheBench(简称ab)是Apache HTTP服务器自带的…

python项目实战——下载美女图片

python项目实战——下载美女图片 文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数 获取目录页的链接 完善代码注意事项 完整代码 import requests import re import…

计算机文化基础练习题

一、单选题:(50道) 1. ”计算机中,用来表示存储容量大小的最基本单位是( )。 A. 位 B. 字节 C。 千字节 D。 ”兆字节 2。 操作系统对磁盘进行读/写操作的单位是( ).…

什么是CNN?

什么是CNN? 你可以把CNN想象成一台非常聪明的图像处理机器。它特别擅长处理图片,因为它能自动找出图片里的重要信息,比如边缘、形状和颜色等等。这就好像你看一张图片时,先看出物体的轮廓,再慢慢认出具体是什么东西一样…

Flux.switchOnNext 使用说明书

switchOnNext public static <T> Flux<T> switchOnNext(Publisher<? extends Publisher<? extends T>> mergedPublishers)Creates a Flux that mirrors the most recently emitted Publisher, forwarding its data until a new Publisher comes …