微信小程序之组件的四种传值方式
1.使用本地存储传递数据
我们可以利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。
传递组件
// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorageSync('data', {id:1})
接收组件
// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.getStorageSync('data')
2. 使用路由传递数据
传递组件
// 跳转的同时携带数据拼接在URL后面,跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
wx.navigateTo({url: `跳转路由?data=${data}`,
})
接收组件
onLoad(option){const {data} = option;console.log(data)
}
这时因为传递的是对象类型的数据,到另一个页面获取时会发现是"[object,object]",解决方法是利用JSON.stringify()和JSON.parse()
传递数据的组件
const data = JSON.stringify(this.data);
wx.redirectTo({url: `跳转url?=${data}`
})
接收数据的组件
onLoad(options){const data = JSON.parse(JSON.stringify(options.data));
}
若是数据中有特殊字符在内,微信中提供的api encodeURIComponent() 和 decodeURIComponent() 会进行截取的操作
传递数据的组件
const data = encodeURIComponent(this.data);
wx.redirectTo({url: `跳转url?data=${data}`
})
接收数据的组件
onLoad(options){const data = decodeURIComponent(options.data);
}
3.通过使用wx.navigateBack()返回之前的页面
我们也可以从页面路由栈中直接获取目标Page对象,将数据设置到目标页面的data中。
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({data: this.data
})
4.使用全局变量传递数据:
我们同时也可以利用 app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过 getApp().globalData 获取。
app.js
App({globalData:{data: { id : 1 }}
})
使用的组件
const data = getApp().globalData.data
其他详见:基础 | 微信开放文档
微信小程序之组件的四种传值方式相关推荐
- 微信小程序之页面之间四种通讯方式
类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据 一. 页面跳转传参:直接在url后拼接 wx.navigateTo({//可以使用反引号,用${}的形式, ...
- 解决微信小程序图片延迟加载(四种方法)
实现延迟加载的方法 1:通过监听滚动条滑动事件,判断元素距离页面顶部的距离是否小于等于页面的可视高度 Page({data: {realScrollTop: 0,//页面滚动距离driveHeight ...
- 微信小程序(第二十四章)- 数据交互前置
微信小程序(第二十四章)- 数据交互前置 讲解微信小程序前置的原因 参考文档 理解微信小程序 小程序简介 作用 提问 针对提问--uni-app介绍 小程序和普通网页开发的区别 小程序代码构成 文件个 ...
- 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败)
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
- 微信小程序搜索组件wxSearch
微信小程序搜索组件wxSearch wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹 ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
- 微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
最新文章
- JQUERY知识总结
- MVC在基控制器中实现处理Session的逻辑
- UA MATH566 统计理论5 假设检验简介
- mysql平均值函数保留两位小数点_用sql的avg(score)求完平均值后,保存两位小数的方法(用于查询或视图)...
- python之ORM操作
- 小程序页面启动过程分析
- 关于ie7下display:inline-block;不支持的解决方案。
- PySpark任务在YARN集群上运行python 算法
- 基于matlab的信号与系统实验,基于MATLAB的《信号与系统》实验系统
- 车辆控制-稳态误差分析-前馈
- 楼梯计算机公式,楼梯的计算公式 楼梯的尺寸
- 2017小象学院Python数据分析与挖掘
- 使用canvas绘制一个三角形
- c语言 dfs,DFS(深度优先搜索)
- IP地址库介绍 (转)
- Java中常见的单词
- 某招聘网站“数据分析”相关岗位招聘信息爬取并分析
- 2345好压下载|2345好压软件下载
- Salesforce资质认证 - Platform Developer I / II认证及维护考试
- 在OpenStack中调优基于LVM的Cinder卷的IO性能