第3章
ArkUI JS框架详细讲解
ArkUI JS UI框架是专门为JavaScript开发工程师设计的一套跨设备、高性能的类Web应用开发框架，它支持声明式编程和跨设备多态UI，采用组件化、数据驱动模式进行界面开发，极大地提高了UI的开发效率和界面逻辑的复用性。
对于前端开发人员来讲，该框架与前端目前流行的Vue 2.0框架的使用方式基本相同，熟悉Vue.js的前端开发人员基本可以零成本转到开发鸿蒙JS应用程序。
3.1ArkUI JS框架介绍
ArkUI JS应用开发框架提供了一套跨平台的类Web应用开发框架，通过Toolkit将开发者编写的HML、CSS和JS文件编译并打包成JS Bundle，解析运行JS Bundle，生成native UI View组件树并进行渲染显示。通过支持第三方开发者使用声明式的API进行应用开发，以数据驱动视图变化，避免大量的视图操作，大大降低应用开发难度，提升开发者开发体验，如图3.1所示。
图3.1鸿蒙ArkUI JS框架
3.1.1ArkUI JS框架的特征
鸿蒙ArkUI JS框架的特征如下。
1. 声明式编程
鸿蒙JS UI框架采用类HTML和CSS声明式编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的声明式编程，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。
2. 跨设备
开发框架架构上支持UI 跨设备显示能力，运行时可自动映射到不同的设备类型，开发者无感知，从而降低了开发者多设备适配的成本。
3. 高性能
开发框架包含了许多核心的控件，如列表、图片和各类容器组件等，针对声明式语法进行了渲染流程的优化。
3.1.2ArkUI JS架构介绍
ArkUI JS UI应用框架使用JavaScript语言实现了一套简单的数据劫持框架，通过数据劫持实现了界面上的组件与数据的分离，实现数据驱动式界面开发,如图3.2所示。
图3.2ArkUI JS 架构图
ArkUI JS前端组件采用类似Vue.js 2.0 框架设计模式，如图3.3所示。
图3.3MVVM模式图
3.1.3ArkUI JS运行流程
ArkUI JS 框架运行流程如图3.4所示。
图3.4ArkUI JS运行原理图
3.2创建一个ArkUI JS项目
在对HarmonyOS应用程序有了一个初步认知之后，我们使用DevEco Studio来创建一个项目，把项目运行起来，先从整体上来了解一下HarmonyOS项目的整体结构及开发工具的基本使用。
环境和工具配置好后，就可以创建一个项目了。先创建一个项目，从整体上了解一下HarmonyOS应用的整体框架。我们在一个布局里放置一个文本框，用于显示一个数字，再添加一个按钮，每次单击按钮让文本框中的数字加1。通过这样一个小程序简单地演示工具的使用和项目的基本框架。
3.2.1新建ArkUI JavaScript项目
选择File→New→New Project进行项目创建，会弹出如图3.5所示的窗口。
图3.5通过模板创建鸿蒙项目
上面的创建项目窗口可分为两块，其中Device表示目前支持的设备。设备列表中从左到右依次为手机、平板、车机、智慧屏、穿戴设备和轻型穿戴设备。
因为笔者使用JavaScript来开发，所以选择第1个，即Empty Feature Ability(JS)，单击Next按钮进入下个页面，如图3.6所示。
配置项目名、包名、使用的SDK版本及项目的保存路径后，单击Finish按钮即可，创建完成后项目会自动构建，构建成功后项目的整体结构如图3.7所示。
图3.6配置项目信息
图3.7HarmonyOS项目代码整体结构
3.2.2编写界面布局
界面使用div、text、button 3个鸿蒙内置组件。div表示垂直居中对齐，将text的字体设置为100px,button默认为胶囊形状，如代码示例3.1所示。
代码示例3.1编写界面HMLDemo1/index.hml
<div class="container">
<text class="title">
{{num}}
</text>
<button @click="updateNum">单击+1</button>
</div>
设置页面的样式，如代码示例3.2所示，这里使用FlexBox布局，这种布局也是默认的布局方式。
代码示例3.2编写界面样式Demo1/index.css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
button {
width:200px;
height:60px;
background-color: cadetblue;
}
3.2.3编写界面逻辑代码
在index.js文件中编写页面逻辑代码。在data对象中定义一个num属性，定义一个updateNum()方法。当调用updateNum()方法后，设置this.num++，实现num自增加1，如代码示例3.3所示。
代码示例3.3编写界面逻辑代码Demo1/index.js
export default {
data: {
num:0
},
onInit() {
},
updateNum(){
this.num++
}
}
现在可以单击DevEco Studio右边的Preview预览代码的效果，如图3.8所示。
图3.8Preview预览代码的效果
3.2.4通过模拟器预览效果
如果需要使用不同的模拟器进行项目测试，则首先需要登录华为开发者账号。单击Tools→DevEco Login→Sign in，如图3.9所示。
图3.9单击DevEco Login登录
单击Sign in按钮后，会自动弹出华为账号登录的页面，如图3.10所示。
图3.10登录华为开发者账号
登录成功后，需要允许HUAWEI DevEco Studio访问你的华为账号，如图3.11所示。
图3.11允许DevEco Studio访问华为账号
单击“允许”按钮后，会弹出选择虚拟设备的列表，选择需要的模拟器，单击启动按钮，如图3.12所示。
图3.12选择模拟器
单击启动选择的模拟器后，模拟器的启动效果如图3.13所示。远程模拟器的使用时间是一小时，如果超过一小时，则会自动释放模拟器，如果需要继续使用模拟器，则需要在设备列表中重新启动模拟器。
图3.13P40模拟器运行效果
启动模拟器后，单击菜单栏下面的启动按钮，如图3.14所示，单击启动按钮后，ide便开始编译，编译成功后会自动打包项目并安装到模拟器上，这里如果有多个模拟器，则可以在已经连接的设备列表中选择需要使用的模拟器，然后单击OK按钮。
图3.14启动编译后打包安装鸿蒙应用
等待编译成功并打包上传后，就可以在模拟器中预览上面页面的显示效果了，如图3.15所示。
图3.15启动编译并打包安装鸿蒙应用