接上一篇：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356376262560775&fid=0101303901040230869
源码仓库地址：https://gitee.com/zhaoquan/harmonyoswatchdemo

在主页增加一个按钮并响应点击事件

<!-- index.hml --><div class="container">    <text class="title">        Hello {{title}}    </text>    <input type="button" class="btn" value="点我" onclick="clickAction"></input></div>

在 index.hml 创立页面时生成的默认代码中增加： <input type="button" class="btn" value="点我" onclick="clickAction"></input>

/*index.css*/.container {    flex-direction: column;/*    display: flex;*/    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 454px;    height: 454px;}.title {    font-size: 30px;    text-align: center;    width: 200px;    height: 100px;}.btn{    width:200px;    height:50px;}

在 index.css 创立页面时生成的默认代码中批改 container 的款式：

  • 不再用弹性布局 display: flex，将 display: flex; 正文并改为 flex-direction: column; 以便竖向排列 container 里的所有组件;
  • 增加 btn 的款式： .btn{width:200px;height:50px;}
//index.jsexport default {    data: {        title: 'World'    },    clickAction(){        console.log("我被点击了")    }}

启动 debug

第一次启动 debug 如同要下载什么，我这里是弹出一个报错什么的，我过后没截图，点了右下角的一个按钮，而后windows一个平安揭示，要联网什么的，批准，过一会再点debug就启动了 Simulator（模拟器，跟预览器不是一个货色）。

之后每次启动都会有下图的弹框，点 OK 即可（上面两个图阐明了两个地位可启动 Debug 'entry'）。


启动近程虚构设施

预览器，模拟器，近程虚构设施

  • 预览器入口：View -> Tool Windows -> Previewer（要进入到具体页面编辑代码，再关上菜单才显示 Previewer）
  • 模拟器：入口1：Run -> Debug 'entry'，入口2：View -> Tool Windows -> simulator（须要入口1执行胜利一次才有）
  • 近程虚构设施：Tools ->HVD Manager（注意应用时长限度）


下一篇的链接：
上手做一个华为鸿蒙手表利用 3 - 增加训练页面并实现其与主页面的相互跳转：https://developer.huawei.com/...

原文链接：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
作者：chatterzhao