上一篇文章：前后端新机遇！为什么我建议学习鸿蒙？

往期精彩文章：

前言

大家好，我是石小石！今天，我将通过一个小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极速入门！

前端鸿蒙入门极速版：超简洁保姆级教程！纯干货，快收藏！

前言

鸿蒙开发前置知识

元服务

鸿蒙原生应用

鸿蒙应用开发入门

开发准备

基本概念

DevEco Studio工具下载

构建第一个应用

工程创建

项目预览

工程目录结构

构建第一个页面

hml、css语法简介及页面完善

js语法简介及逻辑实现

构建第二个页面

创建第二个页面

完善app页面内容

总结

知识点总结

关于类js的web开发范式

开发感受