鸿蒙HarmonyOS学习手册_入门篇
鸿蒙HarmonyOS学习手册_入门篇入门
快速入门
开辟准备
本文档实用于HarmonyOS应用开辟的初学者。通过构建一个简单的具有页面跳转/返回功能的应用（如下图所示），快速了解工程目录的主要文件，认识HarmonyOS应用开辟流程。
https://i-blog.csdnimg.cn/blog_migrate/93a4bb812b8eb3f8c3e027fabd5ba6a6.png
在开始之前，您需要了解有关HarmonyOS应用的一些基本概念：UI框架的简单说明、应用模子的基本概念。
基本概念
UI框架
HarmonyOS提供了一套UI开辟框架，即方舟开辟框架（ArkUI框架）。方舟开辟框架可为开辟者提供应用UI开辟所必需的能力，好比多种组件、结构盘算、动画能力、UI交互、绘制等。
方舟开辟框架针对不同目的和技术背景的开辟者提供了两种开辟范式，分别是基于ArkTS的声明式开辟范式（简称“声明式开辟范式”）和兼容JS的类Web开辟范式（简称“类Web开辟范式”）。以下是两种开辟范式的简单对比。
开辟范式名称 语言生态 UI更新方式 实用场景 实用人群 声明式开辟范式 ArkTS语言 数据驱动更新 复杂度较大、团队合作度较高的程序 移动体系应用开辟人员、体系应用开辟人员 类Web开辟范式 JS语言 数据驱动更新 界面较为简单的程序应用和卡片 Web前端开辟人员 更多UI框架的开辟内容及指导，详见UI开辟。
应用模子
应用模子是HarmonyOS为开辟者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模子，开辟者可以基于一套统一的模子举行应用开辟，使应用开辟更简单、高效。请见应用模子的构成要素。
随着体系的演进发展，HarmonyOS先后提供了两种应用模子：
[*]FA（Feature Ability）模子： HarmonyOS API 7开始支持的模子，已经不再主推。FA模子开辟可见FA模子开辟概述。
[*]Stage模子： HarmonyOS API 9开始新增的模子，是目前主推且会恒久演进的模子。在该模子中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模子为Stage模子。Stage模子开辟可见Stage模子开辟概述。
FA模子和Stage模子的整体架构和计划思想等更多区别，请见应用模子解读。
快速入门提供了一个含有两个页面的开辟实例，并利用了不同的开辟语言或不同的应用模子举行开辟，以便开辟者明白以上基本概念及应用开辟流程。
工具准备
[*]安装最新版DevEco Studio。
[*]请参考配置开辟环境，完成DevEco Studio的安装和开辟环境配置。
完成上述利用及基本概念的明白后，可参照构建第一个ArkTS应用（Stage模子）、构建第一个ArkTS应用（FA模子）、构建第一个JS应用（FA模子）中的任一章节举行下一步体验和学习。
构建第一个ArkTS应用（Stage模子）-快速入门-入门
说明
为确保运行效果，本文以利用DevEco Studio 3.1 Release版本为例，点击此处获取下载链接。
创建ArkTS工程
[*] 若首次打开DevEco Studio，请点击Create Project创建工程。假如已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
[*] 选择Application应用开辟（本文以应用开辟为例，Atomic Service对应为元服务开辟），选择模板“Empty Ability”，点击Next举行下一步配置。
https://i-blog.csdnimg.cn/blog_migrate/3ab12cc0a1f325caf302c6e986ca886b.png
[*] 进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，Model 选择“Stage”，其他参数保持默认设置即可。
https://i-blog.csdnimg.cn/blog_migrate/e9041968ea03da6925cf4a87da9e1fa0.png
说明
支持利用ArkTS低代码开辟方式。
低代码开辟方式具有丰富的UI界面编辑功能，通过可视化界面开辟方式快速构建结构，可有效低落开辟者的上手资本并提升开辟者构建UI界面的服从。
如需利用低代码开辟方式，请打开上图中的Enable Super Visual开关。
[*] 点击Finish，工具会自动天生示例代码和相关资源，等候工程创建完成。
ArkTS工程目录结构（Stage模子）
https://i-blog.csdnimg.cn/blog_migrate/d896989d0b3e70a8acf24eee7875f60c.png
[*]AppScope > app.json5：应用的全局配置信息。
[*]entry
[*]src > main > ets：用于存放ArkTS源码。
[*]src > main > ets > entryability：应用/服务的入口。
[*]src > main > ets > pages：应用/服务包含的页面。
[*]src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、结构文件等。关于资源文件，详见资源分类与访问。
[*]src > main > module.json5：Stage模子模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
[*]build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。此中targets中可配置当前运行环境，默以为HarmonyOS。
[*]hvigorfile.ts：模块级编译构建使命脚本，开辟者可以自定义相关使命和代码实现。
[*]oh_modules：用于存放三方库依靠信息。关于原npm工程适配ohpm利用，请参考历史工程迁移。
[*]build-profile.json5：应用级配置信息，包括署名、产品配置等。
[*]hvigorfile.ts：应用级编译构建使命脚本。
构建第一个页面
[*] 利用文本组件。
工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示比方下：
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
[*] 添加按钮。
在默认页面基础上，我们添加一个Button组件，作为按钮相应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示比方下：
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
[*] 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/ddc0b67ba01f390ab4b6844a5e4e703b.png
构建第二个页面
[*] 创建第二个页面。
[*] 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。可以看到文件目录结构如下：
https://i-blog.csdnimg.cn/blog_migrate/b97d6cf121991cbdb2514b983fdf6705.png
说明
开辟者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。
[*] 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示比方下：
{
"src": [
"pages/Index",
"pages/Second"
]
}
[*] 添加文本及按钮。
参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示比方下：
// Second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目的页面，从而实现跳转。利用页面路由请导入router模块。
[*] 第一个页面跳转到第二个页面。
在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示比方下：
// Index.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件，点击时跳转到第二页
.onClick(() => {
console.info(`Succeeded in clicking the 'Next' button.`)
// 跳转到第二页
router.pushUrl({ url: 'pages/Second' }).then(() => {
console.info('Succeeded in jumping to the second page.')
}).catch((err) => {
console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
})
})
}
.width('100%')
}
.height('100%')
}
}
[*] 第二个页面返回到第一个页面。
在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“Second.ets”文件的示比方下：
// Second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件，点击按钮时返回到第一页
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
// 返回第一页
router.back()
console.info('Succeeded in returning to the first page.')
} catch (err) {
console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}
[*] 打开“Index.ets”文件，点击预览器中的https://i-blog.csdnimg.cn/blog_migrate/264098235359d69934f7744cd9a18407.png按钮举行革新。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/cd551737c8597afbe0bfe16f80224723.png
利用真机运行应用
运行HarmonyOS应用可以利用远程模拟器和物理真机设备，区别在于利用远程模拟器运行应用不需要对应用举行署名。接下来将以物理真机设备为例，介绍HarmonyOS应用的运行方法，关于模拟器的利用请参考利用Remote Emulator运行应用/服务。
[*] 将搭载HarmonyOS体系的真机与电脑连接。具体指导及要求，可查看利用本地真机运行应用/服务。
[*] 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，利用华为帐号登录。等候自动署名完成后，点击“OK”即可。如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/7aef873a39333d723ac989ea95d2ac22.png
[*] 在编辑窗口右上角的工具栏，点击https://i-blog.csdnimg.cn/blog_migrate/e2b13d8e02a34c3e27299a2ac226cad2.png按钮运行。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/dafc5241b9763e9171b780f77a9a4781.png
恭喜您已经利用ArkTS语言开辟（Stage模子）完成了第一个HarmonyOS应用，快来探索更多的HarmonyOS功能吧。
构建第一个ArkTS应用（FA模子）
创建ArkTS工程
[*] 若首次打开DevEco Studio，请点击Create Project创建工程。假如已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
[*] 选择Application应用开辟（本文以应用开辟为例，Atomic Service对应为元服务开辟），选择模板“Empty Ability”，点击Next举行下一步配置。
https://i-blog.csdnimg.cn/blog_migrate/d49d93e74701e55024eb01f3c9d57409.png
[*] 进入配置工程界面，Compile SDK选择“3.0.0(API 8)”（Compile SDK选择“3.1.0(API 9)”时注意同步选择 Model 为“FA”，此处以选择“3.0.0(API 8)”为例），Language选择“ArkTS”其他参数保持默认设置即可。
https://i-blog.csdnimg.cn/blog_migrate/774f8615cf1a490a2645cdc0c39c617d.png
说明
DevEco Studio V3.0 Beta3及更高版本支持利用ArkTS低代码开辟方式。
低代码开辟方式具有丰富的UI界面编辑功能，通过可视化界面开辟方式快速构建结构，可有效低落开辟者的上手资本并提升开辟者构建UI界面的服从。
如需利用低代码开辟方式，请打开上图中的Enable Super Visual开关。
[*] 点击Finish，工具会自动天生示例代码和相关资源，等候工程创建完成。
ArkTS工程目录结构（FA模子）
https://i-blog.csdnimg.cn/blog_migrate/59c688cc7b3b3de1f9c8f1d5b87cc11d.png
[*]entry：HarmonyOS工程模块，编译构建天生一个HAP包。
[*]src > main > ets：用于存放ets源码。
[*]src > main > ets > MainAbility：应用/服务的入口。
[*]src > main > ets > MainAbility > pages：MainAbility包含的页面。
[*]src > main > ets > MainAbility > pages > index.ets：pages列表中的第一个页面，即应用的首页入口。
[*]src > main > ets > MainAbility > app.ets：承载Ability生命周期。
[*]src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、结构文件等。关于资源文件，详见资源分类与访问。
[*]src > main > config.json：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见应用配置文件（FA模子）。
[*]build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。此中targets中可配置当前运行环境，默以为HarmonyOS。
[*]hvigorfile.ts：模块级编译构建使命脚本，开辟者可以自定义相关使命和代码实现。
[*]build-profile.json5：应用级配置信息，包括署名、产品配置等。
[*]hvigorfile.ts：应用级编译构建使命脚本。
构建第一个页面
[*] 利用文本组件。
工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > MainAbility > pages”，打开“index.ets”文件，可以看到页面由Text组件组成。“index.ets”文件的示比方下：
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
[*] 添加按钮。
在默认页面基础上，我们添加一个Button组件，作为按钮相应用户点击，从而实现跳转到另一个页面。“index.ets”文件的示比方下：
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
[*] 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/816d7e25cc44935d96032df441cde80f.png
构建第二个页面
[*] 创建第二个页面。
[*] 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets > MainAbility”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“second”，点击“Finish”。可以看到文件目录结构如下：
https://i-blog.csdnimg.cn/blog_migrate/43f156405bfa92a7a3a5dab0a062eb5e.png
说明
开辟者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。
[*] 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示比方下：
{
"module": {
"js": [
{
"pages": [
"pages/index",
"pages/second"
]
}
]
}
}
[*] 添加文本及按钮。
参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“second.ets”文件的示比方下：
// second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目的页面，从而实现跳转。利用页面路由请导入router模块。
[*] 第一个页面跳转到第二个页面。
在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“index.ets”文件的示比方下：
// index.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件，点击时跳转到第二页
.onClick(() => {
router.push({ url: 'pages/second' })
// 若为API 9工程，则可使用以下接口
// router.pushUrl({ url: 'pages/second' })
})
}
.width('100%')
}
.height('100%')
}
}
[*] 第二个页面返回到第一个页面。
在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“second.ets”文件的示比方下：
// second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件，点击按钮时返回到第一页
.onClick(() => {
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
[*] 打开index.ets文件，点击预览器中的https://i-blog.csdnimg.cn/blog_migrate/911a6deaef6ab5ac3f67f04883daf9da.png按钮举行革新。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/073772ecba7af8e59bb870ec22a05b2f.png
利用真机运行应用
运行HarmonyOS应用可以利用远程模拟器和物理真机设备，区别在于利用远程模拟器运行应用不需要对应用举行署名。接下来将以物理真机设备为例，介绍HarmonyOS应用的运行方法，关于模拟器的利用请参考利用Remote Emulator运行应用/服务。
[*] 将搭载HarmonyOS体系的真机与电脑连接。具体指导及要求，可查看利用本地真机运行应用/服务。
[*] 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，利用华为帐号登录。等候自动署名完成后，点击“OK”即可。如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/8164d9f1a4e1a9d1ee920f4cac28820b.png
[*] 在编辑窗口右上角的工具栏，点击https://i-blog.csdnimg.cn/blog_migrate/51687b4969dd4125f4f4f60630322aeb.png按钮运行。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/aa085a882f820edc2c4bf561a7a72d62.png
恭喜您已经利用ArkTS语言开辟（FA模子）完成了第一个HarmonyOS应用，快来探索更多的HarmonyOS功能吧。
构建第一个JS应用（FA模子）
创建JS工程
[*] 若首次打开DevEco Studio，请点击Create Project创建工程。假如已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
[*] 选择Application应用开辟（本文以应用开辟为例，Atomic Service对应为元服务开辟），选择模板“Empty Ability”，点击Next举行下一步配置。
https://i-blog.csdnimg.cn/blog_migrate/296fb91401b2cea564431245beba7027.png
[*] 进入配置工程界面，Compile SDK选择“3.0.0(API 8)”（Compile SDK选择“3.1.0(API 9)”时注意同步选择 Model 为“FA”，此处以选择“3.0.0(API 8)”为例），Language选择“JS”，其他参数保持默认设置即可。
https://i-blog.csdnimg.cn/blog_migrate/3e283915812afabf2aae2e3c9e83bb43.png
说明
DevEco Studio V2.2 Beta1及更高版本支持利用JS低代码开辟方式。
低代码开辟方式具有丰富的UI界面编辑功能，通过可视化界面开辟方式快速构建结构，可有效低落开辟者的上手资本并提升开辟者构建UI界面的服从。
如需利用低代码开辟方式，请打开上图中的Enable Super Visual开关。
[*] 点击Finish，工具会自动天生示例代码和相关资源，等候工程创建完成。
JS工程目录结构
https://i-blog.csdnimg.cn/blog_migrate/375ac1c40f357c127bb05ef9900820f3.png
[*]entry：HarmonyOS工程模块，编译构建天生一个HAP包。
[*]src > main > js：用于存放js源码。
[*]src > main > js > MainAbility：应用/服务的入口。
[*]src > main > js > MainAbility > i18n：用于配置不同语言场景资源内容，好比应用文本词条、图片路径等资源。
[*]src > main > js > MainAbility > pages：MainAbility包含的页面。
[*]src > main > js > MainAbility > app.js：承载Ability生命周期。
[*]src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、结构文件等。关于资源文件，详见资源限定与访问。
[*]src > main > config.json：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见应用配置文件（FA模子）。
[*]build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。此中targets中可配置当前运行环境，默以为HarmonyOS。
[*]hvigorfile.ts：模块级编译构建使命脚本，开辟者可以自定义相关使命和代码实现。
[*]build-profile.json5：应用级配置信息，包括署名、产品配置等。
[*]hvigorfile.ts：应用级编译构建使命脚本。
构建第一个页面
[*] 利用文本组件。
工程同步完成后，在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.hml”文件，设置Text组件内容。“index.hml”文件的示比方下：
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
</text>
</div>
[*] 添加按钮，并绑定onclick方法。
在默认页面基础上，我们添加一个button类型的input组件，作为按钮相应用户点击，从而实现跳转到另一个页面。“index.hml”文件的示例代码如下：
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
</text>
<!-- 添加按钮，值为Next，并绑定onclick方法-->
<input class="btn" type="button" value="Next" onclick="onclick"></input>
</div>
[*] 设置页面样式。
在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.css”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“index.css”文件的示比方下：
/* index.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 100px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 10px;
}
.btn {
font-size: 60px;
font-weight: bold;
text-align: center;
width: 40%;
height: 5%;
margin-top: 20px;
}
[*] 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/771783bded77dc54a1070d86c6b5bfe9.png
构建第二个页面
[*] 创建第二个页面。
在“Project”窗口，打开“entry > src > main > js > MainAbility”，右键点击“pages”文件夹，选择“New > Page”，命名为“second”，点击“Finish”，即完成第二个页面的创建。可以看到文件目录结构如下：
https://i-blog.csdnimg.cn/blog_migrate/a0fd08caaa92d6a6c39aef578d90787e.png
[*] 添加文本及按钮。
参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“second.hml”文件的示比方下：
<!-- second.hml -->
<div class="container">
<text class="title">
Hi there
</text>
<!-- 添加按钮，值为Back，并绑定back方法-->
<input class="btn" type="button" value="Back" onclick="back"></input>
</div>
[*] 设置页面样式**。**“second.css”文件的示比方下：
/* second.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 100px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 10px;
}
.btn {
font-size: 60px;
font-weight: bold;
text-align: center;
width: 40%;
height: 5%;
margin-top: 20px;
}
实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目的页面，从而实现跳转。利用页面路由请导入router模块。
[*] 第一个页面跳转到第二个页面。
在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。“index.js”示比方下：
// index.js
// 导入页面路由模块
import router from '@ohos.router';
export default {
onclick: function () {
router.push({
url: "pages/second/second"
})
}
}
[*] 第二个页面返回到第一个页面。
在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。“second.js”示比方下：
// second.js
// 导入页面路由模块
import router from '@ohos.router';
export default {
back: function () {
router.back()
}
}
[*] 打开index文件夹下的恣意一个文件，点击预览器中的https://i-blog.csdnimg.cn/blog_migrate/90ba58d9fb6fa12bf1adf404411c4148.png按钮举行革新。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/16df22d620d7ee6070dba56ce1d1cc06.png
利用真机运行应用
运行HarmonyOS应用可以利用远程模拟器和物理真机设备，区别在于利用远程模拟器运行应用不需要对应用举行署名。接下来将以物理真机设备为例，介绍HarmonyOS应用的运行方法，关于模拟器的利用请参考利用Remote Emulator运行应用/服务。
[*] 将搭载HarmonyOS体系的真机与电脑连接。具体指导及要求，可查看利用本地真机运行应用/服务。
[*] 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，利用华为帐号登录。等候自动署名完成后，点击“OK”即可。如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/17ffb405163c00bd205a8dd00932507d.png
[*] 在编辑窗口右上角的工具栏，点击https://i-blog.csdnimg.cn/blog_migrate/6fdd9877dc712ad304cfb8fb2169cf0f.png按钮运行。效果如下图所示：
https://i-blog.csdnimg.cn/blog_migrate/d96a76f3bad68076d131e3bc8695ce4e.png
恭喜您已经利用JS语言开辟（FA模子）完成了第一个HarmonyOS应用，快来探索更多的HarmonyOS功能吧。
开辟基础知识
应用程序包基础知识
应用程序包概述
用户应用程序泛指运行在设备的利用体系之上，为用户提供特定服务的程序，简称“应用”。一个应用所对应的软件包文件，称为“应用程序包”。
HarmonyOS提供了应用程序包开辟、安装、查询、更新、卸载的管理机制，方便开辟者开辟和管理HarmonyOS应用，具体如下：
[*]应用软件所涉及的文件多种多样，开辟者可通过HarmonyOS提供的集成开辟工具将其开辟的可执行代码、资源、三方库等文件整合到一起制作成HarmonyOS应用程序包，便于开辟者对应用程序的部署。
[*]应用软件所涉及的设备类型多种多样，开辟者可通过HarmonyOS提供的应用程序包配置文件指定其应用程序包的分发设备类型，便于应用市场对应用程序包的分发管理。
[*]应用软件所包含的功能多种多样，将不同的功能特性按模块来分别和管理是一种良好的计划方式。HarmonyOS提供了同一应用程序的多包管理的机制，开辟者可以将不同的功能特性聚合到不同的包中，方便后续的维护与扩展。
[*]应用软件涉及的芯片平台多种多样，有x86、ARM等，还有32位、64位之分，HarmonyOS为应用程序包屏蔽了芯片平台的差异，使应用程序包在不同的芯片平台都能够安装运行。
[*]应用软件涉及的软件信息多种多样，有应用版本、应用名称、组件、申请权限等的信息，HarmonyOS包管理为开辟者提供了这些信息的查询接口，方便开辟者在程序中查询所需要的包信息。
[*]应用软件涉及的资源多种多样，有媒体资源、原生资源、字符资源以及国际化的资源等，HarmonyOS包管理将不同的资源归档到不同的目录中，并集成资源索引文件，方便应用对资源的查找和利用。
应用程序包结构
Stage模子应用程序包结构
基于Stage模子开辟的应用，经编译打包后，其应用程序包结构如下图**应用程序包结构（Stage模子）**所示。开辟者需要认识应用程序包结构相关的基本概念。
[*] 在开辟态，一个应用包含一个或者多个Module，可以在DevEco Studio工程中创建一个或者多个Module。Module是HarmonyOS应用/服务的基本功能单元，包含了源代码、资源文件、第三方库及应用/服务配置文件，每一个Module都可以独立举行编译和运行。Module分为“Ability”和“Library”两种类型，“Ability”类型的Module对应于编译后的HAP（Harmony Ability Package）；“Library”类型的Module对应于HAR（Harmony Archive），或者HSP（Harmony Shared Package）。
一个Module可以包含一个或多个UIAbility组件，如下图所示。
图1 Module与UIAbility组件关系示意图
https://i-blog.csdnimg.cn/blog_migrate/fb41d6c24fea8e236d06e445f7ad6d25.png
全文中介绍到的Module默认指的是“Ability”类型的Module。
[*] 开辟者通过DevEco Studio把应用程序编译为一个或者多个.hap后缀的文件，即HAP。HAP是HarmonyOS应用安装的基本单位，包含了编译后的代码、资源、三方库及配置文件。HAP可分为Entry和Feature两种类型。
[*]Entry类型的HAP：是应用的主模块，在module.json5配置文件中的type标签配置为“entry”类型。在同一个应用中，同一设备类型只支持一个Entry类型的HAP，通常用于实现应用的入口界面、入口图标、主特性功能等。
[*]Feature类型的HAP：是应用的动态特性模块，在module.json5配置文件中的type标签配置为“feature”类型。一个应用程序包可以包含一个或多个Feature类型的HAP，也可以不包含；Feature类型的HAP通常用于实现应用的特性功能，可以配置成按需下载安装，也可以配置成随Entry类型的HAP一起下载安装（请参见module对象内部结构中的“deliveryWithInstall”）。
[*] 每个HarmonyOS应用可以包含多个.hap文件，一个应用中的.hap文件合在一起称为一个Bundle，而bundleName就是应用的唯一标识（请参见app.json5配置文件中的bundleName标签）。需要特殊说明的是：在应用上架到应用市场时，需要把应用包含的所有.hap文件（即Bundle）打包为一个.app后缀的文件用于上架，这个.app文件称为App Pack（Application Package），此中同时包含了描述App Pack属性的pack.info文件；在云端（服务器）分发和终端设备安装时，都是以HAP为单位举行分发和安装的。
[*] 打包后的HAP包结构包括ets、libs、resources等文件夹和resources.index、module.json、pack.info等文件。
[*]ets目任命于存放应用代码编译后的字节码文件。
[*]libs目任命于存放库文件。库文件是HarmonyOS应用依靠的第三方代码（.so二进制文件）。
[*]resources目任命于存放应用的资源文件（字符串、图片等），便于开辟者利用和维护，详见资源分类与访问。
[*]resources.index是资源索引表，由IDE编译工程时天生。
[*]module.json是HAP的配置文件，内容由工程配置中的module.json5和app.json5组成，该文件是HAP中必不可少的文件。IDE会自动天生一部分默认配置，开辟者按需修改此中的配置。具体字段请参见应用配置文件。
[*]pack.info是Bundle中用于描述每个HAP属性的文件，比方app中的bundleName和versionCode信息、module中的name、type和abilities等信息，由IDE工具天生Bundle包时自动天生。
图2 应用程序包结构（Stage模子）
[外链图片转存中…(img-XvD15jEc-1704894464549)]
FA模子应用程序包结构
基于FA模子开辟的应用，其应用程序包结构如下图**应用程序包结构（FA模子）**所示。开辟者需要认识应用程序包结构相关的基本概念。
FA模子与Stage模子不同之处在于HAP内部文件存放位置不同，FA模子将所有的资源文件、库文件和代码文件都放在assets文件夹中，在文件夹内部进一步区分。
[*]config.json是应用配置文件，IDE会自动天生一部分模块代码，开辟者按需修改此中的配置。具体字段请参见应用配置文件。
[*]assets是HAP所有的资源文件、库文件和代码文件的聚集，内部可以分为entry和js文件夹。entry文件夹中存放的是resources目录和resources.index文件。
[*]resources目任命于存放应用的资源文件（字符串、图片等），便于开辟者利用和维护，详见资源分类与访问。
[*]resources.index是资源索引表，由IDE调用SDK工具天生。
[*]js文件夹中存放的是编译后的代码文件。
[*]pack.info是Bundle中用于描述每个HAP属性的文件，比方app中的bundleName和versionCode信息、module中的name、type和abilities等信息，由IDE工具天生Bundle包时自动天生。
图1 应用程序包结构（FA模子）
[外链图片转存中…(img-tu5I5CA2-1704894464550)]
应用程序包多HAP机制
多HAP机制计划目的
[*]方便开辟者模块化的管理应用，好的应用一般都是模块化管理，模块之间属于松耦合关系。多HAP方便了开辟者将业务分别成多个模块，每个模块放到独立的HAP中。比方付出类应用，有统一的主界面，主界面管理“扫一扫”、“收付款”、“消息”、“理财”等各个模块。此中主界面管理其他模块的逻辑在Entry包中实现，而“扫一扫”、“收付款”、“消息”和“理财”等模块在不同的Feature包中实现。可以同时开辟多个Feature包，能够实现Feature包单独的开辟测试，最终由Entry包统一集成Feature包的特性。
[*]方便开辟者将多HAP合理地组合并部署到不同的设备上。比方应用程序包含一个Entry包和两个Featrue包（Feature1和Feature2）。此中Entry包可以部署到设备A和设备B，Feature1只能部署到设备A，Feature2包只部署到设备B上，那么开辟者就可以方便的组合Entry和Feature1部署到设备A上，组合Entry和Feature2部署到设备B上。
[*]方便开辟者按需加载所需模块，减少包大小。开辟者可以将一个应用的某些HAP配置成按需加载。应用在启动阶段初始用不到的特性，可以配置暂不加载，当用户用到这些特性的时间，可由应用自动下载这些特性HAP，一定程度上减少应用包的大小。
[*]方便应用资源共享，减少程序包大小。多个HAP都需要用到的资源（包括公共资源文件、公共页面等）以及so（shared object）文件可以放到单独的HAP中，其他HAP可以到该HAP中访问资源和so文件，也一定程度上可以减少应用程序包大小。
多HAP构建视图
IDE支持在一个应用工程中举行多个HAP的开辟与构建，如下图所示。
图1 多HAP构建视图
[外链图片转存中…(img-TVwtH37d-1704894464550)]
[*] IDE开辟态视图
[*] AppScope目录
[*] app.json5：配置应用全局描述信息，比方应用包名、版本号、应用图标、应用名称和依靠的SDK版本号等。
[*] resources目录：放置应用的图标资源和应用名称字符串资源。
说明：
[*]该目录由IDE自动天生，名称不可更改。
[*]AppScope目录下面的文件名与Entry、Feature模块下面的文件名不能重复，否则IDE会报错。
[*] entry或者feature目录（名称可由开辟者自定义）
[*]由IDE引导开辟者创建的Module，在该Module中实现应用的业务逻辑；可以创建多个Module，图中entry和feature便是创建的两个Module。
[*]resources目录：放置该Module中所利用到的资源。
[*]ets目录：开辟者的业务逻辑。
[*]module.json5：配置该Module的描述信息，如：Module的名称、Module的入口代码路径、包含的组件信息等。
[*] 编译打包后的视图
[*]一个开辟态的Module编译后天生一个部署态的HAP，Module和HAP逐一对应。
[*]HAP中的module.json由开辟视图中的app.json5和module.json5合成。
[*]所有的HAP最终会编译到一个App Pack中（以.app为后缀的包文件），用于发布到应用市场。
多HAP的开辟调试与发布部署流程
多HAP的开辟调试与发布部署流程如下图所示。
图1 多HAP的开辟调试与发布部署流程
[外链图片转存中…(img-0S6vEwMt-1704894464552)]
开辟
开辟者通过DevEco Studio工具按照业务的需要创建多个Module，在相应的Module中完成自身业务的开辟。
调试
通过DevEco Studio编译打包，天生单个或者多个HAP，即可基于HAP举行调试。如需根据不同的部署环境、目的人群、运行环境等，将同一个HAP定制编译为不同版本，请参见定制编译指导。
在调试前，需要先安装或更新HAP，以下介绍具体做法。
[*] 利用DevEco Studio举行调试
利用指导可参考应用程序包调试方法，此中包括了单HAP与多HAP通过DevEco Studio工具的安装调试方法。
[*] 利用hdc工具(可通过HarmonyOS SDK获取，在SDK的toolchains目录下)举行调试
在调试前，需要先安装或更新HAP，此处有两种方式。
[*] 直接利用hdc安装、更新HAP。
HAP的路径为开辟平台上的文件路径，以Windows开辟平台为例，命令参考如下：
// 安装、更新，多HAP可以指定多个文件路径
hdc install C:\entry.hap C:\feature.hap
// 执行结果
install bundle successfully.
// 卸载
hdc uninstall com.example.myapplication
// 执行结果
uninstall bundle successfully.
[*] 先执行hdc shell，再利用bm工具安装、更新HAP。
HAP的文件路径为真机上的文件路径，命令参考如下：
// 先执行hdc shell才能使用bm工具
hdc shell
// 安装、更新，多HAP可以指定多个文件路径
bm install -p /data/app/entry.hap /data/app/feature.hap
// 执行结果
install bundle successfully.
// 卸载
bm uninstall -n com.example.myapplication
// 执行结果
uninstall bundle successfully.
完成HAP安装或更新后，即可参考相关调试命令举行调试。
发布
当开辟的程序包满足发布要求时，可以在工具中打包编译天生App包。将该App包上架到应用市场云端，应用市场会对上架的App包校验署名，校验署名通过后会将App包中的HAP拆分出来，同时对拆分出的HAP重新添加署名，然后对HAP举行分发。
部署
用户在设备上的应用市场客户端能够看到各种各样的应用，这些应用均由云端分发而来，有些是多HAP应用，有些是单HAP应用。用户选择某个应用后，应用市场将下载应用所包含的全部deliveryWithInstall设置为“true”的HAP。
应用在终端设备上的安装
下载完成后，应用市场客户端再调用体系中包管理服务的安装接口安装下载的HAP，包管理服务以应用为单位将此中所有HAP部署到指定目录下，以完成应用的安装。
多HAP利用规则
[*]App Pack包不能直接安装到设备上，只是上架应用市场的单元。
[*]App Pack包中所有HAP的配置文件中的bundleName标签必须一致。
[*]App Pack包中所有HAP的配置文件中的versionCode标签必须一致。
[*]App Pack包中同一设备类型的所有HAP中必须有且只有一个entry类型的HAP，feature类型的HAP可以有一个或者多个，也可以没有。
[*]App Pack包中的每个HAP必须配置moduleName标签，同一设备类型的所有HAP对应的moduleName标签必须唯一。
[*]同一应用的所有HAP署名证书要保持一致。上架应用市场是以App Pack的形式上架，并对其举行了署名。应用市场分发时会将所有HAP从App Pack中拆分出来，同时对此中的所有HAP举行重署名，如许包管了所有HAP署名证书的一致性。在调试阶段，开辟者通过命令行或IDE将HAP安装到设备上时要包管所有HAP署名证书一致，否则会出现安装失败的问题。
多HAP运行机制及数据通讯方式
多HAP机制主要是为方便开辟者举行模块化管理。HAP和应用运行时的历程并不是逐一对应的，具体运行机制如下：
[*]默认情况下，应用中（同一包名）的所有UIAbility、ServiceExtensionAbility、DataShareExtensionAbility运行在同一个独立历程中，其他同类型ExtensionAbility分别运行在单独的历程。
[*]HAP支持在module.json5（Stage模子）或者config.json（FA模子）中通过process标签配置单独的历程（仅体系应用支持，三方应用不支持）。配置了process的HAP，其组件运行在单独的process历程中，多个HAP可以配置雷同的process，则这些HAP运行在雷同历程中，process配置的具体说明请参见module.json5配置文件。
[*]应用运行时，同一历程中的UIAbility组件被启动时，才加载对应HAP的资源和代码。
基于上述机制，多HAP数据通讯方式如下：
[*]同一历程内的数据通讯，请参见线程间通讯。
[*]跨历程的数据通讯，请参见历程间通讯。
[*]多HAP假如运行在同一历程，则多HAP间组件的通讯方式与同一HAP内组件的通讯方式雷同。
应用程序包安装和卸载流程
开辟者
开辟者可以通过调试命令举行应用的安装和卸载，可参考多HAP的调试流程。
图1 应用程序包安装和卸载流程（开辟者）
[外链图片转存中…(img-ZG3yaXP9-1704894464554)]
终端设备用户
开辟者将应用上架应用市场后，终端设备用户可以在终端设备上利用应用市场举行应用的安装和卸载。
图2 应用程序包安装和卸载流程（终端设备用户）
[外链图片转存中…(img-9mTCnEVz-1704894464555)]
应用程序包更新流程
HarmonyOS包管理服务提供了应用程序包更新能力，更新方式如下。
[*]应用市场内更新：新版本应用通过应用市场上架后，应用市场关照终端用户该应用有新版本，终端用户可以根据关照到应用市场（客户端）举行应用升级。
[*]应用内检测升级：终端用户启动应用时，应用市场检测到该应用有新版本会关照终端用户，可以到应用市场举行应用的下载更新。
共享包
共享包概述
OpenHarmony提供了两种共享包，HAR（Harmony Archive）静态共享包，和HSP（Harmony Shared Package）动态共享包。
HAR与HSP都是为了实当代码和资源的共享，都可以包含代码、C++库、资源和配置文件，最大的不同之处在于：HAR中的代码和资源跟随利用方编译，假如有多个利用方，它们的编译产物中会存在多份雷同拷贝；而HSP中的代码和资源可以独立编译，运行时在一个历程中代码也只会存在一份。
图1 HAR和HSP在APP包中的形态示意图
[外链图片转存中…(img-XIUl1ljK-1704894464556)]
HSP旨在办理HAR存在的几个问题：
[*]多个HAP引用雷同的HAR，导致的APP包大小膨胀问题。
[*]多个HAP引用雷同的HAR，HAR中的一些状态变量无法共享的问题。
HSP的一些束缚：
[*]HSP及其利用方都必须是Stage模子。
[*]HSP及其利用方都必须利用esmodule编译模式。
[*]HSP不支持在配置文件中声明abilities、extensionAbilities标签。
HSP按照利用场景可以分为应用内HSP和应用间HSP，应用间HSP暂不支持。
HAR
HAR（Harmony Archive）是静态共享包，可以包含代码、C++库、资源和配置文件。通过HAR可以实现多个模块或多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP，不能独立安装运行在设备上，只能作为应用模块的依靠项被引用。
创建HAR模块
HAR对应DevEco Studio工程中的“Library”类型的Module，可以通过DevEco Studio创建一个HAR模块。HAR模块默认不开启混淆能力，开启混淆能力，需要把HAR模块的build-profile.json5文件中的artifactType字段设置为obfuscation，配置如下所示：
{
"apiType": "stageMode",
"buildOption": {
"artifactType": "obfuscation"
}
}
artifactType字段有以下两种取值，默认缺省为original。
[*]original：不混淆。
[*]obfuscation：混淆，目前仅支持uglify混淆。
需要对代码资产举行保护时，发起开启混淆能力，混淆能力开启后，DevEco Studio在构建HAR时，会对代码举行编译、混淆及压缩处理，保护代码资产。
注意：artifactType字段设置为obfuscation时，apiType字段必须设置为stageMode，因为Stage模子才支持混淆。
HAR开辟注意事项
[*]HAR不支持在配置文件中声明abilities、extensionAbilities组件。
[*]HAR不支持在配置文件中声明pages页面。
[*]HAR不支持在build-profile.json5文件的buildOption中配置worker。
[*]FA模子与Stage模子的HAR不支持相互引用。
[*]Stage模子的HAR，不能引用AppScope内的内容。在编译构建时APPScope中的内容不会打包到HAR中，导致HAR资源引用失败。
导出HAR的ArkUI组件、接口、资源
index.ets文件是HAR导出声明文件的入口，HAR需要导出的接口，统一在index.ets文件中导出。index.ets文件是DevEco Studio默认自动天生的，用户也可以自定义，在模块的oh-package.json5文件中的main字段配置入口声明文件，配置如下所示：
{
"main": "index.ets"
}
导出ArkUI组件
ArkUI组件的导出方式与ts的导出方式一致，通过export导出ArkUI组件，示比方下：
// library/src/main/ets/components/MainPage/MainPage.ets
@Component
export struct MainPage {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
HAR对外袒露的接口，在index.ets导出文件中声明如下所示：
// library/index.ets
export { MainPage } from './src/main/ets/components/MainPage/MainPage'
导出ts类和方法
通过export导出ts类和方法，支持导出多个ts类和方法，示比方下所示：
// library/src/main/ts/test.ets
export class Log {
static info(msg) {
console.info(msg);
}
}
export function func() {
return "har func";
}
export function func2() {
return "har func2";
}
HAR对外袒露的接口，在index.ets导出文件中声明如下所示：
// library/index.ets
export { Log } from './src/main/ts/test'
export { func } from './src/main/ts/test'
export { func2 } from './src/main/ts/test'
资源
HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时，DevEco Studio会从HAP模块及依靠的模块中收集资源文件，假如不同模块下的资源文件出现重名辩论时，DevEco Studio会按照以下优先级举行覆盖（优先级由高到低）：
[*]AppScope（仅API9的Stage模子支持）。
[*]HAP包自身模块。
[*]依靠的HAR模块，假如依靠的多个HAR之间有资源辩论，会按照依靠顺序举行覆盖（依靠顺序在前的优先级较高）。
引用HAR的ArkUI组件、接口、资源
引用HAR前，需要先配置对HAR的依靠，配置方式可参考。
引用HAR的ArkUI组件
HAR的依靠配置乐成后，可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致，通过import引入HAR导出的ArkUI组件，示比方下所示：
// entry/src/main/ets/pages/index.ets
import { MainPage } from "@ohos/library"
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
// 引用HAR的ArkUI组件
MainPage()
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
引用HAR的类和方法
通过import引用HAR导出的ts类和方法，示比方下所示：
// entry/src/main/ets/pages/index.ets
import { Log } from "@ohos/library"
import { func } from "@ohos/library"
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Button('Button')
.onClick(()=>{
// 引用HAR的类和方法
Log.info("har msg");
func();
})
}
.width('100%')
}
.height('100%')
}
}
引用HAR的资源
通过$r引用HAR中的资源，比方在HAR模块的src/main/resources里添加字符串资源（在string.json中定义，name：hello_har）和图片资源（icon_har.png），然后在Entry模块中引用该字符串和图片资源的示比方下所示：
// entry/src/main/ets/pages/index.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// 引用HAR的字符串资源
Text($r("app.string.hello_har"))
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 引用HAR的图片资源
Image($r("app.media.icon_har"))
}
.width('100%')
}
.height('100%')
}
}
HSP
应用内HSP开辟指导
应用内HSP指的是专门为某一应用开辟的HSP，只能被该应用内部其他HAP/HSP利用，用于应用内部代码、资源的共享。
应用内HSP跟随其宿主应用的APP包一起发布，与该宿主应用具有雷同的包名和生命周期。
开辟应用内HSP
HSP模块可以在DevEco Studio中由指定模板创建，我们以创建一个名为library的HSP模块为例。基本的工程目录结构大致如下：
library
├── src
│ └── main
│ ├── ets
│ │ ├── pages
│ │ └── index.ets
│ ├── resources
│ └── module.json5
└── oh-package.json5
模块module.json5中的"type"标识模块类型，HSP的"type"是"shared"。
{
"type": "shared"
}
HSP通过在入口文件中导出接口，对外提供能力。入口文件在模块oh-package.json5的"main"中配置。比方：
{
"main": "./src/main/ets/index.ets"
}
导出ts类和方法
通过export导出ts类和方法，比方：
// library/src/main/ets/utils/test.ts
export class Log {
static info(msg) {
console.info(msg);
}
}
export function add(a: number, b: number) {
return a + b;
}
export function minus(a: number, b: number) {
return a - b;
}
对外袒露的接口，需要在入口文件index.ets中声明：
// library/src/main/ets/index.ets
export { Log, add, minus } from './utils/test'
导出ArkUI组件
ArkUI组件也可以通过export导出，比方：
// library/src/main/ets/components/MyTitleBar.ets
@Component
export struct MyTitleBar {
build() {
Row() {
Text($r('app.string.library_title'))
.fontColor($r('app.color.white'))
.fontSize(25)
.margin({left:15})
}
.width('100%')
.height(50)
.padding({left:15})
.backgroundColor('#0D9FFB')
}
}
对外袒露的接口，需要在入口文件index.ets中声明：
// library/src/main/ets/index.ets
export { MyTitleBar } from './components/MyTitleBar'
HSP中资源利用说明
注意，在HSP中，通过 r / r/ r/rawfile可以利用本模块resources目录下的资源。
假如利用相对路径的方式，比方：
在HSP模块中利用Image(“common/example.png”)，实际上该Image组件访问的是HSP调用方（如entry）下的资源entry/src/main/ets/common/example.png。
导出native方法
在HSP中也可以包含C++编写的so。对于so中的native方法，HSP通过间接的方式导出，以导出libnative.so的乘法接口multi为例：
// ibrary/src/main/ets/utils/nativeTest.ts
import native from "libnative.so"
export function nativeMulti(a: number, b: number) {
return native.multi(a, b);
}
对外袒露的接口，需要在入口文件index.ets中声明：
// library/src/main/ets/index.ets
export { nativeMulti } from './utils/nativeTest'
利用应用内HSP
要利用HSP中的接口，首先需要在利用方的oh-package.json5中配置对它的依靠。假如应用内HSP和利用方在同一工程下，可以直接本地引用，比方：
// entry/oh-package.json5
"dependencies": {
"library": "file:../library"
}
然后就可以像利用HAR一样调用HSP的对外接口了。
比方，上面的library已经导出了下面这些接口：
// library/src/main/ets/index.ets
export { Log, add, minus } from './utils/test'
export { MyTitleBar } from './components/MyTitleBar'export { nativeMulti } from './utils/nativeTest' 在利用方的代码中，可以如许利用：
// entry/src/main/ets/pages/index.ets
import { Log, add, MyTitleBar, nativeMulti } from "library"
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
MyTitleBar()
Text(this.messag
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]