iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序实现页面跳转与数据传递方案
  • 753
分享到

小程序实现页面跳转与数据传递方案

2024-04-02 19:04:59 753人浏览 独家记忆
摘要

目录页面跳转和数据传递wx的api跳转navigator组件(了解)总结页面跳转和数据传递 界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转 这里我们先以w

页面跳转和数据传递

界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转

这里我们先以wx的API作为讲解:

wx的API跳转

上面API中, 我们最常用的就是wx.navigateTowx.navigateBack

wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面;

但是不能跳到 tabbar 页面;

参数属性

属性类型默认值必填说明
pathstring需要跳转的应用内非tabBar的页面的路径(代码包路径), 路径后可以带参数. 参数与路径直接使用 ? 分隔, 参数键与参数值用 = 连接, 不同参数用 & 分隔; 如: path?key=value&key2=value2
eventsObject{}页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
successfunction接口调用成功的回调函数,
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

演示代码

通过查询字符串可以传递参数

wx.navigateTo({
  // 跳转的同时传递一些参数
  url: "/pages/about/about?name=chenyq&age=18&height=1.88",
})

在页面的onLoad生命周期可以获取到参数

onLoad(options) {
  console.log(options.name);
  console.log(options.age);
  console.log(options.height);
}

wx.navigateBack(Object object)

关闭当前页面,返回上一页面或多级页面。

<button bindtap="btnTap">返回</button>
btnTap() {
  // 返回上一级页面
  wx.navigateBack()
  // 返回多级页面
  wx.navigateBack({
    delta: 2
  })
}

如何在界面跳转过程中我们需要相互传递一些数据,应该如何完成呢?

刚刚我们演示过, 从首页跳转到详情页:可以使用URL中的query字段

那在详情页点击返回按钮时, 想要将数据传递回首页该如何传递呢

有两种方式可以做到

方式一

btnTap() {
  // 1.返回上一级
  wx.navigateBack()

  // 2.给上一级传递数据
  // 2.1获取到上一级页面的实例
  const pages = getCurrentPages()
  const page = pages[pages.length - 2]
  // 2.2在上一个页面提前定义好变量用于保存数据
  page.setData({
    message: "呵呵呵"
  })
}

上面早期数据的传递方式只能通过上述的方式来进行,在小程序基础库 2.7.3 开始支持events参数,也可以用于数据的传递

在首页中通过event定义一个接收数据的回调函数

wx.navigateTo({
  // 跳转的同时传递一些参数
  url: "/pages/about/about?name=chenyq&age=18&height=1.88",
  events: {
    // 获取返回页面时传递过来的数据
    backEvent(data) {
      console.log(data);
    }
  }
})

再详情页中回调首页events中定义的回调函数

btnTap() {
  // 返回上一级
  wx.navigateBack()

  // 1.拿到eventChannel
  const eventChannel = this.getOpenerEventChannel()

  // 2.通过eventChannel拿到回调函数, 并传回数据
  eventChannel.emit("backEvent", {name: "aaa", age: 110})
},

navigator组件(了解)

navigator组件主要就是用于界面的跳转的,甚至也可以跳转到其他小程序中:

属性类型默认值必填说明
targetstringself在哪个目标上发生跳转,默认当前小程序
urlstring 当前小程序内的跳转链接
open-typestringnavigate跳转方式
deltanumber1当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数
app-idstring target="miniProgram"open-type="navigate"时有效,要打开的小程序 appId
pathstring target="miniProgram"open-type="navigate"时有效,打开的页面路径,如果为空则打开首页
extra-dataobject target="miniProgram"open-type="navigate/navigateBack"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。
versionstringreleasetarget="miniProgram"open-type="navigate"时有效,要打开的小程序版本
short-linkstring target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。
hover-classstringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果
<navigator url="/pages/index/index?name=chenyq&age=18">跳转</navigator>

总结

到此这篇关于小程序实现页面跳转与数据传递的文章就介绍到这了,更多相关小程序页面跳转与数据传递内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 小程序实现页面跳转与数据传递方案

本文链接: https://www.lsjlt.com/news/167069.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序实现页面跳转与数据传递方案
    目录页面跳转和数据传递wx的API跳转navigator组件(了解)总结页面跳转和数据传递 界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转 这里我们先以w...
    99+
    2024-04-02
  • 微信小程序中如何实现页面跳转和数据传递
    这篇文章主要介绍了微信小程序中如何实现页面跳转和数据传递,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转和数据传递1.先导...
    99+
    2024-04-02
  • 微信小程序中如何实现页面跳转及数据传递功能
    这篇文章主要介绍了微信小程序中如何实现页面跳转及数据传递功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转及数据传递详解...
    99+
    2024-04-02
  • 微信小程序中如何实现页面跳转和参数传递
    这篇文章主要为大家展示了“微信小程序中如何实现页面跳转和参数传递”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何实现页面跳转和参数传递”这篇文章吧...
    99+
    2024-04-02
  • 微信小程序zm 实现页面跳转传值
    这篇文章给大家分享的是有关微信小程序zm 实现页面跳转传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序实现页面跳转传值的方法比如从index。wxml跳转到aaa.w...
    99+
    2024-04-02
  • 实现PHP页面跳转时如何传递POST数据
    实现PHP页面跳转时如何传递POST数据 在开发PHP应用程序时,有时候我们需要在页面跳转时传递POST数据,这可能涉及到一些敏感信息或者需要在跳转后进行处理的数据。在这种情况下,我们...
    99+
    2024-04-02
  • 微信小程序如何实现页面跳转与返回并回传数据的方法
    小编给大家分享一下微信小程序如何实现页面跳转与返回并回传数据的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!微信小程序 详解页面跳转与返回并回传数据A页面:.wxml文件<vie...
    99+
    2024-04-02
  • 微信小程序页面跳转方式+跳转小程序
    一. 跳转页面方法 1.跳转到 tabBar 页面 wx.switchTab({ url: '/index'}) 2.跳转到其他页面(非tabBar页) //redirectTo方法(会关闭当前页面...
    99+
    2023-09-28
    小程序 微信小程序
  • 微信小程序怎么实现页面跳转传值
    小编给大家分享一下微信小程序怎么实现页面跳转传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序 页面跳转传值实现代码微...
    99+
    2024-04-02
  • 小程序如何实现页面跳转
    本篇内容主要讲解“小程序如何实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何实现页面跳转”吧!  1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ u...
    99+
    2023-06-26
  • 微信小程序中页面跳转传递值的方法有哪些
    这篇文章主要介绍了微信小程序中页面跳转传递值的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转传递值微信小程序导...
    99+
    2024-04-02
  • vue跳转页面和参数传递怎么实现
    本篇内容介绍了“vue跳转页面和参数传递怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!要实现一个功能:从页面A跳转到页面B,并且页面...
    99+
    2023-06-30
  • 从H5页面跳转到小程序的实现方案有哪些
    本篇内容主要讲解“从H5页面跳转到小程序的实现方案有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“从H5页面跳转到小程序的实现方案有哪些”吧!实现方案实现H5跳转小程序的方案目前有多种,可以...
    99+
    2023-06-28
  • 小程序的页面跳转方式
    102. 小程序的页面跳转方式 小程序是一种快速发展的应用形式,为用户提供了便捷的功能和交互体验。其中,页面跳转是小程序中常用的功能之一,本文将介绍小程序的页面跳转方式,并提供代码示例,帮助读者更好地理解和实现页面跳转。 一、小程序页面跳转...
    99+
    2023-08-20
    小程序
  • PHP页面跳转传递POST数据的技巧
    标题:PHP页面跳转传递POST数据的技巧 随着Web开发的不断发展,我们经常需要在页面之间传递数据,其中一种常见的方式是通过POST方法传递数据。在PHP中,如何实现页面跳转时传递P...
    99+
    2024-04-02
  • 微信小程序中怎么实现页面间跳转传参
    微信小程序中怎么实现页面间跳转传参,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。缓存虽然URL传参比较简单易用,但也有局限性,...
    99+
    2024-04-02
  • 微信小程序实现跳转详情页面
    本文实例为大家分享了微信小程序实现跳转详情页面的具体代码,供大家参考,具体内容如下 我们要实现如下的效果,进入详情页,获取产品的具体数据。本文请求的数据是本地的,实际开发是要通过aj...
    99+
    2024-04-02
  • 小程序页面间有哪些传递数据的方法
    小程序页面间传递数据的方法有: 使用全局变量实现数据传递,app.js和app.wxss中的代码都是全局生效的,实现传递数据的代码。//往globalData设置值getApp().globalData.data = &...
    99+
    2024-04-02
  • 微信小程序页面间如何传递数据
    微信小程序页面间实现传递数据的几种方法使用url通过option获取值//定义url,并赋值wx.navigateTo({url: 'testid=1'})//使用option获取值url的值Page({data:{id:'',},onLo...
    99+
    2024-04-02
  • Angular中如何实现$state.go页面跳转并传递参数
    这篇文章给大家分享的是有关Angular中如何实现$state.go页面跳转并传递参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。路由页面(注意这里要在路由上添加一个参数用于传...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作