第一种: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. 微信小程序页面跳转方法和携带参数详解

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

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

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

随机推荐

  1. [Java面试五]Spring总结以及在面试中的一些问题.

    1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控制权,交由Spri ...

  2. Linux下的一个图形管理工具webmin

    这个工具其实我在两年前的小白时期还是经常用的,因为那时候对Linux比较陌生在为数server的时候帮了我很多工作,现在周末外面下雨,闲来无事莫名其妙的想起他来. 工具优点:最大特点是他是脚本安装 不 ...

  3. linux之稀疏文件

    1. Sparse 文件是并不占用磁盘存储空间. 2. rm 某文件后, 文件占用的磁盘空间并不是立即释放, 而是其句柄没有被任意一个进程引用时才回收. 3. ls 的结果是 apparent siz ...

  4. Minifilter微过滤框架:框架介绍以及驱动层和应用层的通讯

    minifilter是sfilter后微软推出的过滤驱动框架.相比于sfilter,他更容易使用,需要程序员做的编码更简洁. 系统为minifilter专门制作了一个过滤管理器,这个管理器本身其实是一 ...

  5. gcc,g++,extern “C” :一些编译错误的缘由

    正好是我们代码中遇到的问题,之前不求甚解,只用g++编译没有错误就不管了,现在要跨平台到windows下就遇到了问题.全文转载自:http://user.qzone.qq.com/75172588/b ...

  6. mysql事物

    一. 什么是事务 事务就是一段sql 语句的批处理,但是这个批处理是一个atom(原子) ,不可分割,要么都执行,要么回滚(rollback)都不执行. 二.为什么出现这种技术 为什么要使用事务这个技 ...

  7. shell脚本实例(2)

    1.传给脚本一个参数:目录,输出该目录中文件最大的,文件名和文件大小 #!/bin/bash if [ $# -ne 1 -o ! -d $1 ];then echo "Args is er ...

  8. Qt历史版本下载

    今天找到一个Qt官方下载任意版本的链接,在这里分享给大家~ http://download.qt.io/archive/qt/ 里面有Qt的历史版本 原文链接http://www.donnyblog. ...

  9. jquery操作ajax返回的页面元素

    这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...

  10. Docker常见故障

    — Docker虚拟化故障 — Docker虚拟化主要有三类故障: 应用故障:应用执行状态与预期不一致. 容器故障:无法正确创建.停止.更新容器等. 集群故障:集群创建失败.更新失败.无法连接等. — ...