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

Der_带鱼
发布于 2021-7-12 16:27
浏览
4收藏

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

一、书中致谢&前言

  • 2021年6月29日23:10:32
  1. ==51CTO鸿蒙技术社区==很有用
  2. 本书使用DevEoc中的平台为Lite Wearable,即轻量级的可穿戴产品的开发
  3. 本书介绍的是一个==呼吸训练系统APP==的开发全过程,
  4. 采用 ==项目导向的方式== 和 ==任务导向的方式== ,共计36个任务每个任务分为3个部分,包括运行效果、实现思路、代码详解。
  5. 本书三章,第一章为“鸿蒙操作系统简介”;第二章为“项目准备工作”;第三章为“呼吸训练实战项目”
  6. 代码下载网址

这代码使用的DevEco版本太老了!!!

二、学习完本书后自己总结的提示和建议

  1. Lite wearable和wearable所适用的API不一样!开始之前请在config.json-deviceTypel里确定自己所在的项目是Lite wearable。
  2. 同理!canvas画布组件同样在Lite wearable不支持!使用chart就行
  3. 同理!关于滑动事件。direction的值比之老版本有改变,各位读者请注意,up和down不可用,应用top和bottom来表示上下。
  4. 在预期效果达不到的时候,多用console.log(“XXXX”);打印信息,来查看函数是否如期调用。
  5. 动态数据绑定在本APP中使用极多,不管是出于显示和数据的分离作用,还是通过动态数据简化代码。都极其好用。在JS-dada中规定字典(值、数组)的格式请注意。
  6. 主页面是布局和图片旋转、倒计时页面是页面跳转、压力占比页面是进度器应用、心率页面是线形图的应用、活动页面是柱状图的应用、压力分布页面是2d绘制引擎的应用(但canvas不能用在Lite wearable,用的还是chart)、最大摄氧量页面是弧形进度的应用、学习交流页面就是贴图。
  7. 用params指定要传递的数据。
  8. 容器与组件的应用还需要更多的案例去熟悉,最终期望到达熟稔于心的地步。包含组件与组件、组价与容器。
  9. 随机数组,随机数的生成,应成为定式记住。
  10. 图片的选择image、src。
  11. 书中和资料上的代码都没有格式化,我觉得这样不好,ctrl+alt+L就代码格式化了,方便查看、方便阅读、方便修改。
  12. 页面与页面的跳转(router-uri)-URI最准确的是在config.json-Page里面看,书中的跟实际的不太一样
  13. 通过style属性中的animation-duration样式指定logo图片转动一次的时间,通过style属性中的animation-ireration-count样式指定logo图片转动
  14. 参数、形参、实参、this、自定义函数、函数调用、函数定义、逗号、冒号、循环语句、选择语句、求最大、求最小、属性值

三、第一章 鸿蒙操作系统简介

时间:2021年6月29日23:28:46

1.1 1+8+N全场景

其实也就是,构建一个基于鸿蒙生态下的IoT

1.2 分布式(理解:多个人干多个活儿)

分布式软总线与传统意义上的硬总线的区别,分布式软总线承担了任务总线、数据总线、总线中枢。任务总线:负责将应用程序在多个终端上快速分发;数据总线:负责数据在设备间的高性能分发和同步;总线中枢:负责将应用程序控制,用于自动发现并组网,以及维护设备间的拓扑关系。

  • 鸿蒙操作系统的分布式软总线可以实现异构融合网络

分布式数据管理也是鸿蒙操作系统的核心技术

四、第二章 项目准备工作

时间:2021年7月3日23:16:46

2.1 搭建开发环境(已通过之前的学习已经成功搭建)

2.11安装Node.js

2.1.2安装DevEco Studio

2.2Hello World

  • 注意一个previewer就行
  • 每个页面都包含一个hml文件(结构)、一个css文件(样式)、一个js文件(行为)
    • 具体的来讲就是,hml文件是页面的结构,用于描述页面中包含哪些组件;css文件是页面的样式,用于描述页面中的组件都长什么样子;js文件是页面的行为,用于描述页面中的组件是如何进行交互的
  • index.js 中定义了一个变量title,它的值是‘World’,是个占位符,在程序的运行过程中动态确定的,这种技术称之为动态数据绑定

五、第三章 呼吸训练实战项目

时间:2021年7月5日15:50:28

  • 综述:对于整个APP的一个介绍

3.1任务1:在主页面中添加一个按钮并响应其单击事件

时间:2006年7月6日14:17:12

  • 调试了一下午发现由于书籍用的DevEco版本太低了,导致有很多不一样,以至于运行不了。
    1. 要实现的效果:构建点我的页面

时间:2021年7月7日14:12:47

  • 经过更新DevEco Studio 2.2.0.200 x64

  • border-bottom-width
    width
    
  • 上述两者不一样,经过调试已经可以得出界面

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

  • 时间:2021年7月7日20:46:39
  • 对位置进行调整
    登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
    1. 单击该按钮后打印一条log
  • 在编程过程中,

    //index.js
    //定义clickAction函数
    onInit() {
            this.title = this.$t('strings.world');
        },
        clickAction(){
             console.log("我被单击了");
    }
    
    • ==要用,隔开,分号的英文还是中文很重要==
  • //index.hml
    //按钮的onclick单击事件
    <input type="button"  value="点我" class="btn" onclick="clickAction"  />
    
  • 编译器右上角有个小虫子,是Debug按钮(Shift+9),要想看到打印就需要Debug
  • 非模式的浮动窗口登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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

  • 因为教材使用的是Litewearable而现在2.2版本的DevEco都是Wearable了。所以不能用previewer了,就只能用远程虚拟机Device Manager
  • 成功运行登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.2任务2:添加训练页面并实现其与主页面之间的相互跳转

时间:2021年7月7日21:17:59

  • 分析:行为相似,稍作改变,可以调用router.replace()语句实现页面间的跳转,在调用该语句的时候通过Uri指定目标页面的地址
    1. 创建JS页面
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 进行跳转
  • 时间:2021年7月7日22:30:45
  • 经过不断试错,加上console.log的提示发现,训练页面可以跳转主页面,但主页面无法跳转训练页面。
    • 经过半个多小时的调试(误入歧途,妄想通过更改config.json中的deviceType来实现wearable到litewearable的转化),之前一直想的是因为previewer自身的问题,认为无法跳转是因为项目本身是wearable的,而不是Litewearable的导致了认知偏差,完全没有想到是uri出了问题。
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
    • 最后完成的效果如下GIF

3.3任务3:验证应用和每个页面的生命周期事件

  • 该任务的目的就是通过打印生命周期各个阶段的名称,来感受每个页面的生命周期

时间:2021年7月7日22:43:05

  • 生命周期(onInit-onReady-onShow-onDestroy)

  • onInit() {
        console.log("主页面的onInit()正在被调用");
    
        router.replace({
            uri:'pages/index/index'
        });
    },
    onReady() {
        console.log("主页面的onReady()正在被调用");
    },
    onShow() {
        console.log("主页面的onShow()正在被调用");
    },
    onDestroy() {
        console.log("主页面的onDestroy()正在被调用")
    }
    
  • 其具体实现登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.4 任务4:在主页面中显示logo和两个选择器

时间:2021年7月7日23:09:03

  • 思路:使用Image组件显示鸿蒙呼吸训练的logo。使用picker-view组件显示logo左右两边的选择器。
  • 关于copy图片的hm.png的问题卡了一阵子
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 之后是关于图片与按钮的自适应问题调试了一阵子
  • 时间:2021年7月7日23:47:20
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 时间:2021年7月8日14:18:57
  • 卡了太久太久了。从上午到下午,不过有经验了,以后有问题从开发文档进行查询答案。
  • 下午下课问了四个实训老师,还是存在问题
  • 时间:2021年7月8日23:29:21
  • 在51CTO学院张荣超老师的企业微信群里问了问题,希望可以得到解答
  • 时间:2021年7月8日23:44:47
  • 张荣超老师回复!发了源码,我进行研究研究。
  • 终于解决了!!!!
  • 时间:2021年7月9日00:59:21
  • 存在两个问题:
    • 1.app.js中引号的问题
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
      1. ==Litewearable的JS API与wearable的API不兼容。==,所以我把config.json改了
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
      1. 最后修改后的页面
    • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.5 任务5:在指定选择器的默认选中项并获取选中项的值

  • 时间:2021年7月9日09:09:54

  • range的类型:==Array==

    • 使用时需要使用数据绑定的方式,如range = {{data}},js中声明相应变量:==data:[“15”, “20”, “25”]==。
  • selected的相关说明:

    • ==selected==:设置文本选择器的默认选择值,该值需要为range的索引。
    • 设置时间选择器的默认取值,格式为 HH:mm;
  • ==change==的说明:

    • 在使用的时候要用onchange

    • 文本选择器选定值后触发该事件。参数:{ newValue: newValue, newSelected: newSelected }

    • 时间选择器选定值后触发该事件。参数:{ hour: hour, minute: minute}

    • changeAction1(pv) {
          console.log("左边的选中项:" + pv.newValue);
      },
      changeAction2(pv) {
          console.log("右边的选中项:" + pv.newValue);
      },
      
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.6 任务6:将主页中选择器的值传递到训练页面

  • 时间:2021年7月9日14:35:07

  • 页面跳转的时候:用uri指定目标页面,用==params==指定要传递的数据。

  • 在生命周期事件函数onInit()中获取主页面传递过来党的值,并将其打印到log中,因为选择器的值存放在了一个字典中,并且对应的key分别是data1和data2,所以训练页面中可以通过==this.data1==获取传递过来的左边选择器的值,右边同理。

  • console.log("接收到的左边选择器的值:" + this.data1);
    console.log("接收到的右边选择器的值:" + this.data2);
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.7 任务7:修改主页面和训练页面中按钮的文本及样式

  • 时间:2021年7月9日14:52:17

  • 对font-size样式修改按钮的文本大小

  • 通过background-color样式修改按钮的背景颜色

  • 通过border-color样式修改按钮的边框颜色

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

    • 按钮颜色还挺好看的
  • training页面的按钮同理

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

3.8 任务8:在训练页面显示总共需要坚持的秒数

时间:2021年7月9日15:03:43

  • 因为training页面需要显示主页面选择器选择的值作为参数,所以这里需要采用动态绑定的方式。

  •     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;
    

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

3.9 任务9:在训练页面倒计时显示再坚持的秒数

时间:2021年7月9日15:23:13

  • 在训练页面的生命周期事件函数onShow()中调用==setInterval()==函数创建一个定时器,并在调用时指定定时器要执行的动作及其时间间隔

  • run1() {    this.seconds--;    if (this.seconds == 0) {        clearInterval(timer1);        timer1 = null;        this.isShow = false;    }},
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.10 任务10:再坚持的秒数在倒计时结束时隐藏显示的文本

时间:2021年7月9日15:33:33

  • 将某个组件的show属性的值设置为false从而隐藏该组件

    • 注意:隐藏组件之后,它在页面中所占的空间仍然存在
  • seconds: 0,//这个,必须要加上isShow:truetimer1 = setInterval(this.run1, 1000);
    

3.11 任务11:在训练页面根据呼吸节奏交替显示“吸气”和“呼气”

时间:2021年7月9日15:38:36

  • 在training页面交替显示,就需要在training页面的生命周期函数onShow()中调用==setInterval()==创建一个定时器,并在调用时指定定时器要执行的动作及其时间间隔。

  • 因为我们设定了较慢、舒缓、较快,所以这里有一个节奏的转换,也就是说要用不同的时间间隔区别不同的selected的选择

  • 需要声明一个全局变量counter作为计时器,将其初值设置为0

  • run2() {    counter++;    if (counter == picker1seconds / picker2seconds) {        clearInterval(timer2);        timer2 = null;        this.breath = "已完成";    } else {        if (this.breath == "吸气") {            this.breath = "呼气";        } else if (this.breath == "呼气") {            this.breath = "吸气";        }    }},
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.12 任务12:每次吸气或呼气时都实时显示进度百分比

时间:2021年7月9日16:18:34

  • 还是使用定时器

  • 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";    }},
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.13 任务13:每次吸气或呼气时logo都顺时针转动一周

时间:2021年7月9日17:13:22

  • 通过style属性中的==animation-duration==样式指定logo图片转动一次的时间,通过style属性中的==animation-ireration-count==样式指定logo图片转动
  • logo顺时针转动一周的时间,就是一次呼气或吸气的时间picker2secons,但是对于training.hml中的animation-duration样式,要指定其点位“s”,因此要将picker2seconds+“s”赋值给data中的duration。
  • logo转动的次数就是吸气和呼气的总次数,即picker1seconds/picker2seconds。
  • 时间:2021年7月10日09:14:02
  • 排查了很久为什么图片转不起来
  • 原因居然在这里:
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 可恶!
  • 终于成功了!
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.14 任务14:添加倒计时页面并实现由主页向其跳转

时间:2021年7月10日09:17:46

  • 就是创建新页面。新布局,新组件
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.15 任务15:在倒计时页面进行训练指引的3秒倒计时

时间:2021年7月10日09:25:24

  • 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            }        })    }},
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

3.16 任务16:3秒倒计时结束后跳转到训练页面并传递主页面的数据

时间:2021年7月10日09:37:38

  • 单击主页面中的按钮跳转到倒计时页面,读秒结束后,跳转到训练页面并将主页的数据传递给训练页面

  • 倒计时页面中,将主页面传递的值作为==value==存放在字典中,并且通过==params==传递给训练页面。在训练页面中通过==key==,从字典中获取两个选择器的值。

  • 梳理:

    • //需要的配套格式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;
      

3.17 任务17:呼吸训练结束后右滑查看训练报告

时间:2021年7月10日09:56:58

  • 在多个连续的text组件中使用==if-elif-else==结果,以便从中选择一个text组件进行显示。在页面的最外层div组件中添加==onswipe==属性,从而在页面触发滑动事件时自动调用指定的自定义函数

  • 关于if-elif-else的使用说明:因为再坚持这个text在倒计时结束以后会null,但空间并没有释放,所以需要在相同的位置进行多文本的选择,以便让空间得以充分应用

  • 右滑:在训练页面,添加一个自定义函数,定义一个形参,在函数体中通过==e.direction==的值判断滑动的方向,如果等就跳转

  • 关于onswipe属性:设置值为自定义的toReport1Page函数,这样右滑的时候触发页面的==onswipe==事件,从而调用自定义的toReport1Page函数。

  • <div class="container" onswipe="toIndexPage">
    
  • toIndexPage(e) {    if (e.direction == 'left') {        router.replace({            uri: 'pages/index/index'        });    }}
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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>
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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

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

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数组中的所有压力状态数据进行遍历,并在遍历过程中判断每个状态压力数据的范围,使用相应的计数器进行个数的统计

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

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}};"/>
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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巨方便!

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

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);    }
  • 耽误一阵子时间,因为生成随机素组的时候,返回参数那里,自定义函数名字用的压力页面的自定义函数导致没有,随机数组没有正常生成

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

  • 最后成功

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

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

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

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

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

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

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

     options: {            xAxis: {},            yAxis: {                min: 0,                max: 160            }        },        datasets: [{                       strokeColor: '#1883d5',                       fillColor: '#1ed1fc',                       gradient: true,                       data: []                   }]
    
  • 最后完成了心率页面

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

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

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

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

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

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

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所占百分比

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 完成了!

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

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组数据,每组为半个小时。

  • 不过完成了!

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

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

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

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

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

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);},
    
  • 完成!
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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的效果图
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 接下来是七彩阳光环节,哈哈哈,就是七个颜色弧形
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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));
  • 完成!
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

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

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

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

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

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

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

  • 使用image组件显示二维码,就是一个收尾工作喽!冲冲冲!
  • 完结撒花的时候因为图片的比例问题,又在华为开发文档里面去学习了一下image组件哈哈哈。
  • 最后选的是自己以前剑网三丐帮的一张图片!
  • 潜龙勿用!自强不息!
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 后面收尾有一个简单的提示语的添加(text组件)
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区
  • 书上的完结!

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

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

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

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

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

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

  • .btn {    width: 280px;    height: 50px;    font-size: 38px;    background-color: aquamarine;    border-color: aquamarine;    margin-top: 15px;}
    
  • 登堂—HarmonyOS Practice《鸿蒙应用开发实战-张荣超》|自学笔记-鸿蒙开发者社区

(三)一点感想

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

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

  2. 总结一下这本书和这段时间的学习:没有案例没有项目的学习,是支撑不起实际开发的,选择这本书就是为了可以快速的上手,在简单项目中学习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:开关选择器,通过开关,开启或关闭某个功能》

    1. 还有一些具体的注意事项我把他放到了第二点,尤其是DevEco新老版本不一样的地方需要诸君多多注意!
    2. 完结撒花 诸君共勉!学习继续 强国有我!
    3. 附上自己敲的代码

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-7-12 18:54:53修改
10
收藏 4
回复
举报
13条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

从楼主的文章可以看出楼主的用心(如果能把掉的图片补上就更好了)

1
回复
2021-7-12 18:12:17
Der_带鱼
Der_带鱼 回复了 红叶亦知秋
从楼主的文章可以看出楼主的用心(如果能把掉的图片补上就更好了)

也是学会使用图库!之前已经在本地的图片就一张一张通过PicGO上传到gitee。马上补!

回复
2021-7-12 18:42:30
Anzia
Anzia

哇,太详细了。可惜自己没系统学过JS

回复
2021-7-12 20:56:46
Whyalone
Whyalone

真 · 详细

回复
2021-7-12 21:42:13
没用的喵叔
没用的喵叔

楼主确实用心了,阅读体验很舒服!

回复
2021-7-12 23:43:10
张荣超_九丘教育
张荣超_九丘教育

全新版鸿蒙系列视频课程(第1季)即将上线!上线后记得联系我哈,免费送给你^_^

2
回复
2021-7-13 00:05:10
Der_带鱼
Der_带鱼 回复了 张荣超_九丘教育
全新版鸿蒙系列视频课程(第1季)即将上线!上线后记得联系我哈,免费送给你^_^

要得,要得!!谢谢老师!

回复
2021-7-13 08:26:01
爱吃土豆丝的打工人
爱吃土豆丝的打工人

学习学习~~   即将入手js,感觉js+java能提高一点开发效率。

回复
2021-7-13 08:39:37
niuyve
niuyve

不错,书在哪里卖?还有有电子版?

 

回复
2021-7-13 11:02:21
Der_带鱼
Der_带鱼 回复了 niuyve
不错,书在哪里卖?还有有电子版?

书在某宝某京都有!电子版不知道耶

回复
2021-7-13 12:23:11
太极跑爱好者
太极跑爱好者 回复了 niuyve
不错,书在哪里卖?还有有电子版?

多看阅读APP有电子版,我买了,北京多看科技有限公司的

回复
2021-7-13 16:50:30
太极跑爱好者
太极跑爱好者

我上个月下版本,手机模拟器都有,不需要远程模拟器

回复
2021-7-13 17:20:33
Der_带鱼
Der_带鱼 回复了 太极跑爱好者
我上个月下版本,手机模拟器都有,不需要远程模拟器

后面都是模拟器,前面不是很懂就用的远程模拟器。嘿嘿

回复
2021-7-13 17:43:21
回复
    相关推荐