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 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````
