W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
為確保運(yùn)行效果,本文以使用DevEco Studio 3.1 Release版本為例,點(diǎn)擊此處獲取下載鏈接。
支持使用ArkTS低代碼開發(fā)方式。
低代碼開發(fā)方式具有豐富的UI界面編輯功能,通過可視化界面開發(fā)方式快速構(gòu)建布局,可有效降低開發(fā)者的上手成本并提升開發(fā)者構(gòu)建UI界面的效率。
如需使用低代碼開發(fā)方式,請打開上圖中的Enable Super Visual開關(guān)。
build-profile.json5:應(yīng)用級配置信息,包括簽名、產(chǎn)品配置等。
hvigorfile.ts:應(yīng)用級編譯構(gòu)建任務(wù)腳本。
使用文本組件。
工程同步完成后,在“Project”窗口,點(diǎn)擊“entry > src > main > ets > pages”,打開“Index.ets”文件,可以看到頁面由Text組件組成?!?span>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%')
- }
- }
添加按鈕。
在默認(rèn)頁面基礎(chǔ)上,我們添加一個Button組件,作為按鈕響應(yīng)用戶點(diǎn)擊,從而實(shí)現(xiàn)跳轉(zhuǎn)到另一個頁面。“Index.ets”文件的示例如下:
- // Index.ets
- @Entry
- @Component
- struct Index {
- @State message: string = 'Hello World'
- build() {
- Row() {
- Column() {
- Text(this.message)
- .fontSize(50)
- .fontWeight(FontWeight.Bold)
- // 添加按鈕,以響應(yīng)用戶點(diǎn)擊
- Button() {
- Text('Next')
- .fontSize(30)
- .fontWeight(FontWeight.Bold)
- }
- .type(ButtonType.Capsule)
- .margin({
- top: 20
- })
- .backgroundColor('#0D9FFB')
- .width('40%')
- .height('5%')
- }
- .width('100%')
- }
- .height('100%')
- }
- }
在編輯窗口右上角的側(cè)邊工具欄,點(diǎn)擊Previewer,打開預(yù)覽器。第一個頁面效果如下圖所示:
創(chuàng)建第二個頁面。
新建第二個頁面文件。在“Project”窗口,打開“entry > src > main > ets ”,右鍵點(diǎn)擊“pages”文件夾,選擇“New > ArkTS File”,命名為“Second”,點(diǎn)擊“Finish”。可以看到文件目錄結(jié)構(gòu)如下:
開發(fā)者也可以在右鍵點(diǎn)擊“pages”文件夾時,選擇“New > Page”,則無需手動配置相關(guān)頁面路由。
配置第二個頁面的路由。在“Project”窗口,打開“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”。示例如下:
- {
- "src": [
- "pages/Index",
- "pages/Second"
- ]
- }
添加文本及按鈕。
參照第一個頁面,在第二個頁面添加Text組件、Button組件等,并設(shè)置其樣式?!?span>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%')
- }
- }
頁面間的導(dǎo)航可以通過頁面路由router來實(shí)現(xiàn)。頁面路由router根據(jù)頁面url找到目標(biāo)頁面,從而實(shí)現(xiàn)跳轉(zhuǎn)。使用頁面路由請導(dǎo)入router模塊。
第一個頁面跳轉(zhuǎn)到第二個頁面。
在第一個頁面中,跳轉(zhuǎn)按鈕綁定onClick事件,點(diǎn)擊按鈕時跳轉(zhuǎn)到第二頁?!?span>Index.ets”文件的示例如下:
- // Index.ets
- // 導(dǎo)入頁面路由模塊
- 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)
- // 添加按鈕,以響應(yīng)用戶點(diǎn)擊
- Button() {
- Text('Next')
- .fontSize(30)
- .fontWeight(FontWeight.Bold)
- }
- .type(ButtonType.Capsule)
- .margin({
- top: 20
- })
- .backgroundColor('#0D9FFB')
- .width('40%')
- .height('5%')
- // 跳轉(zhuǎn)按鈕綁定onClick事件,點(diǎn)擊時跳轉(zhuǎn)到第二頁
- .onClick(() => {
- console.info(`Succeeded in clicking the 'Next' button.`)
- // 跳轉(zhuǎn)到第二頁
- 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事件,點(diǎn)擊按鈕時返回到第一頁?!?span>Second.ets”文件的示例如下:
- // Second.ets
- // 導(dǎo)入頁面路由模塊
- 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事件,點(diǎn)擊按鈕時返回到第一頁
- .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”文件,點(diǎn)擊預(yù)覽器中的按鈕進(jìn)行刷新。效果如下圖所示:
運(yùn)行HarmonyOS應(yīng)用可以使用遠(yuǎn)程模擬器和物理真機(jī)設(shè)備,區(qū)別在于使用遠(yuǎn)程模擬器運(yùn)行應(yīng)用不需要對應(yīng)用進(jìn)行簽名。接下來將以物理真機(jī)設(shè)備為例,介紹HarmonyOS應(yīng)用的運(yùn)行方法,關(guān)于模擬器的使用請參考使用Remote Emulator運(yùn)行應(yīng)用/服務(wù)。
恭喜您已經(jīng)使用ArkTS語言開發(fā)(Stage模型)完成了第一個HarmonyOS應(yīng)用,快來探索更多的HarmonyOS功能吧。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: