微信小程序页面跳转目前有以下方法(不全面的欢迎补充):

1. 利用小程序提供的 API 跳转:

// 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo
wx.navigateTo({
url: 'page/home/home?user_id=111'
})
// 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
wx.navigateTo({
url: 'page/home/home?user_id=111'  // 页面 A
})
wx.navigateTo({
url: 'page/detail/detail?product_id=222'  // 页面 B
})
// 跳转到页面 A
wx.navigateBack({
delta: 2
})
// 关闭当前页面,跳转到应用内的某个页面。
wx.redirectTo({
url: 'page/home/home?user_id=111'
})
// 跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})
// 关闭所有页面,打开到应用内的某个页面。
wx.reLanch({
url: 'page/home/home?user_id=111'
})

 2. wxml 页面组件跳转(可以通过设置open-type属性指明页面跳转方式):

  

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面,返回上一级页面或多级页面</navigator>
 

  

微信小程序页面跳转方法总结的更多相关文章

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

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

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

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

  3. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

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

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

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

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

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

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

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

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

  8. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

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

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

随机推荐

  1. PyCharm 如何新建Django工程项目

    声明:本文使用的IDE是PyCharm 2018.1.2版. 一.File-New Project 二.选择工程类型 强烈建议选项"Pure Python",因为如果选择" ...

  2. mssql 怎么配置指定的表 不允许删除数据?

    http://www.maomao365.com/?p=5089 <span style="color:red;font-weight:bold;">前言: 前几天收到 ...

  3. The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "SDSSDFCC...

    The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server ...

  4. Win10 - MySQL-zip安装方法

    Win10 - MySQL-zip安装方法 安装步骤 1.下载,到MySQL官网:https://dev.mysql.com/downloads/mysql/ 2.解压安装包 解压下载的安装包,放到你 ...

  5. 【Git学习一】Git 初始化

    在开始Git之旅之前,我们需要设置一下Git的配置变量. 1.告诉Git当前用户的姓名和邮件地址,配置用户名和邮件地址将在版本库提交时用到. 例子: ------------------------- ...

  6. LeetCode算法题-Find All Numbers Disappeared in an Array(Java实现)

    这是悦乐书的第232次更新,第245篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第99题(顺位题号是448).给定一个整数数组,其中1≤a[i]≤n(n =数组的大小) ...

  7. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...

  8. 不同主机的docker容器互相通信

    Docker启动时,会在宿主主机上创建一个名为docker0的虚拟网络接口,默认选择172.17.0.1/16,一个16位的子网掩码给容器提供了 65534个IP地址. docker0只是一个在绑定到 ...

  9. vue源码分析—模板解析

    福建省啦剑飞傻了剑飞撒到了看风景啊撒:

  10. centos 7.2 64位安装redis

    1.下载redis 可以在新建  /usr/local/redis 文件夹 $ wget http://download.redis.io/releases/redis-4.0.9.tar.gz $ ...