专注前端开发,每年100集免费视频。
首页/视频教程/ 华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程/
华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程
2021-06-11 视频教程 18436

最近程序圈最火的事情,应该就是鸿蒙系统2.0版本的发布,这标志着鸿蒙系统正式进入商用时代。

以前一个前端开发人员,能开发网页、能开发安卓系统和IOS系统,就可以说是一个合格的前端程序员了。但是鸿蒙的出现,也逼着你需要再掌握一门新系统的开发。如果你已经是一名前端,幸运的是不需要作太多的改变,只需要认真学习一下这个教程,就可以顺利的开发鸿蒙系统 。

中国加油,华为加油,前端开发小伙伴加油!

​ -- 致敬华为鸿蒙全生态底层操作系统的诞生

第一节、鸿蒙系统简介

(1)鸿蒙系统 OpenHarmony 由来

OpenHarmony 中文意思「开放、和谐」,代表了中华民族的包容和谦和,是咱们中国在移动端底层操作系统领域迈出的巨大一步,从此,在全世界我们可以说:“中国,也有自己的移动端底层操作系统了!”

鸿蒙 OpenHarmony 开源项目,目标是面向全场景、全连接、全智能时代,基于开源的方式,搭建一个智能终端设备操作系统的框架和平台,促进万物互联产业的繁荣发展。

官方概述

(2)OpenHarmony 技术架构

OpenHarmony 整体遵从分层设计,从下向上依次为:内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开,在多设备部署场景下,支持根据实际需求裁剪某些非必要的组件,前端领域的发力点核心在于应用层「拓展应用、三方应用」构建服务。

img

(3)OpenHarmony 应用层介绍

应用层包括「系统应用」和「第三方非系统应用」。应用由一个或多个 FA(Feature Ability)或 PA(Particle Ability)组成。其中,FA 有 UI 界面,提供与用户交互的能力;而 PA 无 UI 界面,提供后台运行任务的能力以及统一的数据访问抽象。基于 FA/PA 开发的应用,能够实现特定的业务功能,支持跨设备调度与分发,为用户提供一致、高效的应用体验。显然,我们前端开发小伙伴学习的核心点就在于对 FA 中 UI 层面的开发工作。

UI 部分(FA)既支持纯 JavaScript 开发,也支持纯 Java 开发,还可以 Java 跟 JavaScript 混合开发。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java,则跟 Android 一样,使用 xml 定义布局或者 Java 代码定义布局,每个页面都是一个 PageAbility,使用 Java 编写业务代码,不同的页面之间传递数据依然使用 intent。

而这里如果使用 JavaScript UI 框架的话,那么写法跟 「Vue + 小程序」 应用开发基本一模一样,同样支持 data、props、computed、watch 和 functions(methods),也能创建自定义的组件,这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师,不得不说华为在已有概念上做的整合,还是相当厉害的。

  1. HTML 基础

  2. CSS 基础

  3. JavaScript 、ECMAScript(ES6) 基础

  4. Vue 基础

  5. 小程序开发基础(事半功倍)

第二节、开发环境搭建和 HelloWorld 体验

(1)OpenHarmony 开发环境 DevEco Studio

官方概述

zh-cn_image_0000001163571565

DevEco Studio 使用约束

  • OpenHarmony 支持使用 JS 语言开发应用。
  • OpenHarmony 开发环境 DevEco Studio 支持 Windows 及 mac 系统。

(2)DevEco Studio 2.1 开发环境搭建

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

    Node.js: https://nodejs.org/en/

  1. 鸿蒙系统专用 IDE 开发环境 「 DevEco Studio 」,下载链接:

DevEco Studio: https://developer.harmonyos.com/cn/develop/deveco-studio

(3)HelloWorld 应用体验

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

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

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

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

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

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

    ![image-20210606004921453](/Users/buhe/Library/Application Support/typora-user-images/image-20210606004921453.png)

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

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

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

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

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

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

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

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

第三节、应用开发目录结构及文件使用规则介绍

(1)应用开发目录介绍

JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下:

image-20210611130545830

目录结构中文件分类如下:

  • .hml 结尾的 HML 模板文件,这个文件用来描述当前页面的文件布局结构。
  • .css 结尾的 CSS 样式文件,这个文件用于描述页面样式。
  • .js 结尾的 JS 文件,这个文件用于处理页面和用户的交互。

各个文件夹的作用:

  • app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
  • pages 目录用于存放所有组件页面。
  • common 目录用于存放公共资源文件,比如:媒体资源和 JS 文件。
  • i18n 目录用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源,注意 i18n 是开发保留文件夹,不可重命名。

(2)文件使用规则

  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)鸿蒙系统组件介绍

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

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

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

组件类型 主要组件
基础组件 text、image、progress、rating、span、marquee、image-animatordivider、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 这个文件里面。

image-20210608223815908

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

image-20210608223729358

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

image-20210608224010736

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

image-20210608220029740

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

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

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

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

image-20210608224405070

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

image-20210608222537673

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

image-20210608225238999

第五节、使用 image-animator 组件构建多图帧动画

(1)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 界面,提供后台运行任务的能力以及统一的数据访问抽象。

image-20210608233905348

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

image-20210608234035382

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

image-20210609001814674

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

https://www.iconfont.cn/search/index?searchType=icon&q=heart

  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)页面结构设计注意事项

  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 写法有很大的差异,这个尤其需要注意。

image-20210610113506095

.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 + "日"
    }
};
对不起,该文章暂时不支持留言。
最新留言

No Data

技术胖
光头Coder12年经验业余讲师免费视频被访问
文章目录