抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台

开发页面导航

收藏
我的收藏
页面导航允许用户在不同页面之间进行切换,从而提供流畅的用户体验。通过抖音开放平台提供的 API 以及 navigator 组件,开发者可以轻松实现各种页面跳转逻辑。
抖音小程序的页面导航基于栈结构管理页面。当打开新页面时,系统将新页面压入栈顶;关闭页面时,页面从栈顶弹出。这种栈结构确保了页面的访问顺序,使得用户可以通过返回操作回到上一个页面。不同的导航 API 会对页面栈产生不同的影响,从而实现不同的导航效果。

使用场景

小程序页面导航的典型使用场景如下:
    商品展示与购买:在电商小程序中,用户从首页通过导航进入商品分类页,再点击具体商品进入商品详情页。查看商品详情后,可通过导航前往购物车页面,进行商品数量修改、结算等操作,最后导航到支付页面完成购买。
    内容浏览与阅读:在资讯或阅读类小程序中,用户通过顶部导航栏的分类,如 “科技”、“文化”、“娱乐” 等,进入相应的内容分类页面。点击具体文章标题后进入文章详情页,阅读过程中可通过导航栏返回上一级页面,或跳转到其他相关文章推荐页面。
    个人信息管理:在社交、办公等类型的小程序中,用户点击底部导航栏的 “我的” 或 “个人中心”,进入个人信息页面,进行头像修改、密码设置、个人资料完善等操作。还能从这里导航到 “我的收藏”“我的订单”“我的日程” 等相关页面,查看和管理个人相关的信息和事务。

基本概念

    页面栈:小程序用于管理页面的栈结构,栈底是小程序的首页,栈顶是当前显示的页面。
    navigator 页面链接:声明式的导航组件,可在页面中直接使用,用于跳转到指定页面。
    tt.navigateTo:保留当前页面,跳转到应用内的某个页面。
    tt.redirectTo:关闭当前页面,跳转到应用内的某个页面。
    tt.navigateBack:关闭当前页面,返回上一页面或多级页面。
    tt.reLaunch:关闭所有页面,打开到应用内的某个页面。
说明
tt.switchTab 用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。详情请参见 Tabbar 教程

目标

本教程将详细介绍如何实现抖音小程序的页面导航功能。
    1.创建抖音小程序项目,包含 3 个页面:首页(navigator)、功能页(feature)和新页面(navigate)。
    2.在首页中,使用 navigator 页面链接组件跳转到 navigator 功能页(feature)。
    3.在 navigator 功能页中,
    使用 tt.navigateTo 保留当前页面,跳转到新页面(navigate)。
    使用 tt.redirectTo 关闭当前页面,跳转到新页面(navigate)。
    使用 tt.navigateBack 关闭当前页面,返回首页(navigator)。
    使用 tt.reLaunch 关闭所有页面,返回首页(navigator)。
    4.在新页面中,
    使用 tt.navigateBack 关闭当前页面,返回首页(navigator)。
    使用 tt.reLaunch 关闭所有页面,返回首页(navigator)。

准备工作

开发抖音小程序的页面导航前,需完成以下准备:

开发准备

详情请参见开发准备,包含:
    注册账号并完成认证
    创建小程序
    添加协作者/管理员
    安装抖音开发者工具 IDE

规划页面与资源

开发者需规划好相关页面。
页面
说明
首页(navigator)
通过按钮跳转到 navigator 功能页
navigator 功能页(feature)
通过调用相关 API 实现按钮跳转到新页面或首页
新页面(navigate)
使用相关 API 从新页面返回 navigator 功能页或首页

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

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

步骤二:配置应用

    1.通过编写小程序的全局逻辑文件app.js,实现小程序的生命周期回调函数。
    App 函数用于注册小程序:
    onLaunch 在小程序初始化完成时触发,可用于进行一些初始化操作,如获取用户信息等。
    onShow 在小程序启动或从后台进入前台显示时触发。
    onHide 在小程序从前台进入后台时触发,可用于保存一些临时数据。
App({ onLaunch() { console.log('小程序启动'); }, onShow() { console.log('小程序显示'); }, onHide() { console.log('小程序隐藏'); } })
    2.编写小程序的全局配置文件 app.json,配置页面路径、窗口样式等。
    pages 数组列出了小程序的所有页面路径,确保小程序能够正确加载各个页面。
    window 配置了小程序窗口的样式,包括背景文本样式、导航栏背景颜色、标题文本和文本颜色。
{ "pages": [ "pages/navigator/navigator", "pages/feature/feature", "pages/navigate/navigate" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "页面导航示例", "navigationBarTextStyle": "black" } }
    3.编写小程序的全局样式文件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.ttmlnavigator.js 文件。
说明
所有页面统一使用 app.ttssapp.json,无需单独创建样式和配置文件。
    1.编写pages/navigator/navigator.ttml
    navigator 组件是声明式的导航方式,通过 url 属性指定要跳转的页面路径。点击该组件时,会直接跳转到指定页面。开发者可同时添加按钮,用于调用 tt.navigateTo
</view> <view class="container"> <text>这是首页</text> <button bindtap="goToFeatureByApi">使用 tt.navigateTo 跳转到 feature 页</button> </view>
    2.编写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.ttmlfeature.js 文件。
说明
所有页面统一使用 app.ttssapp.json,无需单独创建样式和配置文件。
    1.编写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 打开首页。
    2.编写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():该函数执行页面返回操作。
    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.ttmlnavigate.js 文件。
页面比较简单,可以使用相同的页面样式,在每个页面中没有创建 .ttss.json文件,统一使用 app.ttssapp.json
    1.编写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函数。
    2.编写pages/navigate/navigate.js
Page({ data: { }, goBackToFeature() { tt.navigateBack({ delta: 1 }); }, reLaunchToNavigator() { tt.reLaunch({ url: '/pages/navigator/navigator' }); } });
    goBackToFeature():该函数执行返回功能页操作。
    tt.navigateBack 方法会关闭当前页面,返回页面栈中的上一个页面。
    delta: 1tt.navigateBack 方法的参数,delta 表示要返回的页面数,设置为 1 表示返回上一个页面,即 feature 页。
    reLaunchToNavigator() :关闭所有页面并重新加载到指定页面
    tt.reLaunch 方法会关闭所有页面,然后打开指定的页面。
    url: '/pages/navigator/navigator'tt.reLaunch 方法的参数,指定了要打开的页面路径,这里是首页的路径。
新页面(navigate)开发完成后,页面如下:

结果验证

通过以上步骤,你可以在抖音小程序中实现包含 navigator 组件、tt.navigateTott.redirectTott.navigateBacktt.reLaunch 的页面导航功能。
你可以在 IDE 的模拟器中预览本教程实现的各个功能,也可以对小程序进行调试,详情请参见 IDE 调试真机调试