目录

一、文件目录二、实现效果三、实现3.1 跳转页面api3.2 页面组件跳转四、示例demo源码4.1 wxml4.2 wxss4.3 js

一、文件目录

二、实现效果

三、实现

点击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',})}})