微信小程序页面跳转三种方式

简介: 微信小程序页面跳转三种方式

为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。

页面跳转的话就涉及到了多个页面层级


第一种:wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。


OBJECT参数说明:


参数 类型 必填 说明

url String 是 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’

   goto: function (e) {
      let a =e.currentTarget.dataset.id
        wx.navigateTo({
               url: '../index/index?id'+id
        })
  }

另一个页面在 onLoad 接参数

 onLoad(options) {
    // console.log(options.id);
    let id =options.id
  },

第二种:wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

OBJECT参数说明:

参数 类型 必填 说明

url String 是 需要跳转的应用内页面的路径

   goto: function (e) {
      let a =e.currentTarget.dataset.id
        wx.navigateTo({
               url: '../index/index?id'+id
        })
  }

第三种:wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

OBJECT参数说明:


参数 类型 默认值 说明

delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页。

 onLoad: function(options) {
        var pages = getCurrentPages()
        var num = pages.length
        navigateBack:function(){
            wx.navigateBack({
                 delta: num
            })
        }
 }
相关文章
|
6月前
|
小程序 JavaScript
微信小程序 页面跳转 传递参数
微信小程序 页面跳转 传递参数
33 0
|
5月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
6月前
|
小程序
微信小程序从零开始开发步骤(六)4种页面跳转的方法
微信小程序从零开始开发步骤(六)4种页面跳转的方法
159 0
|
9月前
|
小程序
微信小程序-页面跳转Tabbar
首先我们需要搭建一个 Tabbar,在搭建之前我们将需要跳转的页面创建一下待会需要使用到。
59 0
|
5月前
|
小程序
微信小程序页面跳转三种方式
微信小程序页面跳转三种方式
|
5月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
|
5月前
|
存储 小程序 JavaScript
微信小程序(十二)小程序页面跳转及传参
Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。 小程序这部分到是提供了不少的方法,大概整理了一下。
144 0
|
7月前
|
人工智能 JSON 自然语言处理
微信小程序页面跳转如何传递对象参数
微信小程序页面跳转如何传递对象参数
191 0
|
8月前
|
小程序 API 定位技术
微信小程序开发系列 (四) :微信小程序的页面跳转路由设计
微信小程序开发系列 (四) :微信小程序的页面跳转路由设计
57 1
|
8月前
|
小程序
微信小程序页面跳转三种方式
微信小程序页面跳转三种方式

热门文章

最新文章

相关实验场景

更多