Skip to content

D
Docs

lfmiao0 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 cf68ab51 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13124 翻译完成 11180+10932+11164+11198+11199+11378+11380+12427 

Merge pull request !13124 from ester.zhou/C1-0103
上级 cf1ea7dc 42801563
展开全部 隐藏空白更改
内联 并排
Showing with 263 addition and 228 deletion
en/application-dev/reference/apis/Readme-EN.md
浏览文件 @ cf68ab51
......@@ -68,6 +68,9 @@
- bundle/[HapModuleInfo](js-apis-bundle-HapModuleInfo.md)
- bundle/[Metadata](js-apis-bundle-Metadata.md)
- bundle/[ModuleInfo](js-apis-bundle-ModuleInfo.md)
- Application Management
- [@system.package](js-apis-system-package.md)
- UI Page
- [@ohos.animator](js-apis-animator.md)
......@@ -234,7 +237,6 @@
- [@system.mediaquery](js-apis-system-mediaquery.md)
- [@system.network](js-apis-system-network.md)
- [@system.notification](js-apis-system-notification.md)
- [@system.package](js-apis-system-package.md)
- [@system.prompt](js-apis-system-prompt.md)
- [@system.request](js-apis-system-request.md)
- [@system.router](js-apis-system-router.md)
......
en/application-dev/reference/apis/js-apis-system-package.md
浏览文件 @ cf68ab51
# Application Management
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：**
> **NOTE**
>
> - The APIs of this module are no longer maintained since API version 7. It is recommended that you use [`@ohos.bundle`](js-apis-Bundle.md) instead.
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
......@@ -26,20 +24,20 @@ Checks whether an application exists, or whether a native application has been i
**System capability**: SystemCapability.BundleManager.BundleFramework
**Parameter**
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| bundleName | string | Yes | Application bundle name |
| success | Function | No | Called when the check result is obtained |
| fail | Function | No | Called when the check result fails to be obtained |
| complete | Function | No | Called when the execution is complete |
| bundleName | string | Yes | Application bundle name. |
| success | Function | No | Called when the check result is obtained. |
| fail | Function | No | Called when the check result fails to be obtained. |
| complete | Function | No | Called when the execution is complete. |
The following value will be returned when the check result is obtained.
| Name | Type | Description |
| -------- | -------- | -------- |
| result | boolean | Whether the application exists, or whether the native application has been installed |
| result | boolean | The value **true** means that the application exists or the native application has been installed, and **false** means the opposite. |
**Example**
......
en/application-dev/reference/apis/js-apis-uitest.md
浏览文件 @ cf68ab51
......@@ -19,6 +19,20 @@ This module provides the following functions:
import {UiDriver,BY,MatchPattern} from '@ohos.uitest'
```
## MatchPattern
Enumerates the match patterns supported for component attributes.
**System capability**: SystemCapability.Test.UiTest
| Name | Value | Description |
| ----------- | ---- | -------------- |
| EQUALS | 0 | Equal to the given value. |
| CONTAINS | 1 | Contains the given value. |
| STARTS_WITH | 2 | Starts with the given value.|
| ENDS_WITH | 3 | Ends with the given value.|
## By
The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
......@@ -978,16 +992,3 @@ async function demo() {
}
```
## MatchPattern
Enumerates the match patterns supported for component attributes.
**System capability**: SystemCapability.Test.UiTest
| Name | Value | Description |
| ----------- | ---- | -------------- |
| EQUALS | 0 | Equal to the given value. |
| CONTAINS | 1 | Containing the given value. |
| STARTS_WITH | 2 | Starting from the given value.|
| ENDS_WITH | 3 | Ending with the given value.|
en/application-dev/reference/arkui-js/js-components-container-badge.md
浏览文件 @ cf68ab51
# badge
The **<badge>** component is used to mark new events that require user attention in your application.
> **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<badge>** component is used to mark new events that require user attention in your application.
## Required Permissions
None
## Child Components
This component supports only one child component.
> ![img](public_sys-resources/icon-note.gif) **NOTE:** If multiple child components are used, only the first one takes effect by default.
## Attributes
> **NOTE**
>
> If multiple child components are used, only the first one takes effect by default.
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| --------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component. |
| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.<br>**NOTE:** When the **count** value is greater than the **maxcount** value, maxcount+ is displayed.<br>The largest integer value supported for **count** is **2147483647**. |
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute. |
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>**NOTE:** The largest integer value supported for **maxcount** is **2147483647**. |
| config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>**NOTE:** When this attribute is set, attributes **count** and **maxcount** do not take effect. |
| Name | Type | Default Value | Mandatory| Description |
| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
| count | number | 0 | No | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.|
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
| config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
**Table 1** BadgeConfig
| Name | Type | Default Value | Mandatory | Description |
| ---------- | -------------- | -------- | ---- | ------------ |
| badgeColor | &lt;color&gt; | \#fa2a2d | No | Background color of the badge. |
| textColor | &lt;color&gt; | \#ffffff | No | Text color of the number badge.|
| textSize | &lt;length&gt; | 10px | No | Text size of the number badge.|
| badgeSize | &lt;length&gt; | 6px | No | Default size of the dot badge. |
| Name | Type | Default Value | Mandatory | Description |
| ---------- | -------------- | ------------- | --------- | ------------------------------- |
| badgeColor | &lt;color&gt; | #fa2a2d | No | Background color of the badge. |
| textColor | &lt;color&gt; | #ffffff | No | Text color of the number badge. |
| textSize | &lt;length&gt; | 10px | No | Text size of the number badge. |
| badgeSize | &lt;length&gt; | 6px | No | Default size of the dot badge. |
## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported.
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> The total size of child components must be smaller than or equal to that of the **\<badge>** component. Otherwise, the child components cannot be displayed.
> ![img](public_sys-resources/icon-note.gif) **NOTE:** The total size of child components must be smaller than or equal to that of the **&lt;badge&gt;** component. Otherwise, the child components cannot be displayed.
## Events
Events in [Universal Events](js-components-common-events.md) are supported.
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported.
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
```
```html
<!-- xxx.hml -->
<div class="container">
<badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
......@@ -64,6 +75,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
<text class="text2">example</text>
</badge>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -82,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
background-color: #46b1e3;
font-size: 50px;
}
```
```js
// xxx.js
export default {
data:{
......@@ -93,4 +110,4 @@ export default {
}
```
![img](figures/figures1.png)
\ No newline at end of file
![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png)
en/application-dev/reference/arkui-js/js-components-container-tabs.md
浏览文件 @ cf68ab51
# tabs
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<tabs>** component provides a tab container.
## Required Permissions
None
## Child Components
A **\<tabs>** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)>** and at most one **<[tab-content](js-components-container-tab-content.md)>**.
Only [\<tab-bar>](../arkui-js/js-components-container-tab-bar.md) and [\<tab-content>](../arkui-js/js-components-container-tab-content.md) are supported.
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. |
## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported.
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------ | ------------------------------------ | ----------------------------- |
| change | { index: indexValue } | Triggered upon tab switching. This event is not triggered when the **index** value is dynamically changed.|
| Name | Parameter | Description |
| ------ | --------------------- | ------------------------------------------------------------ |
| change | { index: indexValue } | Triggered upon tab switching.NOTE:This event is not triggered when the **index** value is dynamically changed. |
## Example
```
```html
<!-- xxx.hml -->
<div class="container">
<tabs class = "tabs" index="0" vertical="false" onchange="change">
......@@ -59,6 +63,9 @@ In addition to the events in [Universal Events](js-components-common-events.md),
</tab-content>
</tabs>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -90,6 +97,9 @@ In addition to the events in [Universal Events](js-components-common-events.md),
width: 300px;
text-align: center;
}
```
```js
// xxx.js
export default {
change: function(e) {
......@@ -98,4 +108,4 @@ export default {
}
```
![img](figures/tab.gif)
\ No newline at end of file
![tab](figures/tab.gif)
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ cf68ab51
# AlphabetIndexer
The **\<Indexer>** component provides an alphabetic index bar.
The **\<Indexer>** component can create a logically indexed array of items in a container for instant location.
> **NOTE**
>
......@@ -20,28 +20,29 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar.|
| selected | number | Yes | Index of the initially selected item. |
| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.|
| selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. |
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor8) | Font color. |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text. |
| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text. |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item. |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text. |
| selectedFont | [Font](ts-types.md#font) | Font style of the selected text. |
| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text. |
| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar. |
| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
| color | [ResourceColor](ts-types.md#resourcecolor8) | Font color.<br>Default value: **0x99000000** |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text.<br>Default value: **0xFF254FF7** |
| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text.<br>Default value: **0xFF254FF7** |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item.<br>Default value: **0x1F0A59F7** |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text.<br>Default value: **0xFFF1F3F5** |
| usingPopup | boolean | Whether to use pop-up text.<br>Default value: **false** |
| selectedFont | [Font](ts-types.md#font) | Font style of the selected text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.<br>Default value: **24.0** |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right**|
| selected | number | Index of the selected item.|
| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.|
| selected | number | Index of the selected item.<br>Default value: **0**|
| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.<br>Default value: **{x:96.0, y:48.0}**|
## IndexerAlign enums
## IndexerAlign
| Name| Description|
| -------- | -------- |
......@@ -50,6 +51,7 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
## Events
Only the following events are supported.
| Name| Description|
| -------- | -------- |
| onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
......
en/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ cf68ab51
# Menu
> **NOTE**
The menu bound to a component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page can be closed as needed.
> **NOTE**
>
> This method is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## ContextMenu.close
close(): void
Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page.
Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page.
## Example
......@@ -17,26 +20,38 @@ Closes the menu bound to this component through [bindContextMenu](./ts-universal
@Entry
@Component
struct Index {
@Builder MenuBuilder(){
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('close')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(() => {
ContextMenu.close();
})
}.height(400)
.backgroundColor(Color.Pink)
Button('Test ContextMenu1')
Divider().strokeWidth(2).margin(5)
Button('Test ContextMenu2')
Divider().strokeWidth(2).margin(5)
Button('Test ContextMenu3')
}
.width(200)
.height(160)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
Column(){
Text("Text")
}.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Column() {
Text("Test ContextMenu")
.fontSize(20)
.width('100%')
.height(500)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
}
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.onDragStart(()=>{
// Close the menu when the component is dragged.
ContextMenu.close()
})
}
.width('100%')
.height('100%')
}
}
```
![contextmenu_close.gif](figures/contextmenu_close.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ cf68ab51
......@@ -8,10 +8,9 @@ You can set overlay text for a component.
## Attributes
| Name | Type | Description |
| ------- | ----------------------------- | ------------------------- |
| overlay | value: string,<br/>options?: {<br/>align?: [Alignment](ts-appendix-enums.md#alignment), <br/>offset?: {x?: number, y?: number}<br/>} | Overlay added to the component. The overlay has the same layout as the component.<br>Default value:<br>{<br>align: Alignment.Center,<br>offset: {0, 0}<br>} |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.<br>If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.|
## Example
......@@ -28,7 +27,10 @@ struct OverlayExample {
Column() {
Image($r('app.media.img'))
.width(240).height(240)
.overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
.overlay("Winter is a beautiful season, especially when it snows.", {
align: Alignment.Bottom,
offset: { x: 0, y: -15 }
})
}.border({ color: Color.Black, width: 2 })
}.width('100%')
}.padding({ top: 20 })
......
en/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ cf68ab51
# Defining Page Routes
An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required.
An application generally consists of more than one page. For example, a music application may come with a music list page and a playback page. You need to link these pages through the page router to implement redirection as required. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song.
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page.
1. In the **Project** window of DevEco Studio, choose **src** > **main** > **js** > **MainAbility**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the **detail** page.
2. Call **router.push()** to navigate users to the detail page.
2. Call **router.push()** to navigate users to the **detail** page.
3. Call **router.back()** to navigate users to the index page.
3. Call **router.back()** to navigate users to the **index** page.
## Building the Page Layout
The index and detail pages each contains a &lt;text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows:
The **index** and **detail** pages each contains a **\<text>** component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in **.hml** files is as follows:
```
```html
<!-- index.hml -->
<div class="container">
<text class="title">This is the index page.</text>
......@@ -27,8 +25,7 @@ The index and detail pages each contains a &lt;text> component that specifies th
</div>
```
```
```html
<!-- detail.hml -->
<div class="container">
<text class="title">This is the detail page.</text>
......@@ -39,13 +36,14 @@ The index and detail pages each contains a &lt;text> component that specifies th
## Setting Page Styles
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
Set styles for the **index** and **detail** pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
```
```css
/* index.css */
/* detail.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -60,25 +58,23 @@ Set styles for the index and detail pages. Center the **\<text>** and **\<button
## Implementing Redirection
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
To make the **launch** method of the **\<button>** component take effect, the redirection logic needs to be implemented in the **.js** file of the page. Call **router.push()** to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the **router** module before calling the **router** method. The sample code is as follows:
```
```js
// index.js
import router from '@system.router';
import router from '@ohos.router';
export default {
launch() {
router.push ({
uri: 'pages/detail/detail',
url: 'pages/detail/detail',
});
},
}
```
```
```js
// detail.js
import router from '@system.router';
import router from '@ohos.router';
export default {
launch() {
router.back();
......@@ -88,10 +84,4 @@ export default {
The figure below shows the effect.
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)
## Samples
The following sample is provided to help you better understand how to develop page routing:
[`JsRouter`: Page Routing (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
\ No newline at end of file
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或