【学习资料】OpenAtom OpenHarmony
1、打开DevEco Studio:
![image.png](//file.elecfans.com/web2/M00/70/E0/pYYBAGNLiJKADW7UAAG9DuAeYT0461.png)
2、选译OpenHarmony-Empty Ability
![image.png](//file.elecfans.com/web2/M00/70/4D/poYBAGNLiNuAVS1_AAE3f3EWY-U850.png)
![image.png](//file.elecfans.com/web2/M00/70/4D/poYBAGNLiVeAZfiwAAIltRovmbg796.png)
3、进入界面后找到需要在后面修改的文件
![image.png](//file.elecfans.com/web2/M00/70/4D/poYBAGNLiaWAXglSAAPzDdjQqBA483.png)
4、根据下图的步骤修改相应内容。
![image.png](//file.elecfans.com/web2/M00/70/4E/poYBAGNLqFOAE0jcAAIzqtOPahs501.png)
5、增加按键:
![image.png](//file.elecfans.com/web2/M00/70/E2/pYYBAGNLqXyAQjv3AAHgV9kuq_E657.png)
![image.png](//file.elecfans.com/web2/M00/70/4E/poYBAGNLqcuATMs8AAKMs0w7i2Q889.png)
6、按下面的图示,构建第二个页面:
![image.png](//file.elecfans.com/web2/M00/70/4F/poYBAGNLqouAZwfaAANwb5-IZxs472.png)
![image.png](//file.elecfans.com/web2/M00/70/4F/poYBAGNLqsCACZQJAABpG8unINs016.png)
7、在second.ets文件中,将本页面的message文本内容设置为“Hi there”,示例如下:
@Entry
@Component
struct Second {
@State message: string = '感谢,电子发烧友论坛'
build() {
}
}
![image.png](//file.elecfans.com/web2/M00/70/E2/pYYBAGNLrCKAdARAAAFW0IkCp-8021.png)
![image.png](//file.elecfans.com/web2/M00/70/4F/poYBAGNLrGyACJCAAAHpmumhU4o849.png)
9、实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1)第一个页面跳转到第二个页面。 在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
index.ets文件如下:
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
onclick(){
router.push({
url:'/pages/second',
})
}
build() {
}
}
2)“ index.visual ”: 打开index.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233209020](//file.elecfans.com/web2/M00/70/4F/poYBAGNLramARMtkAAABH2XDT08109.png)
(Events),鼠标点击OnClick事件的输入框,选择this.onclick,如下所示:
![image.png](//file.elecfans.com/web2/M00/70/4F/poYBAGNLrc2AIlFMAAG6tJ7bb08763.png)
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = '感谢,电子发烧友论坛'
back(){
router.back()
}
build() {
}
}
3)、“ second.visual ”: 打开second.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233368900](//file.elecfans.com/web2/M00/70/4F/poYBAGNLramARMtkAAABH2XDT08109.png)
(Events),鼠标点击OnClick事件的输入框,选择this.back,如下所示:
![image.png](//file.elecfans.com/web2/M00/70/E2/pYYBAGNLrnGACGBGAAHn8TUXzPc402.png)
10、使用真机运行应用:
1)将搭载OpenHarmony标准系统的开发板与电脑连接。
2)菜单:文件-项目结构(快捷键Ctrl+shift+alt+s):设置自动签名
![image.png](//file.elecfans.com/web2/M00/70/E2/pYYBAGNLr2CABrLzAADfOnuVwhg367.png)
![image.png](//file.elecfans.com/web2/M00/70/4F/poYBAGNLrx2AUrpzAAGASU2pmPw499.png)
3、点击运行按键,下载到真机:
![image.png](//file.elecfans.com/web2/M00/70/E2/pYYBAGNLr8eARpjYAAM67FUKPUE908.png)
页面转换
|