多种详细讲解小程序页面传值
16lz
2021-02-26
开发小程序,总是避免不了页面和页面之间数据共享,实现方法有很多种,今天就详细讲解下小程序页面传值,需要的朋友可以参考下。
1 使用wx.navigateTo()传值
这种传值方式有两种,
url后面拼接传值:需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
- events页面间通信接口:用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
1.url后面拼接传值
wx.navigateTo({ url: 'test?id=1',})test页面接收数据Page({ onLoad: function(option){ console.log(option.query) }})
2.events页面间通信接口
wx.navigateTo({ url: 'test', events: {}, success: function (res) { res.eventChannel.emit('goTest', { data: {id:1,content:'hello word'} }) }})
test页面接收数据
Page({ onShow: function () { let that = this const eventChannel = that.getOpenerEventChannel() eventChannel.on('goTest', function (data) { console.log(data) }) },})
2 数据缓存
利用微信提供的wx.setStorage()、wx.setStorageSync()、wx.getStorage()、wx.getStorageSync()等API
当前页传数据,为确保数据已经进入缓存,最好用同步
wx.setStorageSync('data', {data:"数据"})
目标页,在需要用的地方获取
let data= wx.getStorageSync('data')
3 页面栈传值
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
let pages = getCurrentPages();console.log(pages)
查看log
需要修改数据的页面
currPage = pages[pages.length - 1]currPage.setData({ data:'hello word'})
注意:
不要尝试修改页面栈,会导致路由以及页面状态错误。
- 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。
4 app.js保存全局属性
app.js配置全局属性
globalData: { userInfo: null}
需要使用的页面
const app = getApp()let userInfo = app.globalData.userInfo
需要改变app.js的值
const app = getApp()app.globalData.userInfo= "hello word"
©著作权归作者所有:来自51CTO博客作者mb5fd86dae5fbf6的原创作品,如需转载,请注明出处,否则将追究法律责任
更多相关文章
- 命名空间与数据库基础
- PHP基础知识:命名空间的使用、自动加载器和数据库操作
- Symfony的学习
- 全息电力行业解决方案
- Druid源码分析与架构介绍
- 【Nest教程】数据验证class-validator
- 讲一讲ES6新增的两种数据结构Map和Set
- 【Nest教程】自定义拦截器处理处理响应数据
- 【Nest教程】连接MySQL数据库