鸿蒙 next 实战： 烟花模拟器 | f2e 前端技术论坛-金年会app官方网

通过上一篇文章可以看出，要在鸿蒙应用中实现特别炫的特效还是比较复杂。动画固然重要，但如果在赶工期的情况下，大家都会优先业务，那有没有简单快速的方法呢？
有的，也用像 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 () 回到金年会app官方网首页。

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 智能应用实战，待续～

本作品采用《cc 协议》，转载必须注明作者和本文链接