OpenHarmony开发—购物示例应用

介绍

本示例展示在进场时加载进场动画，整体使用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