微信小程序开发:学习笔记[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. React项目的打包与部署到腾讯云

    腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...

  2. 第1章 Spring Cloud 构建微服务架构(一)服务注册与发现

      一.Spring Cloud 简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总 ...

  3. Java基础教程:tutorialspoint-junit

    教程: 来自turorialspoint的JUnit教程(英文),官网:https://www.tutorialspoint.com/junit/index.htm 中文版本:http://wiki. ...

  4. Android 蓝牙 笔记

    安卓:短信复制机制 软件识别蓝牙 软件可以读取蓝牙的信息 给蓝牙弄上一个类似于短信的东西 并且存一个短信 然后发到客户端 客户端 可以分类  分成表格 形式 这样做的目的是为了 让你的设备可以写蓝牙给 ...

  5. extern “C”的使用

    2016-12-11   22:40:48 VS编译的时候,可以指定编译为C代码或者C++代码.c/c++->高级.而当你新建一个cpp文件时,VS很有可能自动会把编译方式由C变成C++编译.然 ...

  6. 分布式服务框架选型:面对Dubbo,阿里巴巴为什么选择了HSF?

    转载:http://www.sohu.com/a/141490021_268033 阿里巴巴集团内部使用的分布式服务框架 HSF(High Speed Framework,也有人戏称“好舒服”)已经被 ...

  7. Android自己定义ViewGroup打造各种风格的SlidingMenu

    看鸿洋大大的QQ5.0側滑菜单的视频课程,对于側滑的时的动画效果的实现有了新的认识,似乎打通了任督二脉.眼下能够实现随意效果的側滑菜单了.感谢鸿洋大大!! 鸿洋大大用的是HorizontalScrol ...

  8. Food hub

    Work center List Tillage 耕作 Hand harvest 手工采收 Planting 种植 Cultivating 培养 Mulching 覆盖 Dig harvest 挖地采 ...

  9. An unexpected error occured when contacting the server .

    I logged into to the arcsight command center ,however I found an unexpected error occurred when cont ...

  10. Layout规则总结

    一.尺寸要求 1.过孔到焊盘的距离多少合适? 6mil左右 2.铜皮到边框的距离多少合适? 极限8mil,通常12,最好做到20,40 3.Thermal焊盘打地孔个数? 正方形 3*3  4*4   ...