上一篇文章: 前后端新机遇!为什么我建议学习鸿蒙?
往期精彩文章:
前言
大家好,我是石小石!今天,我将通过一个小demo,帮助前后端同学(尤其是前端)快速上手鸿蒙开发!
本教程将模拟一个穿戴设备的交互开发,成品效果如下:
至于为什么要学习鸿蒙开发 、前后端学习鸿蒙开发的优势 ,在前后端新机遇!为什么我建议学习鸿蒙?这篇文章我已经有详细介绍,不再赘述,感兴趣的点击链接查看。
鸿蒙开发前置知识
在学习鸿蒙应用开发前,我们要先了解一个重要东西:HarmonyOS SDK!
HarmonyOS SDK
是一个开放能力合集,提供应用框架、应用服务、系统、媒体、AI、图形在内的六大领域丰富完备的能力。
简单来说,借助它们我们可以实现元服务开发 、鸿蒙原生应用开发!
元服务
元服务是一种轻量程序形态,具备免安装的优点,可独立分发、运行。简单来讲,可以理解为它就是类似微信小程序、支付宝小程序的轻应用。
鸿蒙原生应用
通俗的来说,鸿蒙的原生应用包含手机、Pad、TV、车载智慧屏和穿戴设备
。理论上,开发一个应用,在这些不同的终端都是可以运行的。
要开发原生应用,我们还需要知道三个基础的东西:
- DevEco Studio
DevEco Studio
就是长的像IDEA的代码编译器
- ArkTs
ArkTS
是鸿蒙生态的应用开发语言,它在保持TypeScript(前端狂喜,哈哈哈)基本语法风格的基础上,进一步通过规范强化静态检查和分析.....
ArkTs由 Ark 和 TypeScript 两个单词组成。Ark 英[ɑːk] ,译文方舟。所以,我们可以叫ArkTs为方舟编程语言。
- ArkUI
ArkUI是一套构建分布式应用界面的声明式UI开发框架。简单来说,ArkUI是基于ArkTS的声明式的UI开发范式 ,是ArkTS语言的一个具体应用或扩展,用于构建用户界面。ArkTs和ArkUI前端同学可以简单理解为js和element UI的关系。
鸿蒙应用开发入门
具备上面的基础知识后,我们就可以进行项目开发了。
开发准备
基本概念
在开发之前,我们还需要对UI框架的进行简单说明。ArkUI框架提供了两种开发范式,分别是
- 声明式开发范式
- 兼容JS的类Web开发范式
开发范式名称 | 语言生态 | UI更新方式 | 适用场景 | 适用人群 |
---|---|---|---|---|
声明式开发范式 | ArkTS语言 | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
简单来说,对于简单的app,前端同学可以使用类Web开发范式直接上手, 对于大型复杂app,我们需要使用ArkTS原生语法编写。
我们先感受下两种写法的代码差异:
- 类Web开发范式
js
// index.thml
<div class="container">
<text class="title">
你好 {{ title }}
</text>
</div>
// index.js
export default {
data: {
title: ''
},
onInit() {
this.title = "石小石";
}
}
// index.css
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
- 声明式开发范式
js
@Entry
@Component
struct Index {
@State message: string = '你好,石小石';
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
类Web开发范式的写法简直和小程序、vue一模一样啊,前端上手嘎嘎快! 使用原生ArkTS语言开发,我们还是需要学习一些语法规范的。
DevEco Studio工具下载
工具地址:下载中心 | 华为开发者联盟-HarmonyOS开发者官网,共建鸿蒙生态
下载安装软件即可。
注:mac软件默认是英文,可以设置为中文:developer.huawei.com/consumer/cn...
构建第一个应用
本教程,我们将使用JS的类Web开发范式快速体验原生鸿蒙穿戴应用的开发,主打一个快速上手!
注意!!!!!!!!!!!!!!!!!!!!!!!!
js的类Web开发范式 分为
ArkUI.Full
和ArkUI.Lite
,后者主要用于穿戴设备开发,是ArkUI.Full的阉割版。以下教程,我们基于ArkUI.Lite官方api:文档中心
工程创建
- 点击Create Project创建工程
- 选择Application应用(tomic Service为元服务开发)
注意,后面有很多模板,模板上的图标代表这个应用可以在哪些终端运行
- 选择[Lite]Empty Ability模板(穿戴应用)
因为我们要开发一个穿戴应用,因此选用此模板。这个模板用于开发一个轻量级的应用,UI框架是ArkUI.Lite,即:兼容JS的类Web开发范式
如果选择其他模板,都是原生ArkTS语言!
项目预览
要预览项目,我们选择合适的设备,点击运行按钮即可。
工程目录结构
类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript
三段式开发方式。写起来像极了小程序开发,因此,它的项目结构也是比较简单的。
js
// 目录结构
app.js 用于全局JavaScript逻辑和应用生命周期管理
├── pages pages目录用于存放所有组件页面
│ ├── index
│ │ ├── index.hml 描述当前页面的文件布局结构
│ │ ├── index.css 描述页面样式
│ │ └── index.js 处理页面间的交互
│ ├── detail (可选)
│ │ ├── detail.hml 描述当前页面的文件布局结构
│ │ ├── detail.css 描述页面样式
│ │ └── detail.js 处理页面间的交互
├── common (可选) common目录用于存放公共资源文件,比如:媒体资源,自定义组件和JS文件。
│ ├── xxx.png
│ ├── utils.js
│ ├── style.css
│ └── component
│ ├── componentA.hml
│ ├── componentA.css
│ └── componentA.js
├── resources (可选) resources目录用于存放资源配置文件,比如:多分辨率加载等配置文件
│ ├── styles
│ │ └── default.json
│ ├── res-ldpi.json
│ ├── res-xxhdpi.json
│ └── res-defaults.json
└── i18n (可选)
├── zh-CN.json
└── en-US.json
// ...
config.json 项目配置、项目名称、版本;页面的路由配置等
注意:在鸿蒙开发中,元素标签和h5是稍有不同的,所以页面布局文件后缀叫hml
- appjs
每个应用可以在app.js自定义应用级生命周期的实现逻辑
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onCreate | () => void | 应用创建 | 当应用创建时调用。 |
onDestroy | () => void | 应用销毁 | 当应用退出时触发。 |
js
export default {
onCreate() {
console.info('页面创建');
},
onDestroy() {
console.info('页面销毁');
}
};
这和vue如出一辙,毫无学习压力。
index.hml、index.js也和vue相似,我们通过下面的功能实现进一步了解!
- config.json
config.json可以进行应用的一些基础配置,如应用名称、版本等信息等,也可以对我们的应用做一些配置。config.json中js标签的配置是我们需要了解的。
js标签中包含了实例名称、页面路由信息:name用与标识JS实例名称、pages定义每个页面的路由信息。
js
{
"app": {
"bundleName": "com.example.player",
"version": {
"code": 1,
"name": "1.0"
},
"vendor": "example"
}
"module": {
...
"js": [
{
"name": "default",
// 路由信息
"pages": [
"pages/index/index",
]
}
],
"abilities": [
{
...
}
]
}
}
构建第一个页面
需求分析:我们的第一个页面比较容易,在当前表盘展示时间即可。
技术分析:采用定时器每秒获取最新时间即可。
hml、css语法简介及页面完善
语法简洁:
HML语法官方文档参考:文档中心
HML语法基本和vue是一致的,比如数据绑定采用双花括号、事件绑定也可以用@click。
注意,在hml中,标签不同于原始的h5标签,这里的标签其实都是ArkUI封装的组件。按照功能,组件大致有三类:
组件类型 | 主要组件 |
---|---|
容器组件 | div、list、list-item、stack、swiper |
基础组件 | chart、image、image-animator、input、marquee、picker-view、progress、qrcode、slider、switch、text |
画布组件 | canvas组件、CanvasRenderingContext2D对象 |
页面布局及css实现
arduino
// hml
<div class="container">
<text class="title">{{title}}</text>
</div>
css
// css
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.title {
width: 250px;
font-size: 60px;
text-align: center;
}
js语法简介及逻辑实现
js语法简介:
JS语法官方文档参考:文档中心
js的语法和正常的前端写法几乎是没有区别的,支持ES6语法(轻量级智能穿戴仅支持部分ES6语法)。
同vue组件一样,我们在页面的JS文件中可以定义如下页面生命周期函数:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onInit | () => void | 页面初始化 | 页面数据初始化完成时触发,只触发一次。 |
onReady | () => void | 页面创建完成 | 页面创建完成时触发,只触发一次。 |
onShow | () => void | 页面显示 | 页面显示时触发。 |
onHide | () => void | 页面消失 | 页面消失时触发。 |
onDestroy | () => void | 页面销毁 | 页面销毁时触发。 |
也可以定义页面的数据模型data,data类型是对象或者函数,如果类型是函数,返回值必须是对象。
js逻辑实现
javascript
import {getTime} from "../../common/utils"
export default {
// 页面数据模型(和vue2的data概念接近)
data: {
title: ''
},
// 声明周期函数:页面初始化时调用
onInit() {
this.title = 'Hello !';
setInterval(()=>{
this.title = getTime();
},1000)
}
}
为了代码结构逻辑清晰,我们把公用方法utils进行了抽离,它的逻辑大家用脚趾头也能写出来
至此,我们的第一页面就大工告成了!
构建第二个页面
注意:多页面理论应该使用路由完成,但官方的api似乎没有更新,使用路由会报错。因此,多页面我们采取其他方式展示!
需求分析:点击第一个页面后,展示第二个页面,第二个页面展示一些app
技术分析:点击后,控制第一个隐藏,展示第二个页面即可。
创建第二个页面
第二个页面的显示,实际是一个标签条件渲染的问题,在hml中,我们可以使用下面的语法条件渲染
ini
<div class="container">
<text show="{{visible}}" > Hello World </text>
</div>
没错,和vue很像。
那么,第二个页面的创建就非常容易了。
ini
// hml
<div class="container">
<div class="container" onclick='showApp' show="{{!appVisible}}">
<text class="title" >{{title}}</text>
</div>
<div class="container" show="{{appVisible}}">
<text class="title" >app页面</text>
</div>
</div>
javascript
// js
import {getTime} from "../../common/utils"
export default {
data: {
title: '',
appVisible:false
},
showApp(){
this.appVisible = true
},
onInit() {
this.title = 'Hello !';
setInterval(()=>{
this.title = getTime();
},1000)
}
}
点击第一个页面,看看效果
现在,我们来具体完善app页面。
完善app页面内容
app页面用于展示app,每个app其实就是一个图标,我们先完成页面的基本布局。
ini
<div class="container">
<div class="container" onclick='showApp' show="{{!appVisible}}">
<text class="title" >{{title}}</text>
</div>
<div class="container" onclick='showApp' show="{{appVisible}}">
<div class="app-wrap">
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
<div class="app-item"></div>
</div>
</div>
</div>
再添加一下样式
css
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.title {
width: 250px;
font-size: 60px;
text-align: center;
}
.app-wrap{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 62px 52px 62px 62px;
}
.app-item{
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 13px;
margin-bottom: 12px;
background-color: gold;
}
一个基本的app页面框架就完成了。
上面的代码中,每一个
就代表一个app,接下来,我们只要使用image组件展示每个app的图片即可。
image组件详解:文档中心
为了代码更加简洁,我们维护一个数组,里面包含app的图片信息,然后我们用hml的列表渲染方法优化代码。
javascript
import {getTime} from "../../common/utils"
export default {
data: {
title: '',
appVisible:false,
appList:[
{name:"浏览器",url:"common/img/1.jpg",id:1},
{name:"图片",url:"common/img/2.jpg",id:2},
{name:"小米运动",url:"common/img/3.jpg",id:3},
{name:"日历",url:"common/img/4.jpg",id:4},
{name:"天气",url:"common/img/5.jpg",id:5},
{name:"健康",url:"common/img/6.jpg",id:6},
{name:"米家",url:"common/img/7.jpg",id:7},
{name:"支付宝",url:"common/img/8.jpg",id:8},
{name:"网易云",url:"common/img/9.jpg",id:9},
]
},
showApp(){
this.appVisible = true
},
onInit() {
this.title = 'Hello !';
setInterval(()=>{
this.title = getTime();
},1000)
}
}
注意,我们需要在common文件夹下引入图片资源
hml的渲染语法与vue也是极其相似的
ini
<div class="container">
<div class="container-page1" onclick='showApp' show="{{!appVisible}}">
<text class="title" >{{title}}</text>
</div>
<div class="container-page2" onclick='showApp' show="{{appVisible}}">
<div class="app-wrap">
<div class="app-item" for="{{value in appList}}" tid="id">
<image src="{{value.url}}" class="img"></image>
</div>
</div>
</div>
</div>
最后,我们在稍微调整下样式
css
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.container-page1 {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.container-page2 {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: rgb(120,157,233);
}
.title {
width: 250px;
font-size: 60px;
text-align: center;
}
.app-wrap{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 62px 52px 62px 62px;
}
.app-item{
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 13px;
margin-bottom: 12px;
}
.img{
width: 100px;
height: 100px;
}
至此,我们大工告成!我看看看效果!
总结
知识点总结
通过本篇文章,我们知道了鸿蒙开发主要有元服务开发(轻应用) 和原生应用(含系统)开发两个方向 ,完成这些开发,我们需要借助HarmonyOS SDK。
HarmonyOS SDK是一个开放能力合集,对于初学者,我们只需要会使用它的编译器DevEco Studio、了解他的开发语言ArkTs
和UI框架ArkUI
即可。
ArkUI提供两种开发范式,一种是基于ArkTS语言的声明式开发范式、另一种是基于JS语言的类Web开发范式。
声明式开发范式用于开发复杂度较大、团队合作度较高的程序,适用于移动系统应用开发人员、系统应用开发人员;
类Web开发范式用于开发界面较为简单的程序应用和卡片,适用于Web前端开发人员。
关于类js的web开发范式
本教程中,为了前端读者能够快速上手鸿蒙开发,我们使用了其ArkUi提供的类web开发范式进行开发。类web开发范式写法结合了小程序和vue的写法,对前端来说,十分简单。
在web开发范式中,所有的html标签和浏览器原生的h5标签有所不同,在鸿蒙中,这些标签其实是ArkUI提供的组件,具体支持哪些组件,我们需要查阅官方文档。
要注意的是,JS的类Web开发范式分为ArkUI.Full和ArkUI.Lite,后者主要用于穿戴设备开发,是ArkUI.Full的阉割版,相比于全量的ArkUI.Full,它支持的js语法、组件要少很多。
划重点
在鸿蒙应用开发中,官方目前推荐使用ArkTS语言进行开发,类web的开发范式已经不在推荐,在模板创建中,更是取消了使用js进行开发的选项,强制开发者使用ArkTS语言进行开发。
开发感受
以下感受仅基于类web开发范式!!!!
对于鸿蒙开发,可以看出华为有用心在进行推广、开发者工具、文档都写的十分详细。由于未深入了解其原生ArkTS语言开发,目前还不能评价其语言性能等等。但仅从类web开发范式的角度来说,我觉得开发体验欠佳!
首先就是模板默认不提供类web开发范式的模板(仅提供轻量穿戴设备模板),我很不理解,即使不主推,也应该留下入口吧?其次就是相关部分开发者文档api未更新,有些api已经过时,无法使用(如路由模块),让人看起来不得不结合百度!再一个就是关于类web开发范式的文档不够全面,虽然不做主推,但是既然有文档,我觉得写全面吧!
当然,这些不佳的体验仅仅限于被官方抛弃的类web开发范式,我相信原生的ArkTS开发一定会体验不错,毕竟整个api文档核心就是ArkTs!小小期待!
下篇预告:鸿蒙开发ArkTS极速入门!