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

微信小程序常用的传值

1.通过 URL 传参

在页面跳转时,可以在 URL 中携带参数进行传递,然后在目标页面的 onLoad 生命周期中获取参数。

// 在页面 A 中跳转到页面 B 并传递参数
wx.navigateTo({url: '/pages/detail/index?id=123'
});// 在页面 B 的 onLoad 生命周期中获取参数
onLoad: function (options) {console.log(options.id); // 输出 123
}

2.通过 navigateTo 方法传递数据:

通过 navigateTo 方法传递数据的方式比较常见,可以通过 wx.setStorageSync 方法在当前页面设置数据,然后在目标页面的 onLoad 生命周期中使用 wx.getStorageSync 方法获取数据。以下是一个示例代码来演示这种传递数据的方式:

在页面 A 中设置数据并跳转到页面 B:

// 在页面 A 中设置数据
wx.setStorageSync('key', 'value');// 使用 navigateTo 方法跳转到页面 B
wx.navigateTo({url: '/pages/pageB/pageB'
});

在页面 B 的 onLoad 生命周期中获取数据:

Page({onLoad: function(options) {// 在页面 B 的 onLoad 生命周期中获取数据var data = wx.getStorageSync('key');console.log(data); // 输出 'value'}
});

3.通过全局变量传值

可以在 app.js 文件中定义全局变量,然后在任何页面中都可以访问和修改这些全局变量。

在 app.js 文件中定义全局变量:

// app.js
App({globalData: {userInfo: null}
});

在任意页面中访问和修改全局变量: 

// 在任意页面中访问和修改全局变量
// 设置全局变量
getApp().globalData.userInfo = { name: 'Alice', age: 30 };
// 获取全局变量
console.log(getApp().globalData.userInfo); // 输出 { name: 'Alice', age: 30 }

4.通过事件总线传值

可以使用事件总线进行页面间通信,创建一个事件总线实例,然后在需要传递数据的页面发送事件,在需要接收数据的页面监听事件。

1.创建一个事件总线实例:

// eventBus.js
const EventBus = {events: {},on: function(event, callback) {if (!this.events[event]) {this.events[event] = [];}this.events[event].push(callback);},emit: function(event, data) {if (this.events[event]) {this.events[event].forEach(callback => {callback(data);});}}
};module.exports = EventBus;

2.在发送数据的页面发送事件

// pageA.js
const eventBus = require('../../utils/eventBus');// 发送事件
eventBus.emit('dataUpdated', { name: 'Bob', age: 25 });

3.在接收数据的页面监听事件:

// pageB.js
const eventBus = require('../../utils/eventBus');Page({onLoad: function() {// 监听事件eventBus.on('dataUpdated', (data) => {console.log(data); // 输出 { name: 'Bob', age: 25 }});}
});

这些都是微信小程序中常用的页面间传值方式

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

相关文章:

  • SQL面试真题解答 数据统计分析,求“同比、环比”等(SQL窗口函数使用)
  • 【递归、搜索与回溯】floodfill算法二
  • Dataease安装,配置Jenkins自动部署
  • 关于IDEA启动报错 【JAVA_HOME does not point to a valid JM installation】
  • 设置小蓝熊的CPU亲和性、CPU优先级再设置法环的CPU亲和性
  • Oracle中的序列(Sequence)是一种数据库对象
  • 热点观察 | 《姜饼人王国》新作来袭、《Monopoly GO!》荣登5月全球畅销榜榜首
  • 智能网络构建:探索大模型在网络领域的应用
  • C++编程逻辑讲解step by step:定义一个Person类,它的每个对象表示一个人。
  • DBdoctor产品介绍
  • 一加Ace3 刷机救砖简化说明
  • 【服务器05】之【登录/注册账号成功转至游戏场景】
  • 平价蓝牙耳机推荐性价比高,性价比高的蓝牙耳机学生党推荐
  • 【华为战报】5月、6月HCIP考试战报!
  • OBD诊断
  • Elasticsearch 聚合查询
  • adb remount fails - mount: ‘system‘ not in /proc/mounts 解决办法
  • 百元蓝牙耳机推荐2024哪个好?蓝牙耳机性价比之王推荐
  • Spring项目报错解读与全部报错详解
  • 10秒教会你mysql的连接
  • 万物皆可爬——亮数据代理IP+Python爬虫批量下载百度图片助力AI训练
  • OpenCv形态学(一)
  • CSS基础汇总
  • cocos creator让所有button点击时播放音效
  • mybatisplus自带的雪花算法(IdType.ASSIGN_ID)无法自动生成弊端缺点,以及改进方法
  • 单位转换:将kb转换为 MB ,GB等形式
  • 优思学院|「按计划推动型」与「需求拉动型」的生产模式
  • 解释什么是lambda函数?它有什么好处?
  • 码农:如何快速融入团队
  • Android 通知组