介绍
本示例展示在进场时加载进场动画,整体使用Tabs容器设计应用框架,通过TabContent组件设置分页面,在子页面中绘制界面。通过Navigation完成页面之间的切换。在详情页中通过 Video组件加载视频资源,使用CustomDialogController弹窗选择位置信息,点击首页及购物车返回主页面。
本示例使用Tabs容器 实现通过页签进行内容视图切换。使用Navigation实现页面之间的切换。使用自定义弹窗 设置位置信息。使用Swiper 组件实现页面展示图轮播。使用Grid 容器组件设置展示的商品信息。
本示例用到了延迟任务回调能力接口@ohos.WorkSchedulerExtensionAbility 。
通知管理的能力接口@ohos.notification 。
HTTP数据请求能力接口@ohos.net.http 。
媒体查询接口@system.mediaquery 。
管理窗口能力接口@ohos.window 。
效果预览
使用说明:
1、启动应用进入进场动画,然后进入首页的时候会有升级弹窗的提示,判断应用需不需要升级,整个应用分四部分,首页、新品、购物车、我的。可以点击进行切换。
2、“首页”页面具有扫一扫功能、搜索框、轮播图、tabs、商品列表。
3、“首页”页面的扫一扫点击可以进行二维码扫描,点击商品可以跳转到详情页。
4、“商品详情页”上部分是视频,点击视频进行播放,也可以点击进入全屏模式,向下滑动详情页视频可以变成小窗口模式。点击右侧悬浮的直播按钮,可进入直播页面,直播页面可进行视频播放。
5.“商品详情页”有个分享功能,点击可进行分享。点击选择收货地址可弹出选择地址的选项,可进行选择地址。
6.断开网络链接,“商品详情页”中点击降价通知后,重新连接网络后通知栏有降价通知。
7.新品、购物车、我的目前是静态页面。
工程目录
OrangeShopping
├── AppScope
│ └── app.json5 // APP信息配置文件
├── entry/src/main // 商品主页
│ ├── ets
│ │ ├── Application
│ │ ├── Mainmability // 应用入口,在应用创建时进行必要的权限判断
│ │ ├── pages
│ │ │ ├── Index.ets // 首页的入口,首页加载页面(可点击跳过)
│ │ │ ├── Detail.ets // 商品详情页
│ │ │ ├── FullPage.ets // 商品详情页内的视频组件
│ │ │ ├── Home.ets // 首页
│ │ │ ├── LivePage.ets // 直播页
│ │ │ ├── ScanPage.ets // 二维码扫描组件
│ │ │ └── Setting.ets // 封装http请求页
│ │ ├── utils
│ │ │ ├── RouterUtil.ets // 路由跳转配置
│ │ └── WorkAbility
│ │ └── WorkAbility.ts
│ ├── module.json5 // Module的基本配置信息,应用运行过程中所需的权限信息。
│ ├── resources/base
│ │ ├── element // 文字信息列表
│ │ ├── profile // 全局路由配置
│ │ └── media // icon图片
├── feature/detailPageHsp/src/main // 商品主页
│ ├── ets
│ │ ├── mock // mock的数据
│ │ ├── components // 组件模块
│ │ └── main // 商品详情页模块
├── feature/emitter/src/main
│ ├── ets
│ │ └── components // 订阅购物车模块
├── feature/navigationHome/src/main
│ ├── ets
│ │ ├── good // 商品模块
│ │ ├── home // 首页模块
│ │ ├── user // 用户模块
│ │ └── shoppingCart // 商品购物车模块
相关概念
动效能力:动画应该尽可能减少冗余刷新,合理地使用动效开发效率更高,可以获得更好的性能。
具体实现
Navigation相关的能力:NavPathSt