zoukankan      html  css  js  c++  java
  • 微信小程序页面跳转方法汇总

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

    Tips:

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

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

    一、JS跳转方式

    ①navigateTo

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

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

    ②navigateBack

    wx.navigateBack({
       delta: 2
    })

    参数说明: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"时生效

  • 相关阅读:
    真香!PySpark整合Apache Hudi实战
    Apache Hudi又双叕被国内顶级云服务提供商集成了!
    Apache Hudi集成Apache Zeppelin实战
    实战 | 将Apache Hudi数据集写入阿里云OSS
    实战|使用Spark Structured Streaming写入Hudi
    Apache Hudi 设计与架构最强解读
    【Flink】Flink作业调度流程分析
    【Flink】深入理解Flink-On-Yarn模式
    【Flink】Flink 底层RPC框架分析
    【MyBatis】MyBatis自动生成代码之查询爬坑记
  • 原文地址:https://www.cnblogs.com/eco-just/p/9448308.html
Copyright © 2011-2022 走看看