上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击 精华

meimei昵
发布于 2020-10-9 17:12
浏览
1收藏

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

上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区在 index.hml 创建页面时生成的默认代码中添加: <input type="button" class="btn" value="点我" onclick="clickAction"></input>

上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区

在 index.css 创建页面时生成的默认代码中修改 container 的样式: 

  • 不再用弹性布局 display: flex,将 display: flex; 注释并改为 flex-direction: column; 以便竖向排列 container 里的所有组件;
  • 添加  btn 的样式: .btn{width:200px;height:50px;}

上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区

在 index.js 默认代码中添加:

clickAction(){console.log("我被点击了")}

这个函数的意思是在控制台打印出汉字:我被点击了,注意 clickAction 上一行需要加英文逗号

启动 debug

第一次启动 debug 好像要下载什么,我这里是弹出一个报错什么的,我当时没截图,点了右下角的一个按钮,然后windows一个安全提醒,要联网什么的,同意,过一会再点debug就启动了 Simulator(模拟器,跟预览器不是一个东西)。

之后每次启动都会有下图的弹框,点 OK 即可(下面两个图说明了两个位置可启动 Debug 'entry')。

上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区启动远程虚拟设备

预览器,模拟器,远程虚拟设备

  • 预览器入口:View -> Tool Windows -> Previewer(要进入到具体页面编辑代码,再打开菜单才显示 Previewer)
  • 模拟器:入口1:Run -> Debug 'entry',入口2:View -> Tool Windows -> simulator(需要入口1执行成功一次才有)
  • 远程虚拟设备:Tools ->HVD Manager(留意使用时长限制)

上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区上手做一个华为鸿蒙手表应用 2 - 在主页添加一个按钮并响应点击-鸿蒙开发者社区

分类
已于2021-8-31 17:51:22修改
1
收藏 1
回复
举报
回复
    相关推荐