鸿蒙按钮点击提示,上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击事件...

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

Hello {{title}}

在 index.hml 创建页面时生成的默认代码中添加：

/*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(留意使用时长限制)