微信小程序开发学习之页面导航(声明式导航和编程式导航)

这篇具有很好参考价值的文章主要介绍了微信小程序开发学习之页面导航(声明式导航和编程式导航)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.0 页面导航

页面导航指的是页面之间的相互跳转。

小程序中实现页面导航的两种方式:

  1. 声明式导航
    ● 在页面上声明一个 navigator 导航组件
    ● 通过点击 navigator 组件来实现页面的跳转
  2. 编程式导航
    ● 调用小程序的导航API,实现页面的跳转

1.1. 声明式导航

1.1.1. 导航到tabBar页面

tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,url为页面的跳转地址,open-type 必须为 switchTab。

<navigator url="/pages/home/home" open-type="switchTab">
前往首页
</navigator>

1.1.2. 导航到非tabBar页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。
同样在使用 navigator 组件跳转到非tabBar页面时,需要指定其 url 和 open-type 属性,url为页面的跳转地址,open-type 必须为 navigate。

<navigator url="/pages/info/info" open-type="navigate">
  导航到info页面
</navigator>

tips:跳转到非tabBar页面时,open-type="navigate" 可以省略。

1.1.3. 后退导航

如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性。
open-type 的值必须为 navigateBack ,表示要进行后退导航,delta的值必须为数字,表示后退的层级。

<navigtor open-type="navigateBack" delta='1'>返回上一页</navigtor>

tips:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。

1.2. 编程式导航

1.2.1. 导航到tabBar页面

导航到tabBar页面,使用wx.switchTab(Object object)方法,Object 参数对象的属性如下:

属性 类型 是否必选 说明
url string 需要跳转的 tabBar 页面的路径,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

其中url为必填项,指明你要跳转的页面
例如:点击一个按钮跳转到首页
xx.wxml部分

<button bindtap="btnGoHome">跳转到首页按钮</button>

xx.js部分

btnGoHome(){
    wx.switchTab({
      url: '/pages/home/home',
    })
},

1.2.2. 导航到非tabBar页面

导航到非tabBar页面,使用wx.navigateTo(Object object)方法即可,其Object对象的参数与上面的switchTab一样。
我们只需要在函数中指明url地址即可。
页面部分 xx.wxml

<button bindtap="btnGoInfo">跳转到info页按钮</button>

js部分 xx.js

btnGoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
},

1.2.3. 后退导航

**后退导航使用 wx.navigateBack(Object object),**其中Object 对象的参数属性如下:

属性 类型 默认值 是否必选 说明
delta number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

xx.wxml

<button bindtap="btnGoBack">返回到上一页按钮</button>

xx.js

btnGoBack(){
  // 默认情况下 delta属性值 为 1,不指定也可以
  wx.navigateBack()
},

1.3. 导航传参

导航传参其实就是在url上面拼接参数, 参数与路径之间使用 ? 分隔 ,参数键与参数值用 = 相连 ,不同参数用 & 分隔。

1.3.1. 声明式导航传参

使用navigator组件传递参数,直接在其url上面拼接参数即可,例如

<navigator url="/pages/info/info?name='zhangsan'&age=20">
声明式导航传参
</navigator>

页面参数 :name=‘zhangsan’&age=20
微信小程序开发学习之页面导航(声明式导航和编程式导航),微信小程序,微信小程序,学习,notepad++

1.3.2. 编程式导航传参

编程式导航传参也是一个道理,我就拿一个wx.switchTab()来举例,其余也都是一样的

<button bindtap="btnPassParams">编程式导航传参按钮</button>
btnPassParams() {
    wx.navigateTo({
        url: '/pages/info/info?name=lisi&age=21',
    })
},

页面参数:name=lisi&age=21
微信小程序开发学习之页面导航(声明式导航和编程式导航),微信小程序,微信小程序,学习,notepad++

1.4. 获取导航传递的参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到。
这里的话我直接写接收端的onload方法,然后输出一下options.

onLoad(options) {
    console.log(options)
},

微信小程序开发学习之页面导航(声明式导航和编程式导航),微信小程序,微信小程序,学习,notepad++文章来源地址https://www.toymoban.com/news/detail-557317.html


到了这里,关于微信小程序开发学习之页面导航(声明式导航和编程式导航)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot基础之声明式事务和切面事务和编程式事务

    事务管理对于企业应用来说是至关重要的,当出现异常情况时,它也可以保证数据的一致性。 springBoot中两种事务的实现方式, 编程式事务配置和声明式事务配置还有切面事务 还有以后的分布式事务 详情参考 这篇 原子性(Atomicity): 事务是一个原子操作,由一系列动作组成

    2024年02月02日
    浏览(44)
  • 微信小程序开发笔记二—底部导航栏tabar

    首先展示一下实现效果 底部导航栏有三个按键,图标自定义,中间为home键,两侧为个人空间,选中时的图标以及未选中时的图标均为自定义。 在小程序工程文件中新建一个文件夹image,里面用来存放按键选中以及未选中时的图标,如下图所示: 相关图标可以到阿里巴巴矢量

    2024年02月11日
    浏览(39)
  • 微信小程序开发之页面传参

    这 传参主要是三种: 1.简单值传参如:id=1,string = asdfg之类,其中字符不包含特殊字符如?、=之类 2.含特殊字符传参如一个地址http://r.photo.store.qq.com/psb?/V10VqIG41I6D36/r5rQV.oz3tu1uuNvJjkDIzwhKi6nUfZaaLEH9UnNUCk!/r/dBkBAAAAAAAA 3.对象类型传参如一个数组,image【】。 第一种的话比较简单比如

    2024年02月09日
    浏览(38)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(47)
  • 微信小程序开发教学系列(3)- 页面设计与布局

    在微信小程序开发中,页面的设计和布局是非常重要的。一个好的页面设计可以提升用户体验,并使小程序更加吸引人。本章节将介绍如何设计和布局微信小程序的页面。 3.1 页面结构和样式的创建和设置 在创建微信小程序页面时,需要先定义页面的结构和样式。可以通过以

    2024年02月11日
    浏览(43)
  • 微信小程序开发教学系列(9)- 小程序页面优化

    在开发小程序时,页面性能优化是非常重要的一项任务。优化页面性能可以提升用户体验,使小程序更加流畅和高效。本章将介绍一些常见的页面优化方法和技巧,帮助您提升小程序的性能。 页面性能优化的目标是减少页面加载时间和提升页面渲染速度,从而提供更好的用户

    2024年02月11日
    浏览(45)
  • 微信小程序开发实战9_2 小程序页面转发

    小程序页面转发是小程序分享的一个重要方式,在设计小程序应用时就需要考虑那些页面需要实现转发功能,以及页面的转发参数。本节介绍如何进行小程序页面的分享,并介绍如何获取小程序卡片的分享票据。 9.2.1小程序页面转发 微信小程序提供了页面的转发的功能,用户

    2024年02月16日
    浏览(43)
  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(43)
  • 微信小程序开发系列(三)·微信小程序页面的创建、小程序如何更改调试基础库

    零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-CSDN博客 零基础手把手教你创建微信小程序(二)·创建第一个微信小程序以及了解小程序代码的构成-CSDN博客 目录 1.  小程序页面的创建 1.1  方法一 1.2  方法二 2.  小程序如

    2024年04月26日
    浏览(55)
  • 微信小程序开发系列(十一)·小程序页面的跳转设置以及参数传递

    目录 1.  跳转到商品列表 1.1  url: 当前小程序内的跳转链接 1.2  navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 1.3  redirect: 关闭当前页面,跳转到应用内的某个页面。但不能跳转到 tabbar 页面 1.4  navigate和redirect的区别 1.5  switchTab:跳转到 t

    2024年04月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包