微信小程序——按钮跳转页面

最新推荐文章于 2025-04-30 18:39:59 发布

jc_hook

最新推荐文章于 2025-04-30 18:39:59 发布

阅读量1.2w

点赞数 20

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.youkuaiyun.com/jc_hook/article/details/113528886

微信小程序专栏收录该内容

2 篇文章

订阅专栏

一、文件目录

在这里插入图片描述

二、实现效果

在这里插入图片描述

三、实现

点击test页面中的按钮，跳转至页面other；

3.1 跳转页面api

3.1.1 navigateTo

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

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈

wx.navigateTo({
  url: '../other/other'
})

3.1.2 redirectTo

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

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

3.1.3 switchTab

wx.switchTab({
  url: 'pages/other/other'
})

跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。

在这里插入图片描述

3.1.4 reLanch
关闭所有页面，打开到应用内的某个页面。

wx.reLanch({
  url: 'pages/other/other'
})

3.2 页面组件跳转

3.2.1 navigator组件

// navigator 组件默认的 open-type 为 navigate 
<navigator url="pages/other/other" hover-class="navigator-hover">跳转页面</navigator>


// redirect 对应 API 中的 wx.redirect 方法
<navigator url="pages/other/other" open-type="redirect" hover-class="other-navigator-hover">跳转页面</navigator>

// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="pages/other/other" open-type="switchTab" hover-class="other-navigator-hover">跳转页面</navigator>

// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="pages/other/other" open-type="redirect" hover-class="other-navigator-hover">跳转页面</navigator>

// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="pages/other/other" open-type="navigateBack" hover-class="other-navigator-hover">跳转页面</navigator>

四、示例demo源码

4.1 wxml

test.wxml

<!--pages/index/test.wxml-->
<view class="top">
<button type="primary" bindtap="goTo">跳转页面</button>
</view>

other.wxml

<!--pages/other/other.wxml-->
<text>跳转成功</text>

4.2 wxss

test.wxss

.top{
  display: flex;
  align-items: center;
  justify-content: center;
}

4.3 js

test.js

//获取应用实例
Page({
  goTo:function(){
    wx.navigateTo({
      url: '../other/other',
    })
  }
})