第一种:wx.navigateTo({}); 跳转

注意:这种跳转回触发当前页面的 onHide 方法,将当前页面隐藏,然后显示跳转页面。所以可以返回,返回的时候触发 onShow方法进行显示:

(项目的底部导航使用的就是 wx.navigateTo 方法,将页面进行隐藏)

<view bindtap="clicktap">
    文章列表
</view>

page.js

//获取应用实例
const app = getApp()
Page({
  data: {
  },
  clicktap:function(){
      wx.navigateTo({
          url:'../details/details'
      })
  }
})

参数传递:

clicktap:function(){
    wx.navigateTo({
        url:'../details/details?id=1'
    })
}

多个参数使用 "&"  :

wx.navigateTo({
    url:'../details/details?id=2&title=你好'
})

跳转页面接受参数:使用 onLoad 方法里面的 option :

onLoad:function(options){
    console.log(options);
    console.log(options.id);
}

效果:

这个id 还可以渲染到页面上。

使用标签进行跳转

<navigateTo url="../details/details?id=2">
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

同样使用跳转页的 onLoad 方法里面 options 来接受。

在标签里使用 redirectTo:

<navigateTo url="../details/details?id=2" redirect>
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

第二种:wx.redirectTo 跳转:

注意:这种跳转,不会触发当前页面的 onHide 方法,也就是把当前页面直接给卸载掉了,然后替换为新页面。所以不存在返回这种情况。

第三种:wx.swithTab跳转

在微信的页面跳转过程中,如果需要跳转到tab的页面,使用 wx.navigateTo 或者 wx.redirectTo 都是无法完成跳转的,此时就必须使用 wx.switchTab方法来进行跳转。

文档说明:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxrelaunchobject

代码:

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

微信小程序 --- 页面跳转的更多相关文章

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

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

  2. 微信小程序——页面跳转及传参

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

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

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

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

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

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

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

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

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

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

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

  8. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  9. 微信小程序页面跳转区别总结

    redirectTo.navigateTo与switchTap区别 用了这么多天的页面跳转 该总结下了 redirectTo:关闭当前页,跳转到指定页:navigateTo:保留当前页,跳转到指定页: ...

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

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

随机推荐

  1. Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)

    Windows Locale Codes - Sortable list NOTE: Code page is an outdated method for character encoding, y ...

  2. WPF实现炫酷Loading控件

    Win8系统的Loading效果还是很不错的,网上也有人用CSS3等技术实现,研究了一下,并打算用WPF自定义一个Loading控件实现类似的效果,并可以让用户对Loading的颗粒(Particle ...

  3. Android源码编译

    参考百度文章: http://jingyan.baidu.com/article/a501d80ce61ad0ec630f5e0b.html

  4. border用处多

    1. 使用border属性实现梯形    给定一个div,通过设定div四个边框不同的颜色且设置比较粗的边框线条,可以看到div除了中间的content部分,四个边框均成梯形状,既然已经有了梯形的雏形 ...

  5. 【英语】Bingo口语笔记(55) - work系列

  6. SQLite数据库和JPA简单介绍

    SQLite数据库和JPA简单介绍 一.SQLite简单使用 SQLite是遵循ACID的关系数据库管理系统,它的处理速度很快,它的设计目标是嵌入式的,只需要几百K的内存就可以了. 1.下载SQLit ...

  7. vs2013编译qt程序后中文出现乱码

    我的vs是2013版的,qt是5.4.2,在使用vc将程序编译好后并运行时在界面上输出的中文出现了乱码,在网上找了很长时间终于找到了解决方法: QString str = QStringLiteral ...

  8. 复习知识点:XML解析数据,JOSN解析数据,GET请求数据,POST请求数据

    GDataXMLDocument-XML解析 #pragma mark - ======== Dom XML解析 - (IBAction)domParserActionXML_Document:(id ...

  9. LINUX下的远端主机登入 校园网络注册 网络数据包转发和捕获

    第一部分:LINUX 下的远端主机登入和校园网注册 校园网内目的主机远程管理登入程序 本程序为校园网内远程登入,管理功能,该程序分服务器端和客户端两部分:服务器端为remote_server_udp. ...

  10. 06jQuery-05-事件

    不同的浏览器绑定事件的代码都不太一样,所以我们使用jQuery来写代码的话,可以屏蔽不同浏览器之间的差异. 在jQuery中,可以使用 on 来绑定一个事件,指定事件的名称和对应的处理函数: // 获 ...