从零开始仿抖音做一个APP(欢迎页开发)

2024-11-18  本文已影响0人  MardaWang

前面已经创建了一个HelloWorld项目,同时创建了包含工具、业务、启动等功能的多个业务模块模板,今天开始串联Har模块和Hap模块,此外,为项目添加一个欢迎页。

Har模块和Hap模块关联

我们创建的各个Har模块根目录下都有一个Index.ets文件,该文件是HAR导出声明文件的入口,HAR需要导出的接口,统一在Index.ets文件中导出。Index.ets文件是DevEco Studio默认自动生成的,用户也可以自定义,在模块的oh-package.json5文件中的main字段配置入口声明文件,配置如下所示:

{
  "main": "Index.ets"
}

如下图所示,可以看到通过export导出了名为MainPage的 ArkUI组件。当前HAR对外暴露的接口,在Index.ets导出该MainPage.ets文件:

image.png

接下来,在entry模块中引用Har资源,在该模块根目录找到oh-package.json5,在dependancie引入依赖module,

  "dependencies": {
    "base": "file:../../common/base",
    "feature_home": "file:../../features/feature_home"
  }

[图片上传失败...(image-d20561-1731978640553)]
接下来在entry模块的具体ets文件中引入module的接口或view组件,以创建欢迎页为例。

Module中添加资源并导出

在base模块中创建并导出了Constants.ets文件,同时创建了多个Utils文件,如下图
[图片上传失败...(image-986673-1731978640553)]

在entry模块创建欢迎页并引用module的资源

创建splash.ets文件并设置欢迎页、读秒跳转,可通过用户首选项设置欢迎页的展示逻辑,具体代码如下图所示:

image.png

可以看到, Constants 接口和 PreferencesUtil 工具类都是base模块中创建,在entry模块经过import后可直接调用:

import { Constants, PreferencesUtil } from 'base';

同样的,可通过$r引用HAR中的资源,例如在HAR模块的src/main/resources里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源。

欢迎页的样式和逻辑已完成,接下来需要修改EntryAbility的页面加载路径,即在onWindowStageCreate()将
windowStage.loadContent()的路径改为 ‘pages/Splash’ :

export default class EntryAbility extends UIAbility {
    ......
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Splash', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

    ...... 
}

最终的效果:
[图片上传失败...(image-70ba9c-1731978640553)]

至此,module之间相互依赖和欢迎页创建都完成了,大家运行自己的代码即可看到效果,遗留问题(比如欢迎页没有全屏,顶部底部有白块、项目名称、start_icon修改等)相信大家也注意到了,我们下一期进行优化。

小知识点:

可以在HAR模块的build-profile.json5文件中的ruleOptions字段下的enable进行设置,配置如下所示:

[图片上传失败...(image-6ebf0d-1731978640553)]

上一篇 下一篇

猜你喜欢

热点阅读