小程序页面传值的多种方式

开发小程序,总是避免不了页面和页面之间数据共享,实现方法有很多种,以下就讲解一下小程序页面传值,需要的朋友可以参考下。

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)
    })
  },
})

3,数据缓存

利用微信提供的wx.setStorage()wx.setStorageSync()wx.getStorage() 、**wx.getStorageSync()**等API

当前页传数据,为确保数据已经进入缓存,最好用同步

复制代码
wx.setStorageSync('data', {data:"数据"})

目标页,在需要用的地方获取

复制代码
let data= wx.getStorageSync('data')

4,页面栈传值

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

复制代码
let pages = getCurrentPages();
console.log(pages)

查看log

需要修改数据的页面

复制代码
currPage = pages[pages.length - 1]
currPage.setData({
  data:'hello word'
})

注意:

  • 不要尝试修改页面栈,会导致路由以及页面状态错误。
  • 不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

5,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"
相关推荐
四月_h4 分钟前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate27 分钟前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................2 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_2 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记2 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人3 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704383 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
游戏开发爱好者83 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
迪丽热爱3 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹3 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化