共计 1477 个字符,预计需要花费 4 分钟才能阅读完成。
接上一篇: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.js
export 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