微信小程序前端页面跳转有多种方式,汇总如下:

Tips:

小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里;

只有当这个所谓的“页面栈”满了之后页面才会退出栈(遵循队列先进先出规则)

一、JS跳转方式

①navigateTo

wx.navigateTo({
url: '/pages/good/index/index?id=1',
  success:function(){},
  fail:function(){},
  complete:function(){}
})

路径限制规则:应用内非 tabBar 的页面的路径

②navigateBack

wx.navigateBack({
delta:
})

参数说明:delta参数是指回跳到页面栈的倒数第n个页面,如果页面栈页面数量少于该参数,那么返回首页

③redirectTo

wx.redirectTo({
url: '/pages/good/index/index?id=1',
  success:function(){},
  fail:function(){},
  complete:function(){}
})

路径限制规则:应用内非 tabBar 的页面的路径

④switchTab

wx.switchTab({
url: '/pages/index/index',
  success:function(){},
  fail:function(){},
  complete:function(){}
})

路径限制规则:应用内 tabBar 的页面(需在 app.json 的tabBar字段定义的页面)的路径,并关闭其他非tabBar页面

⑤reLaunch

wx.reLaunch({
url: '/pages/good/index/index?id=1',
  success:function(){},
  fail:function(){},
  complete:function(){}
})

路径限制规则:应用内任意页面的路径

二、WXML方式跳转

wxml页面实现页面跳转有一个标签<navigator url="xxx" open-type="xxx">点击跳转</navigator>

这里是根据open-type的值来定义跳转的方式的:

navigate

默认值,对应wx.navigateTo跳转方式或 wx.navigateToMiniProgram跳转方式

navigateBack

对应wx.navigateBack跳转方式

redirect

对应wx.redirectTo跳转方式

switchTab

对应wx.switchTab跳转方式

reLaunch

对应wx.reLaunch跳转方式

exit

退出小程序,当target="miniProgram"时生效

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

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

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

  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. oppo R9 WLAN使用代理图解

    以上拼图便是oppo R9 WLAN使用代理图解,代理设为 '手动' ,主机名便是我的电脑的ip地址,端口号是9973: + 9973端口号 (微信web开发者工具不可更改): + 8888 端口号 ...

  2. HandyJSON第三方库的日常使用与错误记录

    一.错误提示 1.更新Xcode10.2,Swift5.0出现错误提示 Undefined symbols for architecture x86_64: "_swift_getField ...

  3. CSS 属性的推荐书写顺序

  4. RMI远程方法调用

    RMI远程方法调用:适用于 客户端 调用 服务器 内的方法:(Kotlin 语言编写) 如果业务为二个服务器之间的通信,还是得用消息队列的形式,因为RMI 不适合 双向 调用 下面介绍RMI 的使用方 ...

  5. Python学习札记(十五) 高级特性1 切片

    参考: 高级特性 切片 Note 1.掌握了Python的基础语法之后,就可以写出很多很有用的程序了,比如打印1-90的奇数: #!/usr/bin/env python3 L = [] n = 1 ...

  6. 04_MySQL常见函数_单行函数

    #单行函数细分1.字符函数2.数学函数3.日期函数4.其他函数5.流程控制函数 #单行函数 - 字符函数#一.字符函数#1. length 获取参数的字节长度SELECT LENGTH('john') ...

  7. java 集合操作小结

    Map<String,String> m1=new HashMap<String,String>(); m1.put("zara", "name1 ...

  8. ”由于没有远程桌面授权服务器可以提供许可证,远程会话被中断“的解决方案

    由于windows server 2012 R2 Datacenter 安装了 远程桌面角色,但是这个角色是120天免费的,需要购买授权的. 解决方案: 删除这个角色,就可以正常进行远程桌面连接了.但 ...

  9. UIAutomation学习入门

    一.界面的自动化操作 .Ui自动化测试 .软件外挂 二.Win32基础知识 a.Win32中一切元素皆窗口,窗口之间有父子关系.整个桌面是一个“根窗口”. b.进程: 根据进程id拿到进程对象Proc ...

  10. photoshop cc下载与安装

    地址:https://jingyan.baidu.com/article/c275f6bacdd927e33d756729.html