首页 > 其他分享 >鸿蒙 Next 实战: 烟花模拟器

鸿蒙 Next 实战: 烟花模拟器

时间:2024-10-09 08:59:50浏览次数:8  
标签:鸿蒙 app Prop 组件 模拟器 Next 页面

前言

通过上一篇文章可以看出,要在鸿蒙应用中实现特别炫的特效还是比较复杂。动画固然重要,但如果在赶工期的情况下,大家都会优先业务,那有没有简单快速的方法呢?


有的,也用像 Android 和 iOS 里 WebView 的方式,h5 的特效现在是应有尽有,把他嵌入鸿蒙 Next 应用里就可以,那如何在鸿蒙 Next 中使用 WebView 来实现电子烟花?

 

实现要点

  1. 组件拆解
  2. 资源引入
  3. 页面路由
  4. WebView

 

开始实践

因为前面的木鱼和现在的烟花都是同一个小工具应用,公用组件的拆分、页面跳转和资源的引入全有涉及,所以就连同 WebView 一起总结一下。

组件拆解

在 ArkUI 中,UI 显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。这里我们将所有页面的导航拆分成一个公用组件,并定义为 HdNav.ets。

import { router } from '@kit.ArkUI'

@Component
export struct HdNav {
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  title: string = 'hello world'
  @Prop
  hasBorder: boolean = false
  @Prop
  leftIcon: ResourceStr = $r('app.media.ic_common_back')
  @Prop
  rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
  @Prop
  showRightIcon: boolean = true
  @Prop
  iconColor: ResourceStr = $r('app.color.black')
  @Prop
  titleColor: string = '#131313'
  @BuilderParam
  menuBuilder: () => void = this.defaultMenu

  @Builder
  defaultMenu() {

  }

  build() {
    Row({ space: 16 }) {
      Image(this.leftIcon)
        .size({ width: 24, height: 24 })
        .onClick(() => router.back())
        .fillColor(this.iconColor)
      Row() {
        if (this.title) {
          Text(this.title)
            .fontWeight(600)
            .fontColor(this.titleColor)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(18)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
      }
      .height(56)
      .layoutWeight(1)

      if (this.showRightIcon) {
        Image(this.rightIcon)
          .size({ width: 24, height: 24 })
          .objectFit(ImageFit.Contain)
          .bindMenu(this.menuBuilder)
      } else {
        Blank()
          .width(24)
      }
    }

    .padding({ left: 16, right: 16, top: this.topHeight })
    .height(56 + this.topHeight)
    .width('100%')
    .border({
      width: { bottom: this.hasBorder ? $r('app.float.common_border_width') : 0 },
      color: $r('app.color.common_gray_bg')
    })
  }
}

资源引入

应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。

  • 应用资源:借助资源文件能力,开发者在应用中自定义资源,自行管理这些资源在不同的设备或配置中的表现。

  • 系统资源:开发者直接使用系统预置的资源定义。

# 引入resouces/base/media下的home_selected的图片
$r('app.media.home_selected')

# 导入resources/rawfile下的index.html文件
$rawfile("index.html")

# 获取resources/rawfile下的audio.mp3音频
await getContext(this).resourceManager.getRawFd("audio.mp3")

页面路由

页面路由 router 根据页面的 uri 找到目标页面,从而实现跳转。以最基础的两个页面之间的跳转为例,具体实现步骤如下:

  1. 在 “Project“窗口,打开 src> main >ets,右键点击 pages 文件夹,创建一个页面。
  2. 在 resources/base/profile 下的 main_pages.json,新建一个 pages 中创建页面的文件名(注意大小写)。
  3. 调用 router.push () 路由到指定页面。
  4. 调用 router.back () 回到首页。

WebView

页面加载是 Web 组件的基本功能。根据页面加载数据来源可以分为三种常用场景,包括加载网络页面、加载本地页面、加载 HTML 格式的富文本数据。

页面加载过程中,若涉及网络资源获取,需要配置 ohos.permission.INTERNET 网络访问权限,下面以本地静态文件的方法举例。

  • 将资源文件放置在应用的 resources/rawfile 目录下。

 

  • 鸿蒙 Next 应用代码
import web_webview from '@ohos.web.webview';
import { HdNav } from '@mygames/basic';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      HdNav({ title: '看烟花秀', showRightIcon: false, iconColor: $r('app.color.black') })

      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadUrl($rawfile("index.html"));

          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }

        })
      // 组件创建时,加载www.example.com
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}
  • 烟花代码

     

写在后面

到这里鸿蒙 Next 应用实战暂告一段落了。但是鸿蒙系统提供了开箱即用的原生 AI 能力,更方便了我们开发者实现应用的快速智能化,所以,鸿蒙 Next 智能应用实战,待续~

 

标签:鸿蒙,app,Prop,组件,模拟器,Next,页面
From: https://www.cnblogs.com/zerofc/p/18451527

相关文章

  • 鸿蒙开发教程实战案例源码分享-仿微信长按录音效果
    鸿蒙开发仿微信长按录音效果如果你项目有IM聊天,那么长按录音功能是必须的,最好是跟微信一样的效果,对不对。一、思路:自定义触碰事件二、效果图:鸿蒙开发教程实战案例源码分享-仿微信长按录音效果三、关键代码://联系:893151960@Entry@ComponentstructIndex{......
  • 揭秘动态化跨端框架在鸿蒙系统下的高性能解决方案
    作者:京东科技胡大海前言动态化跨端框架(后文统称“动态化”)是一个由京东金融大前端团队全自主研发的,一份代码,可以在HarmonyOS、iOS、Android、Web四端运行的跨平台解决方案。在研发团队使用后可大幅降低研发人力成本;为业务提供实时触达、A/B触达等能力以提升业务投放效率;同时......
  • 鸿蒙 Next 实战: 电子木鱼
    前言正所谓:HelloWord是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈,那如何让学习鸿蒙Next更有成就感呢?下面就演示一下从零开发一个鸿蒙Next版的电子木鱼,主打就是一个抽象! 实现要点页面布局木鱼点击木鱼音效动画特效自定义弹窗 开始实......
  • 鸿蒙 Next 实战: 环境搭建
    前言作为独立开发者,如果我们错过了传统移动App,和后起小程序的红利,那万物互联+AI的应用开发就得抓住了。虽然个人上架应用平台难易都差不多,但是鸿蒙生态当前正需要广大开发者参与,一旦上架,相比其他平台,流量扶持力度更大,变现能力也更容易。所以,我们可以先开发一些应用占个位置......
  • 关于鸿蒙自己搭建项目环境要注意的点
    具体步骤如下https://xie.infoq.cn/article/4c72d00fab3499bc78de4fdd3但是与nativec++相关的东西不止上面还少不了CMakeList.txt, #theminimumversionofCMake.cmake_minimum_required(VERSION3.5.0)project(MyApplication)set(NATIVERENDER_ROOT_PATH${CMAKE_CU......
  • 鸿蒙应用示例:镂空效果实现教程
    在鸿蒙系统中,为了给用户带来更加生动的视觉体验,我们可以使用不同的技术手段来实现图像和文字的镂空效果。本文将通过三个具体的示例来展示如何在鸿蒙系统中实现实心矩形镂空、实心圆镂空以及文字镂空的效果。示例代码//定义一个名为Index的应用入口组件@Entry@Componentstruct......
  • 鸿蒙应用示例:实现文本高亮与自动换行
    在设计应用界面时,我们常常需要对某些重要的文本进行高亮显示,以引起用户的注意。同时,在一些场景中,我们需要确保长文本能够自动换行,以适应不同的屏幕尺寸和布局需求。本文将通过两个示例,分别展示如何在HarmonyOS应用中实现这些功能。【示例一】文本高亮显示@Entry@Componentstruct......
  • 鸿蒙应用示例:ArkTS中设置颜色透明度与颜色渐变方案探讨
    /***根据比例混合两个十六进制颜色值。*@paramcolorA第一个颜色的十六进制值,例如红色'#ff0000'。*@paramcolorB第二个颜色的十六进制值,例如黑色'#000000'。*@paramratio混合比例,0表示仅返回colorA,1表示仅返回colorB,介于0和1之间的值会混合两个颜色。......
  • 鸿蒙应用示例:应用开发中的动态获取属性与调用方法技巧
    随着HarmonyOS的发展,API版本的更新带来了许多新的特性和限制。在API11及以后的版本中,直接赋值对象的语法不再被支持,这要求开发者们采用新的方式来处理对象的创建和属性的访问。同时,HarmonyOS支持ETS(EnhancedTypeScript)文件,这是一种扩展了TypeScript的文件格式,用于更好地支持Harmo......
  • 鸿蒙应用示例:NEXT 中 Map 类型的使用及注意事项
    在JavaScript中,Map对象允许存储任何类型的键和值,提供了键值对的存储功能。在HarmonyOS中,Map的使用基本遵循JavaScript的标准,尤其是要注意set赋值只能用get获取,而索引赋值只能用索引获取。且它们可以同时赋值但遍历的方式又不同。【Map对象的赋值与获取】使用set方法赋值当你需要......