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

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

作者: MardaWang | 来源:发表于2024-11-18 09:10 被阅读0次

前面已经创建了一个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模块可以作为二方库和三方库提供给其他应用使用,如果需要对代码资产进行保护时,建议开启混淆能力。

    混淆能力开启后,DevEco Studio在构建HAR时,会对代码进行编译、混淆及压缩处理,保护代码资产。

  • 仅Stage模型的ArkTS工程支持混淆。

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

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

相关文章

  • 一个抖音小技巧

    现在很多朋友,看抖音,刷抖音,玩抖音,甚至要自己做一个号拍抖音! 如果我们从零开始做抖音小视频,肯定离不了对自己的...

  • 仿抖音短视频系统开发,商城小程序开发

    仿抖音短视频系统开发,类似抖音小视频方案系统定制开发、最火爆抖音短视频平台系统软件开发、抖音短视频功能模块系统制作...

  • iOS仿抖音—评论视图滑动消失

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失 前...

  • iOS仿抖音—播放视图滑动隐藏

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失iO...

  • iOS仿抖音—加载点赞动画效果

    iOS仿抖音短视频 iOS仿抖音—左右滑动切换效果iOS仿抖音—上下滑动播放视频iOS仿抖音—评论视图滑动消失iO...

  • Android仿抖音App

    Github项目仓库 抖音这么火,我就想着要不自己也做一个吧,于是就有了我的自制抖音。喜欢的可以点个star或关注...

  • 转场动画-仿AppStore跳转及抖音评论

    转场动画-仿AppStore跳转及抖音评论 转场动画-仿AppStore跳转及抖音评论

  • 我的技术成长之路

    最近发了一个专题 从零开始仿写一个抖音App 承蒙大家的关注阅读量也挺多了。所以在群里的同志们“鼓动”我写一篇成长...

  • APP

    手把手教你从零开始做一个好看的 APP Android 开发中我常用的手机App(持续更新)

  • 第一篇:Android之闪屏页

    《Android:从零开始开发一个App应用》系列文章01_前言02_开发环境配置03_App应用启动页04_底部...

网友评论

      本文标题:从零开始仿抖音做一个APP(欢迎页开发)

      本文链接:https://www.haomeiwen.com/subject/dekpjjtx.html