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新老版本不一樣的地方需要諸君多多注意!

完結撒花 諸君共勉!學習繼續 強國有我!

附上自己敲的代碼

注：該文都是自己學習過程的筆記，侵刪。