登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记

border-bottom-width 
width 

//index.js 
//定义clickAction函数 
onInit() { 
        this.title = this.$t('strings.world'); 
    }, 
    clickAction(){ 
         console.log("我被单击了"); 
} 

//index.hml 
//按钮的onclick单击事件 
<input type="button"  value="点我" class="btn" onclick="clickAction"  /> 

onInit() { 
    console.log("主页面的onInit（）正在被调用"); 
 
    router.replace({ 
        uri:'pages/index/index' 
    }); 
}, 
onReady() { 
    console.log("主页面的onReady()正在被调用"); 
}, 
onShow() { 
    console.log("主页面的onShow()正在被调用"); 
}, 
onDestroy() { 
    console.log("主页面的onDestroy()正在被调用") 
} 

changeAction1(pv) { 
    console.log("左边的选中项：" + pv.newValue); 
}, 
changeAction2(pv) { 
    console.log("右边的选中项：" + pv.newValue); 
}, 

console.log("接收到的左边选择器的值：" + this.data1); 
console.log("接收到的右边选择器的值：" + this.data2); 

picker1value = this.key1; 
picker2value = this.key2; 
 
if (picker1value == "1") { 
    picker1seconds = 60; 
} else if (picker1value == "2") { 
    picker1seconds = 120; 
} else if (picker1value == "3") { 
    picker1seconds = 180; 
} 
 
if (picker2value == "较慢") { 
    picker2seconds = 6; 
} else if (picker2value == "舒缓") { 
    picker2seconds = 4; 
} else if (picker2value == "较快") { 
    picker2seconds = 2; 
} 
 
this.seconds = picker1seconds; 

picker1seconds=picker1value*60; 

run1() {    this.seconds--;    if (this.seconds == 0) {        clearInterval(timer1);        timer1 = null;        this.isShow = false;    }}, 

seconds: 0,//这个，必须要加上isShow:truetimer1 = setInterval(this.run1, 1000); 

run2() {    counter++;    if (counter == picker1seconds / picker2seconds) {        clearInterval(timer2);        timer2 = null;        this.breath = "已完成";    } else {        if (this.breath == "吸气") {            this.breath = "呼气";        } else if (this.breath == "呼气") {            this.breath = "吸气";        }    }}, 

run3() {    this.percent = (parseInt(this.percent) + 1).toString();    if (parseInt(this.percent) < 10) {        this.percent = "0" + this.percent;    }    if (parseInt(this.percent) == 100) {        this.percent = "0";    }    if (timer2 == null) {        clearInterval(timer3);        timer3 = null;        this.percent = "100";    }}, 

run() {    counter = counter - 1;    if (counter != 0) {        this.imgsrc = "/common/images/" + counter.toString() + ".png";        this.seconds = counter.toString();    } else {        this.imgsrc = "";        this.seconds = "";        clearInterval(timer);        timer = null;        router.replace({            uri: 'pages/index/training/training',            params: {                "key1": pv1,                "key2": pv2            }        })    }}, 

//需要的配套格式import router from '@system.router';clickAction() {        router.replace({            uri: '',            params:{"":,"":}        });    },//主页面 params:{"data1":picker1value,"data2":picker2value}//倒计时页面params: {              "key1": pv1,           "key2": pv2                }//训练页面  picker1value = this.key1;        picker2value = this.key2; 

<div class="container" onswipe="toIndexPage">

toIndexPage(e) {    if (e.direction == 'left') {        router.replace({            uri: 'pages/index/index'        });    }} 

3.18 任务18：将第1个训练报告页面的标题修改为压力占比

时间：2021年7月10日14:09:30

之后使用的数据都是随机生成的测试数据，其目的使其学会如何对数据进行分析和可视化展示

flex-direction样式用于指定容器所在组件的排列方向，可选值有两个：row和colum，分别表示水平方向和竖直方向。选其一为主轴，另外一个为副轴。

justify-content用于指定容器内所有组件在主轴上的对齐方式

align-items用于指定容器内所有组件在副轴上的对齐方式

书本里做了四个容器，关于着三个组件不同值的可视化案例教程，很清晰的把三个方法，十个可选值

3.19 任务19：在压力占比页面的标题下方显示压力分类的列表

时间：2021年7月10日14:35:38

联合使用list和list-item组件来展示一个列表中的多个列表项。

在list组件中使用for属性并通过动态数据绑定的方式指定要迭代的数组。在list-item组件中使用$item并通过动态数据绑定的方式指定迭代过程中的数组元素。

数据和显示需要分离

每一个列表项数据都可以用{{$item}}来表示

<div class="state-percent">    <text class="state">        {{ $item.state }}    </text>    <text class="state">        {{ $item.percent }}%    </text></div> 

3.20 任务20：在压力分类的右边显示对应的压力占比

时间：2021年7月10日15:09:52

在onInit()中，随机生成若干个指定范围内的整数，将其作为所有压力状态的数据。根据随机生成的整数统计每种压力状态所占的百分比，并通过动态数据绑定的方式将其显示再列表中。

Math.floor(x)用于返回小于等于x的最大整数

push()函数将生成的随机数添加到stateData数组中

onInit() {    let stateData = [];    for (let i = 0; i < 20; i++) {        stateData.push(this.getRandomInt(1, 99));    }    this.countStatePercent(stateData);}, 

调用countStatePercent()自定义函数，并将stateData作为实参传递给形参stateData

在自定义函数体中用四个计数器，通过for循环对stateData数组中的所有压力状态数据进行遍历，并在遍历过程中判断每个状态压力数据的范围，使用相应的计数器进行个数的统计

3.21 任务21：在每个列表项的下方显示压力占比的进度条

时间：2021年7月10日15:31:43

通过动态绑定的方式指定style属性的值

在list-item组件中添加一个progerss组件(进度条)，percent属性为进度。

<progress class="progress-bar" percent="{{$item.percent}}" style="color: {{$item.color}};"/> 

3.22 任务22：添加第2个训练报告页面并响应滑动事件

时间：2021年7月11日10:36:04

就是创建页面，并通过onswipe属性，触发滑动事件自动调用指定的自定义函数

switch函数+router

//最开始调试的代码！有错！关于direction的    toNextPage(e){        switch(e.direction){            case'left':            router.replace({                uri:'pages/index/index'            });            break;            case'down':            router.replace({                uri:'pages/index/report1/report1'            });        }    }} 

 Tips:直接点previewer可能会达不到效果，需要Debug(小甲虫)

大无语事件!大无语事件!

经过不断的控制变量调试，发现只有左右滑动才可以正常。上下滑动无动于衷，添加了生命周期，观察发现!上下滑动时，生命周期没有调用!!!!!!我就怀疑代码错了，然后仔细比对，发现没有问!没有问题!没有问题!那问题出现在哪儿了呢，排除跳转页面uri地址问题，排除了因为冒号引号的问题，排除了函数名变量名参数名不对应的问题，排除了其他页面有干扰的问题，然后我就怀疑标签direction的使用方法是不是错了。经过查验发现网上都是JS的direction标签、微信小程序的direction标签，CSS中direction的属性。对照Breathing源码发现，是因为新版的DevEco中上下左右的属性值变化了。新版的上下左右

上-top(老版本-up)

下-bottom(老版本-down)

左-left

右-right

最后说一句!!!好气好气好气!

时间：2021年7月11日12:24:15

//调整以后的代码toNextPage(e) {    switch (e.direction) {        case 'left':        router.replace({            uri: 'pages/index/index'        });        break;        case 'bottom':        router.replace({            uri: 'pages/index/report1/report1'        });    } 

 才学到的用ScreenToGif做GIF巨方便!

3.23 任务23：在第2个训练报告页面中显示除心率曲线之外的所有内容

时间：2021年7月11日20:17:45

设置有文本组件，心率通过动态数据绑定的方式将其显示在页面中，每个列表项都由一张图片和一个文本组成

//设置的两个图片，用动态绑定加数组简单的抒写其地址<image class="icon" src="/common/images/{{ $item.iconName }}.png"/><text class="maxmin"> 

 在data中将maxmin占位符初始化为一个字典数组，该数组包含两个字典，分表表示心率最大值和心率最小值的相关信息

data: {    maxmin: [{                 iconName: 'max',                 mValue: 0             },             {                 iconName: 'min',                 mValue: 0             }],    average: 0}, 

 把压力页面的getRandomInt的函数复制过来，该函数用于随机生成一个介于min和max之间的整数，经过for循环执行的100次迭代，在每一次迭代中自定义函数随机生成的数经过push()的添加，最后达到hearRates数组的随机定义。

getRandomInt(min, max) {    return Math.floor(Math.random() * (max - min + 1)) + min;}, onInit() {        let heartRates = [];        for (let i = 0; i < 100; i++) {            heartRates.push(this.getRandomInt(73, 159));        }        this.countMaxMinAverage(heartRates);        console.log("心率页面的onInit（）正在被调用");    },        countMaxMinAverage(heartRates) {        this.maxmin[0].mValue = Math.max.apply(null, heartRates);        this.maxmin[1].mValue = Math.min.apply(null, heartRates);        let sum = 0;        for (let index = 0; index < heartRates.length; index++) {            sum += heartRates[index];        }        this.average = Math.round(sum / heartRates.length);    } 

 耽误一阵子时间，因为生成随机素组的时候，返回参数那里，自定义函数名字用的压力页面的自定义函数导致没有，随机数组没有正常生成

最后成功

3.24 任务24：在心率曲线页面中显示绘制的心率曲线

时间：2021年7月11日21:36:20

使用chart组件绘制心率曲线图，通过动态数据绑定的方式

制作图表需要在x、y轴上面设置参数。data中将options占位符的值初始化为一个字典，字典包含两个元素，分别用于设置x轴和y轴的参数。data中将datasets初始化为一个字典，gradient用于表示折线向下填充颜色到x轴，第二个元素是data，用于指定心率图中的数据。

特别的!对于chart线条和填充的颜色我不是很满意，我就查了开发文档，对于chart的属性进行了查询，

options: {            xAxis: {},            yAxis: {                min: 0,                max: 160            }        },        datasets: [{                       strokeColor: '#1883d5',                       fillColor: '#1ed1fc',                       gradient: true,                       data: []                   }] 

 最后完成了心率页面

3.25 任务25：添加第3个训练报告页面并响应事件

时间：2021年7月11日22:15:32

就是左滑右滑的的功能实现

贯穿压力页面、心率页面、活动页面

3.26 任务26：在第3个训练报告页面中显示除活动分布图之外的所有内容

时间：2021年7月11日22:39:20

四个组件包含文本、图片的构造

定义一个名为getRandomZeraOrOne的函数，该函数用于随机生成一个整数0或1，在函数体中，Math.random()用于生成一个介于0和1之间的随机数。Math.floor(x)用于返回小于等于x的最大整数。

定义一个名为countActivityPercent的函数，其形参为activity，该函数用于技术activity中整数0和1所占百分比

3.27 任务27：在今日活动分布页面中显示绘制的今日活动分布图

时间:2021年7月11日23:16:57

与心率页面不一样的是今日活动分布页面的chart组件的type属性选择的是bar，代表是柱状图。通过stuck组件来堆叠其中的组件，从而分别绘制活动柱状图和静止柱状图。

stack：堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

3.28 任务28：添加第4个训练报告页面并响应滑动事件

时间：2021年7月12日09:42:41

添加页面并添加相应滑动，不多赘述

3.29 任务29：在第4个训练报告页面显示除压力分布图之外的所有内容

时间：2021年7月12日09:52:37

压力分布页面跟心率页面构造及其相似。四个大组件，不赘述

出现问题了!在老版本的canvas组件不能再新版本使用

canvas画布：支持手机、平板、智慧屏、智能穿戴

但不支持轻量级智能穿戴!!!Lite wearable不配

完成了!

 

3.30 任务30：在压力分布页面中绘制压力分布图

时间：2021年7月12日10:42:00

书中对于canvas画布组件的应用，不用用了现在，不过大致说一下书中的思路，通弄过canvas组件中的ref属性获得其对应的对象实例，并调用getContext(‘2d’)函数获得2D绘制引擎，在遍历所有压力数据的过程中调用fillRect()函数对压力分布图中的柱子逐一进行绘制

//书中的<canvas class="canvas" ref="canvas"></canvas> 

//现在的<chart class="chart" type="bar" options="{{ options }}" datasets="{{ datasets }}"></chart> 

这里需要说明一下，chart的type属性两种，bar表示的是柱状图，line表示的线形图。

相应的在生命周期onShow中，通过引用this.$refs.canvas获得report4组件的对象实例，然后调用getContext(‘2d‘)函数获得2D绘图引擎。然后通过forEach()函数进行对pressure数组中的随机压力值进行遍历，其中element表示在遍历过程中数组的当前元素。

//书上不能用的onShow(){var context =this.$refs.canvas.getContext('2d');    let leftTopX=0;    presuress.forEach(element =>{        context.fillStyle=this.getColorHexByValue(element);        let leftTopY=180-element *1.8;        let width=7;        let height=element*1.8;       context.fillRect(leftTopX,leftTopY,height,width);        leftTopY +=8;    });} 

//获取柱子的颜色的代码getColorHexByValue(value) {    if (value >= 80 && value <= 99) {        return "#ffa500";    } else if (value >= 60 && value <= 79) {        return "#ffff00";    } else if (value >= 30 && value <= 59) {        return "#00ffff";    } else if (value >= 1 && value <= 29) {        return "#0000ff";    }}, 

//用了chart那么这包含48个数组的pressure，就要定义48个字典定义柱子，for (let i = 0; i < 48; i++) {    let value = pressures[i];    this.datasets[i].fillColor = this.getColorHexByValue(value);    this.datasets[i].data = [value];} 

用不了画布就很麻烦!就需要在data那里就定义48组数据，每组为半个小时。

不过完成了!

3.31 任务31：添加第5个训练报告页面并响应滑动事件

时间：2021年7月12日11:05:18

跟之前的页面报告页面同样的，不赘述

3.32 任务32：在第5个训练报告页面中显示除弧形和星号之外的内容

时间：2021年7月12日11:12:12

最大摄氧量页面，需要显示页面标题、最大摄氧量及其单位、摄氧量等级水平、完全跟前几个页面的构建大同小异

不过其中不一样的地方在于，正中间的两位数字，由两个图片构成，但其中有一个关系需要体现，如果小于十，第一张图if(false)(不能用show，使用show的话就是占位符，还在那个位置，我们希望他不在)，唯独使用第二张图片显示最大摄氧量。

//对应图片的hml<div class="number-container">    <image if="{{isShow}}" class="number-icon" src="/common/{{first}}.png"/>    <image class="number-icon" src="/common/{{second}}.png"/></div> 

//对应图片的jsonInit() {    let vo2max = this.getRandomInt(1, 70);    let vo2max_str = vo2max.toString();    if (vo2max_str.length == 2) {        this.first = "num-" + vo2max_str[0];        this.second = "num-" + vo2max_str[1];    } else {        this.second = "num-" + vo2max_str;        this.isShow = false;    }    this.level = this.getLevelByValue(vo2max);}, 

 完成!

3.33 任务33：在最大摄氧量页面显示绘制的弧形

时间：2021年7月12日11:40:13

通过progress组件的type属性设置为“arc”来绘制弧形，通过stack组件来堆叠其中的子组件

progress组件percent属性设置为百分之50，添加style属性用来设置进入条样式。start-angle设置为220(起始角度)。

<progress class="progress" type="arc" percent="50" style="color : #ff0000; start-angle : 220;"> 

弧度百分之50的效果图

接下来是七彩阳光环节，哈哈哈，就是七个颜色弧形

 3.34 任务34：在最大摄氧量界面的对应弧形和角度上面显示星号

时间：2021年7月12日12:06:26

嗨，还是使用的canvas，其思路就是X-Y轴的绘制，然后添加“*”的文本

不过呢现在就用的是

//现在就比较直接添加组件，然后在js里直接设置对应位置<div class="pointer">    <text class="pointer-txt" style="margin-top: {{y}};margin-left: {{x}};">        *    </text></div> 

//css.pointer{    width: 454px;    height: 454px;    background-color: transparent;}.pointer-txt{    font-size: 38px;    color: yellow;} 

//在js的onInit的里面直接动态绑定x、y的值let angle = -230 + vo2max * (280 / 70);this.x = Math.round(218 + 193 * Math.cos(angle * Math.PI / 180));this.y = Math.round(218 + 193 * Math.sin(angle * Math.PI / 180)); 

完成!

3.35 任务35：添加学习交流联系方式页面并响应滑动事件

时间：2021年7月12日12:15:04

新建一个contact页面，添加相应的文本和router.replace的滑动跳转，不赘述，要完结了!要学完了!冲冲冲!

3.36 任务36：在学习交流联系方式页面中显示二维码并完成项目收尾

时间：2021年7月12日12:22:15

使用image组件显示二维码，就是一个收尾工作喽!冲冲冲!

完结撒花的时候因为图片的比例问题，又在华为开发文档里面去学习了一下image组件哈哈哈。

最后选的是自己以前剑网三丐帮的一张图片!

潜龙勿用!自强不息!

后面收尾有一个简单的提示语的添加(text组件)

书上的完结!

六、对项目的一些调整和感想

(一)点击重新开始的按钮太大了，下面的框框都兜不住了

时间：2021年7月12日12:59:50

对训练页面的btn按钮的进行调整(css)

.btn {    width: 280px;    height: 50px;    font-size: 38px;    background-color: aquamarine;    border-color: aquamarine;    margin-top: 15px;} 

(三)一点感想

时间：2021年7月12日13:08:29

首先我很感谢《鸿蒙应用开发实战》这一本书!当然最应该感谢的是张荣超老师，他写此书是开拓性的行为，虽然现在DevEco的版本迭代很快，书里的部分内容需要调整，但试错与改BUG本来就是一名程序猿需要去干的，原封不动的照抄代码，反而效果可能没有那么美丽!还有就是在学习的过程中我还加入了张荣超老师的粉丝企业微信，然后在里面得到了老师耐心的讲解!!!真的太佩服他了!更甚，张荣超老师在51CTO社区发的学习鸿蒙的文章也很有代表性!最近发的【张荣超老师】鸿蒙卡片开发超细致总结 ，也特别特别的详细!ps：接近凌晨十二点张老师也回复了!!!!

总结一下这本书和这段时间的学习：没有案例没有项目的学习，是支撑不起实际开发的，选择这本书就是为了可以快速的上手，在简单项目中学习DevEco的相关设置、一些快捷键的使用;DevEco中JavaScript的Lite wearable的开发，熟悉轻量级智能手表的API,

在这里就这个项目还有可能完善的地方就是，使用全部的轻量级手表专属API中，

《鸿蒙应用开发实战》使用的组件：

容器组件：div(基础容器)、list(图片文本的列表项容器)、list-item(< list >的子组件，用来展示具体的item)、stack(叠堆容器)、swiper(滑动容器)

基础组价：chart(线性图、柱状图)、image(图片)、image-annimator(图片帧动画播放器)、input(交互组件)、picker-view(嵌入页面的滑动选择器)、progress(进度条，用于显示内容加载或操作处理进度)、text(文本，用于呈现一段信息)

《鸿蒙应用开发实战》未使用的组件：

marquee:跑马灯组件，用于展示一段单行滚动的文字

qecode:生成并显示二维码。

silder:滑动条组件，用来快速调节设置值，如音量、亮度等

switch:开关选择器，通过开关，开启或关闭某个功能》

还有一些具体的注意事项我把他放到了第二点，尤其是DevEco新老版本不一样的地方需要诸君多多注意!

完结撒花 诸君共勉!学习继续 强国有我!

附上自己敲的代码

注：该文都是自己学习过程的笔记，侵删。