index.hml、index.css和index.js 这三个文件共同组成在预览器中看到的APP主页面

index.hml、index.css和index.js 三者关系

hml：页面结构，描述页面中包含的组件
css：页面样式，描述组件长什么样
js：页面行为，描述组件如何进行交互

index.hml

<div class="container"> /* 容器div */
    <text class="title">
        Hello {{title}}
    </text>  /* 文本框text */
    <input type="button" value="点我" class="btn" onclick="clickAction"/> /* 将属性type的值设置为button，以显示一个按钮，将属性value的值设为点我，以设置按钮上设置的文本，将属性class的值设为btn，以通过index.css中名为btn的类选择器，设置按钮的样式 ;再添加一个属性onclick，点击后触发按钮事件*
</div>

index.css

.container {
    flex-direction:column ; /*文本框和按钮是竖向排列的，需要在类选择器中添加一个样式，以竖向排列容器内的所有div组件*/
    /*display: flex; 删除display样式，无需再使用弹性布局的显示方式*/
    justify-content: center;
    align-items: center;
    /*left: 0px;
    top: 0px; 定位容器div在页面坐标系中的位置,删除这两个样式 */
    width: 454px;  /* Watch最大的宽和高 */
    height: 454px;
}
.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}

/* ## 页面坐标系
坐标原点是表盘的外接正方形的左上角，表盘的外接正方形的边长是454px,所有位于表盘之外且位于外接正方形之内的部分都不会被显示，不存在屏幕适配的问题。*/

.btn { /*通过btn的类选择按钮的样式*/
    width: 200px;/*将宽度设置为200px*/
    height: 50px;/*将高度设置为50px*/

}

index.js

export default {
    data: {
        title: '朱小帅' //定义一个变量title,值为 朱小帅，而这个变量title是index.hml中使用两个{{}}占位符，是在程序的运行中动态确定的，即动态绑定

    }, // 注意 ：data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        console.log("This is HarmonyOS!")// 在函数体中打印一个log
    }
}