怎么给自己的公司做网站网络营销优化推广
标准系统新增支持了方舟开发框架（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->Next，Language 选择 ETS 语言，最后点击 Finish 即创建成功。
图1 新建工程
2. 编写游戏页面
图2 游戏界面效果图
效果图如上可以分为两部分：
- 顶部状态提示栏
首先在 @entry 组件入口 build() 中使用 Stack 作为容器，达到图片和文字堆叠的效果；
接着依次写入 Image 包裹的两个 Text 组件；
Stack() {Image($r(<span class="hljs-string">"app.media.title"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">120</span>)Column() {Text(<span class="hljs-keyword">this</span>.duration.toString() + <span class="hljs-string">'ms'</span>).fontColor(Color.White)Text(<span class="hljs-keyword">this</span>.touchText).fontColor(Color.White)}}
- 中间游戏炸弹九宫格区域
使用 Grid 网格容器来编写九宫格区域；
在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片；
在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置；
通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件；
Stack() {Image($r(<span class="hljs-string">"app.media.title"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">120</span>)Column() {Text(<span class="hljs-keyword">this</span>.duration.toString() + <span class="hljs-string">'ms'</span>).fontColor(Color.White)Text(<span class="hljs-keyword">this</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 class="hljs-keyword">void</span>invite: () => <span class="hljs-keyword">void</span>@Consume deviceList: RemoteDevice[]build() {Column() {Text(<span class="hljs-string">'游戏规则'</span>).fontSize(<span class="hljs-number">30</span>).margin(<span class="hljs-number">20</span>)Text(<span class="hljs-string">'炸弹会随机出现在9个方块内,需要在规定时间内完成指定操作（点击、双击或长按）,即可将炸弹传递给下一个人,小心炸弹可是会越来越快的喔!'</span>).fontSize(<span class="hljs-number">24</span>).margin({ bottom: <span class="hljs-number">10</span> })Image($r(<span class="hljs-string">"app.media.btn_start"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>).margin(<span class="hljs-number">10</span>).onClick(() => {console.info(TAG + <span class="hljs-string">'Click start game'</span>)<span class="hljs-keyword">if</span> (checkTrustedDevice(<span class="hljs-keyword">this</span>.remoteDeviceModel)) {<span class="hljs-keyword">this</span>.controller.close()<span class="hljs-keyword">this</span>.confirm()}})Image($r(<span class="hljs-string">"app.media.btn_Invite"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>).margin(<span class="hljs-number">10</span>).onClick(() => {<span class="hljs-keyword">this</span>.invite()})}.width(<span class="hljs-string">'90%'</span>).margin(<span class="hljs-number">20</span>).backgroundColor(Color.White)}}
3）在 @entry 创建 CustomDialogController 对象并传入弹窗所需参数，后面可通过该对象 open() 和 close() 方法进行打开和关闭弹窗；
@Provide deviceList: RemoteDevice[] = []
private ruleDialog: CustomDialogController = <span class="hljs-keyword">new</span> CustomDialogController({builder: RuleDialog({invite: () => <span class="hljs-keyword">this</span>.InvitePlayer(),confirm: () => <span class="hljs-keyword">this</span>.startGame(),deviceList: <span class="hljs-keyword">this</span>.deviceList}),autoCancel: <span class="hljs-literal">false</span>
})
- 创建游戏失败弹窗，并添加动画效果
图4 游戏失败弹窗动画
1）编写弹窗布局：将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中；
2）用变量来控制动画起始和结束的位置：用 Flex 容器包裹炸弹图片，并用 @State 装饰变量 toggle，通过变量来动态修改 [Flex]的direction 属性；
@State toggle: boolean = <span class="hljs-literal">true</span>
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => <span class="hljs-keyword">void</span>
private interval = <span class="hljs-literal">null</span>build() {Column() {Text(<span class="hljs-string">'游戏失败'</span>).fontSize(<span class="hljs-number">30</span>).margin(<span class="hljs-number">20</span>)Flex({direction: <span class="hljs-keyword">this</span>.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,alignItems: ItemAlign.Center}){Image($r(<span class="hljs-string">"app.media.bomb"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>)}.height(<span class="hljs-number">200</span>)Image($r(<span class="hljs-string">"app.media.btn_restart"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">120</span>).margin(<span class="hljs-number">10</span>).onClick(() => {<span class="hljs-keyword">this</span>.controller.close()<span class="hljs-keyword">this</span>.confirm()})}.width(<span class="hljs-string">'80%'</span>).margin(<span class="hljs-number">50</span>).backgroundColor(Color.White)
}
3）设置动画效果：使用 animateTo 显式动画接口炸弹位置切换时添加动画，并且设置定时器定时执行动画；
aboutToAppear() {<span class="hljs-keyword">this</span>.setBombAnimate()
}setBombAnimate() {<span class="hljs-keyword">let</span> fun = () => {<span class="hljs-keyword">this</span>.toggle = !<span class="hljs-keyword">this</span>.toggle;}<span class="hljs-keyword">this</span>.interval = setInterval(() => {animateTo({ duration: <span class="hljs-number">1500</span>, curve: Curve.Sharp }, fun)}, <span class="hljs-number">1600</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 class="hljs-string">'./RemoteDeviceManager'</span>
2）声明 @Provide 装饰的设备列表变量 deviceList，和创建 RemoteDeviceManager 实例。
@Provide deviceList: RemoteDevice[] = []
private remoteDm: RemoteDeviceManager = <span class="hljs-keyword">new</span> RemoteDeviceManager(<span class="hljs-keyword">this</span>.deviceList)
2. 刷新设备列表
在生命周期 aboutToAppear 中，调用刷新设备列表和开始发现设备。
aboutToAppear 定义：函数在创建自定义组件的新实例后，在执行其 build 函数之前执行。
aboutToAppear() {<span class="hljs-keyword">this</span>.remoteDm.refreshRemoteDeviceList() <span class="hljs-comment">// 刷新设备列表</span><span class="hljs-keyword">this</span>.remoteDm.startDeviceDiscovery() <span class="hljs-comment">// 开始发现设备</span>
}
3. 设备认证
invitePlayer(remoteDevice:RemoteDevice) {<span class="hljs-keyword">if</span> (remoteDevice.status == RemoteDeviceStatus.ONLINE) {prompt.showToast({ message: <span class="hljs-string">"Already invited!"</span> })<span class="hljs-keyword">return</span>}<span class="hljs-keyword">this</span>.remoteDm.authDevice(remoteDevice).then(() => {prompt.showToast({ message: <span class="hljs-string">"Invite success! deviceName="</span> + remoteDevice.deviceName })}).catch(() => {prompt.showToast({ message: <span class="hljs-string">"Invite fail!"</span> })})
}
4. 跨设备流转
从 deviceList 中获取设备列表在线的设备 Id，通过 featureAbility.startAbility 进行流转。
async startAbilityRandom() {<span class="hljs-keyword">let</span> deviceId = <span class="hljs-keyword">this</span>.getRandomDeviceId() <span class="hljs-comment">// 随机获取设备id</span>CommonLog.info(<span class="hljs-string">'featureAbility.startAbility deviceId='</span> + deviceId);<span class="hljs-keyword">let</span> bundleName = await getBundleName()<span class="hljs-keyword">let</span> wantValue = {bundleName: bundleName,abilityName: <span class="hljs-string">'com.sample.bombgame.MainAbility'</span>,deviceId: deviceId,parameters: {ongoing: <span class="hljs-literal">true</span>,transferNumber: <span class="hljs-keyword">this</span>.transferNumber + <span class="hljs-number">1</span>}};featureAbility.startAbility({want: wantValue}).then((data) => {CommonLog.info(<span class="hljs-string">' featureAbility.startAbility finished, '</span> + <span class="hljs-built_in">JSON</span>.stringify(data));featureAbility.terminateSelf((error) => {CommonLog.info(<span class="hljs-string">'terminateSelf finished, error='</span> + error);});});
}
5. 注销监听
在声明周期 aboutToDisappear 进行注销监听。
aboutToDisappear 定义：函数在自定义组件析构消耗之前执行。
aboutToDisappear() {<span class="hljs-keyword">this</span>.remoteDm.stopDeviceDiscovery() <span class="hljs-comment">// 注销监听</span>
}
三、编写游戏逻辑
1. 开始游戏
startGame() {CommonLog.info(<span class="hljs-string">'startGame'</span>);<span class="hljs-keyword">this</span>.randomTouchRule() <span class="hljs-comment">// 随机游戏点击规则</span><span class="hljs-keyword">this</span>.setRandomBomb() <span class="hljs-comment">// 随机生成炸弹位置</span><span class="hljs-keyword">this</span>.stopCountDown() <span class="hljs-comment">// 停止倒计时</span><span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.transferNumber < <span class="hljs-number">10</span>) {<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">3000</span> - <span class="hljs-keyword">this</span>.transferNumber * <span class="hljs-number">100</span>} <span class="hljs-keyword">else</span> {<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">2000</span>}<span class="hljs-keyword">const</span> interval: number = <span class="hljs-number">500</span><span class="hljs-comment">// 开始倒计时</span><span class="hljs-keyword">this</span>.timer = setInterval(() => {<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.duration <= interval) {<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">0</span>clearInterval(<span class="hljs-keyword">this</span>.timer)<span class="hljs-keyword">this</span>.timer = <span class="hljs-literal">null</span><span class="hljs-keyword">this</span>.gameFail()} <span class="hljs-keyword">else</span> {<span class="hljs-keyword">this</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 class="hljs-string">'Game Fail'</span>})CommonLog.info(<span class="hljs-string">'gameFail'</span>);<span class="hljs-keyword">this</span>.gameFailDialog.open()
}
四、项目下载和导入
项目仓库地址：
https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame
1）git下载
git clone https:<span class="hljs-comment">//gitee.com/openharmony-sig/knowledge_demo_temp.git</span>
2）项目导入
打开 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.鸿蒙南向开发方向
