HarmonyOS Next應用開發(fā)：構建第一個應用
本文通過構建一個簡單的具有頁面跳轉帖池、返回功能的應用，快速了解HarmonyOS應用皮仁，以下我們基于Stage模型構建第一個ArkTS應用漠吻。
創(chuàng)建項目
這里認為你已經配置好了開發(fā)環(huán)境，下面我們開始創(chuàng)建項目：
1.若首次打開DevEco Studio活孩，請點擊Create Project創(chuàng)建工程。
如果已經打開了一個工程乖仇，請在菜單欄選擇File > New > Create Project來創(chuàng)建一個新工程憾儒。
2.選擇Application應用開發(fā)，選擇模板“Empty Ability”乃沙，點擊Next進行下一步配置起趾。
3.進入配置工程界面，這里填應用的基本信息警儒。
4.點擊Finish训裆，工具會自動生成示例代碼和相關資源眶根，等待工程創(chuàng)建完成。
編寫代碼
在“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”愧口，創(chuàng)建名為“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”完成第二個頁面的創(chuàng)建示启。使用此種方式則無需再進行下文中第二個頁面路由的手動配置。
簡單地實現下頁面之間的跳轉及返回领舰，下面是第一個頁面跳轉到第二個頁面：
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應用锉桑，可以發(fā)現DevEco Studio和Android Studio使用起來很像排霉，本文中使用的ArkTS語言是聲明式的，嗯民轴，很容易又想到Flutter攻柠，如果你有Android，或者Flutter后裸，或者前端相關開發(fā)經驗瑰钮，相信上手這門新技術會非常容易。
