本文是照著張榮超老師的影片教程的實操
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103819156.png#pic_center)

```bash
功能：

1. 左側時間選擇器
 2. 右側呼吸速度選擇器
 3. 下方開始按鈕
 4. 中間呼吸狀態

注：

1. 本文不講解開發環境的搭建，如有需要可以參考開發環境搭建：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202355439466190732&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202355439466190732&fid=0101303901040230869)
 2. 原文可以到語雀去搜：鴻蒙，搜尋結果排第一的作者：（目前）chatterzhao ，即為本文的作者，那邊的文件還有一些其他教程。
 3. 文中有的連結不能直接開啟，大家可以右鍵開啟。
 4. 倉庫地址：[https://gitee.com/zhaoquan/harmonyoswatchdemo](https://gitee.com/zhaoquan/harmonyoswatchdemo)
```

## 一、專案建立

```bash

- IDE 名字中的 DevEco 好像讀：戴微扣，僅供參考
 - 建立 TV 和 Wearable 專案可以選擇 JS 或 Java 開發框架；建立 Lite Wearbale 目前預設是 JS 框架

```
建立專案
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103134250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

如果你的 IDE 已經啟動了專案，則從 HuaWei DevEco Studio 的 File -> New -> NewProject，建立一個專案，專案名叫：HuXi
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103617475.png#pic_center)

填寫專案名及專案儲存路徑
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103623595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

專案建立成功介面長這樣，後面我們的開發主要在 pages 下面進行

```bash
鴻蒙 JS 框架跟小程式思路很像，小程式開發者很容易入門，非常務實
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103633210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

我們把 Hello World 在預覽器中開啟

```bash
需要進入到具體頁面編輯程式碼，比如將雙擊 index.hml，然後將游標停留在程式碼上，再去點選單才顯示 Previewer
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103658635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

我們還可以把 Hello World 在遠端虛擬裝置開啟

```bash
點選下面的 HVD Manager，如果 IDE 還沒有登入開發者賬號，會自動啟動預設瀏覽器進行登入。
華為手機直接用手機上的：設定->賬號中心（列表第一個）-> 右上角掃碼功能掃碼登入。
如果非華為手機可以使用手機號+驗證碼或密碼登入。
注意：
賬號如果沒有實名，或者實名稽核透過時間不足10分鐘，也可能無法登入成功，請實名後再試。
虛擬裝置有使用時間時間限制，使用後及時關閉，開發中建議多用上面的預覽器或模擬器，少用遠端虛擬裝置。
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103712714.png#pic_center)

重新整理
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103719526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

啟動遠端模擬器
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103729979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

啟動成功：

```bash
每次啟動只有 60 分鐘使用時長，測試完畢建議及時關閉
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200925103737180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

至此專案準備工作就完成了

---
## 二、開始擼程式碼
為了防止文章太長，這裡不繼續。下一篇文章的連結：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869)

---
原文連結：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356376262560775&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356376262560775&fid=0101303901040230869)
作者：chatterzhao

上手做一個華為鴻蒙手錶應用 1 - 建立專案

相關文章