这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方。

1、页面切换传参,参数读取 

  1.1  wx.navigateTo(object)

  功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到当前页面。

wx.navigateTo({     //当前页面对应的JS文件内 控制模板
url: 'test?id=1' //需要切换到的页面路劲,此处为相对路劲,id为传递的参数
}) //test.js //test页面对应的JS文件,名字必须相同
Page({
onLoad: function(option){ //通过路由传递过来的参数,只能在onLoad方法内收到,option就是路由参数的一个组合对象
console.log(option.id)
}
})

  1.2   wx.navigateBack(object)

  功能:关闭当前页面,与 wx.navigateTo({ })功能相对。返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

  1.3  wx.redirectTo(object)    

  功能:关闭当前页面,跳转到应用内的某个页面【这里的跳转最好写绝对路劲,当然如果只是从当前页面往一个具体页面跳转(次数不多),相对路劲也可以。但如果是 wx.request(object) 请求返回状态进行页面跳转,那就最好写绝对路劲】,但是不允许跳转到 tabbar 页面。

  

  1.4  wx.switchTab(object)

  功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,与wx.redirectTo(object)方法功能互补。

  1.5  wx.reLaunch(object)

  功能:关闭所有页面,打开到应用内的某个页面【这种情况最好用绝对定位,因为是关闭所有页面,已经不需要知道当前所处页面了,直接重定向到某个具体页面。这种一般都是重定向到登录或者初始页面】

wx.reLaunch({      //token失效,界面重定向到登录页,绝对路劲
url: "/pages/login/login",
});

2、相对路径和绝对路径

  2.1、绝对路径

  以 “/” 开头代表根目录,表示从根目录下来的直接路劲,不以当前页面所处位置改变而改变。适用于重定向到具体页面,因此比较适用于 wx.redirectTo(object) 和 wx.reLaunch(object)

    /pages/login/login

  2.2、相对路径

   “../” 开头,从当前页面一级一级往上级目录倒退,然后再从共同目录一级级向下找到具体页面。这种一般 wx.navigateTo(object) 用的多,因为它要保存当前页面,便于返回

    ../../module/customer/main/main

  或者:

  以 “./” 开头,直接在当前目录

  ./registered 或者 registered 
  app.json文件内配置的路径都是以pages目录为根目录的相对路劲。

  因此在进行页面跳转的时候,都需要写成相对路劲的格式,不然就会报错:路劲页面不存在。如果不想这么一级级往上倒退,尤其是 wx.redirectTo(object) 和 wx.reLaunch(object),那就直接写成绝对路劲格式。在 "pages" 前面加上 "/",如上面 wx.reLaunch(object) 示例。

微信小程序开发--路由切换,页面重定向的更多相关文章

  1. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  2. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  3. 转载【小程序】: 微信小程序开发---应用与页面的生命周期

    App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Functi ...

  4. 微信小程序开发 -- 获取当前页面路径

    Page.prototype就是this: 你在任何一个Page里面都可以使用route字段和setData()函数: 示例代码: /** * 生命周期函数--监听页面加载 */ onLoad: fu ...

  5. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

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

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

  7. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

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

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  9. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

随机推荐

  1. [CocoaPods]Podfile文件

    Podfile是一个描述一个或多个Xcode项目的目标依赖项的规范.该文件应该只是命名Podfile.指南中的所有示例都基于CocoaPods 1.0及更高版本. Podfile可以非常简单,这会将A ...

  2. Python3入门机器学习经典算法与应用

    <Python3入门机器学习经典算法与应用> 章节第1章 欢迎来到 Python3 玩转机器学习1-1 什么是机器学习1-2 课程涵盖的内容和理念1-3 课程所使用的主要技术栈第2章 机器 ...

  3. Nginx的安装与部署

    1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...

  4. 数据库之SqlDataAdapter

    SqlDataAdapter 类 表示用于填充 DataSet 和更新 SQL Server 数据库的一组数据命令和一个数据库连接.无法继承此类. 命名空间:System.Data.SqlClient ...

  5. 天了噜,Java 8 要停止维护了!

    前些天的中兴事件,已经让国人意识到自己核心技术的不足,这次的 JDK 8 对企业停止免费更新更是雪上加霜.. 以下是 Oracle 官网提示的 JDK8 终止更新公告. 原文内容:Oracle wil ...

  6. vue elementui 引入第三方icon iconfront

    elementui框架自带icon在开发大型前端应用时显得捉襟见肘.淘宝开源的iconfront的图标库上有很多优秀的icon图标.elementui支持整合iconfront到应用中,步骤如下: 首 ...

  7. 【转】浮点数与IEEE 754

    http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1.   什么是浮点数 在计算机系统的发展过程中,曾经 ...

  8. Python内置类型(5)--迭代器类型

    指能够被内置函数next调用并不断返回下一个值,直到最后抛出StopIteration错误表示无法继续返回下一个值的对象称为迭代器(Iterator) 其实以上的说法只是侠义上的迭代器的定义,在pyt ...

  9. 又拍云 Node.js 实现文件上传、删除

    Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = ...

  10. 干货 | 请收下这份2018学习清单:150个最好的机器学习,NLP和Python教程

    机器学习的发展可以追溯到1959年,有着丰富的历史.这个领域也正在以前所未有的速度进化.在之前的一篇文章中,我们讨论过为什么通用人工智能领域即将要爆发.有兴趣入坑ML的小伙伴不要拖延了,时不我待! 在 ...