From 0b32953197290cbaadbd90eea54f44540a5d5371 Mon Sep 17 00:00:00 2001 From: Fei <2792498102@qq.com> Date: Tue, 27 Sep 2022 12:17:55 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=88=91=E4=BB=AC=E7=9A=84=E8=BF=90?= =?UTF-8?q?=E5=8A=A8=E5=81=A5=E5=BA=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health | 1 + 1 file changed, 1 insertion(+) create mode 160000 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health diff --git a/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health new file mode 160000 index 00000000..801b3d28 --- /dev/null +++ b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health @@ -0,0 +1 @@ +Subproject commit 801b3d28265b35c110b830a89583034a8a7d3fdb -- Gitee From 3f5426bba893347551caab0cbfa2bd34bb564239 Mon Sep 17 00:00:00 2001 From: Fei <2792498102@qq.com> Date: Tue, 27 Sep 2022 04:18:52 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=AD=90=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=202022=5FArkUI=5FBootcamp/2792498102@qq.com+Our=5FSpo?= =?UTF-8?q?rt=5FHealth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health | 1 - 1 file changed, 1 deletion(-) delete mode 160000 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health diff --git a/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health deleted file mode 160000 index 801b3d28..00000000 --- a/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 801b3d28265b35c110b830a89583034a8a7d3fdb -- Gitee From b75ecf67f4dda2269ff1c746e8ac147fa2b6d7ab Mon Sep 17 00:00:00 2001 From: Fei <2792498102@qq.com> Date: Tue, 27 Sep 2022 12:20:06 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=88=91=E4=BB=AC=E7=9A=84=E8=BF=90?= =?UTF-8?q?=E5=8A=A8=E5=81=A5=E5=BA=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../.gitignore | 5 + .../README.md | 443 ++++++++++++++++++ .../article_imgs/dynamic.gif | Bin 0 -> 4422347 bytes .../article_imgs/health.png | Bin 0 -> 238311 bytes .../article_imgs/login.png | Bin 0 -> 166619 bytes .../article_imgs/logo.png | Bin 0 -> 115317 bytes .../article_imgs/me.png | Bin 0 -> 158407 bytes .../article_imgs/menu.png | Bin 0 -> 17616 bytes .../article_imgs/others.png | Bin 0 -> 156115 bytes .../article_imgs/sport.png | Bin 0 -> 160355 bytes .../article_imgs/static.gif | Bin 0 -> 2187223 bytes .../article_imgs/view.png | Bin 0 -> 160454 bytes .../build-profile.json5 | 41 ++ .../entry/.gitignore | 4 + .../entry/build-profile.json5 | 14 + .../entry/hvigorfile.js | 2 + .../entry/package-lock.json | 5 + .../entry/package.json | 14 + .../entry/src/main/config.json | 82 ++++ .../entry/src/main/ets/MainAbility/app.ets | 13 + .../MainAbility/commons/components/health.ets | 139 ++++++ .../ets/MainAbility/commons/components/me.ets | 125 +++++ .../MainAbility/commons/components/others.ets | 92 ++++ .../MainAbility/commons/components/sport.ets | 156 ++++++ .../ets/MainAbility/commons/images/me/fei.jpg | Bin 0 -> 25593 bytes .../images/me/\344\270\252\344\272\272.png" | Bin 0 -> 1067 bytes .../images/me/\345\205\263\344\272\216.png" | Bin 0 -> 958 bytes .../images/me/\346\224\266\350\227\217.png" | Bin 0 -> 737 bytes .../images/me/\350\256\260\345\275\225.png" | Bin 0 -> 896 bytes .../images/me/\350\256\276\347\275\256.png" | Bin 0 -> 1093 bytes .../images/me/\350\277\233\345\205\245.png" | Bin 0 -> 413 bytes .../commons/images/others/user1.png | Bin 0 -> 946 bytes .../commons/images/others/user2.png | Bin 0 -> 905 bytes .../commons/images/others/user3.png | Bin 0 -> 926 bytes .../commons/images/others/user4.png | Bin 0 -> 881 bytes .../sports/\346\213\211\344\274\270.png" | Bin 0 -> 217724 bytes .../sports/\347\237\255\347\202\256.png" | Bin 0 -> 354896 bytes .../sports/\347\257\256\347\220\203.png" | Bin 0 -> 194978 bytes .../\350\207\252\350\241\214\350\275\246.png" | Bin 0 -> 280657 bytes .../src/main/ets/MainAbility/pages/index.ets | 55 +++ .../src/main/ets/MainAbility/pages/login.ets | 127 +++++ .../src/main/ets/MainAbility/pages/logo.ets | 37 ++ .../main/resources/base/element/color.json | 8 + .../main/resources/base/element/string.json | 16 + .../src/main/resources/base/media/health.svg | 1 + .../src/main/resources/base/media/her.svg | 1 + .../src/main/resources/base/media/huawei.png | Bin 0 -> 1186 bytes .../src/main/resources/base/media/icon.png | Bin 0 -> 6790 bytes .../src/main/resources/base/media/lock.png | Bin 0 -> 751 bytes .../src/main/resources/base/media/logo.png | Bin 0 -> 3056 bytes .../src/main/resources/base/media/my.svg | 1 + .../src/main/resources/base/media/omit.png | Bin 0 -> 473 bytes .../src/main/resources/base/media/phone.png | Bin 0 -> 520 bytes .../src/main/resources/base/media/sport.svg | 1 + .../main/resources/base/media/test_svg.svg | 1 + .../src/main/resources/base/media/wechat.png | Bin 0 -> 931 bytes .../src/main/resources/base/media/weibo.png | Bin 0 -> 1240 bytes .../resources/rawfile/health/echarts.min.js | 47 ++ .../main/resources/rawfile/health/heart.html | 124 +++++ .../entry/src/ohosTest/config.json | 66 +++ .../src/ohosTest/ets/TestAbility/app.ets | 21 + .../ohosTest/ets/TestAbility/pages/index.ets | 36 ++ .../ets/TestRunner/OpenHarmonyTestRunner.ts | 80 ++++ .../src/ohosTest/ets/test/Ability.test.ets | 36 ++ .../entry/src/ohosTest/ets/test/List.test.ets | 5 + .../resources/base/element/string.json | 12 + .../ohosTest/resources/base/media/icon.png | Bin 0 -> 6790 bytes .../hvigorfile.js | 2 + .../package.json | 18 + 69 files changed, 1830 insertions(+) create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/.gitignore create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/README.md create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/dynamic.gif create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/health.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/login.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/logo.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/me.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/menu.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/others.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/sport.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/static.gif create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/article_imgs/view.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/build-profile.json5 create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/.gitignore create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/build-profile.json5 create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/hvigorfile.js create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/package-lock.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/package.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/config.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/app.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/components/health.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/components/me.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/components/others.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/components/sport.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/fei.jpg create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\344\270\252\344\272\272.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\345\205\263\344\272\216.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\346\224\266\350\227\217.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\350\256\260\345\275\225.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\350\256\276\347\275\256.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/me/\350\277\233\345\205\245.png" create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/others/user1.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/others/user2.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/others/user3.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/others/user4.png create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/sports/\346\213\211\344\274\270.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/sports/\347\237\255\347\202\256.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/sports/\347\257\256\347\220\203.png" create mode 100644 "2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/commons/images/sports/\350\207\252\350\241\214\350\275\246.png" create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/pages/index.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/pages/login.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/ets/MainAbility/pages/logo.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/element/color.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/element/string.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/health.svg create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/her.svg create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/huawei.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/icon.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/lock.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/logo.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/my.svg create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/omit.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/phone.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/sport.svg create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/test_svg.svg create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/wechat.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/base/media/weibo.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/rawfile/health/echarts.min.js create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/main/resources/rawfile/health/heart.html create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/config.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/ets/TestAbility/app.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/ets/TestAbility/pages/index.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/ets/TestRunner/OpenHarmonyTestRunner.ts create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/ets/test/Ability.test.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/ets/test/List.test.ets create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/resources/base/element/string.json create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/entry/src/ohosTest/resources/base/media/icon.png create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/hvigorfile.js create mode 100644 2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/package.json diff --git a/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/.gitignore b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/.gitignore new file mode 100644 index 00000000..91d237bb --- /dev/null +++ b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/.gitignore @@ -0,0 +1,5 @@ +/node_modules +/local.properties +/.idea +**/build +/.hvigor \ No newline at end of file diff --git a/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/README.md b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/README.md new file mode 100644 index 00000000..32fd290f --- /dev/null +++ b/2022_ArkUI_Bootcamp/2792498102@qq.com+Our_Sport_Health/README.md @@ -0,0 +1,443 @@ +## # HarmonyOS ArkUI入门训练营—健康生活实战#--我们的运动健康 +### 一、前言 +> 经过四天对HarmonyOS最新开发Api声明式开发范式Ets的学习,结合课程中的一些技术细节于相关UI的逻辑布局,本人设计并开发了此运动健康App。有些部分对华为运动健康App做出了一些参考,总的来说是自己第一次对HarmonyOS开发的一次尝试,App大部分以UI为主,也包括一些交互部分。运动健康App,其它添加了家人一栏,在万物互联的今天,不止个人的运动健康要关注,对于自己亲近的家人,更应该得到关注,所以这App叫我们的运动健康。 + +### 二、效果展示 + +* 预览器下效果(部分动态效果无法展示) +*  +* 模拟器下效果 +*  + +### 三、开发流程 +#### 3.1 项目结构展示 +*  + +#### 3.2 开发环境 + + +| 系统 | 开发环境 | API版本 | 开发方式 | +| ----- | ------------------------- | ---------------- | ------------ | +| Win10 | DevEco Studio 3.0 Release | HarmonyOS API8.0 | 声明式UI开发 | +#### 3.3 logo模块 +* logo暂留页展示 +*  +* logo页到登录页间logo的动画变化 +* +```javascript +Image($r('app.media.logo')) + .width("150") + .height("200") + .objectFit(ImageFit.Contain) + .margin({ top: 180 }) + // 动画跳转 + .sharedTransition("1001",{ + duration:500 +}) +``` + +#### 3.4 登录模块 +* 登录展示 +*  +* 登录模块为基本的UI设计(此处为登录事件的路由跳转) +* +```javascript +// 登录事件 + toLogin() { + router.push({ + url: 'pages/index' + }) + } +``` + +#### 3.5 菜单栏 +* 展示 +*  +* 菜单栏使用到了Tab与TabContent组件 +* +```javascript +// tab默认颜色 +@State tabBarDefaultColor: string = '#707070' +// 当前tab栏索引 +@State currentIndex: number = 0; +// tab项目属性 +@Builder bottomBuilderBar(name: string, image: Resource, index: number{ + Column() { + Image(image) + .width(28) + .aspectRatio(1) + .fillColor(this.currentIndex == + index ? '#7cbb6a' : this.tabBarDefaultColor) + Text(name) + .fontSize(18) + .fontColor(this.currentIndex == + index ? '#7cbb6a' : this.tabBarDefaultColor) + } + .alignItems(HorizontalAlign.Center) + .width("100%") +} +build() { + Tabs({ barPosition: BarPosition.End }) { + TabContent() { + Sport() + } + .tabBar(this.bottomBuilderBar('运动', $r('app.media.sport'), 0)) + TabContent() { + Health() + } + .tabBar(this.bottomBuilderBar('健康', $r('app.media.health'), 1)) + TabContent() { + Others() + } + .tabBar(this.bottomBuilderBar('他人', $r('app.media.her'), 2)) + TabContent() { + Me() + } + .tabBar(this.bottomBuilderBar('我的', $r('app.media.my'), 3)) + } + .margin({ bottom: 5 }) + .onChange((index) => { + this.currentIndex = index; + }) + } +``` + +#### 3.6 运动模块 +* 运动模块效果展示 +*  +* 运动页UI(轮播图展示,环形进度条,Canvas绘制统计图) +* +```javascript +// 轮播图 +Swiper() { + ForEach(this.bannerList, (item: string) => { + Image(item) + .width('100%') + .height(180) + .objectFit(ImageFit.Contain) + }) +} + .cachedCount(2) + .index(0) + .autoPlay(true) + .interval(4000) + .duration(1000) + .itemSpace(0) + .curve(Curve.Linear) + .width("100%") + .backgroundColor("#fff") + .padding(10) + .borderRadius(20) +// 环形进度条 +Text('运动步数') + .fontSize(18) + .textAlign(TextAlign.Start) + .fontColor(Color.Gray) + .width("100%") +Progress({ value: 10, total: 100, type: ProgressType.Ring }) + .color('#67C23A').value(45).width(110) + .style({ strokeWidth: 15, scaleCount: 30, scaleWidth: 20 }) + .margin({ top: 5 }) +Text('步数:6500/步') + .fontSize(16) + .textAlign(TextAlign.Center) + .fontColor(Color.Gray) + .width("100%") + .margin({ top: 5 }) +// Canvas统计图绘制 +Canvas(this.context) + .width('100%') + .height(160) + .onReady(() => { + if (!this.hasRun) { + this.context.lineWidth = 1 + this.context.strokeStyle = 'gray' + for (var i = 0; i < 5; i++) { + this.context.moveTo(10, this.winHeight - i * 30) + this.context.lineTo(this.winWidth - 10, this.winHeight - i * 30) + } + this.context.stroke() + this.context.fillStyle = "#9ed900"; + this.context.fillRect(this.winWidth / 14 * 1 - 8, this.winHeight - 140, 16, 140) + this.context.fillRect(this.winWidth / 14 * 3 - 8, this.winHeight - 120, 16, 120) + this.context.fillRect(this.winWidth / 14 * 5 - 8, this.winHeight - 100, 16, 100) + this.context.fillRect(this.winWidth / 14 * 7 - 8, this.winHeight - 125, 16, 125) + this.context.fillRect(this.winWidth / 14 * 9 - 8, this.winHeight - 90, 16, 90) + this.context.fillRect(this.winWidth / 14 * 11 - 8, this.winHeight - 115, 16, 115) + this.context.fillStyle = "#67C23A" + this.context.fillRect(this.winWidth / 14 * 13 - 8, this.winHeight - 100, 16, 100) + this.hasRun = true; + } +}) +``` + +#### 3.7 健康模块(DevEco预览器不支持WebView下统计图展示) +* 健康模块效果展示 +*  +* 心率和体温统计图用到了WebView组件,WebView组件解析Html网页,在页面中展示 +* 而Html网页线上统计图部分又用到的开源图标库Echarts +* 以下为统计图模块核心代码展示 +* (1): ets下WebView组件 +* +```javascript +Web({ src: $rawfile('health/heart.html'), controller: new WebController() }) + .width("100%") + .height(400) +``` +* (2): 以下为Html图表代码 +* +```html + + +
+ + + + + + +*T4AxYOW)-
zQOLaB-n?7u0@ 7CsPp5G~+
z;Ypt3S$@)?5R}m??YM3q;hXOXpYbW54WnA5M+#%0G%a+U`^ldyGIRZjT69PzOr~T_
zX8&Uail9!Wpa;63J!YT|nxG6Sp%B`jK{lZlN}(5OWEx7K6}q7r3ZY5Tp~BT8RJL8O
z2%;FOq93}VBbuTt3ZpLCq7OQw5&EJs8lyCtqc&Qj9y+3P$s^5Dos6Vo^J%0oI~1iSYRFj@<6A_^_gyV$
&H5G2(r#=^>m#z
zW`7+~3ftxr%VcXT1OI@K!GAg73T;qn&=xxELpZ>(H>JQEu0VjGaTZfI6RyyI=m&!8
zCxRhJf|hnuBC~;kLTEMNdM)UJF9?G%C^4+i4|nAc{Pq!hQVweYH%fC0oG=CkL<$me
zAQ}QWYcVne@^H%cZ0i(1Au|cU@<9tx3vFN`EaVPS&~BpvRqOOeq+ly50a`9GTG9uG
zzV|bwAvCvzD5TYBQ|N}_Cx@$LD(EsV`htgdsE6{xhxxLHe%Ob07>M;Eh=6E_g@}lR
zsEGKIi1G4b*%Bw&l3_sdUpnGgydp#QfGnl4U_pWxlITab5Q$X6D1*~(fpR`=7&@t9
zBvS@NsRCl#(*JzV;wmVEGjozEw%A&eI1#tli7$39!I+1G$cT$5jDOgO$4HFIc!eTTWg>Nl=tS#g7rWc7E_binUGRQa
zyw;tr7s>10@`hKt;Z3g=*E?SHdXbCsjW2uaE8h0D_r3e|E`QbAUjYAC!0;Wge+hhG
z=q5o53LXgnu=dylC0D}Aop6OId|^?VGFQLw$QF(mK@quC#3LqgiA{WB6OW=Fud&4@
zh)EVwd}cCRaLu?T@fnB?tXeT~g)!$Rh0jcH6TOlc`m_b)`F(48>|?P{y6G-)>9eyQ
z+YW4jyPtcMLOs@;0!LiJo_k2)9$R2%yMCb(+H&w+33C@gV^YtEx&NaLxA?;^>U?KA
z+qn#Pu=6b(dbFE#EYMVL*`URFGed_HWr=2Vp&gCrM=v_kf}S*?A$@5{W17;MwsfXF
zz3ESP8q}i}b*T>>>QkGvcaL(e6O+(Vq{iB)vzB$OX?<&3=Ni|$)^)FWZBr(KWK<4q
zG^bN-YDJU!*vn2fvWt!CW;6TQ%8qumr|s-YOFP@v-uAV%ZES99`k_J-$haYmVsxil
z-Rov|yA=}&R
;CVG|}{6JXRuX>>+o^hIOzMr%|@X_OOO6fnv`-cB@e
zhExH&FCh_9AeH~rAd}Qdm-I=S6iTO5N~@Gf5%QI8W