鸿蒙原生开发手记:04-一个完整元服务案例

少湖说
• 阅读 469

影院热映

分享一个完整的元服务案例,这个案例高仿了豆瓣的小程序。

简介

整个元服务分为 4-5 个页面,首页为列表页,展示了当前影院热门的电影,点开是一个详情介绍页,里面有影片详情,演职表,相关影片推荐等,热门海报。打开海报是一个完整的海报展示页,点开可以产看大图。 另外,还有一个关于我们的介绍页。

设计

元服务没有使用底部页签,而是把关于我们放置在了页面底部,以较为委婉的方式进行展示。

代码

  1. 查看 entry/src/main/etc/pages/ 目录,整个应用分为了四个页面。 其路由在 entry/src/main/resources/base/profile/main_pages.json 中配置,路由名与文件名一一对应。 在 main_pages.json 所在地目录中,可以看到一个 form_config.json文件,这个用来配置服务卡片,在此按下不表。

页面中多使用行列布局,各种间距优先使用 Blank() 来指定。

在 Album 页面中,使用了网格布局,点击其中一张图片时,会播放幻灯片,这里使用了 @lyb/media-preview 三方库,以下是核心代码:

Grid() {
    ForEach(this.items, (item: Photo, index: number) => {
      GridItem() {
        Image(item.image.normal.url)
          .width('100%')
          .height(140)
          .objectFit(ImageFit.Cover)
          .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 1.1 })
          .visibility(index == this.index ? Visibility.Hidden : Visibility.Visible)
          .onClick((event) => {
            this.options
              .setInitIndex(index)
              .setMedias(this.getPreviewResources())
              .setIndicator(false)
            MediaPreview.open(this.getUIContext(), this.options)
          })
      }
    })
  }
  .columnsTemplate('1fr 1fr 1fr')
  .columnsGap(2)
  .rowsGap(2)
  .scrollBar(BarState.Off)

  1. common 目录存放一些全局变量,如 Constants.ets 文件,这里使用静态变量。另外还有请求类的简单封装,同样使用静态类作为单例。

为了让导入代码更简洁,同时也 “高内聚低耦合”,使用了 index 文件来导出这个目录下得类和方法。

Request 中的方法使用了泛型,这样可以根据传人类型自动反序列化,减少了样板代码量。 3. components 组件目录。这里存放各封装的小组件。本案例中包含了演职表、版权声明,海报列表,以及相关推荐共 4 个小组件。

Copyright 是一个简单的小组件,显示在页脚。

@Component
export struct Copyright {
  build() {
    Row() {
      Image($r('app.media.nutpi')).width(32)
      Blank().width(8)
      Text('坚果派出品').fontWeight(FontWeight.Bold).fontColor(Color.Gray)
    }.justifyContent(FlexAlign.Center)
    .width('100%')
    .onClick((event) => {
      router.pushUrl({ url: 'pages/About' })
    })
  }
}```

  1. quickactions/pages/QuickActionCard.ets 为服务卡片的页面,这里描述了卡片的 UI,通过 Formlink 监听和触发点击事件
 FormLink({
      action: this.ACTION_TYPE,
      abilityName: this.ABILITY_NAME,
      params: {
        action: this.MESSAGE
      }
    }) {
      Row() {
        Text('影院热映').fontSize(14)
          .fontColor($r('app.color.card_label'))
        Image($r('app.media.icon'))
          .width(32)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(this.FULL_HEIGHT_PERCENT)
      .width('100%')
      .padding({
        top: 10,
        left: 12,
        right: 12,
        bottom: 10
      })
      .backgroundColor($r('app.color.background_color'))
    }

在上面的代码中,描述了一个行布局,左侧为图标,右侧为应用名称。

5.viewmodels 为视图数据模型。本案例共 5 个模型,分别是 AppInfoCelebrities, Movie, Photos, Relative.

export class AppInfo {
  logo: string = '';
  appName: string = '';
  appLinking: string = '';
  appId: string = '';
  desc: string = '';
  type: string = '';
}

AppInfo 是一个简单的应用信息类,包含 logo,应用名称,applink,描述和应用类型等信息。

应用截图

首页 我的 帮助
鸿蒙原生开发手记:04-一个完整元服务案例 鸿蒙原生开发手记:04-一个完整元服务案例 鸿蒙原生开发手记:04-一个完整元服务案例
鸿蒙原生开发手记:04-一个完整元服务案例 鸿蒙原生开发手记:04-一个完整元服务案例

注意事项

  1. 打开元服务豁免管控:系统-开发者选项-开发中元服务豁免管控

其他

关于应用创建、服务卡片、打包签名、上架审核等,可以查看往期文章,或下方的参考资料。

完整代码

完整的代码见代码仓库 https://gitee.com/zacks/arkts-ohos-demo

参考资料

点赞
收藏
评论区
推荐文章
编程范儿 编程范儿
3年前
Vue刷新页面有哪几种方式
在Vue项目中,刷新当前页除了window.reload(),你还能想到什么办法?而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候,我们经常需要通过路由中的详情id去获取内容,当我们在不同的详情页来回切换的时候,打开的页面是同一个,只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口
Stella981 Stella981
3年前
React Native 开发豆瓣评分(七)首页组件开发
首页内容拆分看效果图,首页由热门影院、豆瓣热门、热门影视等列表组成,每个列表又由头加横向滑动的电影海报列表构成。所以可以先把页面的电影海报、评分、列表头做成组件,然后在使用ScrollView将内容包裹即可构成首页。<divaligncenter<imgsrc"https://img2018.cnblogs.co
少湖说 少湖说
7个月前
鸿蒙原生开发手记:01-元服务开发
简介元服务是鸿蒙中的一种轻量应用形态,无需下载,直接运行。类似于微信小程序,但与小程序不同的是,元服务更加轻量。元服务使用原生开发,是系统级提供的,无论从易用性、性能、体验上,都要比小程序好。创建元服务使用DevEco,点击Create,左侧模板选择Ato
少湖说 少湖说
7个月前
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
导读本文带来非常详细的元服务开发及上架全流程介绍,包含元服务介绍、创建、服务卡片、签名、开发测试、签名打包、上架审核等,一应俱全。元服务简介元服务是一种新的服务提供方式开发简单、免安装、易于获取和使用相较于小程序,系统原生,丝滑流畅轻量应用程序形态,具备秒
陈杨 陈杨
1星期前
鸿蒙5开发宝藏案例分享---一多开发实例(图片美化)
🌟【鸿蒙开发宝藏案例分享】一次搞定多端适配的图片美化应用开发思路!🌟Hey小伙伴们今天在翻鸿蒙文档时挖到一个超实用的大宝藏!原来官方早就悄悄提供了超多"一多开发"的实战案例,特别是这个图片美化应用的完整实现方案,必须立刻分享给大家!(搓手手.gif)🀀
陈杨 陈杨
1星期前
鸿蒙5开发宝藏案例分享---体验流畅的首页信息流
🌟鸿蒙新闻类首页开发全攻略:流畅动效懒加载实战Hey各位鸿蒙开发者!今天要分享一个超实用的鸿蒙新闻类首页开发方案,官方文档里藏着的宝藏案例被我挖出来了!从流畅的Tab切换动效到丝滑的懒加载列表,手把手带大家实现高性能新闻首页👇🚀整体场景效果用户操作
陈杨 陈杨
2星期前
鸿蒙5开发宝藏案例分享---点击响应时延分析
鸿蒙宝藏大发现!官方隐藏的实战案例,开发效率直接翻倍🚀大家好呀!最近在折腾鸿蒙开发时,意外挖到了华为官方的案例宝藏库!原来HarmonyOS文档里藏了近百个场景化案例,覆盖了布局适配、性能优化、动效实现等高频需求。这些案例不仅提供完整代码,还有避坑指南,
鸿蒙小林 鸿蒙小林
1星期前
《仿盒马》app开发技术分享-- 商品详情页(10)
技术栈Appgalleryconnect开发准备上一节我们实现了自定义标题栏和商品详情的数据接收,我们已经拿到了想要的数据,这一节我们要丰富商品详情页的内容。商品详情页面我们需要展示的是商品的各个属性参数、商品的图片、商品规格、活动详情等功能分析商品详情页
鸿蒙小林 鸿蒙小林
1星期前
《仿盒马》app开发技术分享-- 兑换商品详情(69)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品列表的展示,用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了,我们距离一个完整的app又更近了一步,现在我们要实现的就是当用户点击列表条目的时候能够查看数据详情。功
使用taro+canvas实现微信小程序的图片分享功能 | 京东云技术团队
业务场景二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。使用场景及功能:微信小程序生成海报图片分享好友下载图片使用技