微信小程序开发:学习笔记[8]——页面跳转及传参

页面跳转

  一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面。在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈。

  后续为了表述方便,我们采用这样的方式进行描述页面栈:[ pageA, pageB, pageC ],其中pageA在最底下,pageC在最顶上,也就是用户所看到的界面,需要注意在本书编写的时候,小程序宿主环境限制了这个页面栈的最大层级为10层 ,也就是当页面栈到达10层之后就没有办法再推入新的页面了。我们下面来通过上边这个页面栈描述以下几个和导航相关的API。

  • 使用 wx.navigateTo({ url: 'pageD' }) 可以往当前页面栈多推入一个 pageD,此时页面栈变成 [ pageA, pageB, pageC, pageD ]。
  • 使用 wx.navigateBack() 可以退出当前页面栈的最顶上页面,此时页面栈变成 [ pageA, pageB, pageC ]。
  • 使用wx.redirectTo({ url: 'pageE' }) 是替换当前页变成pageE,此时页面栈变成 [ pageA, pageB, pageE ],当页面栈到达10层没法再新增的时候,往往就是使用redirectTo这个API进行页面跳转

  如果要跳转的位置是否位于TabBar中,如果是的话,要使用wx.switchTab 来跳转界面:

  

页面传参

第一步:调用Navigator进行页面跳转时携带参数

第二步:在新页面接受参数

第三步:在新页面显示参数

微信小程序开发:学习笔记[8]——页面跳转及传参的更多相关文章

  1. 第1-5章 慕课网微信小程序开发学习笔记

    第1章 前言:不同的时代,不同的Web --微信小程序商城构建全栈应用 http://note.youdao.com/noteshare?id=a0e9b058853dbccf886c1a890594 ...

  2. 第6章 AOP与全局异常处理6.5-6.11 慕课网微信小程序开发学习笔记

    https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 固有的处理异常的思维模式与流 ...

  3. 第6章 AOP与全局异常处理6.1-6.4 慕课网微信小程序开发学习笔记

    第6章 AOP与全局异常处理 https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 ...

  4. 第7章 数据库访问与ORM 慕课网微信小程序开发学习笔记

    第7章 数据库访问与ORM https://coding.imooc.com/learn/list/97.html 目录: 7-1 数据库操作三种方式之原生SQL 19:09 7-2 从一个错误了解E ...

  5. 微信小程序开发(四)页面跳转

    承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...

  6. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  8. 微信小程序视频学习笔记

    [清华大学]学做小程序 https://www.bilibili.com/video/av21987398 2.2创建项目和文件结构 小程序包含一个描述整体程序的app和多个描述各自页面的page 配 ...

  9. 微信小程序开发学习(一):开发前准备

    开发前准备 Step1:注册 微信小程序开放平台: https://mp.weixin.qq.com/cgi-bin/wx 开发者注册: https://mp.weixin.qq.com/wxopen ...

随机推荐

  1. hdu 4510(模拟)

    小Q系列故事——为什么时光不能倒流 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)T ...

  2. 解决npm 的 shasum check failed for错误

    使用npm安装一些包失败,类似如下报错情况:   C:\Program Files\nodejs>npm update npm npm ERR! Windows_NT 10.0.14393 np ...

  3. Android内存泄漏总结

    内存泄漏问题老生常谈,很常见也很难根治,今天我在这里总结一下内存泄漏的原因和解决方法: 所谓内存泄漏,就是本该被回收的对象,由于某些原因不能被回收,继续占用堆内存的这种状态,导致的结果也是显而易见的, ...

  4. 《从零开始搭建游戏服务器》项目管理工具Maven

    简介 什么是Maven?Maven是一个项目管理和综合工具,提供了开发人员构建一个完整的生命周期框架. Maven使用标准的目录结构和默认构建生命周期,在多个开发团队环境时,Maven可以设置按标准在 ...

  5. liteos事件(六)

    1. 概述 1.1 基本概念 事件是一种实现任务间通信的机制,可用于实现任务间的同步,但事件通信只能是事件类型的通信,无数据传输.一个任务可以等待多个事件的发生:可以是任意一个事件发生时唤醒任务进行事 ...

  6. jenkins配置Maven的私有仓库Nexus

    1.什么是nexus? Neux:MAVEN的私有仓库; 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库 ...

  7. VS2010 + WinDDK 搭建驱动开发环境(转)

    因工作需要,需要研究一下Windows驱动开发.我们知道,编译驱动程序主要是通过两种方案:第一种是通过WinDDK提供的build命令+source文件进行编译:另外一种是通过VC的IDE进行编译. ...

  8. Atitit.ati  str  字符串增强api

    Atitit.ati  str  字符串增强api 1. java StringUtils方法全览 分类: Java2011-11-30 17:22 8194人阅读 评论(2) 收藏 举报 javas ...

  9. 我的跟我学Ffmpeg 视频受众有哪些人

    经常有人问我如何学习音视频以及如何学习Ffmpeg,问我有没有比较好的书的书推荐.比较好的音视频以及FFmpeg方面的 书,我了解到的比较全面又能深入浅出的还真没有.很多朋友都推荐雷神的博客,雷神的博 ...

  10. mysql (8.0 或以下)数据 卸载, 安装, 创建用户, 赋权

    卸载 安装 创建用户wmxl create user 'wmxl'@'202.115.253.71' identified by '你的密码' 如果是mysql8.0,再输入以下 ALTER USER ...