美文网首页小程序
小程序几种跳转方式记录

小程序几种跳转方式记录

作者: shmaur | 来源:发表于2019-04-28 00:21 被阅读34次

API跳转

一、wx.navigateTo

wx.navigateTo({
  url: '/pages/accountToBeCredited/index'
})

保留这个页面,只能跳转到应用内的页面,不能跳转到tab的页面。可以使用wx.navigateBack返回到当前页面
举个例子:在看书的时候,每翻一页就等于navigateTo的动作,如果看完当前页,觉得前面好像有什么漏了看,还以在翻回来,这就是navigateTo

getCurrentPages()wx.navigateBack

wx.navigatTo({
        url:"/shippingAddList/index"   //  页面一
})
wx.navigatTo({
        url:"/shippingAddress/index?isEdit=46"   // 页面二
})
let pages = getCurrentPages();//当前页面栈
if (pages.length > 1) {
    var beforePage = pages[pages.length - 2];//获取上一个页面实例对象
    beforePage.initGetStateInfo();//触发父页面中的方法
    wx.navigateBack({
    delta: 1  // 返回上一个页面,也就是页面一,如果为 2,那就后退 2 页
    })
}

可以通过 getCurrentPages() 获取当前页面栈,可以查看到页面一和页面二的所有方法和属性,也可以通过这个调用父级的方法或者属性
wx.navigateBack 你想返回前几页? delta: 1 返回就写几
举个列子:还是看书的例子,当看书看到第三页的时候,突然想起前面有个环节是不是和当前页有关联?我就需要去找前面的环节,并在当前页进行连接。如果想回看两页,那么就可以使用 wx.navigateBack 返回。

二、wx.redirectTo

wx.redirectTo({
  url: 'pages/accountToBeCredited/index'
})

关闭当前页,跳转到应用内的某一个页面,不能跳转到 tab 页面。
举个例子:看书,我继续往后看,我就需要翻页,我把看完的那一页撕掉,就可以看下一页的内容了。

三、 wx.switchTab

wx.switchTab({
  url: 'page/index/index'
})

这个就和上面不一样了,就可以跳转到 tab 页面了,前提是在 app.json 注册过的,跳转的时候还会关闭其他所有不是 tab 的页面。
举个例子:有三本书,我在看其中一本,突然我不想看这本书了,然后我把书关起来,去看另外一本书。

四、wx. reLaunch

wx.reLaunch({
  url: 'pages/accountToBeCredited/index'
})

关闭所有的页面,打开应用内的某一个页面。
举个例子:有三本,我当前这本书不想看了,我全部关了,然后看另外一本中随便那一页。

页面跳转

一、navigator 默认就是 open-typenavigate

<navigator class="input-item" url="../security/index">
     <text class="input-item-label">安全设置</text>
     <i class="icon icon-arrow-right"></i>
</navigator>

这种就是默认的,和 API 跳转 navigateTo 对应。

二、navigator 设置 open-typeredirect

<navigator class="input-item" url="../security/index" open-type="redirect">
     <text class="input-item-label">安全设置</text>
     <i class="icon icon-arrow-right"></i>
</navigator>

关闭当前页面,和 API 跳转 wx.redirectTo 对应

三、navigator 设置 open-typeswitchTab

<navigator class="input-item" url="../security/index" open-type="switchTab">
     <text class="input-item-label">安全设置</text>
     <i class="icon icon-arrow-right"></i>
</navigator>

跳转到 tab 页面,和 API 跳转 wx.switchTab 对应

四、navigator 设置 open-typeredirect

<navigator class="input-item" url="../security/index" open-type="redirect">
     <text class="input-item-label">安全设置</text>
     <i class="icon icon-arrow-right"></i>
</navigator>

关闭所有的页面,打开应用内的某一个页面。和 API 跳转 wx.reLanch 对应
五、navigator 设置 open-typenavigateBack

<navigator class="input-item" url="../security/index" open-type="navigateBack">
     <text class="input-item-label">安全设置</text>
     <i class="icon icon-arrow-right"></i>
</navigator>

返回上一页,和 API 跳转 wx.navigateBack 对应

相关文章

  • 小程序几种跳转方式记录

    API跳转 一、wx.navigateTo 保留这个页面,只能跳转到应用内的页面,不能跳转到tab的页面。可以使用...

  • 小程序(二)——跳转

    小程序跳转的几种方式: wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.n...

  • 小程序页面跳转几种方式

    小程序页面跳转 小程序页面跳转的四种方法 参数类型必填说明urlString是需要跳转的应用内非tabBar的页面...

  • 小程序跳转页面几种方式?

    跳转页面传递数组参数必须序列化 接收页面也要序列化参数 参数值过长接收时候内容不全得问题

  • 微信小程序跳转几种方式

    1)给按钮绑定bindtap事件 index.wxml: index.js 2).直接写上navigator 标签...

  • 小程序-零散知识点

    1.微信小程序去除左上角返回键,几种页面的跳转方式 对应于wx.navigateTo、wx.redirectTo、...

  • js实现页面跳转的方式

    通过js或者html或者PHP等动态程序都可以方便的实现跳转,这里搜集了几种页面跳转的方式js方式的页面跳转 1....

  • 小程序跳转小程序

    小程序如何跳转到其他小程序 微信小程序跳转到其他小程序有两种方式。 一种是用组件navigator跳转: 一种是用...

  • 小程序学习笔记-4:页面之间跳转

    上一篇:小程序学习笔记-3:页面结构和布局 本篇内容* 页面与页面之间的跳转 小程序页面跳转有以下几种方法: ...

  • 微信小程序跳转的几种方式

    设置返回按钮:有页面a 页面b 页面c c页面是保存页返回到b 但是上一页会保存为c 而不是a...

网友评论

    本文标题:小程序几种跳转方式记录

    本文链接:https://www.haomeiwen.com/subject/ekalnqtx.html