前言
通过前面的章节对“竞”开发板,OpenHarmony设备开发环境、源码编译、烧录,以及ArkTS语言、ArkUI框架有了一定的了解,本节将编写一款运行在“竞”开发板上的短视频应用程序。
11月4日在华为开发者大会2022会场发布了DevEco Studio 3.1 Canary1版本,当前版本需要重新下载安装,一些新的特性可以参见版本说明。
准备
- DevEco Studio 3.1 Canary1(以下检查ide)
- “竞”开发板(OpenHarmony 3.1 release)
- ArkTS语言
- ArkUI框架
短视频应用程序实现过程
使用ide创建OpenHarmony项目,Compile SDK选择8,其他默认即可。
启动页
选中//entry/src/main/ets/MainAbility/pages
目录右键New --> Page创建启动页splash.ets
,并在config.json文件的js模块中更改页面启动顺序。
{
...
"module": {
...
"js": [
{
"mode": {
"syntax": "ets",
"type": "pageAbility"
},
"pages": [
"pages/splash",
"pages/index"
],
"name": ".MainAbility",
"window": {
"designWidth": 720,
"autoDesignWidth": false
}
}
]
}
}
使用容器组件Flex、Stack,组件容器Text构建启动页面,使用定时器setInterval()方法和路由router API监听页面跳转。
Text(`跳过 | ${this.timer}s`)
.onClick(() => {
router.replace({
url: "pages/index"
})
})
let setTimer = setInterval(() => {
this.timer--;
if (this.timer <= 0) {
clearInterval(setTimer);
router.replace({
url: "pages/index"
})
}
}, 1000)
首页
笔者将首页划分为三个区域,顶部信息栏(若场景为广告牌,则显示企业信息等),中间为视频播放区域,底部为视频列表区域。
顶部信息栏
应用全屏显示,为了后续扩展,将顶部信息栏抽取为公用组件,在MainAbility目录创建model目录,选中model目录右键New --> ArkTS File创建ets文件作为顶部信息栏自定义组件。
@Component
export struct TeTitle {
build() {
Row({space: 5}) {
Image($r('app.media.icon'))
.width(64).height(64)
.borderRadius(32)
Text('明').fontSize(16)
}
.height('100%')
}
}
视频播放区域
视频播放区域始终自动播放一个视频,切为自动播放,同时关联底部视频列表当前视频。
Flex() {
Stack({alignContent: Alignment.Top}) {
Video({src: this.arr[this.initialIndex].videoSrc, controller: this.videoCtrl})
.width('100%').height('100%')
.controls(false).autoPlay(true)
.onFinish(() => {
this.initialIndex++;
if (this.initialIndex >= this.arr.length) {
this.initialIndex = 0;
}
})
}
.width('100%').height('100%')
}
视频列表区域
用于展示所有视频,可以手动点击切换播放视频。
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
List({space: 10, initialIndex: this.initialIndex}) {
ForEach(this.videoArr, (item, index) => {
ListItem() {
Image(item.previewUrl).width(100).height(100).borderRadius(10)
.border(index === this.initialIndex ? {width: 1, color: 0x1296db} : {})
}
.height('100%')
.onClick(() => {
this.initialIndex = index;
})
}, item => item)
}
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.width('60%').height('100%')
}
.width('98%')
视频应用程序效果
见顶部视频!
小结
通过本次“竞”开发板试用体验,对OpenHarmony开发环境搭建、源码编译、烧录,ArkTS语言、ArkUI框架有了更进一步的了解。若读者对ArkTS语言和ArkUI框架还有疑问,可以至官网学习。
后续会对Demo新增以下功能:
名称 |
描述 |
知识点 |
数据请求 |
目前使用本地视频,扩展为网络资源 |
数据请求http模块 |
视频播放进度条 |
自定义视频播放进度条 |
Progress、Video |
登录 |
实现登录页面 |
TextInput |
侧边栏 |
点击头像图标弹出侧边栏 |
SideBarContainer |
选项卡 |
多类别选项卡 |
Tabs |
... |
|
|
源码地址
git仓库