• Home
Name Date Size #Lines LOC

..--

AppScope/12-May-2024-5450

docs/12-May-2024-235175

entry/12-May-2024-1,7111,582

feature/12-May-2024-5,4145,071

hvigor/12-May-2024-77

libs/12-May-2024-

screenshots/device/12-May-2024-

.gitignoreD12-May-2024127 109

README_zh.mdD12-May-202418.4 KiB250188

build-profile.json5D12-May-20241.5 KiB6564

hvigorfile.jsD12-May-2024168 21

hvigorwD12-May-20241.4 KiB4928

hvigorw.batD12-May-20241.4 KiB5843

oh-package.json5D12-May-2024820 2825

ohosTest.mdD12-May-20241.6 KiB1311

README_zh.md

1# 购物示例应用
2
3### 介绍
4
5本示例展示在进场时加载进场动画，整体使用**Tabs**容器设计应用框架，通过**TabContent**组件设置分页面，在子页面中绘制界面。通过Navigation完成页面之间的切换。在详情页中通过**Video**组件加载视频资源，使用**CustomDialogController**弹窗选择位置信息，点击首页及购物车返回主页面。
6
7本示例使用[Tabs容器](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md)实现通过页签进行内容视图切换。使用[Navigation](https://gitee.com/openharmony/docs/blob/OpenHarmony-4.0-Beta2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md#navigation)实现页面之间的切换。使用[自定义弹窗](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md)设置位置信息。使用[Swiper](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-swiper.md)组件实现页面展示图轮播。使用[Grid](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md)容器组件设置展示的商品信息。
8
9本示例用到了延迟任务回调能力接口[@ohos.WorkSchedulerExtensionAbility](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-backgroundtasks-kit/js-apis-WorkSchedulerExtensionAbility.md) 。
10
11通知管理的能力接口[@ohos.notification](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-notification-kit/js-apis-notification.md) 。
12
13HTTP数据请求能力接口[@ohos.net.http]( https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-network-kit/js-apis-http.md) 。
14
15媒体查询接口[@system.mediaquery](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-mediaquery.md) 。
16
17管理窗口能力接口[@ohos.window](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md) 。
18
19### 效果预览
20
21![](screenshots/device/shopping.gif)
22
23使用说明：
24
251、启动应用进入进场动画，然后进入首页的时候会有升级弹窗的提示，判断应用需不需要升级，整个应用分四部分，首页、新品、购物车、我的。可以点击进行切换。
26
272、“首页”页面具有扫一扫功能、搜索框、轮播图、tabs、商品列表。
28
293、“首页”页面的扫一扫点击可以进行二维码扫描，点击商品可以跳转到详情页。
30
314、“商品详情页”上部分是视频，点击视频进行播放，也可以点击进入全屏模式，向下滑动详情页视频可以变成小窗口模式。点击右侧悬浮的直播按钮，可进入直播页面，直播页面可进行视频播放。
32
335.“商品详情页”有个分享功能，点击可进行分享。点击选择收货地址可弹出选择地址的选项，可进行选择地址。
34
356.断开网络链接，“商品详情页”中点击降价通知后，重新连接网络后通知栏有降价通知。
36
377.新品、购物车、我的目前是静态页面。
38
39### 工程目录
40
41```
42OrangeShopping
43├── AppScope
44│   └── app.json5                               // APP信息配置文件
45├── entry/src/main                              // 商品主页
46│   ├── ets
47│   │   ├── Application
48│   │   ├── Mainmability                        // 应用入口，在应用创建时进行必要的权限判断
49│   │   ├── pages
50│   │   │   ├── Index.ets                       // 首页的入口，首页加载页面(可点击跳过)
51│   │   │   ├── Detail.ets                      // 商品详情页
52│   │   │   ├── FullPage.ets                    // 商品详情页内的视频组件
53│   │   │   ├── Home.ets                        // 首页
54│   │   │   ├── LivePage.ets                    // 直播页
55│   │   │   ├── ScanPage.ets                    // 二维码扫描组件
56│   │   │   └── Setting.ets                     // 封装http请求页
57│   │   ├── utils
58│   │   │   ├── RouterUtil.ets                  // 路由跳转配置
59│   │   └── WorkAbility
60│   │       └── WorkAbility.ts
61│   ├── module.json5                            // Module的基本配置信息,应用运行过程中所需的权限信息。
62│   ├── resources/base
63│   │   ├── element                             // 文字信息列表
64│   │   ├── profile                             // 全局路由配置
65│   │   └── media                               // icon图片
66├── feature/detailPageHsp/src/main              // 商品主页
67│   ├── ets
68│   │   ├── mock                                // mock的数据
69│   │   ├── components                          // 组件模块
70│   │   └── main                                // 商品详情页模块
71├── feature/emitter/src/main
72│   ├── ets
73│   │   └── components                          // 订阅购物车模块
74├── feature/navigationHome/src/main
75│   ├── ets
76│   │   ├── good                                // 商品模块
77│   │   ├── home                                // 首页模块
78│   │   ├── user                                // 用户模块
79│   │   └── shoppingCart                        // 商品购物车模块
80```
81
82### 相关概念
83
84动效能力：动画应该尽可能减少冗余刷新，合理地使用[动效](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/animation_practice.md/)开发效率更高，可以获得更好的性能。
85
86### 具体实现
87Navigation相关的能力：NavPathStack路由转场，跨包引用Hsp,动态加载等能力[详见Navigation开发示例文章](docs/Navigation_zh.md) 。
881.应用创建时进行必要的权限判断：在[app.json5](entry/src/main/ets/MainAbility/MainAbility.ts )
89文件中对```"requestPermission"```对象进行权限匹配。如果有如果权限列表中有-1，说明用户拒绝了授权。
90
912.配置Module信息：
92
93* 在[module.json5]( entry/src/main/module.json5 )文件中配置```"extensionAbilities"```字段
94* 在```"requestPermissions"```标签中添加需要开的权限，例如使用相机拍摄照片和录制视频权限： "name": "
95  ohos.permission.CAMERA"
96
97**3.Navigation的使用：**
98   [Navigation](https://gitee.com/openharmony/docs/blob/OpenHarmony-4.0-Beta2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md#navigation)组件主要包含主页和内容页。主页由标题栏、内容区和工具栏组成，其中内容区默认首页显示导航内容(Navigation的子组件)
99   或非首页显示(NavDestination的子组件)，首页和非首页通过路由进行切换。Navigation的路由切换的方式有两种，在API Version 9上，首页导航内容需要配合[NavRouter](https://gitee.com/openharmony/docs/blob/OpenHarmony-4.0-Beta2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md)组件实现页面路由，
100   从API Version 10开始，首页推荐使用[NavPathStack](https://gitee.com/openharmony/docs/blob/OpenHarmony-4.0-Beta2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md#navpathstack10)配合[NavDestination](https://gitee.com/openharmony/docs/blob/OpenHarmony-4.0-Beta2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md)属性进行页面路由。本次示例主要介绍NavPathStack的使用，如下步骤所示：
101  * NavPathStack有两种路由切换方法，一种是pushPath，如主页---->设置页面，通过使用this.pageStack.pushPath({ name: 'SetPage' })进行跳转，源码参考[TitleBar.ets](feature/navigationHome/src/main/ets/components/home/TitleBar.ets)，
102   另外一种是pushPathByName，如主页---->详情页面，通过使用this.pageStack.pushPathByName('DetailPage', item)进行跳转，其中item为需要传递的参数，源码参考[GoodsList.ets](feature/navigationHome/src/main/ets/components/good/GoodsList.ets)
103
104  * NavPathStack支持pop、move、clear方法的使用；pop方法的作用是弹出路由栈栈顶元素，如首页进入商品详情页面，在详情页面使用this.pageStack.pop()方法返回到首页，clear方法的作用是清除栈中所有页面，
105     如首页跳转到详情页面，详情页面再进入直播页面，在直播页面通过使用this.pageStack.clear()直接返回到首页。除此之外，还有popTo(回退路由栈到第一个名为name的NavDestination页面)、
106     popToIndex(回退路由栈到index指定的NavDestination页面)、moveToTop(将第一个名为name的NavDestination页面移到栈顶)、moveIndexToTop(将index指定的NavDestination页面移到栈顶)方法,
107     由于本示例暂时没有合适的按钮去承载这些功能，所以本示例未体现。
108
109  * 路由栈信息,如下所示，源码参考[DetailPage.ets](feature/detailPageHsp/src/main/ets/main/DetailPage.ets);
110      ```
111      获取栈中所有NavDestination页面的名称：this.pageInfos.getAllPathName()
112      获取index指定的NavDestination页面的参数信息：this.pageInfos.getParamByIndex(1)
113      获取全部名为name的NavDestination页面的参数信息：this.pageInfos.getParamByName('pageTwo')
114      获取全部名为name的NavDestination页面的位置索引：this.pageInfos.getIndexByName('pageOne')
115      获取栈大小：this.pageInfos.size()
116      ```
117**4.动态加载的使用：**
118
119  * 定义需要被动态加载的组件DetailPage，本示例中组件加载使用搭配Navigation实现。源码参考[DetailPage.ets](feature/detailPageHsp/src/main/ets/main/DetailPage.ets)；
120  * 定义一个DynamicLoader动态回调类作为容器，用来注册和调用动态加载函数。源码参考[DynamicLoader.ets](feature/navigationHome/src/main/ets/common/DynamicLoader.ets)；
121  * 将DetailPage组件用DetailPageLoader函数封装，当DetailPageLoader被调用时，会渲染DetailPage页面。源码参考[DetailPageLoader.ets](entry/src/main/ets/pages/DetailPageLoader.ets)；
122  * 在主页实现动态加载DetailPage的步骤如下：
123  由于navDestination无法直接动态import组件（import是函数，组件中无法引用函数），此处采用声明@BuilderParam detailPageLoader函数，在点击时初始化此函数，此时navDestination中可以调用this.detailPageLoader()从而加载组件DetailPage。
124
125    a)主页Home中定义组件加载函数@BuilderParam detailPageLoader: () => void，用来承接await import异步导入detailPageLoader的结果。源码参考[Home.ets](entry/src/main/ets/pages/Home.ets)，
126     ```
127     @BuilderParam detailPageLoader: () => void
128     ```
129    b)注册异步函数，点击时为detailPageLoader初始化,当满足key为DetailPage时，此时异步的加载DetailPageLoader，渲染DetailPage源码参考[Home.ets](entry/src/main/ets/pages/Home.ets)，
130    ```
131    DynamicLoader.getInstance().register(
132      async (key: string) => {
133        if (key === "DetailPage") {
134          let obj = await import("./DetailPageLoader")
135          this.detailPageLoader = obj.DetailPageLoader;
136        }
137      }
138    ```
139    c) 定义NavDestination中动态加载函数，当存在跳转行为时，会调用此函数,源码参考[Home.ets](entry/src/main/ets/pages/Home.ets)；
140    ```
141     PageMap(name: string, param: NavPathStack) {
142       if (name === 'DetailPage') {
143         this.detailPageLoader();
144     })
145    ```
146    d)按钮触发点击函数，调用detailPageLoader，此时真正的初始化@BuilderParam detailPageLoader，并通过Navigation中PageMap动态加载组件DetailPage。,源码参考[GoodsList.ets](feature/navigationHome/src/main/ets/components/good/GoodsList.ets)，
147    ```
148    Column() // 首页goodsList组件
149      .onClick(() => {
150         // 动态加载组件
151         DynamicLoader.getInstance().fire('DetailPage').then(()=>{
152           this.active = true;
153           this.pageStack.pushPathByName('DetailPage', item);
154         })
155      })
156    ```
157**5.hsp包的创建与使用：**
158 本示例以创建detailPageHsp的hsp包为例，[Hsp包介绍及详细操作步骤](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/in-app-hsp.md/)
159  * 在根目录右键新创建module为Shared Library类型的hsp模块，并将模块命名为detailPageHsp并拖拽至feature文件夹下做包的统一管理；
160  * 定义hsp出口：在创建后的hsp包内编写业务代码，并在index.ets中export组件。[源码参考](feature/detailPageHsp/Index.ets)；
161  * 引用方hap如何使用hsp：通过在oh-package.json5文件中加入定义的hsp依赖。[源码参考](entry/oh-package.json5)；
162 ```
163  "dependencies": {
164     "@ohos/details-page-hsp": "file:../feature/detailPageHsp",
165   }
166 ```
167  * hap中使用：在组件中引入依赖。[源码参考](entry/src/main/ets/pages/Detail.ets)
168 ```
169 import { DetailPage } from '@ohos/details-page-hsp';
170 ```
171  * 编译时需选中detailPageHsp模块，在ide的工具栏中选择build-Make Module 'detailPageHsp'。
172  * 运行时，需要在运行模块处配置edit Configuration并勾选Deploy Multi Hap Packages进行混合编译，即可运行。[详细操作步骤](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/in-app-hsp.md/)
173
1746.多屏监听：在首页加载时会通过mediaquery.matchMediaSync()监听当前屏幕尺寸curBp=[sm代表小屏，md代表中屏，lg代表大屏]
175，并将当前值存储到Appstorage里，通过AppStorage.SetOrCreate('curBp', this.curBp)。
176
1777.响应式渲染：通过全局的UI状态AppStorage存储，绑定了appstorage的数据会进行响应式屏幕尺寸渲染。
178
1798.订阅购物车事件：以持久化方式订阅并接收事件回调，持续订阅发布事件。通过emitter.emit(addToShoppingCartId,
180shoppingCartData)。[源码参考](feature/emitter/src/main/ets/components/feature/EmitterClass.ets) 。
181
182
183### 相关权限
184
185允许使用Internet网络: [ohos.permission.INTERNET](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
186
187允许应用控制马达振动：[ohos.permission.VIBRATE](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionvibrate)
188
189允许应用使用相机拍摄照片和录制视频：[ohos.permission.CAMERA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioncamera)
190
191允许应用获取设备位置信息：[ohos.permission.LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionlocation)
192
193允许应用在后台运行时获取设备位置信息：[ohos.permission.LOCATION_IN_BACKGROUND](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionlocation_in_background)
194
195允许应用截取屏幕图像：[ohos.permission.CAPTURE_SCREEN ](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md#ohospermissioncapture_screen)
196
197允许应用读取用户外部存储中的媒体文件信息：[ohos.permission.READ_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionread_media)
198
199允许应用访问用户媒体文件中的地理位置信息：[ohos.permission.MEDIA_LOCATION](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionmedia_location)
200
201允许应用读写用户外部存储中的媒体文件信息：[ohos.permission.WRITE_MEDIA](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionwrite_media)
202
203### 依赖
204
205[数据请求](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Connectivity/Http)
206本示例的网络配置服务依赖此示例。
207
208[位置服务](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/DeviceManagement/Location)
209本示例的详情页中的位置服务功能依赖此示例。
210
211[媒体库视频](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/VideoShow)
212本示例的详情页中的视频功能依赖此示例。
213
214[分享](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/ApplicationModels/CustomShare)
215本示例的详情页中的分享功能依赖此示例。
216
217[事件通知](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Notification/CustomNotification)
218本示例详情页中的降价通知功能依赖此示例。
219
220[扫一扫](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/QRCodeScan)
221本示首页中的扫码功能依赖此示例。
222
223### 约束与限制
224
2251.本示例仅支持标准系统上运行，支持设备：RK3568。
226
2272.本示例已适配API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)。
228
2293.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。
230
2314.本示例需要使用系统权限的接口。使用Full SDK时需要手动从镜像站点获取，并在DevEco Studio中替换，具体操作可参考[替换指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/faqs/full-sdk-switch-guide.md)。
232
2335.本示例需联网运行。
234
2356.弹窗升级需配置服务器后触发。
236
2377.本示例所配置的权限ohos.permission.CAPTURE_SCREEN为system_core级别(相关权限级别可通过[权限定义列表](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md)
238查看)，需要手动配置对应级别的权限签名(具体操作可查看[自动化签名方案](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/security/hapsigntool-overview.md/)。
239
240### 下载
241
242如需单独下载本工程，执行如下命令：
243
244````
245git init
246git config core.sparsecheckout true
247echo code/Solutions/Shopping/OrangeShopping/ > .git/info/sparse-checkout
248git remote add origin https://gitee.com/openharmony/applications_app_samples.git
249git pull origin master
250````