HarmonyOS_hvigor版本

1. 开发环境搭建和HelloWorld体验

1. JavaScript 项目开发依赖 Node.js 环境，下载链接：

   Node.js： Node.js

2. 鸿蒙系统专用 IDE 开发环境 「 DevEco Studio 」，下载链接：

DevEco Studio： HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

HelloWorld

PS：在 Views 可以快速设置编辑器主题，以及对应的开发设置。

• 第一步：启动应用后，提示是否创建启动程序脚本，方便后续模板选择。

• 第二步：使用华为云 npm 包管理工具。

• 第三步：创建 or 导入项目。

• 第四步：选择项目类型及模板。

  为了满足应用在多设备上运行的开发需求，DevEco Studio 2.1 Release 在原有单设备工程模板的基础上，新增了 11 个跨设备工程模板。开发者可根据工程向导，依次挑选模板和设备类型，轻松创建跨设备工程，自动生成示例代码和相关资源。

• 第五步：创建工程项目。

• 第六步：查阅并关闭开发简易提示。

• 第七步：项目自动下载对应的依赖及文件，这一步直接点击运行则会有错误提示。

• 第八步：在 DevEco Studio 菜单栏，点击Tools > SDK Manager 配置对应的 SDK 版本。

• 第九步：点击右上角 sign in 登陆华为账号，请输入已实名认证的华为帐号的用户名和密码进行登录，在网页中登陆成功后，完成授权。

• 第十步：进入到 src/main/js/default/pages/index 页面，打开 view -> Tool Windows -> Previewer 进行预览。

• 第十一步：进入 Tools -> Devices Manager 看到模拟器管理页面，这一步必须要实名认证的华为账号进行登录后，即可选择对应的设备，然后启动设备。

• 第十二步：启动设备后，再次点击 绿色运行按钮，即可在仿真设备上运行该项目。

• 应用开发目录结构及文件使用规则介绍

• 

• 1. 文件访问规则

     应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../" ，具体访问规则如下：

  • 引用代码文件，需使用相对路径，比如：../common/utils.js。

  • 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

  • 公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。

  • CSS 样式文件中通过 url() 函数创建 数据类型，如：url(/common/xxx.png)。

  • 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

  • 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

  1. 媒体文件格式

  格式	支持版本	支持的文件类型
  BMP	API Version 3+	.bmp
  JPEG	API Version 3+	.jpg
  PNG	API Version 3+	.png

  1. app.js 标签中包含了实例名称、页面路由信息。

  标签	类型	默认值	必填	描述
  name	string	default	是	标识JS实例的名字。
  pages	Array	-	是	路由信息，详见“pages”。

  name、pages 标签配置需在配置文件中的 js 标签中完成设置。pages 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：

  {  ...  "pages": [    "pages/index/index",    "pages/detail/detail"  ]  ...}
  

  说明

  • 应用首页固定为 "pages/index/index"。
  • 页面文件名不能使用组件名称，比如：text.hml、button.hml 等。

  1. 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑，包括：

  • onCreate：在应用生成时被调用的生命周期函数。
  • onDestory：在应用销毁时被调用的生命周期函数。

基础组件介绍及Chart组件使用

1. 组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

2. 鸿蒙 JS API 提供了完善的组件介绍，详细情况我们去查阅一下官方文档： 组件 - 官方介绍

3. 根据组件的功能，可以分为以下四大类：

组件类型	主要组件
基础组件	text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart
容器组件	div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件	video
画布组件	canvas

（2）chart 组件体验使用

鸿蒙系统组件相较于其他前端组件仓库，给咱们专门封装了一个 chart 组件，图表组件，用于呈现线形图、柱状图、量规图界面。

官方文档地址

使用 chart 组件进行体验，具体执行步骤如下：

1. 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
2. 配置路由，在 config.json 这个文件里面。

1. 预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
2. 切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。

1. pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。

1. 出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。

1. 图片路径引用失败不会出现文件查找失败错误提示，建议使用绝对路径进行文件路径编码，官方文档介绍在输出 hap 文件后，真机会因为 webpack 打包解析出现找不到文件的问题，不过模拟器是正常的。

   PS：小窍门，绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。

   当然，如果在同一个文件夹内部，官方文档介绍使用相对路径不会出现 webpack 打包解析找不到文件的问题，所以，在同一个文件夹内部引用，使用相对路径即可。

2. ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。

1. 使用模拟器进行模拟的时候，编辑器工具会自动打包输出 hap 文件，模拟器直接加载运行该文件，模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新，也支持多设备同时预览。

1. 调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。

 使用image-animator组件构建多图帧动画

image-animator 图片帧动画播放器，多图帧动画的构建能力一直以来都是基于 Android 安卓系统使用 Java or C#语言进行开发的，而华为鸿蒙系统将「图片帧动画播放器」引入到了 JS 前端开发领域，这无疑是一次巨大的突破，这也代表着华为鸿蒙系统对其图片渲染能力的巨大自信。

「属性、事件、样式、方法」组件四要素，官方文档介绍

（2）image-animator 图片帧动画播放器实现

1. 创建一个新的 Ablity ，新起一个抽象能力的应用服务，不同的 Ablity 之间可以通过 PA 进行调用。

   Ablity 是应用所具备能力的抽象，也是应用程序的重要组成部分。Ablity 由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。

1. 配置 Ability 对应的基础参数

1. 打开 pages.index.index.hml 启动预览器，对页面进行预览，输出基础 "你好 世界" 页面。

1. 在阿里图标库内下载 5 张心形图片，5 张图片需要注意对应不同的大小。

iconfont-阿里巴巴矢量图标库

1. 在 index.hml 文件中导入对应的页面结构代码

<div class="container">
    <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
    <div class="btn-box">
        <input class="btn" type="button" value="start" @click="handleStart" />
        <input class="btn" type="button" value="stop" @click="handleStop" />
        <input class="btn" type="button" value="pause" @click="handlePause" />
        <input class="btn" type="button" value="resume" @click="handleResume" />
    </div>
</div>

1. 导入 css 样式文件

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
.animator {
    width: 70px;
    height: 70px;
}
.btn-box {
    width: 264px;
    height: 120px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.btn {
    border-radius: 8px;
    width: 120px;
    margin-top: 8px;
}

1. 设置图片文件 data model 并 export 出来 common.datas.imgs.js

export default [
    {
        src: "../images/heart50.png",
    },
    {
        src: "../images/heart60.png",
    },
    {
        src: "../images/heart70.png",
    },
    {
        src: "../images/heart80.png",
    },
    {
        src: "../images/heart90.png",
    },
    {
        src: "../images/heart100.png"
    }
]

1. 在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。

 import imgs from "../../common/datas/imgs.js"
 export default {
     data: {
         frames:imgs
     },
     handleStart() {
         this.$refs.animator.start();
     },
     handlePause() {
         this.$refs.animator.pause();
     },
     handleResume() {
         this.$refs.animator.resume();
    },
     handleStop() {
         this.$refs.animator.stop();
     },
 };

1. 图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径。

 export default [
     {
         src: "/common/images/heart50.png",
     },
     {
        src: "/common/images/heart60.png",
     },
     {
         src: "/common/images/heart70.png",
     },
     {
         src: "/common/images/heart80.png",
     },
     {
         src: "/common/images/heart90.png",
     },
     {
         src: "/common/images/heart100.png"
     }
 ]

1. 图片动画并未出现，为什么呢？因为图片的渲染机制是直接更改到对应的大小，所以，我们需要保证心形在图片中占有的位置，使用截图工具截图后，终于出现了心形跳动的结果。

TodoList 应用构建

1. 页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
2. 文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。
3. 可以直接调用 鸿蒙 JS 封装好的 组件，这里我们使用的是 switch 组件。

<div class="container">
    <text class="title">待办事项</text>
    <div class="item">
        <text class="todo">8点产品需求会议</text>
        <switch showtext="true" checked="true"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="item">
        <text class="todo">9点开始开发工作</text>
        <switch showtext="true" checked="false"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="item">
        <text class="todo">18点</text>
        <switch showtext="true" checked="false"
                texton="完成" textoff="待办"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">删除</button>
    </div>
    <div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">2</text>
        <text class="info-text">件事情待办，加油！</text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo">添加待办</button>
    </div>
</div>

（2）页面样式设计注意事项

1. 页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。
2. 页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
3. 鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意。

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 100px;
}
.title {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
        font-size: 28px;
}
.item{
    width: 325px;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo{
    color: #000;
    width: 180px;
    font-size: 18px;
}
.switch{
    font-size: 12px;
    texton-color: green;
    textoff-color:red;
    text-padding: 5px;
    width: 100px;
    height: 24px;
    allow-scale: false;
}
.remove {
    font-size: 12px;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    color: #fff;
    background-color: red;
}
.info{
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text {
    font-size: 18px;
    color: #AD7A1B;
}
.info-num{
    color: orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.add-todo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
}
 
.plan-input {
    width: 240px;
    height: 40px;
    background-color: #fff;
}
.plan-btn {
    width: 90px;
    height: 35px;
    font-size: 15px;
}

（3）数据渲染与事件绑定

1. 第三方 JSON 数据导入，注意使用相对路径

export default [
    {
        info: '给老王打个电话',
        status: true
    },
    {
        info: '输出工作计划',
        status: false
    },
    {
        info: '和小王对接需求',
        status: true
    },
    {
        info: '整理客户资料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]
import todoList from "../../common/datas/todoList.js"

1. 数据绑定

   与vue用法类似

   hml {{ 变量名 }}

   js 变量放在 data 中

export default{
    data:{
        变量名： value
    }
}

1. 列表渲染（for)

   tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。

   写法1（都不指定）：<div for="{{array}}" tid='id'></div> ,$idx代表元素索引，$item代表数组元素

   写法2（指定元素名称）：<div for="{{value in array}}" tid='id'></div>，$idx 代表元素索引，value 代表数组元素

   写法3（指定索引和元素名称）：<div for="{{(index,value) in array}}" tid='id'></div> ，index代表元素索引，value代表数组元素。

2. 事件绑定

   类似 v-on，在 js 中绑定的函数和 data 同级

   hml：<div onclick="clickfunc"></div> 或 <div @click="clickfunc"></div>

   js： 放在 data 后:

export default{
    data:{
    },
    clickfunc: function(){
        ......
    }
}

1. 使用计算属性 computed 和 Vue 中的用法一样，依赖 data 中的数据进行计算，return 返回计算的结果。

import todoList from "../../common/datas/todoList.js"
export default {
    data: {
        // 待办事件列表
        todoList,
        inputTodo: "IDE无法调用输入"
    },
    computed: {
        needTodoNum(){
            let num = 0;
            this.todoList.forEach(item => {
                if(!item.status){
                    num++;
                }
            });
            return num;
        }
    },
    remove(index){
        console.log(index)
        this.todoList.splice(index,1)
    },
    addTodo() {
        console.log("在这里设置一个新值");
        this.todoList.push({
            info:'键盘输入',
            status: false
        })
    },
    checkStatus(index){
        console.log(index);
        this.todoList[index].status = !this.todoList[index].status;
    }
}

PS：需要注意的是 Prview 预览模拟器在 MAC 上无法接收键盘输入的内容，但是在真机模拟器上是正常的。我们使用一个日期选择器来模拟输入，在鸿蒙 JS 系统上没有 双向数据绑定，需要我们自行实现双向数据绑定。

<picker type="date" onchange="dateChange">{{date}}</picker>

export default {
    data: {
        date:'请选择日期'
    },
    dateChange(e){
        console.log(JSON.stringify(e))
        this.date = e.year + "年" + e.month + "月" + e.day + "日"
    }
};