陕西做网站电话,网站右键屏蔽,怎么制作一个app应用,访问网站获取qq标准系统新增支持了方舟开发框架#xff08;ArkUI#xff09;、分布式组网和 FA 跨设备迁移能力等新特性#xff0c;因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。 打开应用在通过邀请用户进行设备认证后#xff0c;用户须根据提示完成相应操作ArkUI、分布式组网和 FA 跨设备迁移能力等新特性因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。 打开应用在通过邀请用户进行设备认证后用户须根据提示完成相应操作然后通过分布式流转实现随机传递炸弹给下一位用户的效果。那么这样一款传炸弹应用如何进行开发呢
完整的项目结构目录如下
├─entry
│ └─src
│ └─main
│ │ config.json // 应用配置
│ │
│ ├─ets
│ │ └─MainAbility
│ │ │ app.ets //ets应用程序主入口
│ │ │
│ │ └─pages
│ │ CommonLog.ets // 日志类
│ │ game.ets // 游戏首页
│ │ RemoteDeviceManager.ets // 设备管理类
│ │
│ └─resources // 静态资源目录
│ ├─base
│ │ ├─element
│ │ │
│ │ ├─graphic
│ │ ├─layout
│ │ ├─media // 存放媒体资源
│ │ │
│ │ └─profile
│ └─rawfile我们可以分为如下 3 步编写声明式 UI 界面、添加分布式能力和编写游戏逻辑。
一、编写声明式UI界面
1. 新增工程
在 DevEco Studio 中点击 File - New Project -Standard Empty Ability-NextLanguage 选择 ETS 语言最后点击 Finish 即创建成功。 图1 新建工程
2. 编写游戏页面 图2 游戏界面效果图
效果图如上可以分为两部分
顶部状态提示栏
首先在 entry 组件入口 build() 中使用 Stack 作为容器达到图片和文字堆叠的效果
接着依次写入 Image 包裹的两个 Text 组件
Stack() {Image($r(span classhljs-stringapp.media.title/span)).objectFit(ImageFit.Contain).height(span classhljs-number120/span)Column() {Text(span classhljs-keywordthis/span.duration.toString() span classhljs-stringms/span).fontColor(Color.White)Text(span classhljs-keywordthis/span.touchText).fontColor(Color.White)}}中间游戏炸弹九宫格区域
使用 Grid 网格容器来编写九宫格区域 在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片 在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置 通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件
Stack() {Image($r(span classhljs-stringapp.media.title/span)).objectFit(ImageFit.Contain).height(span classhljs-number120/span)Column() {Text(span classhljs-keywordthis/span.duration.toString() span classhljs-stringms/span).fontColor(Color.White)Text(span classhljs-keywordthis/span.touchText).fontColor(Color.White)}}3. 添加弹窗
创建规则游戏弹窗
1通过 CustomDialog 装饰器来创建自定义弹窗使用方式可参考
自定义弹窗文档https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
2规则弹窗效果如下弹窗组成由两个 Text 和两个 Image 竖向排列组成所以我们可以在 build()下使用 Column 容器来包裹组件代码如下 图3 游戏规则
CustomDialogstruct RuleDialog {controller: CustomDialogControllerconfirm: () span classhljs-keywordvoid/spaninvite: () span classhljs-keywordvoid/spanConsume deviceList: RemoteDevice[]build() {Column() {Text(span classhljs-string游戏规则/span).fontSize(span classhljs-number30/span).margin(span classhljs-number20/span)Text(span classhljs-string炸弹会随机出现在9个方块内,需要在规定时间内完成指定操作点击、双击或长按,即可将炸弹传递给下一个人,小心炸弹可是会越来越快的喔!/span).fontSize(span classhljs-number24/span).margin({ bottom: span classhljs-number10/span })Image($r(span classhljs-stringapp.media.btn_start/span)).objectFit(ImageFit.Contain).height(span classhljs-number80/span).margin(span classhljs-number10/span).onClick(() {console.info(TAG span classhljs-stringClick start game/span)span classhljs-keywordif/span (checkTrustedDevice(span classhljs-keywordthis/span.remoteDeviceModel)) {span classhljs-keywordthis/span.controller.close()span classhljs-keywordthis/span.confirm()}})Image($r(span classhljs-stringapp.media.btn_Invite/span)).objectFit(ImageFit.Contain).height(span classhljs-number80/span).margin(span classhljs-number10/span).onClick(() {span classhljs-keywordthis/span.invite()})}.width(span classhljs-string90%/span).margin(span classhljs-number20/span).backgroundColor(Color.White)}}3在 entry 创建 CustomDialogController 对象并传入弹窗所需参数后面可通过该对象 open() 和 close() 方法进行打开和关闭弹窗
Provide deviceList: RemoteDevice[] []
private ruleDialog: CustomDialogController span classhljs-keywordnew/span CustomDialogController({builder: RuleDialog({invite: () span classhljs-keywordthis/span.InvitePlayer(),confirm: () span classhljs-keywordthis/span.startGame(),deviceList: span classhljs-keywordthis/span.deviceList}),autoCancel: span classhljs-literalfalse/span
})创建游戏失败弹窗并添加动画效果 图4 游戏失败弹窗动画
1编写弹窗布局将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中
2用变量来控制动画起始和结束的位置用 Flex 容器包裹炸弹图片并用 State 装饰变量 toggle通过变量来动态修改 [Flex]的direction 属性
State toggle: boolean span classhljs-literaltrue/span
private controller: CustomDialogController
Consume deviceList: RemoteDevice[]
private confirm: () span classhljs-keywordvoid/span
private interval span classhljs-literalnull/spanbuild() {Column() {Text(span classhljs-string游戏失败/span).fontSize(span classhljs-number30/span).margin(span classhljs-number20/span)Flex({direction: span classhljs-keywordthis/span.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,alignItems: ItemAlign.Center}){Image($r(span classhljs-stringapp.media.bomb/span)).objectFit(ImageFit.Contain).height(span classhljs-number80/span)}.height(span classhljs-number200/span)Image($r(span classhljs-stringapp.media.btn_restart/span)).objectFit(ImageFit.Contain).height(span classhljs-number120/span).margin(span classhljs-number10/span).onClick(() {span classhljs-keywordthis/span.controller.close()span classhljs-keywordthis/span.confirm()})}.width(span classhljs-string80%/span).margin(span classhljs-number50/span).backgroundColor(Color.White)
}3设置动画效果使用 animateTo 显式动画接口炸弹位置切换时添加动画并且设置定时器定时执行动画
aboutToAppear() {span classhljs-keywordthis/span.setBombAnimate()
}setBombAnimate() {span classhljs-keywordlet/span fun () {span classhljs-keywordthis/span.toggle !span classhljs-keywordthis/span.toggle;}span classhljs-keywordthis/span.interval setInterval(() {animateTo({ duration: span classhljs-number1500/span, curve: Curve.Sharp }, fun)}, span classhljs-number1600/span)
}二、添加分布式流转
分布式流转需要在同一网络下通过 DeviceManager 组件进行设备间发现和认证获取到可信设备的 deviceId 调用 FeatureAbility.startAbility(parameter)即可把应用程序流转到另一设备。
原本分布式流转应用流程如下
创建 DeviceManager 实例调用实例的 startDeviceDiscovery()开始设备发现未信任设备设置设备状态监听 on(‘deviceStateChange’callback),监听设备上下线状态设置设备状态监听 on(‘deviceFound’callback),监听设备发现传入未信任设备参数调用实例 authenticateDevice 方法对设备进行 PIN 码认证若是已信任设备可通过实例的 getTrustedDeviceListSync() 方法来获取设备信息将设备信息中的 deviceId 传入featureAbility.startAbility 方法实现流转流转接收方可通过featureAbility.getWant() 获取到发送方携带的数据注销设备发现监听 off(‘deviceFound’)注销设备状态监听 off(‘deviceStateChange’)
项目中将上面设备管理封装至 RemoteDeviceManager通过 RemoteDeviceManager 的四个方法来动态维护 deviceList 设备信息列表。 图5 分布式流转
项目实现分布式流转只需如下流程
1. 创建RemoteDeviceManager实例
1导入 RemoteDeviceManager
import {RemoteDeviceManager} from span classhljs-string./RemoteDeviceManager/span2声明 Provide 装饰的设备列表变量 deviceList和创建 RemoteDeviceManager 实例。
Provide deviceList: RemoteDevice[] []
private remoteDm: RemoteDeviceManager span classhljs-keywordnew/span RemoteDeviceManager(span classhljs-keywordthis/span.deviceList)2. 刷新设备列表
在生命周期 aboutToAppear 中调用刷新设备列表和开始发现设备。
aboutToAppear 定义函数在创建自定义组件的新实例后在执行其 build 函数之前执行。
aboutToAppear() {span classhljs-keywordthis/span.remoteDm.refreshRemoteDeviceList() span classhljs-comment// 刷新设备列表/spanspan classhljs-keywordthis/span.remoteDm.startDeviceDiscovery() span classhljs-comment// 开始发现设备/span
}3. 设备认证
invitePlayer(remoteDevice:RemoteDevice) {span classhljs-keywordif/span (remoteDevice.status RemoteDeviceStatus.ONLINE) {prompt.showToast({ message: span classhljs-stringAlready invited!/span })span classhljs-keywordreturn/span}span classhljs-keywordthis/span.remoteDm.authDevice(remoteDevice).then(() {prompt.showToast({ message: span classhljs-stringInvite success! deviceName/span remoteDevice.deviceName })}).catch(() {prompt.showToast({ message: span classhljs-stringInvite fail!/span })})
}4. 跨设备流转
从 deviceList 中获取设备列表在线的设备 Id通过 featureAbility.startAbility 进行流转。
async startAbilityRandom() {span classhljs-keywordlet/span deviceId span classhljs-keywordthis/span.getRandomDeviceId() span classhljs-comment// 随机获取设备id/spanCommonLog.info(span classhljs-stringfeatureAbility.startAbility deviceId/span deviceId);span classhljs-keywordlet/span bundleName await getBundleName()span classhljs-keywordlet/span wantValue {bundleName: bundleName,abilityName: span classhljs-stringcom.sample.bombgame.MainAbility/span,deviceId: deviceId,parameters: {ongoing: span classhljs-literaltrue/span,transferNumber: span classhljs-keywordthis/span.transferNumber span classhljs-number1/span}};featureAbility.startAbility({want: wantValue}).then((data) {CommonLog.info(span classhljs-string featureAbility.startAbility finished, /span span classhljs-built_inJSON/span.stringify(data));featureAbility.terminateSelf((error) {CommonLog.info(span classhljs-stringterminateSelf finished, error/span error);});});
}5. 注销监听
在声明周期 aboutToDisappear 进行注销监听。
aboutToDisappear 定义函数在自定义组件析构消耗之前执行。
aboutToDisappear() {span classhljs-keywordthis/span.remoteDm.stopDeviceDiscovery() span classhljs-comment// 注销监听/span
}三、编写游戏逻辑
1. 开始游戏
startGame() {CommonLog.info(span classhljs-stringstartGame/span);span classhljs-keywordthis/span.randomTouchRule() span classhljs-comment// 随机游戏点击规则/spanspan classhljs-keywordthis/span.setRandomBomb() span classhljs-comment// 随机生成炸弹位置/spanspan classhljs-keywordthis/span.stopCountDown() span classhljs-comment// 停止倒计时/spanspan classhljs-keywordif/span (span classhljs-keywordthis/span.transferNumber span classhljs-number10/span) {span classhljs-keywordthis/span.duration span classhljs-number3000/span - span classhljs-keywordthis/span.transferNumber * span classhljs-number100/span} span classhljs-keywordelse/span {span classhljs-keywordthis/span.duration span classhljs-number2000/span}span classhljs-keywordconst/span interval: number span classhljs-number500/spanspan classhljs-comment// 开始倒计时/spanspan classhljs-keywordthis/span.timer setInterval(() {span classhljs-keywordif/span (span classhljs-keywordthis/span.duration interval) {span classhljs-keywordthis/span.duration span classhljs-number0/spanclearInterval(span classhljs-keywordthis/span.timer)span classhljs-keywordthis/span.timer span classhljs-literalnull/spanspan classhljs-keywordthis/span.gameFail()} span classhljs-keywordelse/span {span classhljs-keywordthis/span.duration - interval}}, interval)
}2. 判断输赢
编写判断逻辑用于不同的点击事件中调用。
/*** 判断游戏输赢* param operation 点击类型*/
judgeGame(operation:RuleType) {this.stopCountDown()if (operation ! this.ruleText) {this.gameFail()} else {prompt.showToast({ message: finish })this.bombIndex -1this.startAbilityRandom()}
}3. 游戏失败
游戏失败弹出游戏失败弹框。
gameFail() {prompt.showToast({message: span classhljs-stringGame Fail/span})CommonLog.info(span classhljs-stringgameFail/span);span classhljs-keywordthis/span.gameFailDialog.open()
}四、项目下载和导入
项目仓库地址
https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame
1git下载
git clone https:span classhljs-comment//gitee.com/openharmony-sig/knowledge_demo_temp.git/span2项目导入
打开 DevEco Studio点击 File-Open-下载路径/FA/Entertainment/BombGame
为了能让大家更好的学习鸿蒙HarmonyOS NEXT开发技术这边特意整理了《鸿蒙开发学习手册》共计890页希望对大家有所帮助https://qr21.cn/FV7h05
《鸿蒙开发学习手册》
如何快速入门https://qr21.cn/FV7h05
基本概念构建第一个ArkTS应用…… 开发基础知识https://qr21.cn/FV7h05
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 基于ArkTS 开发https://qr21.cn/FV7h05
Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列…… 鸿蒙开发面试真题含参考答案https://qr18.cn/F781PH 鸿蒙开发面试大盘集篇共计319页https://qr18.cn/F781PH
1.项目开发必备面试题 2.性能优化方向 3.架构方向 4.鸿蒙开发系统底层方向 5.鸿蒙音视频开发方向 6.鸿蒙车载开发方向 7.鸿蒙南向开发方向
