潍坊专业网站建设价格大鹏新区住房建设局网站

1、create Project，选择Empty Activity

2、配置项目

project name 为项目名称，建议使用驼峰型命名
Bundle name 为项目包名
Save location 为保存位置
Module name 为模块名称，即运行时需要选择的模块名称，见下图

查看模块名称，并选择

3、创建第一个界面

第一个界面实现：有一个Hello World的Text 和Button组成，点击button跳转到第二个界面中，button中带有字符串Next

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('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('15%').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%')}}
}

4、创建第二个界面

在resources -> base -> profile目录下的main_pages.jason中添加界面pages/second

{"src": ["pages/Index","pages/second"]
}

5、第二个界面的代码实现

使用 ‘string’ 表示的是字符串

import { router } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit'// 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(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Index' }).then(() => {console.info('Succeeded in jumping to the first page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the first page. Code is ${err.code}, message is ${err.message}`)})}).height("15%")}.width('100%')}.height('100%')}
}

6、实现效果

第一个界面Index：

第二个界面second：

build运行

在Previewer运行时，如果代码出现问题，并不会运行失败，而是界面不重新刷新

解决方案：在Build -> Rebuild Project中重构代码，出现错误会提示