HarmonyOS Next应用开发：构建第一个应用
本文通过构建一个简单的具有页面跳转、返回功能的应用，快速了解HarmonyOS应用，以下我们基于Stage模型构建第一个ArkTS应用。
创建项目
这里认为你已经配置好了开发环境，下面我们开始创建项目：
1.若首次打开DevEco Studio，请点击Create Project创建工程。
如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
2.选择Application应用开发，选择模板“Empty Ability”，点击Next进行下一步配置。
3.进入配置工程界面，这里填应用的基本信息。
4.点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。
编写代码
在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，进行页面的编写：
@Entry
@Component
struct Index {
@State message: string = '你好，鸿蒙'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('第二个页面')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('50%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器可以进行页面预览。
新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > ArkTS File”，创建名为“Next”的文件：
@Entry
@Component
struct Second {
@State message: string = '我是第二个页面'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('返回')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Next”：
{
"src": [
"pages/Index",
"pages/Next"
]
}
也可以在右键点击“pages”文件夹时，选择“New > Page >New Page”，命名为“Next”，点击“Finish”完成第二个页面的创建。使用此种方式则无需再进行下文中第二个页面路由的手动配置。
简单地实现下页面之间的跳转及返回，下面是第一个页面跳转到第二个页面：
import router from '@ohos.router'
@Entry
@Component
struct Index {
@State message: string = '你好，鸿蒙'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('第二个页面')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('50%')
.height('5%')
.onClick(()=>{
console.info(`成功点击'第二个页面'按钮.`)
router.pushUrl({ url:'pages/Next'})
.then(() => {
console.info(`成功跳转到第二个页面.`)
})
.catch((err) => {
console.info(`没能跳转到第二个页面.code is ${err.code}, message is ${err.message}`)
})
})
}
.width('100%')
}
.height('100%')
}
}
第二个页面返回到第一个页面：
import router from '@ohos.router'
@Entry
@Component
struct Second {
@State message: string = '我是第二个页面'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('返回')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
.onClick(()=>{
console.info(`成功点击'返回'按钮.`)
try {
router.back()
console.info(`成功返回到第一页.`)
} catch (err) {
console.info(`没能返回到第一页.code is ${err.code}, message is ${err.message}`)
}
})
}
.width('100%')
}
.height('100%')
}
}
使用模拟器运行
没有真机，安装了个模拟器运行，不大好用，对比Android或者iOS的模拟器差太远了。
总结
通过构建第一个HarmonyOS应用，可以发现DevEco Studio和Android Studio使用起来很像，本文中使用的ArkTS语言是声明式的，嗯，很容易又想到Flutter，如果你有Android，或者Flutter，或者前端相关开发经验，相信上手这门新技术会非常容易。
