『牛角书』基于HarmonyOS的运动手表实战项目

『牛角书』基于HarmonyOS的运动手表实战项目

---

---

前言

张荣超老师的从零开始编写一个HarmonyOS（鸿蒙）运动手表上的实战项目App视频，简单易懂，对于初学者有很大的帮助。

---

创建项目

在课程中我们所用到的软件为DevEco Studio下载地址如下：https://developer.harmonyos.com/cn/develop/deveco-studio#download
首先打开DevEco Studio，点击Create HarmonyOS Project，选择Lite Wearable选项，选择默认的模板（如图），点击next，然后将文件命名为huxi。

创建主页面

打开index文件夹，里面有三个文件，文件名分别为index.css，index.hml，index.js。我们要完成对主页面的修改就是通过修改这三个文件来完成的。

index.hml

首先创建一个名为container1的区域组件，组件包含一个名为container2的区域组件和一个按钮组件。在container2组件创建一个名为pv1 的滚动选择器，里面的数据picker1range通过动态绑定的方式获得；创建一个名为changeAction1的onchange事件，当滚动选择器中的数据发生改变的时候，会引发onchange事件；创建一个文本组件，使其显示左边滚动选择器的数据的单位：分；创建一个名为img的图片组件，src为图片的地址；创建一个名为pv2 的滚动选择器，里面的数据picker2range通过动态绑定的方式获得；创建一个名为changeAction2的onchange事件，当滚动选择器中的数据发生改变的时候，会引起onchange事件；创建一个名为btn的按钮组件，按钮上显示的文字为点击开始，点击按钮会引发clickAction事件。

代码如下：

<div class="container1">
    <div class="container2">
        <picker-view class="pv1" range="{
   {picker1range}}" selected="1" onchange="changeAction1"/>
        <text class="txt">
            分
        </text>
        <image src="/common/hm.png" class="img"/>
        <picker-view class="pv2" range="{
   {picker2range}}" selected="1" onchange="changeAction2"/>
    </div>
    <input type="button" value="点击开始" class="btn" onclick="clickAction"/>
</div>

index.css

设计index中组件的样式
设计container1组件的样式，使在.container1内的元素横向排列、居中对齐规定.container1的范围。Container1在手表上最多显示的范围就宽：454px,高：454px。

设计container2组件的样式，使在.container2的元素竖向排列，元素居中对齐
令.container2组件的外上边距为50px，高度和宽度为250px，454px；

设计滚动选择器pv1的样式、高度和宽度

设计txt组件的样式、高度和宽度使txt组件的文本居中对齐

设计滚动选择器pv2的样式、高度和宽度

设计图片组件的样式，高度、宽度、左边距和右边距

设计按钮组件的样式、高度、宽度背景颜色、边框的颜色和字体的大小

代码如下：

.container1 {
   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 454px;
    height: 454px;
}
.container2{
   
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    width: 454px;
    height: 250px;
}
.txt{
   
    text-align: center;
    width: 50px;
    height: 36px;
}
.pv1{
   
    width: 30px;
    height: 250px;
}
.pv2{
   
    width: 80px;
    height: 250px;
}
.img{
   
    width: 208px;
    height: 208px;
    margin-left: 15px;
    margin-right: 15px;
}
.btn{
   
    width: 200px;
    height: 100px;
    font-size: 38px;
    background-color: #000000;
    border-color: #000000;
}

index.js

导入要用到的router，声明变量picker1value和picker2value，并初始化变量,把数据赋予动态绑定的两个滚动选择器中的数据,点击按钮所引发的事件，点击按钮会通过router.replace跳转到倒计时页面，并把picker1value和picker2value的值通过字典的形式传递到训练页面当滚动选择器pv1和滚动选择器pv2的值发生改变时所引发的事件。当滚动器的值发生改变时通过pv.newValue获得改变后的值，并将其给picker1value或者picker2value
这样我们就完成了主页面的所有功能。

代码如下：

import router from '@system.router'
var picker1value = null;