页面	说明
首页（navigator）	使用按钮跳转到 navigator 功能页
navigator 功能页（feature）	使用相关 API 的按钮跳转到新页面或首页
新页面（navigate）	使用相关 API 返回 navigator 功能页或首页

步骤一：在 IDE 新建小程序项目

具体步骤请参见创建小程序项目。

步骤二：配置应用

编写小程序的全局逻辑文件app.js，定义小程序的生命周期函数。

App 函数用于注册小程序：

◦

onLaunch 在小程序初始化完成时触发，可用于进行一些初始化操作，如获取用户信息等。

◦

onShow 在小程序启动或从后台进入前台显示时触发。

◦

onHide 在小程序从前台进入后台时触发，可用于保存一些临时数据。

App({
  onLaunch() {
    console.log('小程序启动');
  },
  onShow() {
    console.log('小程序显示');
  },
  onHide() {
    console.log('小程序隐藏');
  }
})

编写小程序的全局配置文件 app.json，配置页面路径、窗口样式等。

◦

pages 数组列出了小程序的所有页面路径，确保小程序能够正确加载各个页面。

◦

window 配置了小程序窗口的样式，包括背景文本样式、导航栏背景颜色、标题文本和文本颜色。

{
    "pages": [
        "pages/navigator/navigator",
        "pages/feature/feature",
        "pages/navigate/navigate"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "页面导航示例",
        "navigationBarTextStyle": "black"
    }
}

编写小程序的全局样式文件app.ttss，定义整个小程序的公共样式。

/* 设置全局字体和背景颜色 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

/* 设置按钮样式 */
button {
  background-color: #007aff; /* 按钮背景色：蓝色 */
  color: white; /* 文字颜色：白色 */
  border: none; /* 清除边框 */
  padding: 10px 20px; /* 内边距：上下 10px，左右 20px */
  border-radius: 5px; /* 圆角：5px */
  font-size: 16px; /* 字体大小 */
  margin: 20px; /* 外边距：20px，按钮之间的间距 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时背景色：更深的蓝色 */
}

步骤三：开发首页

在首页（navigator）中实现文案“这是首页”以及用于跳转至功能页的按钮。首页包含 navigator.ttml 和 navigator.js 文件。

说明
页面比较简单，在每个页面中没有创建 .ttss 和.json文件，统一使用 app.ttss和 app.json。

编写pages/navigator/navigator.ttml。

navigator 组件是声明式的导航方式，通过 url 属性指定要跳转的页面路径。点击该组件时，会直接跳转到指定页面。同时，我们添加了一个按钮，用于调用 tt.navigateTo。

</view>
<view class="container">
  <text>这是首页</text>
  <button bindtap="goToFeatureByApi">使用 tt.navigateTo 跳转到 feature 页</button>
</view>

编写pages/navigator/navigator.js。

◦

goToFeatureByApi 方法调用 tt.navigateTo 跳转到 feature 页的功能。

◦

tt.navigateTo 会保留当前页面，将新页面压入页面栈，用户可以通过返回按钮回到当前页面。

Page({
    data: {

    },
    goToFeatureByApi() {
        tt.navigateTo({
            url: '/pages/feature/feature'
        });
    }
});

首页开发完成后，页面如下：

步骤四：开发 navigator 功能页

feature 页面有多种页面导航操作按钮，通过不同 API 实现导航效果，方便用户切换页面。navigator 功能页有 4 个按钮：

•

使用 tt.navigateTo 跳转新页面

•

使用 tt.redirectTo 跳转新页面

•

返回上一页

•

使用 tt.relaunch 打开首页

feature 页面包含 feature.ttml 和 feature.js 文件。

说明
页面比较简单，在每个页面中没有创建 .ttss 和.json文件，统一使用 app.ttss和 app.json。

编写pages/feature/feature.ttml。

<view class="container">
  <text>这是 navigator 功能页（feature）</text>
  <button bindtap="goToNavigatePage">使用 tt.navigateTo 跳转到新页面</button>
  <button bindtap="redirectToNavigatePage">使用 tt.redirectTo 跳转到新页面</button>
  <button bindtap="goBack">返回上一页</button>
  <button bindtap="reLaunchToNavigator">使用 tt.reLaunch 打开首页</button>
</view>

◦

<button bindtap="goToNavigatePage">使用 tt.navigateTo 跳转到新页面（navigate）</button>：

▪

button 是按钮组件，用户点击该按钮会触发相应的操作。

▪

bindtap 是小程序中的事件绑定方式，用于绑定 tap（点击）事件。bindtap="goToNavigatePage" 表示当用户点击这个按钮时，会调用 feature.js 中定义的 goToNavigatePage 函数。

◦

<button bindtap="redirectToNavigatePage">使用 tt.redirectTo 跳转到新页面（navigate）</button>：点击该按钮会调用 feature.js 中的 redirectToNavigatePage 函数。

◦

<button bindtap="goBack">返回上一页</button>：点击此按钮会调用 feature.js 中的 goBack 函数，实现返回上一页的功能。

◦

<button bindtap="reLaunchToNavigator">使用 tt.reLaunch 打开首页</button>：点击该按钮会调用 feature.js 中的 reLaunchToNavigator 函数，使用 tt.reLaunch 打开首页。

编写pages/feature/feature.js。

Page({
    data: {

    },
    goToNavigatePage() {
        tt.navigateTo({
            url: '/pages/navigate/navigate'
        });
    },
    redirectToNavigatePage() {
        tt.redirectTo({
            url: '/pages/navigate/navigate'
        });
    },
    goBack() {
        tt.navigateBack({
            delta: 1
        });
    },
    reLaunchToNavigator() {
        tt.reLaunch({
            url: '/pages/navigator/navigator'
        });
    }
});

◦

goToNavigatePage()：

▪

该函数使用 tt.navigateTo 方法实现页面跳转。tt.navigateTo 会保留当前页面，将新页面压入页面栈。

▪

url: '/pages/navigate/navigate' 指定了要跳转的页面路径，即跳转到 navigate 页面。

◦

redirectToNavigatePage()：

▪

该函数使用 tt.redirectTo 方法进行页面跳转。tt.redirectTo 会关闭当前页面，然后跳转到指定页面，即当前的 feature 页面会从页面栈中移除。

▪

同样，url: '/pages/navigate/navigate' 表示跳转到 navigate 页面。

◦

goBack()：

▪

该函数使用 tt.navigateBack 方法返回上一页。

▪

delta: 1 表示返回的页面数，这里设置为 1，即返回上一个页面。如果 delta 设置为 2，则会返回上两个页面，以此类推。

◦

reLaunchToNavigator()：

▪

该函数使用 tt.reLaunch 方法打开首页。tt.reLaunch 会关闭所有页面，然后打开指定的页面，即清空页面栈并打开首页。

▪

url: '/pages/navigator/navigator' 指定了要打开的首页路径。

navigator 功能页（feature）开发完成后，页面如下：

由于新页面（navigate）还没开发，所以用 tt.navigateTo 跳转新页面和用 tt.redirectTo 跳转新页面会跳转到空页面，需要通过框架中返回按钮返回。

步骤五：开发新页面

navigate 页面提供了两种导航操作：一是使用 tt.navigateBack 方法返回上一个 feature 页面；二是使用 tt.reLaunch 方法关闭所有页面并回到首页。

navigate 文件夹（新页面），包含 navigate.ttml 和 navigate.js 文件。

页面比较简单，可以使用相同的页面样式，在每个页面中没有创建 .ttss 和.json文件，统一使用 app.ttss和 app.json。

编写pages/navigate/navigate.ttml。

在 navigate 页中，我们添加了两个按钮，分别用于演示 tt.navigateBack 和 tt.reLaunch 方法。

<view class="container">
    <text>这是新页面（navigate）</text>
    <button bindtap="goBackToFeature">使用 tt.navigateBack 返回 feature 页</button>
    <button bindtap="reLaunchToNavigator">使用 tt.reLaunch 回到首页</button>
</view>

◦

button 是按钮组件，用于触发特定操作。

◦

bindtap 是事件绑定方式，绑定了 tap（点击）事件。

◦

bindtap="goBackToFeature" 表示当用户点击这个按钮时，会调用 navigate.js 文件中定义的 goBackToFeature 函数。

◦

bindtap="reLaunchToNavigator">表示当用户点击它时，会调用 navigate.js 文件中的 reLaunchToNavigator 函数。

编写pages/navigate/navigate.js。

Page({
    data: {

    },
    goBackToFeature() {
        tt.navigateBack({
            delta: 1
        });
    },
    reLaunchToNavigator() {
        tt.reLaunch({
            url: '/pages/navigator/navigator'
        });
    }
});

◦

goBackToFeature()：

▪

tt.navigateBack 方法会关闭当前页面，返回页面栈中的上一个页面。

▪

delta: 1 是 tt.navigateBack 方法的参数，delta 表示要返回的页面数，设置为 1 表示返回上一个页面，即 feature 页。

◦

reLaunchToNavigator()：

▪

tt.reLaunch 方法会关闭所有页面，然后打开指定的页面。

▪

url: '/pages/navigator/navigator' 是 tt.reLaunch 方法的参数，指定了要打开的页面路径，这里是首页的路径。

新页面（navigate）开发完成后，页面如下：

结果验证

通过以上步骤，你可以在抖音小程序中实现包含 navigator 组件、tt.navigateTo、tt.redirectTo、tt.navigateBack 和 tt.reLaunch 的页面导航功能。

你可以在 IDE 的模拟器中预览本教程实现的各个功能，也可以对小程序进行调试，详情请参见 IDE 调试和真机调试。