一、ArkTS工程目录
AppScore>app.json5:应用的全局配置信息;
entry:HarmonyOS工程模块,编译构建生成一个HAP包;
src>main>ets:用于存放ArkTS源码;
src>main>ets>entryability:应用/服务的入口;
src>main>ets>entrybackupability:应用提供拓展的备份恢复能力;
src>main>ets>pages:应用/服务包含的页面;
src>main>resources:存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局等;
src>main>module.json5:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息;
build-profile.json5:当前的模块信息、编译信息配置项,包括buildOption、targets配置等;
hvigorfile.ts:模块级编译构建任务脚本;
obfuscation-rules.txt:混淆规则文件;
oh-package.json5:用来描述包名、版本、入口文件和依赖项等信息;
on-modules:用于存放三方库依赖信息;
build-profile.json5:工程级配置信息,包括签名、产品配置等;
hvigorfile.ts:工程级编译构建任务脚本;
oh-package.json5:主要用来描述全局配置。
二、简单使用
1、初始页面
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
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%')
}
}
2、添加按钮
// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('下一步')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor('#FFFFFF')
}
.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: BusinessError) => {
console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
})
})
}
.width('100%')
}
.height('100%')
}
}
3、页面间跳转
先新建一个同级页面---Second.ets,配置对应路由,并编写该页面内容
// 路由配置
{
"src": [
"pages/Index",
"pages/Second"
]
}
// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@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) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}