小程序页面跳转

微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转。
为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式。

1.wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wx.navigateTo({
  url: 'test?id=1'
})

url即目标页面,保证是非tabbar的页面的路径。路径后可以带参数,参数和路径之间用?=连接,不同参数用&分开,如'path?key=value&key2=value2'。需要获取页面A的参数,代入页面B中进行操作。在生命周期函数中获取option.id并转成实体,进行操作和赋值。

Page({
    onLoad: function(option){
        console.log(option.id)
    }
})

2.wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

wx.redirectTo({
  url: 'test?id=1'
})

3.wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。页面的跳转存储逻辑实际是一个栈队列,先入后出的形式,即逐层进入,如果返回会进入的页面先返回,因此wx.navigateBack()中转递的参数默认值为1,即退后一个页面,可以修改数值,进行多层的返回。

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})

4.wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径只允许写在app.json中tabbar配置的页面。

wx.switchTab({
  url: '/index'
})

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

5.wx.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

wx.reLaunch({
  url: 'test?id=1'
})

微信小程序——页面跳转及传参的更多相关文章

  1. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  2. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  3. 微信小程序页面跳转 的几种方式

    最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...

  4. 微信小程序页面跳转后js定时器没有销毁的问题

    现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket.服务端不会用,所以使用了传统的http请求方式.开发微信小程序必须要知道的事 1. ...

  5. 微信小程序页面跳转方法汇总

    微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...

  6. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

  7. 微信小程序页面跳转方法和携带参数详解

    1.页面跳转方式     (1)标签跳转   open-type的属性值对应api里的用法即wx.的用法   1 <navigator url="/page/navigate/navi ...

  8. 微信小程序 --- 页面跳转

    第一种:wx.navigateTo({}); 跳转: 注意:这种跳转回触发当前页面的 onHide 方法,将当前页面隐藏,然后显示跳转页面.所以可以返回,返回的时候触发 onShow方法进行显示: ( ...

  9. 微信小程序 页面跳转传递数据

    点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap=" ...

随机推荐

  1. ios系统crash文件分析

    分析crash文件必备条件:crash文件的uuid,app的uuid,dsym文件的uuid必须一致 1> crash文件的uuid为Binary Images:0x4000 - 0x1173 ...

  2. JavaWeb 学习005-4个页面,5条sql语句(添加、查看、修改、删除)

    今天完成了的事: = 1.班级模块,list页面的添加班级信息操作,中文乱码问题 尚待解决 这俩天做得工作是: 首先搭建好main页面:是由top.left.right三个部分构成的,拼接到一起. 流 ...

  3. Microsoft_Sql_Server_2008:无法对数据库执行删除,因为它正用于复制

    解决办法: sp_removedbreplication'StationErp' DROP DATABASE StationErp

  4. Windows phone 之自定义控件(补充)

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= ...

  5. C#小数点位数处理方法

    //方法一: //保留小数位数,并能四舍五入 DecimalFormat de = new DecimalFormat("0.00"); System.out.println(de ...

  6. hdu 4268 Alice and Bob(multiset|段树)

    Alice and Bob Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. Java中的字符串拼接

    Java中的字符串拼接 1.设计源码 /** * @Title:IndexOf.java * @Package:com.you.freemarker.model * @Description: * @ ...

  8. powersploit的用法

    一.PowerSploit简介 PowerSploit是GitHub上面的一个安全项目,上面有很多powershell攻击脚本,它们主要被用来渗透中的信息侦察.权限提升.权限维持. Powershel ...

  9. 11-8 定时器this

    定时器this问题 var t=setInterval(function(){ console.log(this) },1000) 这里面的this是window Person.prototype={ ...

  10. weblogic修改安装路径教程

    我们有一个安装好的weblogic,我们想再装一个weblogic或者想把weblogic装到别的目录去,最直接的做法是从头装一个. 但是从头装一个是比较费时费力的,尤其是打补丁环节和创domain环 ...