同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Add a <text> and a <button> component to the first page.
In the Project window, choose entry > src > main > js > default > pages.index, open the index.hml file, and add the components.
<!-- index.hml -->
<div class="container">
<!-- Add text. -->
<text class="text">
Hello World
</text>
<!-- Add a button, set its type to capsule, set button text to Next, and bind it to the launch event. -->
<button class="button" type="capsule" value="Next" onclick="launch"></button>
</div>
Open the index.css file and set text and button styles.
/* index.css */
.container {
flex-direction: column; /* Arrange container items vertically. */
justify-content: center; /* Center the items along the main axis of the container. */
align-items: center; /* Center the items along the cross axis of the container. */
}
/* Set the style for the component of the text class. */
.text{
font-size: 72px;
}
/* Set the style for the component of the button class. */
.button {
width: 362px;
height: 80px;
background-color: #007dff;
font-size: 39px;
text-color: white;
margin-top: 20px;
}
Run your project on a real mobile phone or the simulator. The following figure shows the display effect:
In the Project window, choose entry > src > main > js > default, right-click the pages.index folder, and choose New > JS Page. Set the new page name to details.
The index and details folders are displayed in the pages folder.
Open the details.hml file, add the <text> component, and set its layout.
<!-- details.hml -->
<div class="container">
<text class="text">
Hi there
</text>
</div>
Open the details.css file and set the text style.
/* details.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.text {
font-size: 70px;
text-align: center;
}
Open the index.js file and import the router module. The page router redirects to the target page based on its URI.
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/details/details', // Specify the page to be redirected to.
})
}
}
Run the project again. The following figure shows the effect.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。