tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module

Navigation Component

PDF
Focus Mode
Font Size
Last updated: 2025-05-22 17:11:58
Feature description:Page URL.
Parameter and description:
Property
Type
Valid values and description
Default value
‍Required
Description
target
string
self: The current mini program
miniProgram: Other mini programs
self
False
Specifies the target for the navigation. Default is the current mini program.
url
string
-
-
False
URL for navigation within the current mini program.
open-type
string
navigate: Corresponds to the feature of wx.navigateTo or wx.navigateToMiniProgram
redirect: Corresponds to the feature of wx.redirectTo
switchTab: Corresponds to the feature of wx.switchTab
reLaunch: Corresponds to the feature of wx.reLaunch
navigateBack: Corresponds to the feature of wx.navigateBack
exit: Exits the mini program. Effective when target="miniProgram"
navigate
False
Specifies the navigation method.
delta
number
-
1
False
Effective when open-type is 'navigateBack', indicates the number of layers to go back.
app-id
string
-
-
False
Effective when target="miniProgram" and open-type="navigate", specifies the appId of the mini program to open.
path
string
-
-
False
Effective when target="miniProgram", specifies the page path to open. If empty, opens the home page.
extra-data

object
-
-
False
Effective when target="miniProgram", specifies data to pass to the target mini program. The target mini program can retrieve this data inApp.onLaunch()andApp.onShow() .
version
string
develop: The development version
trial: The Preview
release: The released version. This property is valid only when the version of the mini program is the development version or Preview. If the current mini program version is released, the version of the mini program to be opened must be the released version.
release
False
Effective when target="miniProgram" and open-type="navigate", specifies the version of the mini program to open.
hover-class
string
-
navigator-hover
False
Specifies the style class when tapped. Ifhover-class="none", there is no tap effect.
hover-stop-propagation
boolean
-
false
False
Specifies whether to prevent ancestor nodes from showing the tap effect.
hover-start-time
number
-
50
False
Time in milliseconds before the tap effect appears after pressing.
hover-stay-time
number
-
600
False
Time in milliseconds the tap effect remains after the finger is released.
bindsuccess
string
-
-
False
Effective when target="miniProgram", triggered when navigation to the mini program is successful.
bindfail
string
-
-
False
Effective when target="miniProgram", triggered when navigation to the mini program fails.
bindcomplete
string
-
-
False
Effective when target="miniProgram", triggered when navigation to the mini program is complete.
Restrictions:User confirmation is required for navigation.
Before navigating to another mini program, a pop-up will appear asking for user confirmation. Navigation will proceed only if the user confirms. If the user cancels, thefail cancelwill be triggered.
Notes:
navigator-hoverdefaults to{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, The background color of the child nodes of <navigator>should be transparent.
Example:
sample.wxml
navigator.wxml
redirect.wxml
JAVASCRIPT
WXSS
<view class="btn-area">
<navigator
url="/page/navigate/navigate?title=navigate"
hover-class="navigator-hover"
>
Navigate to a new page.
</navigator>
<navigator
url="../../redirect/redirect/redirect?title=redirect"
open-type="redirect"
hover-class="other-navigator-hover"
>
Open on the current page.
</navigator>
</view>
<view style="text-align:center"> {{title}} </view>
<view> Tap the top left corner to return to the previous page. </view>
<view style="text-align:center"> {{title}} </view>
<view> Tap the top left corner to return to the parent page. </view>
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
/** wxss **/
/** Modify the default tap effect of navigator. **/
.navigator-hover {
color: blue;
}
/** Customize the style classes for other tap effect. **/
.other-navigator-hover {
color: red;
}


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback