border-bottom-width 
width 

//index.js 
//定義clickAction函數(shù) 
onInit() { 
        this.title = this.$t('strings.world'); 
    }, 
    clickAction(){ 
         console.log("我被單擊了"); 
} 

//index.hml 
//按鈕的onclick單擊事件 
<input type="button"  value="點(diǎn)我" class="btn" onclick="clickAction"  /> 

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

changeAction1(pv) { 
    console.log("左邊的選中項(xiàng)：" + pv.newValue); 
}, 
changeAction2(pv) { 
    console.log("右邊的選中項(xiàng)：" + 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}//倒計(jì)時頁面params: {              "key1": pv1,           "key2": pv2                }//訓(xùn)練頁面  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 任務(wù)18：將第1個訓(xùn)練報(bào)告頁面的標(biāo)題修改為壓力占比

時間：2021年7月10日14:09:30

之后使用的數(shù)據(jù)都是隨機(jī)生成的測試數(shù)據(jù)，其目的使其學(xué)會如何對數(shù)據(jù)進(jìn)行分析和可視化展示

flex-direction樣式用于指定容器所在組件的排列方向，可選值有兩個：row和colum，分別表示水平方向和豎直方向。選其一為主軸，另外一個為副軸。

justify-content用于指定容器內(nèi)所有組件在主軸上的對齊方式

align-items用于指定容器內(nèi)所有組件在副軸上的對齊方式

書本里做了四個容器，關(guān)于著三個組件不同值的可視化案例教程，很清晰的把三個方法，十個可選值

3.19 任務(wù)19：在壓力占比頁面的標(biāo)題下方顯示壓力分類的列表

時間：2021年7月10日14:35:38

聯(lián)合使用list和list-item組件來展示一個列表中的多個列表項(xiàng)。

在list組件中使用for屬性并通過動態(tài)數(shù)據(jù)綁定的方式指定要迭代的數(shù)組。在list-item組件中使用$item并通過動態(tài)數(shù)據(jù)綁定的方式指定迭代過程中的數(shù)組元素。

數(shù)據(jù)和顯示需要分離

每一個列表項(xiàng)數(shù)據(jù)都可以用{{$item}}來表示

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

3.20 任務(wù)20：在壓力分類的右邊顯示對應(yīng)的壓力占比

時間：2021年7月10日15:09:52

在onInit()中，隨機(jī)生成若干個指定范圍內(nèi)的整數(shù)，將其作為所有壓力狀態(tài)的數(shù)據(jù)。根據(jù)隨機(jī)生成的整數(shù)統(tǒng)計(jì)每種壓力狀態(tài)所占的百分比，并通過動態(tài)數(shù)據(jù)綁定的方式將其顯示再列表中。

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

push()函數(shù)將生成的隨機(jī)數(shù)添加到stateData數(shù)組中

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

調(diào)用countStatePercent()自定義函數(shù)，并將stateData作為實(shí)參傳遞給形參stateData

在自定義函數(shù)體中用四個計(jì)數(shù)器，通過for循環(huán)對stateData數(shù)組中的所有壓力狀態(tài)數(shù)據(jù)進(jìn)行遍歷，并在遍歷過程中判斷每個狀態(tài)壓力數(shù)據(jù)的范圍，使用相應(yīng)的計(jì)數(shù)器進(jìn)行個數(shù)的統(tǒng)計(jì)

3.21 任務(wù)21：在每個列表項(xiàng)的下方顯示壓力占比的進(jìn)度條

時間：2021年7月10日15:31:43

通過動態(tài)綁定的方式指定style屬性的值

在list-item組件中添加一個progerss組件(進(jìn)度條)，percent屬性為進(jìn)度。

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

3.22 任務(wù)22：添加第2個訓(xùn)練報(bào)告頁面并響應(yīng)滑動事件

時間：2021年7月11日10:36:04

就是創(chuàng)建頁面，并通過onswipe屬性，觸發(fā)滑動事件自動調(diào)用指定的自定義函數(shù)

switch函數(shù)+router

//最開始調(diào)試的代碼！有錯！關(guān)于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:直接點(diǎn)previewer可能會達(dá)不到效果，需要Debug(小甲蟲)

大無語事件!大無語事件!

經(jīng)過不斷的控制變量調(diào)試，發(fā)現(xiàn)只有左右滑動才可以正常。上下滑動無動于衷，添加了生命周期，觀察發(fā)現(xiàn)!上下滑動時，生命周期沒有調(diào)用!!!!!!我就懷疑代碼錯了，然后仔細(xì)比對，發(fā)現(xiàn)沒有問!沒有問題!沒有問題!那問題出現(xiàn)在哪兒了呢，排除跳轉(zhuǎn)頁面uri地址問題，排除了因?yàn)槊疤栆柕膯栴}，排除了函數(shù)名變量名參數(shù)名不對應(yīng)的問題，排除了其他頁面有干擾的問題，然后我就懷疑標(biāo)簽direction的使用方法是不是錯了。經(jīng)過查驗(yàn)發(fā)現(xiàn)網(wǎng)上都是JS的direction標(biāo)簽、微信小程序的direction標(biāo)簽，CSS中direction的屬性。對照Breathing源碼發(fā)現(xiàn)，是因?yàn)樾掳娴腄evEco中上下左右的屬性值變化了。新版的上下左右

上-top(老版本-up)

下-bottom(老版本-down)

左-left

右-right

最后說一句!!!好氣好氣好氣!

時間：2021年7月11日12:24:15

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

 才學(xué)到的用ScreenToGif做GIF巨方便!

3.23 任務(wù)23：在第2個訓(xùn)練報(bào)告頁面中顯示除心率曲線之外的所有內(nèi)容

時間：2021年7月11日20:17:45

設(shè)置有文本組件，心率通過動態(tài)數(shù)據(jù)綁定的方式將其顯示在頁面中，每個列表項(xiàng)都由一張圖片和一個文本組成

//設(shè)置的兩個圖片，用動態(tài)綁定加數(shù)組簡單的抒寫其地址<image class="icon" src="/common/images/{{ $item.iconName }}.png"/><text class="maxmin"> 

 在data中將maxmin占位符初始化為一個字典數(shù)組，該數(shù)組包含兩個字典，分表表示心率最大值和心率最小值的相關(guān)信息

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

 把壓力頁面的getRandomInt的函數(shù)復(fù)制過來，該函數(shù)用于隨機(jī)生成一個介于min和max之間的整數(shù)，經(jīng)過for循環(huán)執(zhí)行的100次迭代，在每一次迭代中自定義函數(shù)隨機(jī)生成的數(shù)經(jīng)過push()的添加，最后達(dá)到hearRates數(shù)組的隨機(jī)定義。

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（）正在被調(diào)用");    },        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);    } 

 耽誤一陣子時間，因?yàn)樯呻S機(jī)素組的時候，返回參數(shù)那里，自定義函數(shù)名字用的壓力頁面的自定義函數(shù)導(dǎo)致沒有，隨機(jī)數(shù)組沒有正常生成

最后成功

3.24 任務(wù)24：在心率曲線頁面中顯示繪制的心率曲線

時間：2021年7月11日21:36:20

使用chart組件繪制心率曲線圖，通過動態(tài)數(shù)據(jù)綁定的方式

制作圖表需要在x、y軸上面設(shè)置參數(shù)。data中將options占位符的值初始化為一個字典，字典包含兩個元素，分別用于設(shè)置x軸和y軸的參數(shù)。data中將datasets初始化為一個字典，gradient用于表示折線向下填充顏色到x軸，第二個元素是data，用于指定心率圖中的數(shù)據(jù)。

特別的!對于chart線條和填充的顏色我不是很滿意，我就查了開發(fā)文檔，對于chart的屬性進(jìn)行了查詢，

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

 最后完成了心率頁面

3.25 任務(wù)25：添加第3個訓(xùn)練報(bào)告頁面并響應(yīng)事件

時間：2021年7月11日22:15:32

就是左滑右滑的的功能實(shí)現(xiàn)

貫穿壓力頁面、心率頁面、活動頁面

3.26 任務(wù)26：在第3個訓(xùn)練報(bào)告頁面中顯示除活動分布圖之外的所有內(nèi)容

時間：2021年7月11日22:39:20

四個組件包含文本、圖片的構(gòu)造

定義一個名為getRandomZeraOrOne的函數(shù)，該函數(shù)用于隨機(jī)生成一個整數(shù)0或1，在函數(shù)體中，Math.random()用于生成一個介于0和1之間的隨機(jī)數(shù)。Math.floor(x)用于返回小于等于x的最大整數(shù)。

定義一個名為countActivityPercent的函數(shù)，其形參為activity，該函數(shù)用于技術(shù)activity中整數(shù)0和1所占百分比

3.27 任務(wù)27：在今日活動分布頁面中顯示繪制的今日活動分布圖

時間:2021年7月11日23:16:57

與心率頁面不一樣的是今日活動分布頁面的chart組件的type屬性選擇的是bar，代表是柱狀圖。通過stuck組件來堆疊其中的組件，從而分別繪制活動柱狀圖和靜止柱狀圖。

stack：堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。

3.28 任務(wù)28：添加第4個訓(xùn)練報(bào)告頁面并響應(yīng)滑動事件

時間：2021年7月12日09:42:41

添加頁面并添加相應(yīng)滑動，不多贅述

3.29 任務(wù)29：在第4個訓(xùn)練報(bào)告頁面顯示除壓力分布圖之外的所有內(nèi)容

時間：2021年7月12日09:52:37

壓力分布頁面跟心率頁面構(gòu)造及其相似。四個大組件，不贅述

出現(xiàn)問題了!在老版本的canvas組件不能再新版本使用

canvas畫布：支持手機(jī)、平板、智慧屏、智能穿戴

但不支持輕量級智能穿戴!!!Lite wearable不配

完成了!

 

3.30 任務(wù)30：在壓力分布頁面中繪制壓力分布圖

時間：2021年7月12日10:42:00

書中對于canvas畫布組件的應(yīng)用，不用用了現(xiàn)在，不過大致說一下書中的思路，通弄過canvas組件中的ref屬性獲得其對應(yīng)的對象實(shí)例，并調(diào)用getContext(‘2d’)函數(shù)獲得2D繪制引擎，在遍歷所有壓力數(shù)據(jù)的過程中調(diào)用fillRect()函數(shù)對壓力分布圖中的柱子逐一進(jìn)行繪制

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

//現(xiàn)在的<chart class="chart" type="bar" options="{{ options }}" datasets="{{ datasets }}"></chart> 

這里需要說明一下，chart的type屬性兩種，bar表示的是柱狀圖，line表示的線形圖。

相應(yīng)的在生命周期onShow中，通過引用this.$refs.canvas獲得report4組件的對象實(shí)例，然后調(diào)用getContext(‘2d‘)函數(shù)獲得2D繪圖引擎。然后通過forEach()函數(shù)進(jìn)行對pressure數(shù)組中的隨機(jī)壓力值進(jìn)行遍歷，其中element表示在遍歷過程中數(shù)組的當(dāng)前元素。

//書上不能用的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個數(shù)組的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組數(shù)據(jù)，每組為半個小時。

不過完成了!

3.31 任務(wù)31：添加第5個訓(xùn)練報(bào)告頁面并響應(yīng)滑動事件

時間：2021年7月12日11:05:18

跟之前的頁面報(bào)告頁面同樣的，不贅述

3.32 任務(wù)32：在第5個訓(xùn)練報(bào)告頁面中顯示除弧形和星號之外的內(nèi)容

時間：2021年7月12日11:12:12

最大攝氧量頁面，需要顯示頁面標(biāo)題、最大攝氧量及其單位、攝氧量等級水平、完全跟前幾個頁面的構(gòu)建大同小異

不過其中不一樣的地方在于，正中間的兩位數(shù)字，由兩個圖片構(gòu)成，但其中有一個關(guān)系需要體現(xiàn)，如果小于十，第一張圖if(false)(不能用show，使用show的話就是占位符，還在那個位置，我們希望他不在)，唯獨(dú)使用第二張圖片顯示最大攝氧量。

//對應(yīng)圖片的hml<div class="number-container">    <image if="{{isShow}}" class="number-icon" src="/common/{{first}}.png"/>    <image class="number-icon" src="/common/{{second}}.png"/></div> 

//對應(yīng)圖片的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 任務(wù)33：在最大攝氧量頁面顯示繪制的弧形

時間：2021年7月12日11:40:13

通過progress組件的type屬性設(shè)置為“arc”來繪制弧形，通過stack組件來堆疊其中的子組件

progress組件percent屬性設(shè)置為百分之50，添加style屬性用來設(shè)置進(jìn)入條樣式。start-angle設(shè)置為220(起始角度)。

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

弧度百分之50的效果圖

接下來是七彩陽光環(huán)節(jié)，哈哈哈，就是七個顏色弧形

 3.34 任務(wù)34：在最大攝氧量界面的對應(yīng)弧形和角度上面顯示星號

時間：2021年7月12日12:06:26

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

不過呢現(xiàn)在就用的是

//現(xiàn)在就比較直接添加組件，然后在js里直接設(shè)置對應(yīng)位置<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的里面直接動態(tài)綁定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 任務(wù)35：添加學(xué)習(xí)交流聯(lián)系方式頁面并響應(yīng)滑動事件

時間：2021年7月12日12:15:04

新建一個contact頁面，添加相應(yīng)的文本和router.replace的滑動跳轉(zhuǎn)，不贅述，要完結(jié)了!要學(xué)完了!沖沖沖!

3.36 任務(wù)36：在學(xué)習(xí)交流聯(lián)系方式頁面中顯示二維碼并完成項(xiàng)目收尾

時間：2021年7月12日12:22:15

使用image組件顯示二維碼，就是一個收尾工作嘍!沖沖沖!

完結(jié)撒花的時候因?yàn)閳D片的比例問題，又在華為開發(fā)文檔里面去學(xué)習(xí)了一下image組件哈哈哈。

最后選的是自己以前劍網(wǎng)三丐幫的一張圖片!

潛龍勿用!自強(qiáng)不息!

后面收尾有一個簡單的提示語的添加(text組件)

書上的完結(jié)!

六、對項(xiàng)目的一些調(diào)整和感想

(一)點(diǎn)擊重新開始的按鈕太大了，下面的框框都兜不住了

時間：2021年7月12日12:59:50

對訓(xùn)練頁面的btn按鈕的進(jìn)行調(diào)整(css)

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

(三)一點(diǎn)感想

時間：2021年7月12日13:08:29

首先我很感謝《鴻蒙應(yīng)用開發(fā)實(shí)戰(zhàn)》這一本書!當(dāng)然最應(yīng)該感謝的是張榮超老師，他寫此書是開拓性的行為，雖然現(xiàn)在DevEco的版本迭代很快，書里的部分內(nèi)容需要調(diào)整，但試錯與改BUG本來就是一名程序猿需要去干的，原封不動的照抄代碼，反而效果可能沒有那么美麗!還有就是在學(xué)習(xí)的過程中我還加入了張榮超老師的粉絲企業(yè)微信，然后在里面得到了老師耐心的講解!!!真的太佩服他了!更甚，張榮超老師在51CTO社區(qū)發(fā)的學(xué)習(xí)鴻蒙的文章也很有代表性!最近發(fā)的【張榮超老師】鴻蒙卡片開發(fā)超細(xì)致總結(jié) ，也特別特別的詳細(xì)!ps：接近凌晨十二點(diǎn)張老師也回復(fù)了!!!!

總結(jié)一下這本書和這段時間的學(xué)習(xí)：沒有案例沒有項(xiàng)目的學(xué)習(xí)，是支撐不起實(shí)際開發(fā)的，選擇這本書就是為了可以快速的上手，在簡單項(xiàng)目中學(xué)習(xí)DevEco的相關(guān)設(shè)置、一些快捷鍵的使用;DevEco中JavaScript的Lite wearable的開發(fā)，熟悉輕量級智能手表的API,

在這里就這個項(xiàng)目還有可能完善的地方就是，使用全部的輕量級手表專屬API中，

《鴻蒙應(yīng)用開發(fā)實(shí)戰(zhàn)》使用的組件：

容器組件：div(基礎(chǔ)容器)、list(圖片文本的列表項(xiàng)容器)、list-item(< list >的子組件，用來展示具體的item)、stack(疊堆容器)、swiper(滑動容器)

基礎(chǔ)組價：chart(線性圖、柱狀圖)、image(圖片)、image-annimator(圖片幀動畫播放器)、input(交互組件)、picker-view(嵌入頁面的滑動選擇器)、progress(進(jìn)度條，用于顯示內(nèi)容加載或操作處理進(jìn)度)、text(文本，用于呈現(xiàn)一段信息)

《鴻蒙應(yīng)用開發(fā)實(shí)戰(zhàn)》未使用的組件：

marquee:跑馬燈組件，用于展示一段單行滾動的文字

qecode:生成并顯示二維碼。

silder:滑動條組件，用來快速調(diào)節(jié)設(shè)置值，如音量、亮度等

switch:開關(guān)選擇器，通過開關(guān)，開啟或關(guān)閉某個功能》

還有一些具體的注意事項(xiàng)我把他放到了第二點(diǎn)，尤其是DevEco新老版本不一樣的地方需要諸君多多注意!

完結(jié)撒花 諸君共勉!學(xué)習(xí)繼續(xù) 強(qiáng)國有我!

附上自己敲的代碼

注：該文都是自己學(xué)習(xí)過程的筆記，侵刪。