使用JS语言开发
编写第一个页面
-
第一个页面内有一个文本和一个按钮,通过text和button组件来实现。
在“Project“窗口,选择“entry > src > main > js > default > pages.index“,打开“index.hml“文件,添加一个文本和一个按钮,示例代码如下:
<!-- index.hml --> <div class="container"> <!-- 添加一个文本 --> <text class="text"> Hello World </text> <!-- 添加一个按钮,按钮样式设置为胶囊型,文本显示为Next,绑定launch事件 --> <button class="button" type="capsule" value="Next" onclick="launch"></button> </div>
-
打开“index.css“文件,设置文本和按钮的样式,示例代码如下:
/* index.css */ .container { flex-direction: column; /* 设置容器内的项目纵向排列 */ justify-content: center; /* 设置项目位于容器主轴的中心 */ align-items: center; /* 项目在交叉轴居中 */ } /* 对class="text"的组件设置样式 */ .text{ font-size: 42px; } /* 对class="button"的组件设置样式 */ .button { width: 240px; height: 60px; background-color: #007dff; font-size: 30px; text-color: white; margin-top: 20px; }
-
创建另一个页面
-
在“Project“窗口,打开“entry > src > main > js > default“,右键点击“pages.index“文件夹,选择“New > JS Page“,命名为“details“,单击回车键。
创建完成后,可以看到“pages.index“文件夹下的文件目录结构如:
-
打开“details.hml“文件,添加一个文本,示例代码如下:
<!-- details.hml --> <div class="container"> <text class="text"> Hi there </text> </div>
-
打开“details.css“文件,设置文本的样式,示例代码如下:
/* details.css */ .container { flex-direction: column; justify-content: center; align-items: center; } .text { font-size: 42px; text-align: center; }
实现页面跳转
-
打开第一个页面的“index.js“文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:
// index.js import router from '@system.router'; export default { launch() { router.push ({ uri:'pages/index/details/details', // 指定要跳转的页面 }) } }
-
恭喜你,至此已成功完成HarmonyOS快速入门-使用JS语言开发。