1# 时钟 2 3### 介绍 4 5本示例实现一个简单的时钟应用。本示例不涉及接口。 6 7### 效果预览 8|主页| 9|---| 10|| 11 12使用说明 13 141.安装hap包。 15 162.在桌面上找到hap包打开。 17 183.展示时钟页面。 19 20### 工程目录 21 22``` 23entry/src/main/js/default 24|---common // 定义钟表组件用到的图片资源 25| |---clock_bg.png 26| |---hour_hand.png 27| |---minute_hand.png 28| |---second_hand.png 29|---pages 30| |---index.css // 时钟首页页面样式 31| |---Index.hml // 时钟首页页面结构,包含钟表动画及下面的电子时间 32| |---Index.js // 定义实时刷新时间逻辑 33``` 34 35 36#### 相关概念 37 38TextClock：TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。 39 40### 具体实现 41 421、在首页设置一个定时器（timer），定时调用接口从index.js刷新最新消息通知，更新首页通知列表,[源码](entry/src/main/js/default/pages/index/index.js )参考; 43 442、捕捉用户动作，当用户离开首页时（onHide事件）定时器注销（clearInverval）定时器; 45 463、当用户回到小程序首页时（onShow事件），重新设置一个定时器（timer）setInterval，定时从index.js刷新最新消息通知。 47 484、实现动画样式：通过transform设置平移/旋转/缩放的属性。时钟的指针使用rotate设置x轴和y轴两个维度参数，rotate可以传入具体角度值。指针旋转角度通过计算得出。 49例如："transform : rotate\(\{\{ second \* 6 \}\}deg\)", 秒针1秒转动6度。 50 51 52 53### 相关权限 54 55不涉及。 56 57### 依赖 58 59不涉及。 60 61### 约束与限制 62 631.本示例仅支持在标准系统上运行。 64 652.本示例需要使用DevEco Studio 3.1 Canary1 (Build Version: 3.1.0.100)及以上版本才可编译运行。 66 673.如果安装本示例报错为error：install sign info inconsistent，则有可能本应用被设置为系统预置应用，已安装在系统中，此时需使用命令进行替换安装，并在替换安装后对设备进行重启操作，具体命令如下： 68 69hdc shell mount -o rw,remount / 70 71hdc file send ./entry-default-signed.hap /system/app/ohos.samples.clock/Clock_Demo.hap 72 73hdc shell reboot 74 75等设备重启后即可完成应用的替换安装，无需其他操作。 76 77如果操作完仍报错， 781.将main/config.json中 "bundleName":"ohos.samples.clock1", 792.JsCLock/build-profile.json5中"signingConfigs"：[]中签名对象删除，并重新系统签名运行，即可安装成功。 80 81### 下载 82 83如需单独下载本工程，执行如下命令： 84 85```` 86git init 87git config core.sparsecheckout true 88echo code/Solutions/Tools/JsClock/ > .git/info/sparse-checkout 89git remote add origin https://gitee.com/openharmony/applications_app_samples.git 90git pull origin master 91````
