harmony[applications_app_samples]README_zh汇总

harmony[applications_app_samples]README_zh 汇总

https://gitee.com/openharmony/applications_app_samples/blob/master/code/UI/ArkTsComponentCollection/StateManagement/README_zh.md

状态管理

介绍

本示例通过使用页面级的状态变量
应用级的状态变量
来实现应用的状态管理。

效果预览

主页子组件同步父组件部分内容爷孙组件之间状态同步应用内全局数据与UI之间的状态同步
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.点击首页中的基本类型进入对应页面,点击按钮可以更改圆形的颜色;点击查看源码可以展示基本类型功能效果的源码。

2.点击首页中的数组类型进入对应页面,点击新增元素可以添加数据;点击删除元素可以删除数据,当数据为空时,点击删除会弹出一个提示窗;点击更新数组中的某个元素,可以更改第一条数据的age属性,当数据为空时,同样会弹出一个提示窗;点击查看源码可以展示数组类型功能效果的源码。

3.点击首页中的类对象类型进入对应页面,点击更新对象可以更改对象属性和对象属性中的属性;点击更新对象属性,对象属性数据发生变化;点击更新属性中的属性,对象属性的属性数据发生变化;点击查看源码可以展示类对象类型功能效果的源码。

4.点击首页中的只更新所绑定的组件进入对应页面,点击修改标题和内容,标题和内容数据都发生变化,页面更新标题数据,内容数据不刷新;点击查看源码可以展示类对象类型功能效果的源码。

5.点击单、双向同步进入对应页面,点击设置为粉色按钮,父组件圆形颜色更新,两个子组件颜色同步更新;点击设置为蓝色按钮,子组件A圆形颜色更新,父组件和子组件B颜色不更新;点击设置为红色按钮,子组件B圆形颜色更新,父组件和子组件A圆形颜色同步更新,点击查看源码可以展示单、双向同步功能效果的源码。

6.点击子组件同步父组件的部分内容进入对应页面,点击父组件中的属性1修改数据,子组件中的属性1数据同步,点击子组件的属性1修改数据,父组件中的属性1数据同步,点击查看源码可以展示子组件同步父组件的部分内容功能效果的源码。

7.点击爷孙组件之间状态同步进入对应页面,点击爷组件下拉框组件选择颜色,下拉框文本和圆形颜色改变,孙组件下拉框文本和圆形颜色同步刷新;点击孙组件下拉框选择颜色,下拉框文本和圆形颜色改变,爷组件下拉框文本和圆形颜色同步刷新,点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。

8.点击兄弟组件之间状态同步进入对应页面,点击兄弟A组件下拉框选择颜色,下拉框文本和圆形颜色改变,兄弟B组件下拉框文本和圆形颜色同步刷新,点击兄弟B组件下拉框选择颜色,下拉框文本和圆形颜色改变,兄弟A组件下拉框文本和圆形颜色同步刷新,点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。

9.点击应用内全局数据与UI之间的状态同步进入对应页面,点击修改夜间模式状态和字体大小,当前夜间模式状态以及字体大小发生变化,进入Ability1和Ability2页面,夜间模式状态以及字体大小同步更新;在Ability1界面中改变夜间模式状态和字体大小,夜间模式状态和字体大小发生变化,进入到主页面和Ability2页面,夜间模式状态同步更新,字体大小不变;在Ability2界面中修改夜间模式状态,夜间模式状态发生改变,进入到主页面和Ability1页面,夜间模式状态同步,点击查看源码可以展示应用内全局数据与UI之间的状态同步功能效果的源码。

10.点击Ability内全局数据与UI之间的状态同步进入对应页面,点击修改夜间模式状态和字体大小,当前夜间模式状态以及字体大小发生变化时,进入Page1和Page2以及跨Ability不同步页面,Page1和Page2夜间模式状态以及字体大小同步更新,跨Ability页面不同步更新;在Page1界面中改变夜间模式状态和字体大小,夜间模式状态和字体大小发生变化,进入到主页面、Page2和跨Ability不同步页面,主页面和Page2夜间模式状态同步更新,但是字体不发生变化,跨Ability页面夜间模式状态和字体都不同步更新;在Page2界面中修改夜间模式状态,夜间模式状态发生改变,进入到主页面、Page1页面和跨Ability不同步页面,主页和Page1夜间模式状态同步,跨Ability页面都不同步更新;在跨Ability界面中修改夜间模式状态,夜间模式状态发生改变,进入主页、Page1和Page2页面,夜间模式状态不同步,点击查看源码可以展示Ability内全局数据与UI之间的状态同步功能效果的源码。

工程目录

entry/src/main/ets/
|---commoncomponents
|   |---CodeView.ets                                          // 代码展示组件
|   |---TitleBar.ets                                          // 标题组件
|   |---TitleBarDark.ets                                      // 夜间模式下标题组件
|   |---ViewCodeText.ets                                      // 查看源码文本组件
|---entryability
|   |---EntryAbility.ts     
|---outofsyncability                           
|   |---OutOfSyncAbility.ts              
|---MainAbility
|---pages
|   |---applylevelstagemanagement                             // 应用级状态管理
|   |   |---abilityglobaldatasync                             // Ability内全局数据与UI之间的状态同步             
|   |   |   |---AbilityGlobalDataSync.ets                    
|   |   |   |---AbilityGlobalDataSyncCode.ets                 // Ability内全局数据与UI之间的状态同步主页
|   |   |   |---AbilityOutOfSyncPage.ets                      // 跨Ability页面
|   |   |   |---LocalStorageLinkPage.ets                      // 展示LocalStorageLink效果页面
|   |   |   |---LocalStoragePropPage.ets                      // 展示LocalStorageProp效果页面
|   |   |---applyglobaldatasync                               // 应用内全局数据与UI之间的状态同步
|   |   |   |---ApplyGlobalDataSync.ets
|   |   |   |---ApplyGlobalDataSyncCode.ets                   // 应用内全局数据与UI之间的状态同步主页
|   |   |   |---StorageLinkAbilityPage.ets                    // 展示StorageLinkAbility页面
|   |   |   |---StoragePropAbilityPage.ets                    // 展示StoragePropAbility页面
|   |   |---model             
|   |   |   |---AbilityConfigType.ets                         // Ability参数类型
|   |   |   |---CommonMethods.ets                             // 公用函数启动Ability
|   |---home             
|   |   |---data             
|   |   |   |---HomeData.ets                                  // 首页数据
|   |   |---model             
|   |   |   |---CategoricalDataType.ets                       // 层级类型
|   |   |---Home.ets                                          // 首页
|   |   |---TabContentNavigation.ets                          // Tab内容区组件
|   |---pagelevelstagemanagement                              // 页面级状态管理
|   |   |---multicompomentssync                               // 自定义组件之间的状态同步
|   |   |   |---brothercomponentssync                         // 兄弟组件之间状态同步 
|   |   |   |   |---BrotherComponentSync.ets                 
|   |   |   |   |---BrotherComponentSyncCode.ets              // 兄弟组件之间状态同步首页
|   |   |   |   |---ConsumeBrotherOneComponent.ets            // @Consume状态变量组件
|   |   |   |   |---ConsumeBrotherTwoComponent.ets            // @Consume状态变量组件
|   |   |   |   |---LinkBrotherOneComponent.ets               // @Link状态变量组件
|   |   |   |   |---LinkBrotherTwoComponent.ets               // @Link状态变量组件
|   |   |   |   |---ProvideAndConsumeSync.ets                 // @Privide状态变量组件
|   |   |   |   |---StateAndLinkSync.ets                      // @State状态变量组件
|   |   |   |---data     
|   |   |   |   |---ColorData.ets                             // 颜色数据
|   |   |   |---deepnestcomponentssync                        // 爷孙组件嵌套
|   |   |   |   |---ConsumeDescendentComponent.ets            // @Consume孙组件
|   |   |   |   |---DeepNestComponentsSync.ets                 
|   |   |   |   |---DeepNestComponentsSyncCode.ets            // 爷孙组件首页       
|   |   |   |   |---LinkDescendentComponent.ets               // @Link孙组件
|   |   |   |   |---ProvideAndConsumeSync.ets                 // @Provide爷组件
|   |   |   |   |---StateAndLinkSync.ets                      // @State爷组件
|   |   |   |---model                                
|   |   |   |   |---ColorType.ets                             // 颜色数据类型
|   |   |   |---parentchildcomponentsync                      // 父子组件之间状态同步
|   |   |   |   |---parentchildpartialcontentsync             // 子组件同步父组件部分内容
|   |   |   |   |   |---ObjectLinkComponent.ets               // @ObjectLink子组件
|   |   |   |   |   |---ParentChildPartialContentSync.ets     
|   |   |   |   |   |---ParentChildPartialContentSyncCode.ets // @Observer父组件
|   |   |   |   |---uniandbidirectionsync                     // 单、双向同步
|   |   |   |   |   |---ComponentLink.ets                     // Link组件
|   |   |   |   |   |---ComponentProp.ets                     // Prop组件
|   |   |   |   |   |---UniAndBidirectionSync.ets
|   |   |   |   |   |---UniAndBidirectionSyncCode.ets         // @State父组件
|   |   |---singlecomponentstatevariables                     // 单组件的状态同步
|   |   |   |---decoratedobjecttype                           // 修饰的对象类型
|   |   |   |   |---arraytype                                 // 数组类型
|   |   |   |   |   |---ArrayType.ets
|   |   |   |   |   |---ArrayTypeCode.ets                     // 数组类型源码页
|   |   |   |   |---basetype                                  // 基本类型
|   |   |   |   |   |---BaseType.ets
|   |   |   |   |   |---BaseTypeCode.ets                      // 基本类型源码页
|   |   |   |   |---classobjecttype                           // 对象类型
|   |   |   |   |   |---ClassObjectType.ets
|   |   |   |   |   |---ClassObjectTypeCode.ets               // 对象类型源码页
|   |   |   |---updatetactics                                 // 更新原理
|   |   |   |   |---updateboundcomponent                      // 只更新所绑定的组件
|   |   |   |   |   |---UpdateBoundComponent.ets               
|   |   |   |   |   |---UpdateBoundComponentCode.ets          // 只更新所绑定的组件源码
|---storagelinkability              
|   |---StorageLinkAbility.ts
|---storagepropability
|   |---StoragePropAbility.ts
|---utils
|   |---Logger.ts                                             // 日志文件
|   |---ResourceUtils.ts                                      // 资源转换方法
|   |---StartAbilityUtils.ts                                  // 启动Ability方法

具体实现

  • 查看源码:通过private controller: webView.WebviewController = new webView.WebviewController()声明一个状态变量,使用this.controller.loadUrl(url)来打开web页面,查看对应的源码。
  • 基本类型:使用@State声明一个Resource类型的circleColor状态变量,然后通过点击事件根据circleColor的id来改变圆形颜色。
  • 数组类型:使用@State声明一个数组arrayTypeData状态变量,数据元素为new ArrayDataType(),通过arrayTypeData.push()方法来新增元素数据,arrayTypeData.splice()方法删除元素,更新指定new ArrayDataType()来实现更新某一个元素数据。
  • 类对象类型:使用@Observerd声明一个属性类ChildClass,然后声明一个对象类ParentClass,并将对象的其中一个属性类型设置为属性类,使用@State声明一个类对象数据状态变量classObjectData,更新对象可以通过new ParentClass()生成一个对象并赋值来实现,更新对象属性可以通过this.classOjectData.attribute++来实现,更新对象属性的属性可以通过@ObjectLink声明一个状态变量并更新此状态变量的对象属性来实现。
  • 只更新所绑定的组件:使用@State和Private声明一个titleName和content状态变量,通过点击事件修改这两个状态变量。
  • 单、双向同步:父组件使用@State声明一个状态变量circleColor并作为参数给子组件A和子组件B,子组件A通过@Prop接收,子组件B通过@Link来接收,通过点击事件中的this.circleColor = COLOR_DATA.PINK来更改颜色。
  • 子组件同步父组件部分内容:父组件中使用@State声明一个数组状态变量parentData,@Observed声明数组元素的类,父组件向子组件传递parentData的某一个元素数据,子组件通过@ObjectLink来接收,父组件通过this.childObject.attributeType = value来修改元素数据,子组件同步更新,子组件同样通过this.childObjectData.attributeType = value来修改子组件的数据,父组件同步更新。
  • 爷孙组件之间状态同步:爷组件通过@State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex,逐层传递给子组件给孙组件,通过@Link接收,爷组件通过onSelect事件来修改circleColor和currentSelectIndex,孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex,然后爷组件通过@Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex,孙组件通过@Consume来接收,爷组件通过onSelect事件来修改circleColor和currentSelectIndex,孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex。
  • 兄弟组件之间状态同步:父组件通过@State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex,传递给子组件A和子组件B,两者通过@Link接收,子组件A通过onSelect事件来修改circleColor和currentSelectIndex,子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex;然后父组件通过@Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex,子组件A和子组件B通过@Consume来接收,子组件A通过onSelect事件来修改circleColor和currentSelectIndex,,子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex。
  • 应用内全局数据与UI之间的状态同步:主页、Ability1页面和Ability2页面通过@StorageLink声明一个控制夜间模式的状态变量currentModelStatus,在主页面通过onChange事件中的AppStorage.SetOrCreate(‘currentModelStatus’, this.currentModelStatus)来更改夜间模式的状态,,在Ability1页面和Ability页面通过onClick事件中的this.currentModelStatus = !this.currentModelStatus,主页和Ability2页面通过@StorageLink声明一个控制字体大小的状态变量contentFontSize,Ability1页面通过@StorageProp声明一个控制字体大小的状态变量contentFontSize,主页使用onChange事件中的this.contentFontSize = value和AppStorage.SetOrCreate(‘contentFontSize’, this.contentFontSize)来更改内容字体的大小,Ability1通过onChange事件中的this.contentFontSize = value来修改内容字体大小。
  • Ability内全局数据与UI之间的状态同步:在Entry当中声明一个storage,并通过this.storage.setOrCreate(‘currentModelStatus’, true)和this.storage.setOrCreate(‘contentFontSize’, 18)来设置夜间模式状态变量currentModelStatus和字体大小状态变量contentFontSize,然后主页、Page1页面、Page2页面和跨Ability页面通过@LocalStorageLink声明一个控制夜间模式的状态变量currentModelStatus,在主页面通过onChange事件中的this.currentModelStatus = isOn来更改夜间模式的状态,Page1页面、Page2页面和跨Ability页面通过onClick事件中的this.currentModelStatus = !this.currentModelStatus来更改夜间模式的状态,主页、Page1页面和跨Ability页面通过@LocalStorageLink声明一个控制字体大小的状态变量contentFontSize,Page1页面通过@LocalStorageProp声明一个控制字体大小的状态变量contentFontSize,主页使用onChange事件中的this.contentFontSize = value和AppStorage.SetOrCreate(‘contentFontSize’, this.contentFontSize)来更改内容字体的大小,Page2通过onChange事件中的this.contentFontSize = value来修改内容字体大小。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:4.0.5.2。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/UI/StateManagement/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md

组件集合

介绍

本示例为ArkUI中组件、通用、动画、全局方法的集合。

效果预览

绑定通用动画全局方法
Button 按钮
onClick 点击事件
元素共享转场
警告弹窗

使用说明:

  1. 点击组件通用动画全局方法四个按钮或左右滑动切换不同视图。

  2. 点击二级导航(如通用属性、通用事件等),若存在三级导航则展开三级导航(如Border 边框、点击事件等);若不存在三级导航,则跳转至详情页面。

  3. 若存在三级导航(如Border 边框、点击事件等),点击跳转至详情页面。

  4. 打开通用视图下拖拽事件界面需先安装DragEvent应用。

工程目录

entry/src/main/ets/
|---component
|   |---AttributeModificationTool.ets                    // 组件
|   |---IntroductionTitle.ets                            // 首页介绍标题组件
|   |---TabContentNavigation.ets                         // 切换组件
|   |---TitleBar.ets                                     // 详情页面标题组件
|---Application
|   |---MyAbilityStage.ts              
|---data
|   |---CollectionCategory.ts                            // 数据分类
|   |---ResourceDataHandle.ts                            // 源数据
|---MainAbility
|   |---MainAbility.ts              
|---model
|   |---CategoricalDataType.ts                           // 数据类型
|---util
|   |---Logger.ts                                        // 打印
|   |---ShowToast.ets                                    // 弹窗                       
|---pages
|   |---Index.ets                                        // 首页
|   |---animations                                       // 动画
|   |   |---AnimationData.ets
|   |   |---animateToSample    
|   |   |   |---AnimateToSample.ets 
|   |   |---animationSample    
|   |   |   |---AnimationSample.ets 
|   |   |---interpolationCalculationSample    
|   |   |   |---InterpolationCalculationSample.ets       // 插值计算
|   |   |---motionPathSample    
|   |   |   |---MotionPathSample.ets                     // 路径动画
|   |   |---TransitionAnimations                         // 转场动画
|   |   |   |---componentTransitionSample                // 组件内转场
|   |   |   |   |---ComponentTransitionSample.ets        
|   |   |   |---floatingSample                           // 悬浮窗
|   |   |   |   |---FloatingWindowComponent.ets          
|   |   |   |   |---FloatingWindowSample.ets                 
|   |   |   |---folderSample                             // 文件夹展开
|   |   |   |   |---Folder.ets                         
|   |   |   |   |---FolderItem.ets                         
|   |   |   |   |---FolderSample.ets                         
|   |   |   |---gallerySample                            // 图库卡片展开
|   |   |   |   |---GalleryCardSample.ets                    
|   |   |   |---layoutAnimationSample                    // 布局动效
|   |   |   |   |---LayoutAnimationSample.ets                
|   |   |   |---multiplexSample                          // 多任务
|   |   |   |   |---MultiplexModel.ets                      
|   |   |   |   |---MultiplexSample.ets                      
|   |   |   |   |---ScrollItem.ets                       
|   |   |   |---pageTransitionSample                     // 页面间转场
|   |   |   |   |---PageTransitionSample.ets                      
|   |   |   |   |---PageTransitionSampleTo.ets                      
|   |   |   |---shareElementTransitionSample             // 共享元素转场
|   |   |   |   |---ShareElementTransitionSample.ets                     
|   |   |   |   |---ShareElementTransitionSampleTo.ets                     
|   |   |   |---shopSample                               // 商店卡片展开
|   |   |   |   |---ShopCardSample.ets                      
|   |   |   |---sideBarTransitionSample                  // 侧边栏动效
|   |   |   |   |---ChangePanel.ets              
|   |   |   |   |---SideBarTransitionSample.ets              
|   |   |   |---sizeTransitionSample                     // 尺寸变换动效
|   |   |   |   |---SizeTransitionSample.ets                 
|   |   |   |---systemIcon                               // 系统图标
|   |   |   |   |---SystemIcon.ets                           
|   |---components                                       
|   |   |---ComponentData.ets
|   |   |---auxiliary                                    // 辅助
|   |   |   |---alphabetIndexerSample
|   |   |   |   |---AlphabetIndexerSample.ets            // 字母索引条
|   |   |   |---badgeSample
|   |   |   |   |---BadgeSample.ets                      // 标记
|   |   |   |---panelSample
|   |   |   |   |---PanelSample.ets                      // 弹出面板
|   |   |   |---refreshSample
|   |   |   |   |---RefreshSample.ets                    // 下拉刷新
|   |   |   |---scrollbarSample 
|   |   |   |   |---ScrollBarSample.ets                  // 滚动条
|   |   |---blankAndDivider                              // 空白与分分隔
|   |   |   |---dividerSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---DividerSample.ets
|   |   |---buttonAndSelection                           // 按钮与选择
|   |   |   |---buttonSample
|   |   |   |   |---ButtonSample.ets                     // 按钮
|   |   |   |---checkboxSample
|   |   |   |   |---CheckboxSample.ets                   // 勾选框
|   |   |   |---counterSample
|   |   |   |   |---CounterSample.ets                    // 计数器
|   |   |   |---datePickerSample
|   |   |   |   |---DatePickerSample.ets                 // 日期选择器
|   |   |   |---radioSample
|   |   |   |   |---RadioSample.ets                      // 单选按钮
|   |   |   |---ratingSample
|   |   |   |   |---RatingSample.ets                     // 评分条
|   |   |   |---selectSample
|   |   |   |   |---SelectSample.ets                     // 选择菜单
|   |   |   |---sliderSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SliderSample.ets                     // 滑动条
|   |   |   |---textPickerSample 
|   |   |   |   |---TextPickerSample.ets                 // 文本选择器
|   |   |   |---timePickerSample
|   |   |   |   |---TimePickerSample.ets                 // 时间选择器
|   |   |   |---toggleSample
|   |   |   |   |---ToggleSample.ets                     // 切换按钮
|   |   |---canvasAndGraphicDrawing                      // 画布与图形绘制
|   |   |   |---canvasSample
|   |   |   |   |---CanvasSample.ets                     // 画布
|   |   |   |---circleSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---CircleSample.ets                     // 圆形
|   |   |   |---ellipseSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---EllipseSample.ets					 // 椭圆
|   |   |   |---lineSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---LineSample.ets                       // 直线
|   |   |   |---pathSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PathSample.ets                       // 路径
|   |   |   |---polygonSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PolygonSample.ets                    // 多边形
|   |   |   |---polylineSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PolylineSample.ets                   // 折线
|   |   |   |---rectSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---RectSample.ets                       // 矩形
|   |   |   |---shapeSample
|   |   |   |   |---ShapeSample.ets                      // 指定图形
|   |   |---imageVideoAndMedia
|   |   |   |---imageAnimatorSample
|   |   |   |   |---ImageAnimatorSample.ets              // 逐帧播放图片
|   |   |   |---imageSample
|   |   |   |   |---ImageControlPanel.ets
|   |   |   |   |---ImageSample.ets                      // 图片
|   |   |   |---pluginComponentSample
|   |   |   |   |---PluginComponentSample.ets			 // 嵌入式显示
|   |   |   |---videoSample
|   |   |   |   |---VideoControlPanel.ets
|   |   |   |   |---VideoSample.ets                      // 视频
|   |   |   |---xcomponentSample
|   |   |   |   |---XComponentSample.ets                 // 绘制组件
|   |   |---canvas
|   |   |   |---attributesSample
|   |   |   |   |---AttributesSample.ets                 // 属性
|   |   |   |---gradientSample
|   |   |   |   |---GradientSample.ets                   // 渐变对象
|   |   |   |---image_bitmapSample
|   |   |   |   |---Image_bitmapSample.ets               // 位图对象
|   |   |   |---methodsSample
|   |   |   |   |---MethodsSample.ets                    // 方法
|   |   |   |---path2dSample
|   |   |   |   |---Path2dSample.ets                     // 路径对象
|   |   |   |---shadowsSample
|   |   |   |   |---ShadowsSample.ets                    // 阴影
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 转换
|   |   |---informationPresentationAndDynamicEffects     
|   |   |   |---dataPanelSample
|   |   |   |   |---DataPanelSample.ets                  // 数据面板
|   |   |   |---gaugeSample
|   |   |   |   |---GaugeSample.ets                      // 仪表盘
|   |   |   |---imageFitFullSample
|   |   |   |   |---ImageFitFullSample.ets               // 动效
|   |   |   |---loadingProgressSample
|   |   |   |   |---LoadingProgressSample.ets
|   |   |   |---listSample                               // 列表
|   |   |   |   |---ListSample.ets
|   |   |   |---marqueeSample
|   |   |   |   |---MarqueeSample.ets                    // 跑马灯
|   |   |   |---particleSample
|   |   |   |   |---ParticleSample.ets                   // 粒子效果
|   |   |   |---progressSample
|   |   |   |   |---ProgressSample.ets                   // 进度条
|   |   |   |---qrCodeSample
|   |   |   |   |---QRCodeSample.ets                     // 二维码
|   |   |   |---scrollToSample
|   |   |   |   |---ScrollToSample.ets                   // 动效
|   |   |   |---tapsSwitchSample
|   |   |   |   |---TapsSwitchSample.ets                 // 模糊切换
|   |   |   |---textclockSample
|   |   |   |   |---TextClockSample.ets                  // 文字时钟
|   |   |   |---textTimerSample
|   |   |   |   |---TextTimerSample.ets                  // 文字计时器
|   |   |---listAndGrid
|   |   |   |---gridItemSample
|   |   |   |   |---GridItemControlPanel.ets
|   |   |   |   |---GridItemSample.ets                   // 网格容器子组件
|   |   |   |---gridSample
|   |   |   |   |---GridControlPanel.ets
|   |   |   |   |---GridSample.ets                       // 网格容器
|   |   |   |---listItemSample
|   |   |   |   |---ListItemSample.ets                   // 列表容器子组件
|   |   |   |---listSample
|   |   |   |   |---ListControlPanel.ets
|   |   |   |   |---ListSample.ets                       // 列表容器
|   |   |   |---waterFlowSample
|   |   |   |   |---WaterFlowDataSource.ets
|   |   |   |   |---WaterFlowSample.ets                  // WaterFlow
|   |   |---navigation
|   |   |   |---navigatorSample
|   |   |   |   |---NavigatorSample.ets                  // 路由
|   |   |   |   |---NavigatorSecondPage.ets
|   |   |   |   |---NavigatorThirdPage.ets
|   |   |   |---navigationSample
|   |   |   |   |---NavigationSample.ets                 // 导航根容器
|   |   |   |   |---NavigationBasic.ets                  // 导航基础属性展示
|   |   |   |   |---ListExpandSafeArea.ets               // 滚动组件避让导航条
|   |   |   |   |---NavigationSplit.ets               	 // 导航分栏模式
|   |   |   |   |---NavigationRouter.ets               	 // Navigation动态路由
|   |   |   |   |---NavigationModeChange.ets             // Navigation模式自动切换
|   |   |   |   |---NavigationReplace.ets                // 导航页面替换
|   |   |   |   |---BindSheetSafeArea.ets                // BindSheet键盘避让
|   |   |   |   |---NavigationSideBar.ets                // 导航分栏鼠标样式
|   |   |   |   |---NavigationHideBar.ets                // 隐藏Navigation导航条
|   |   |   |   |---NavigationFullSafeArea.ets           // 导航组件扩展安全区
|   |   |   |   |---NavigationExpandSafeArea.ets         // 导航组件避让导航条
|   |   |   |---navRouterSample
|   |   |   |   |---NavRouterSample.ets                  // 导航
|   |   |   |---stepperAndStepperItemSample
|   |   |   |   |---StepperAndStepperItemSample.ets      // 步骤导航器
|   |   |   |---tabContentSample
|   |   |   |   |---TabContentSample.ets                 // 页签子组件
|   |   |   |---tabSample
|   |   |   |   |---TabControlPanel.ets
|   |   |   |   |---TabSample.ets                        // 页签
|   |   |---rowsAndColumns
|   |   |   |---columnSample
|   |   |   |   |---ColumnControlPanel.ets
|   |   |   |   |---ColumnSample.ets                     // 列容器
|   |   |   |---columnSplitSample
|   |   |   |   |---ColumnSplitSample.ets                // 列分割容器
|   |   |   |---rowSample
|   |   |   |   |---RowControlPanel.ets
|   |   |   |   |---RowSample.ets                        // 行容器
|   |   |   |---rowSplitSample
|   |   |   |   |---RowSplitSample.ets                   // 行分割容器
|   |   |   |---sideBarContainerSample
|   |   |   |   |---SideBarContainerControlPanel.ets
|   |   |   |   |---SideBarContainerSample.ets           // 侧边栏
|   |   |---scrollAndSwipe
|   |   |   |---scrollSample
|   |   |   |   |---ScrollSample.ets                     // 滚动
|   |   |   |---swiperSample
|   |   |   |   |---SwiperControlPanel.ets
|   |   |   |   |---SwiperSample.ets                     // 轮播
|   |   |---stackFlexAndGrid
|   |   |   |---flexSample                               
|   |   |   |   |---FlexControlPanel.ets
|   |   |   |   |---FlexSample.ets                       // 弹性布局
|   |   |   |---gridContainerSample
|   |   |   |   |---GridContainerControlPanel.ets
|   |   |   |   |---GridContainerSample.ets              // 栅格系统
|   |   |   |---stackSample
|   |   |   |   |---StackControlPanel.ets
|   |   |   |   |---StackSample.ets                      // 层叠布局
|   |   |---textAndInput
|   |   |   |---patternLockSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PattternLockSample.ets               // 密码锁
|   |   |   |---searchSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SearchSample.ets                     // 搜索栏
|   |   |   |---imageSpanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---imageSpanSample.ets                  // 行内图像
|   |   |   |---textAreaSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextAreaSample.ets                   // 文本域
|   |   |   |---richEditorSample
|   |   |   |   |---RichEditorSample.ets             // 富文本编辑
|   |   |   |   |---Title.ets
|   |   |   |---richTextSample
|   |   |   |   |---RichTextSample.ets                   // 富文本
|   |   |   |---spanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SpanSample.ets                       // 行内文本
|   |   |   |---textInputSample
|   |   |   |   |---TextInputSample.ets                  // 文本输入
|   |   |   |---textSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextSample.ets                       // 文本
|   |   |---web
|   |   |   |---webSample
|   |   |   |   |---WebSample.ets                        // 网页
|   |---globalMethods                                    // 详情页面
|   |   |---GlobalMethodData.ets
|   |   |---dialogs
|   |   |   |---alertDialogSample
|   |   |   |   |---AlertDialogSample.ets                // 警告弹窗
|   |   |   |---customDialogSample
|   |   |   |   |---CustomDialog.ets
|   |   |   |   |---CustomDialogSample.ets               // 自定义弹窗
|   |   |   |---dateDialogSample
|   |   |   |   |---DateDialogSample.ets                 // 日期选择弹窗
|   |   |   |---timeDialogSample
|   |   |   |   |---TimeDialogSample.ets                 // 时间选择弹窗
|   |   |   |---actionSheetDialogSample
|   |   |   |   |---ActionSheetDialogSample.ets          // 列表选择弹窗
|   |   |   |---textPickerDialogSample
|   |   |   |   |---TextPickerDialogSample.ets           // 文本滑动选择器弹窗
|   |   |   |---menuSample
|   |   |   |   |---MenuSample.ets                       // 菜单
|   |   |   |---bindSheetSample
|   |   |   |   |---BindSheetSample.ets                  // 半模态
|   |   |   |---popUpSample
|   |   |   |   |---PopUpSample.ets                      // Popup
|   |---universal                                        // 详情页面
|   |   |---UniversialData.ets
|   |   |---events
|   |   |   |---areaChangeEventSample
|   |   |   |   |---AreaChangeEventSample.ets            // 组件区域变化事件
|   |   |   |---clickEventSample
|   |   |   |   |---ClickEventSample.ets                 // 点击事件
|   |   |   |---dragEventSample
|   |   |   |   |---component                            // 组件拖拽
|   |   |   |   |   |---FormComponentDrag.ets
|   |   |   |   |   |---GridItemDrag.ets
|   |   |   |   |   |---HyperlinkDrag.ets
|   |   |   |   |   |---ImageDrag.ets
|   |   |   |   |   |---ListItemDrag.ets
|   |   |   |   |   |---TextDrag.ets
|   |   |   |   |   |---VideoDrag.ets
|   |   |   |   |---DragEventSample.ets                  // 拖拽事件
|   |   |   |---focusEventSample
|   |   |   |   |---FocusEventSample.ets                 // 焦点事件
|   |   |   |---keyPressEventSample
|   |   |   |   |---KeyPressEventSample.ets              // 按压事件
|   |   |   |---mountUnmountEventSample
|   |   |   |   |---MountUnmountEventSample.ets          // 挂载卸载事件
|   |   |   |---mouseEventSample
|   |   |   |   |---MouseEventSample.ets                 // 鼠标事件
|   |   |   |---scrollEventSample
|   |   |   |   |---ScrollEventSample.ets                // 滚动事件
|   |   |   |---touchEventSample
|   |   |   |   |---TouchEventSample.ets                 // 触摸事件
|   |   |   |---customEventSample
|   |   |   |   |---CustomEventHome.ets                  // 自定义事件分发入口
|   |   |   |   |---CustomClickEvent.ets                 // 自定义click事件分发
|   |   |   |   |---CustomScrollingEvent.ets             // 自定义scrolling事件分发
|   |   |---gesture
|   |   |   |---bindGestureSample 
|   |   |   |   |---BindGestureSample.ets                // 绑定手势方法
|   |   |   |---combinedSample
|   |   |   |   |---CombinedSample.ets                   // 组合手势
|   |   |   |---longPressSample
|   |   |   |   |---LongPressSample.ets                  // 长按手势
|   |   |   |---panSample
|   |   |   |   |---PanSample.ets                        // 拖动手势
|   |   |   |---pinchSample
|   |   |   |   |---PinchSample.ets                      // 捏合手势
|   |   |   |---rotationSample
|   |   |   |   |---RotationSample.ets                   // 旋转手势
|   |   |   |---swipeSample
|   |   |   |   |---SwipeSample.ets                      // 滑动手势
|   |   |   |---tapGestureSample
|   |   |   |   |---TapGestureSample.ets                 // Tap手势
|   |   |   |---customGesture
|   |   |   |   |---CustomGestureJudge.ets               // 自定义手势判定
|   |   |---properties
|   |   |   |---attributeModifierSample
|   |   |   |   |---AttributeModifierSample.ets          // 动态属性设置
|   |   |   |---foregroundSample
|   |   |   |   |---ForegroundSample.ets                 // 前景
|   |   |   |---backgroundSample
|   |   |   |   |---BackgroundSample.ets                 // 背景
|   |   |   |---borderSample
|   |   |   |   |---BorderSample.ets                     // 边框
|   |   |   |---outlineSample
|   |   |   |   |---OutlineSample.ets                    // 外边框
|   |   |   |---componentBlurredSample
|   |   |   |   |---ComponentBlurredSample.ets           // 分布式迁移标识
|   |   |   |---componentIDSample
|   |   |   |   |---ComponentIDSample.ets                // 组件标识
|   |   |   |---displaySample
|   |   |   |   |---DisplaySample.ets                    // 显示
|   |   |   |---effectsSample
|   |   |   |   |---EffectsSample.ets                    // 互动
|   |   |   |---flexSample
|   |   |   |   |---FlexSample.ets                       // flex布局
|   |   |   |---focusControlSample
|   |   |   |   |---FocusControlSample.ets               // 焦点控制
|   |   |   |---fontSample
|   |   |   |   |---FontSample.ets                       // 字体
|   |   |   |---gridSettingsSample
|   |   |   |   |---GridSettingsSample.ets               // 栅格设置
|   |   |   |---interactionSample
|   |   |   |   |---InteractionSample.ets                // 图像效果
|   |   |   |---layoutConstraintSample
|   |   |   |   |---LayoutConstraintSample.ets           // 布局约束
|   |   |   |---locationSample
|   |   |   |   |---LocationSample.ets                   // 位置设置
|   |   |   |---pictureBorderSample
|   |   |   |   |---PictureBorderSample.ets              // 图片边框设置
|   |   |   |---restoreIdSample
|   |   |   |   |---RestoreIdSample.ets                  // 分布式迁移标识
|   |   |   |---rotateSample
|   |   |   |   |---RotateSample.ets                     // 旋转
|   |   |   |---scaleSample
|   |   |   |   |---ScaleSample.ets                      // 缩放
|   |   |   |---shapeCropSample
|   |   |   |   |---ShapeCropSample.ets                  // 形状裁剪
|   |   |   |---safeAreaSample
|   |   |   |   |---SafeAreaSample.ets                   // 安全区域
|   |   |   |---sizeSample
|   |   |   |   |---SizeSample.ets                       // 尺寸
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 变换矩阵
|   |   |   |---translateSample
|   |   |   |   |---TranslateSample.ets                  // 图像变换

具体实现

本示例使用 Tabs容器组件
搭建整体应用框架,每个 TabContent内容视图
使用 List容器组件
布局,在每个 ListItem
中使用 循环渲染
加载此分类下分类导航数据,底部导航菜单使用 TabContent中tabBar属性
设置自定义样式 。

  • 将组件库分成四大类,切换查看

    • 组件模块:

      • 空白与分隔

        • 封装自定义组件:CommonItemSlider,CommonItemSelect,CommonItemColorSelect
        • 接口参考:@ohos.app.ability.common
      • 按钮与选择

        • 使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮,时间选择器,单选按钮,选择菜单,滑动条,切换按钮,勾选框,文本选择器,时间选择器,计数器,评分条组件功能
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
      • 滚动与滑动

        • 使用全局组件TitleBar实现滚动,翻页组件功能
      • 信息展示与功效

        • 使用全局组件TitleBar,AttributeModificationTool实现二维码,进度条,跑马灯,文字计时器,文字时钟,仪表盘,数据面板组件功能
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
      • 文本与输入

        • 使用全局组件ShowToast,TitleBar,AttributeModificationTool,IntroductionTitle实现行内文本,行内图像,文本输入,文本,富文本组件功能
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
      • 辅助

        • 使用全局组件TitleBar实现标记,滚动条,下拉刷新,弹出面板,字母索引条组件功能
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
      • 画布

        • 使用全局组件TitleBar, CanvasGradient, CanvasPattern, ImageBitmap, Path2D等实现图形绘制属性,图形绘制方法,渐变对象绘制,路径对象绘制,位图的绘制,阴影绘制,变换绘制
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
    • 通用模块:

      • 通用事件

        • 用到全局组件TitleBar,IntroductionTitle实现页面
        • resetBallMotion,isSideReached,calculateReachedSide,decideMoveDirection方法计算区域坐标,moveBall方法移动球体
      • 通用属性

        • 使用全局组件TitleBar,AttributeModificationTool实现组件页面
        • 接口参考:@ohos.promptAction
    • 动画模块:

      • 转场动画

        • 用到全局组件TitleBar,IntroductionTitle实现页面
        • 接口参考:@ohos.promptAction
      • 插值计算

      • 显示动画

        • 用到全局组件TitleBar,IntroductionTitle实现页面
        • 接口参考:animateTo
      • 属性动画

        • 用到全局组件TitleBar,IntroductionTitle实现页面
        • 接口参考:animation
      • 路径动画

        • 用到全局组件TitleBar,IntroductionTitle实现页面
        • 接口参考:path
    • 全局方法模块:

      • 弹窗

        • 使用全局组件ShowToast,TitleBar,IntroductionTitle实现弹窗组件页面
        • 使用getStringArrayData,getStringData获取数据ResourceDataHandle.ets
      • 半模态

        • 使用全局组件TitleBar,IntroductionTitle实现半模态组件页面
        • 接口参考:bindSheet
      • Popup

相关权限

ohos.permission.GET_BUNDLE_INFO

ohos.permission.GET_BUNDLE_INFO_PRIVILEGED

ohos.permission.REQUIRE_FORM

ohos.permission.INTERNET

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例仅支持API11版本SDK,SDK版本号(4.1.6.1 Beta1),镜像版本号( OpenHarmony 4.1.6.1)。

3.本示例需要使用DevEco Studio 版本号(3.1.1 Release)及以上版本才可编译运行。

4.本示例涉及ohos.permission.GET_BUNDLE_INFO_PRIVILEGED、ohos.permission.REQUIRE_FORM为system_basic级别(相关权限级别可通过权限定义列表
查看),需要配置高权限签名,可参考应用apl等级说明

5.本示例涉及系统接口,需要配置系统应用签名,可以参考修改harmonyappprovision配置文件
,把配置文件中的“app-feature”字段信息改为“hos_system_app”。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/UI/ArkTsComponentCollection/ComponentCollection/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/UI/ArkTsComponentCollection/DefiningPageLayoutAndConnection/README_zh.md

页面布局和连接

介绍

本示例构建食物分类列表页面和食物详情页,包含:

1.List布局:创建食物数据模型,ForEach循环渲染ListItem。

2.Grid布局:展示食物分类信息,创建Tabs页签展示不同分类的食物。

3.路由机制:router接口、Navigator和页面间数据传递。

效果预览

主页详情页列表页
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.点击首页的切换按钮,可切换List和Grid布局。

2.点击食物单元,可跳转到食物详情页。

工程目录

entry/src/main/ets/MainAbility
|---model
|   |---FoodData.ets                        // 页面数据初始化
|   |---FoodDataModel.ets                   // 数据渲染
|---pages
|   |---app.ets                             // 首页
|   |---FoodCategoryList.ets                // 数据列表展示
|   |---FoodDetail.ets                      // 数据详情展示

具体实现

  • 创建定义数据类型文件,源码参考:FoodData.ets

  • List布局:创建食物数据模型,ForEach循环渲染ListItem。

  • Grid布局:展示食物分类信息,创建Tabs页签展示不同分类的食物。

  • 路由机制:@ohos.router接口、Navigator和页面间数据传递。

相关概念

List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。

Grid:网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo /code/UI/ArkTsComponentCollection/DefiningPageLayoutAndConnection > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/UI/ArkTsComponentCollection/MediaQuery/README_zh.md

横竖屏切换

介绍

本实例展示如何使用媒体查询,通过@ohos.mediaquery 接口完成在不同设备上显示不同的界面效果。

效果预览

主页详情页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.在竖屏设备上,首页展示新闻列表,点击新闻进入详情界面。

2.在横屏设备上,首页左侧展示新闻列表,右侧显示新闻详情,点击新闻右侧显示所点击的新闻的详情。

工程目录

entry/src/main/ets/
|---component
|   |---NewView.ets                    // 弹窗组件
|   |---TitleBar.ets                   // 首页标题组件
|   |---TitleWithBack.ets              // 详情页面标题组件
|---entryAbility
|---model
|   |---DataModel.ts                   // 数据类型
|   |---Logger.ts                      // 日志工具
|   |---New.ts                         // 虚拟数据
|---pages
|   |---Index.ets                      // 首页
|   |---New.ets                        // 详情页面

具体实现

  • 横竖屏切换功能接口封装在Index,源码参考:Index.ets
    • 获取监听句柄:通过mediaQuery.matchMediaSync(‘screen and (min-aspect-ratio: 1.5) or (orientation: landscape)’)方法来获取有一个监听横竖屏的句柄,接口参考:@ohos.mediaquery
    • 执行控制横竖屏切换效果的函数:调用this.listener.on(‘change’, this.onLand.bind(this))函数来实现横竖屏下不同的功能或者页面效果;

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo /code/UI/ArkTsComponentCollection/MediaQuery > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/UI/JsComponentCollection/JsComponentCollection/README_zh.md

组件集合

介绍

本示例为ArkUI中组件、通用、动画、全局方法的集合。

本示例使用 Tabs容器组件搭建整体应用框架,每个 TabContent内容视图 使用 div容器组件 嵌套布局,在每个 div 中使用 循环渲染 加载此分类下分类导航数据,底部导航菜单使用 TabContent中tabBar属性 设置自定义样式 。通过组件、通用、动画、全局方法四个大类展现了ArkUI的能力,并把四大类中的功能进行了分类,方便开发者查看,每个示例又结合了不同的展现方式,以契合实际应用场景为主生动的体现了ArkUI能力的用法。

效果预览

组件通用动画全局方法
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
按钮组件点击事件转场动画弹窗
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

1.点击组件通用动画全局方法四个按钮或左右滑动切换不同Tab内容。

2.点击二级导航(如通用属性、通用事件等),若存在三级导航则展开三级导航(如Border 边框、点击事件等);若不存在三级导航,则点击跳转详情页面。

3.若存在三级导航,点击三级导航则跳转详情页面。

工程目录

entry/src/main/js/MainAbility
|---app.js
|---common
|   |---commonItemInput                      // 输入框组件
|   |---commonItemSelect                     // 选择菜单组件
|   |---commonItemSlider                     // 滑动条组件
|   |---css                                  // 通用样式
|   |---image                                // 图片资源
|   |---logger                               // 详情页面标题组件
|   |---tabContentNavigation                 // 页面切换组件
|   |---titleBar                             // 页面标题组件
|---pages
|   |---animations                     
|   |   |---pageTransitionSample             // 变换
|   |   |---pageTransitionSampleFromBottom   // 从下变换
|   |   |---pageTransitionSampleFromLeft     // 从左变换
|   |   |---pageTransitionSampleFromRight    // 从右变换
|   |   |---pageTransitionSampleFromTop      // 从上变换
|   |   |---pageTransitionSampleWithRotate   // 旋转变换
|   |   |---pageTransitionSampleWithScale    // 缩小放大变换
|   |---components                           // 首页
|   |   |---badgeSample
|   |   |---basic
|   |   |   |---buttonSample                 // 按钮
|   |   |   |---datePickerSample             // 日期选择器
|   |   |   |---dividerSample                // 分隔器
|   |   |   |---inputSample                  // 输入框
|   |   |   |---qrCodeSample                 // 二维码
|   |   |   |---radioSample                  // 单选
|   |   |   |---selectSample                 // 选择菜单
|   |   |   |---sliderSample                 // 滑动条
|   |   |   |---spanSample                   // 行内文本
|   |   |   |---switchSample                 // 切换
|   |   |   |---textSample                   // 文本
|   |---globalMethods                        // 全局方法
|   |   |---popups
|   |   |   |---dialogSample                 // 自定义弹窗
|   |---index                                // 首页
|   |---universals                           // 通用
|   |   |---events
|   |   |   |---clickSample                  // 点击事件
|   |   |---properties
|   |   |   |---backgroundSample             // 背景
|   |   |   |---borderSample                 // 边框
|   |   |   |---fontSample                   // 字体
|   |   |   |---rotateSample                 // 旋转
|   |   |   |---sizeSample                   // 字号
|   |   |   |---translateSample              // 变换

具体实现

  • 本示例使用 Tabs容器组件搭建整体应用框架,每个 TabContent内容视图 使用 div容器组件 嵌套布局,在每个 div 中使用 循环渲染 加载此分类下分类导航数据,底部导航菜单使用 TabContent中tabBar属性 设置自定义样式 。

  • 将组件库分成四大类,切换查看

    • 组件模块:

      • 空白与分隔

      • 按钮与选择

        • 使用全局组件TitleBar,引入全局样式搭建按钮,日期选择器,单选按钮,选择菜单,滑动条,切换按钮组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css
        • 接口参考:@ohos.promptAction
      • 信息展示与功效

        • 使用全局组件TitleBar,引入全局样式搭建二维码组件页面
        • 全局封装组件源文件:titleBar
      • 文本与输入

        • 使用全局组件TitleBar,引入全局样式搭建行内文本,输入框,文本组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css
        • 接口参考:@ohos.promptAction
      • 辅助

        • 使用全局组件TitleBar,引入全局样式搭建标记组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css
    • 通用模块:

      • 通用事件

        • 用到全局组件TitleBar,全局样式实现点击事件组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css
      • 通用属性

        • 使用全局组件TitleBar,全局样式实现组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css
        • 使用Math.trunc()方法将参数隐式转换成数字类型后,纯粹的去除小数部分
    • 动画模块:

      • 转场动画
        • 用到全局组件TitleBar实现动画转场组件页面
        • 全局封装组件源文件:titleBar
        • 接口参考:@ohos.router
    • 全局方法模块:

      • 弹窗
        • 使用全局组件TitleBar,全局样式实现弹窗组件页面
        • 全局封装组件源文件:titleBar
        • 全局样式源文件:common.css

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo /code/UI/JsComponentCollection/JsComponentCollection > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/IDL/AbilityConnectServiceExtension/README_zh.md

Ability与ServiceExtensionAbility通信

介绍

本示例展示通过IDL的方式@ohos.rpc 等接口实现了Ability与ServiceExtensionAbility之间的通信。

效果预览

初始温度刷新后的温度
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.启动应用后,首页展示城市的天气信息,当前温度每隔5S会刷新一次。

工程目录

entry/src/main/ets/
|---Application
|---feature
|   |---HomeFeature.ets                  // 任务信息组件
|---MainAbility
|---Mock
|   |---RequestData.ts                   // 远程请求的数据
|   |---WeatherData.ts                   // 天气页面数据
|---model
|   |---FormDate.ts                      // 日期函数方法
|   |---Main.ts                          // 数据类
|---pages
|   |---home
|   |   |---BasicDataSource.ets          // 懒加载封装类
|   |   |---HomeContent.ets              // 内容组件
|   |   |---HoursWeather.ets             // 天气组件(小时)
|   |   |---IndexHeader.ets              // 首页头部组件
|   |   |---MultiDayWeather.ets          // 天气组件(天)
|   |---Home.ets                         // 首页
|---util
|   |---Logger.ts                        // 日志工具
|   |---Style.ts                         // 静态样式变量

具体实现

  • Ability与ServiceExtensionAbility通信的方法主要封装在idl_weather_service_proxy、idl_weather_service_stub、HomeFeature、ServiceExtAbility中,源码参考:idl_weather_service_proxy.tsidl_weather_service_stub.tsHomeFeatureServiceExtAbility
    • 建立服务器连接:通过HomeFeature中的this.context.connectAbility(want, this.options)方法来建立服务器连接;
    • 接收服务端实例并发送请求:连接成功时new IdlWeatherServiceProxy(proxy)来接收服务端实例,通过@ohos.rpc 接口来执行new rpc.MessageOption(0)、 new rpc.MessageParcel()、 new rpc.MessageParcel()获取 MessageParcel对象和请求的模式,调用idl_weather_service_proxy中的this.proxy.sendRequest()来发送请求;
    • 接收远程请求处理数据:在idl_weather_service_stub中接收远程请求并通过ServiceExtAbility中的updateWeather()函数来处理数据进行返回;
    • 获取数据:最后将获得的数据渲染到页面中去;
    • 断开连接:可以通过HomeFeature中的this.context.disconnectAbility(this.connection)方法来断开服务器连接,这里的this.connection是建立连接之后的返回值。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例为stage模型,已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行;

4.本示例使用了ServiceExtensionAbility相关系统接口,需要替换Full SDK,使用Full SDK时需要手动从镜像站点获取,并在DevEco Studio中替换,具体操作可参考替换指南

5.本示例使用了ServiceExtensionAbility,需要在签名证书UnsgnedReleasedProfileTemplate.json中配置"app-privilege-capabilities": [“AllowAppUsePrivilegeExtension”],否则安装失败。具体操作指南可参考应用特权配置指南

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/IDL/AbilityConnectServiceExtension/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Ads/OAIDSample/README_ZH.md

广告标识服务Sample

介绍

本示例展示了如何通过广告标识服务部件提供的接口获取开放匿名设备标识符以及重置开放匿名设备标识符

效果预览

打开主页弹出授权弹框页面获取OAID成功页面获取OAID失败页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

概念说明:

  • 开放匿名设备标识符

    开放匿名设备标识符(Open Anonymous Device Identifier, OAID,以下简称OAID):是一种非永久性设备标识符,基于开放匿名设备标识符,可在保护用户个人数据隐私安全的前提下,向用户提供个性化广告,同时三方监测平台也可以向广告主提供转化归因分析。

使用说明:

1.打开应用进入首页,首次进入应用会弹出授权弹窗,选择“允许”,则可以获取到OAID;选择“禁止”,则OAID获取不到,为全0的空串。

2.点击“通过Promise获取OAID”,上方文本框显示OAID。

3.点击“通过异步callback获取OAID”,上方文本框显示OAID。

4.重置功能需安装ResetOAID,点击“重置OAID”,上方文本框OAID重置。

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ts     
|---log
|   |---Logger.ts          // 日志
|---pages
|   |---Index.ets          // 主页面,获取OAID及重置OAID

具体实现

1.配置Module信息:

  • 在module.json5文件中的“requestPermissions”标签中添加需要开的权限,例如应用读取开放匿名设备标识符权限
"requestPermissions": [
  {
    "name": "ohos.permission.APP_TRACKING_CONSENT",
    "reason": "$string:reason",
    "usedScene": {
      "abilities": [
        "EntryFormAbility"
      ],
      "when": "inuse"
    }
  }
]

2.获取OAID

  • 在Index.ets页面中调用广告标识服务部件提供的identifer.getOAID接口

3.重置OAID

  • 在Index.ets页面中调用广告标识服务部件提供的identifer.resetOAID接口

相关权限

获取OAID功能需要申请广告跟踪权限:
ohos.permission.APP_TRACKING_CONSENT

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例为Stage模型,已适配API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)。

3.本工程示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Ads/OAIDSample/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Native/NdkNativeWindow/README_zh.md

Native Window

介绍

本示例中主要介绍开发者在利用Native XComponent来获取NativeWindow实例,通过数据填充改变矩形框颜色。并提供从NativeImage中获取NativeWindow进行buffer轮转的案例,通过NativeWindow生产buffer来触发NativeImage的可用帧回调。

效果预览

主页改变矩形框颜色生产buffer获取可用帧回调次数
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
attachbufferdetachbuffer
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 安装编译生成的hap包,并打开应用;
  2. 点击页面底部“Chaneg Color”按钮,矩形框填充区域将改变颜色,黄蓝切换;
  3. 点击页面底部“produce buffer”按钮,NativeWindow将生产数据并发送给NativeImage,页面展示了生产buffer的次数;
  4. 点击页面底部“update available buffer count”按钮,将展示NativeImage收到的可用帧回调次数。
  5. 点击页面底部“update bufferqueuesize, attachedbuffer, cachebuffer"按钮,将更新三项数值
  6. 点击页面底部”attachbuffer“,在cachebuffer大于0时将buffer添加到nativewindow中。
  7. 点击页面底部”detachbuffer",在attachedbuffer大于0时将buffer添加到缓存区cachebuffer中。

工程目录

├──entry/src/main
│  ├──cpp                           // C++代码区
│  │  ├──CMakeLists.txt             // CMake配置文件
│  │  ├──logger_common.h   			// 日志封装定义文件  
│  │  ├──NativeImageAdaptor.cpp     // NativeImage功能适配模块
│  │  ├──NativeRender.cpp           // NativeWindow和XComponentContext联合显示模块
│  ├──ets                           // ets代码区
│  │  ├──entryability
│  │  │  ├──EntryAbility.ts         // 程序入口类
|  |  ├──interface
│  │  │  └──NativeWindowContext.ts  // NativeWindowContext
│  │  └──pages                      // 页面文件
│  │     └──Index.ets               // 主界面
|  ├──resources         			// 资源文件目录

具体实现

通过在IDE中创建Native c++ 工程,在c++代码中定义对外接口为DrawColor,在js侧调用该接口可改变窗口颜色;从NativeImage中创建NativeWindow,在c++代码中定义对外接口为ProduceBuffer,js调用该接口后, NativeWindow会生产buffer并将该buffer flush给NativeImage,之后NativeImage将收到可用帧的回调,js侧调用GetAvailableCount接口,可以获取回调触发次数,并展示在界面上,正常情况下FlushBuffer的次数和可用帧回调触发次数一致。

源码参考:cpp目录下的文件。

涉及到的相关接口:

接口名描述
OH_NativeWindow_CreateNativeWindow (void *pSurface)创建OHNativeWindow实例,每次调用都会产生一个新的OHNativeWindow实例
OH_NativeWindow_DestroyNativeWindow (OHNativeWindow *window)将OHNativeWindow对象的引用计数减1,当引用计数为0的时候,该OHNativeWindow对象会被析构掉
OH_NativeWindow_CreateNativeWindowBufferFromNativeBuffer (OH_NativeBuffer *nativeBuffer)创建OHNativeWindowBuffer实例,每次调用都会产生一个新的OHNativeWindowBuffer实例
OH_NativeWindow_DestroyNativeWindowBuffer (OHNativeWindowBuffer *buffer)将OHNativeWindowBuffer对象的引用计数减1,当引用计数为0的时候,该OHNativeWindowBuffer对象会被析构掉
OH_NativeWindow_NativeWindowRequestBuffer (OHNativeWindow *window, OHNativeWindowBuffer **buffer, int *fenceFd)通过OHNativeWindow对象申请一块OHNativeWindowBuffer,用以内容生产
OH_NativeWindow_NativeWindowFlushBuffer (OHNativeWindow *window, OHNativeWindowBuffer *buffer, int fenceFd, Region region)通过OHNativeWindow将生产好内容的OHNativeWindowBuffer放回到Buffer队列中,用以内容消费
OH_NativeWindow_GetLastFlushedBuffer (OHNativeWindow *window, OHNativeWindowBuffer **buffer)从OHNativeWindow获取上次送回到buffer队列中的OHNativeWindowBuffer
OH_NativeWindow_NativeWindowHandleOpt (OHNativeWindow *window, int code,…)设置/获取OHNativeWindow的属性,包括设置/获取宽高、内容格式等
OH_NativeWindow_GetBufferHandleFromNative (OHNativeWindowBuffer *buffer)通过OHNativeWindowBuffer获取该buffer的BufferHandle指针
OH_NativeBuffer_SetColorSpace (OH_NativeBuffer *buffer, OH_NativeBuffer_ColorSpace colorSpace)为OH_NativeBuffer设置颜色空间属性
OH_NativeImage_SetOnFrameAvailableListener (OH_NativeImage *image, OH_OnFrameAvailableListener listener)设置帧可用回调
OH_NativeImage_UnsetOnFrameAvailableListener (OH_NativeImage *image)取消设置帧可用回调
OH_NativeImage_AcquireNativeWindow (OH_NativeImage *image)获取与OH_NativeImage相关联的OHNativeWindow指针。 该OHNativeWindow后续不再需要时需要调用OH_NativeWindow_DestroyNativeWindow释放
OH_NativeWindow_GetSurfaceId获取surfaceId
OH_NativeWindow_CreateNativeWindowFromSurfaceId通过surfaceId获取对应的OHNativeWindow
OH_NativeBuffer_MapPlanes将OH_NativeBuffer对应的多通道ION内存映射到进程空间
OH_NativeBuffer_FromNativeWindowBuffer将OHNativeWindowBuffer实例转换为OH_NativeBuffer实例

详细的接口说明请参考NativeWindowNativeImageNativeBuffer

相关权限

不涉及。

依赖

XComponent NativeWindow NativeImage EGL。

约束与限制

  1. 本示例仅支持标准系统上运行;
  2. 本示例为Stage模型,已适配API version 12版本SDK,SDK版本号5.0.0.19及以上版本,镜像版本号支持5.0.0.19及以上版本;
  3. 本示例需要使用DevEco Studio 4.0 Beta2 版本号(4.1.3.400)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Native/NdkNativeWindow/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Native/NdkXComponent/README_zh.md

Native XComponent

介绍

本示例中主要介绍开发者如何使用Native XComponent接口来获取NativeWindow实例、获取布局/事件信息、注册事件回调并通过OpenGL/EGL实现在页面上绘制形状。功能主要包括点击按钮绘制一个五角星,并可以通过点击XComponent区域改变五角星的颜色。

效果预览

主页绘制五角星改变颜色
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 安装编译生成的hap包,并打开应用。

  2. 点击页面底部“Draw Star”按钮,页面将绘制一个五角星。

  3. 点击XComponent组件区域(页面中灰色区域)改变五角星颜色。

工程目录

├──entry/src/main
│  ├──cpp                           // C++代码区
│  │  ├──CMakeLists.txt             // CMake配置文件
│  │  ├──napi_init.cpp              // Napi模块注册
│  │  ├──common
│  │  │  └──common.h                // 常量定义文件
│  │  ├──manager                    // 生命周期管理模块
│  │  │  ├──plugin_manager.cpp
│  │  │  └──plugin_manager.h
│  │  ├──render                     // 渲染模块
│  │  │  ├──egl_core.cpp
│  │  │  ├──egl_core.h
│  │  │  ├──plugin_render.cpp
│  │  │  └──plugin_render.h
│  ├──ets                           // ets代码区
│  │  ├──entryability
│  │  │  └──EntryAbility.ts         // 程序入口类
│  │  └──pages                      // 页面文件
│  │     └──Index.ets               // 主界面
|  ├──resources         			// 资源文件目录

具体实现

通过在IDE中创建Native c++ 工程,在c++代码中定义对外接口为drawPattern,在js侧调用该接口可在页面上绘制出一个三角形。

在XComponent的OnSurfaceCreated回调中获取NativeWindow实例并初始化EGL环境。调用OH_NativeXComponent_GetXComponentSize接口获取XComponent的宽高,并以此为输入调用EGL相关的绘制接口在NativeWindow上绘制出一个五角星。在DispatchTouchEvent回调中再次调用EGL相关的绘制接口在NativeWindow上绘制出一个大小相同、颜色不同的五角星,以达到点击后改变颜色的目的。

源码参考:render目录下的文件。

涉及到的相关接口:

接口名描述
OH_NativeXComponent_GetXComponentId(OH_NativeXComponent* component, char* id, uint64_t* size)获取XComponent的id。
OH_NativeXComponent_GetXComponentSize(OH_NativeXComponent* component, const void* window, uint64_t* width, uint64_t* height)获取XComponent持有的surface的大小。
OH_NativeXComponent_GetXComponentOffset(OH_NativeXComponent* component, const void* window, double* x, double* y)获取XComponent持有的surface相对窗口左上角的偏移量。
OH_NativeXComponent_GetTouchEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_TouchEvent* touchEvent)获取由XComponent触发的触摸事件。
OH_NativeXComponent_GetTouchPointToolType(OH_NativeXComponent* component, uint32_t pointIndex, OH_NativeXComponent_TouchPointToolType* toolType)获取XComponent触摸点的工具类型。
OH_NativeXComponent_GetTouchPointTiltX(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltX)获取XComponent触摸点处相对X轴的倾斜角度。
OH_NativeXComponent_GetTouchPointTiltY(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltY)获取XComponent触摸点处相对Y轴的倾斜角度。
OH_NativeXComponent_GetMouseEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_MouseEvent* mouseEvent)获取由XComponent触发的鼠标事件。
OH_NativeXComponent_RegisterCallback(OH_NativeXComponent* component, OH_NativeXComponent_Callback* callback)为此OH_NativeXComponent实例注册生命周期和触摸事件回调。
OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent* component, OH_NativeXComponent_MouseEvent_Callback* callback)为此OH_NativeXComponent实例注册鼠标事件回调。
OH_NativeXComponent_RegisterFocusEventCallback(OH_NativeXComponent* component, void (callback)(OH_NativeXComponent component, void* window))为此OH_NativeXComponent实例注册获得焦点事件回调。
OH_NativeXComponent_RegisterKeyEventCallback(OH_NativeXComponent* component, void (callback)(OH_NativeXComponent component, void* window))为此OH_NativeXComponent实例注册按键事件回调。
OH_NativeXComponent_RegisterBlurEventCallback(OH_NativeXComponent* component, void (callback)(OH_NativeXComponent component, void* window))为此OH_NativeXComponent实例注册失去焦点事件回调。
OH_NativeXComponent_GetKeyEvent(OH_NativeXComponent* component, OH_NativeXComponent_KeyEvent** keyEvent)获取由XComponent触发的按键事件。
OH_NativeXComponent_GetKeyEventAction(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyAction* action)获取按键事件的动作。
OH_NativeXComponent_GetKeyEventCode(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyCode* code)获取按键事件的键码值。
OH_NativeXComponent_GetKeyEventSourceType(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_EventSourceType* sourceType)获取按键事件的输入源类型。
OH_NativeXComponent_GetKeyEventDeviceId(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* deviceId)获取按键事件的设备ID。
OH_NativeXComponent_GetKeyEventTimestamp(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* timestamp)获取按键事件的时间戳。

相关权限

不涉及。

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568

  2. 本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

  3. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Native/NdkXComponent/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Native/NdkDrawing/README_zh.md

Native Drawing

介绍

本示例中主要介绍开发者在利用Native XComponent来获取NativeWindow实例、获取布局/事件信息、注册事件回调并通过Drawing API实现在页面上绘制形状。功能主要包括点击按钮绘制一个五角星和“Hello World Drawing”文字。

使用说明

  1. 安装编译生成的hap包,并打开应用。

  2. 点击页面底部“Draw Path”按钮,页面将绘制一个五角星;

  3. 点击页面底部“Draw Text”按钮,页面将绘制“Hello World Drawing”。

效果预览

主页绘制五角星绘制文字
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

工程目录

├──entry/src/main
│  ├──cpp                           // C++代码区
│  │  ├──CMakeLists.txt             // CMake配置文件
│  │  ├──hello.cpp                  // Napi模块注册
│  │  ├──common
│  │  │  └──log_common.h            // 日志封装定义文件
│  │  ├──plugin                     // 生命周期管理模块
│  │  │  ├──plugin_manager.cpp
│  │  │  └──plugin_manager.h
│  │  ├──samples                    // samples渲染模块
│  │  │  ├──sample_bitmap.cpp
│  │  │  └──sample_bitmap.h
│  ├──ets                           // ets代码区
│  │  ├──entryability
│  │  │  ├──EntryAbility.ts         // 程序入口类
|  |  |  └──EntryAbility.ets
|  |  ├──interface
│  │  │  └──XComponentContext.ts    // XComponentContext
│  │  └──pages                      // 页面文件
│  │     └──Index.ets               // 主界面
|  ├──resources         			// 资源文件目录

具体实现

通过在IDE中创建Native c++ 工程,在c++代码中定义对外接口为drawPattern和drawText,在js侧调用该接口可在页面上绘制出一个五角星和“Hello World Drawing”文字。

在XComponent的OnSurfaceCreated回调中获取NativeWindow实例并初始化NativeWindow环境。调用OH_NativeXComponent_GetXComponentSize接口获取XComponent的宽高,并以此为输入调用Drawing相关的绘制接口在NativeWindow上绘制出一个五角星和文字。

源码参考:samples目录下的文件。

涉及到的相关接口:

接口名描述
OH_Drawing_BitmapCreate (void)创建一个位图对象。
OH_Drawing_BitmapBuild (OH_Drawing_Bitmap *, const uint32_t width, const uint32_t height, const OH_Drawing_BitmapFormat *)初始化位图对象的宽度和高度,并且为该位图设置像素格式。
OH_Drawing_CanvasCreate (void)创建一个画布对象。
OH_Drawing_CanvasBind (OH_Drawing_Canvas *, OH_Drawing_Bitmap *)将一个位图对象绑定到画布中,使得画布绘制的内容输出到位图中(即CPU渲染)。
OH_Drawing_CanvasAttachBrush (OH_Drawing_Canvas *, const OH_Drawing_Brush *)设置画刷给画布,画布将会使用设置的画刷样式和颜色去填充绘制的图形形状。
OH_Drawing_CanvasAttachPen (OH_Drawing_Canvas *, const OH_Drawing_Pen *)设置画笔给画布,画布将会使用设置画笔的样式和颜色去绘制图形形状的轮廓。
OH_Drawing_CanvasDrawPath (OH_Drawing_Canvas *, const OH_Drawing_Path *)画一个自定义路径。
OH_Drawing_PathCreate (void)创建一个路径对象。
OH_Drawing_PathMoveTo (OH_Drawing_Path *, float x, float y)设置自定义路径的起始点位置。
OH_Drawing_PathLineTo (OH_Drawing_Path *, float x, float y)添加一条到目标点的线段。
OH_Drawing_PathClose (OH_Drawing_Path *)闭合路径,会添加一条到路径起点位置的线段。
OH_Drawing_PenCreate (void)创建一个画笔对象。
OH_Drawing_PenSetAntiAlias (OH_Drawing_Pen *, bool)设置抗锯齿属性,如果为真则说明画笔会启用抗锯齿功能,在绘制图形时会对图形的边缘像素进行半透明的模糊处理。
OH_Drawing_PenSetWidth (OH_Drawing_Pen *, float width)设置画笔的厚度属性,厚度属性描述了画笔绘制图形轮廓的宽度。
OH_Drawing_BrushCreate (void)创建一个画刷对象。
OH_Drawing_BrushSetColor (OH_Drawing_Brush *, uint32_t color)设置画刷的颜色属性,颜色属性描述了画刷填充图形时使用的颜色,用一个32位(ARGB)的变量表示。
OH_Drawing_CreateTypographyStyle (void)创建一个排版对象,用于定义排版样式。
OH_Drawing_CreateTextStyle (void)创建一个文本对象,用于定义文本样式。
OH_Drawing_TypographyHandlerAddText (OH_Drawing_TypographyCreate *, const char *)设置文本内容。
OH_Drawing_TypographyPaint (OH_Drawing_Typography *, OH_Drawing_Canvas *, double, double)显示文本。

详细的接口说明请参考Drawing

相关权限

不涉及。

依赖

XComponent NativeWindow。

约束与限制

  1. 本示例仅支持标准系统上运行。
  2. 本示例为Stage模型,已适配API version 10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release);
  3. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Native/NdkDrawing/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Native/NdkRawfile/README_zh.md

获取Rawfile资源

介绍

本示例中主要介绍开发者如何使用Native Rawfile接口操作Rawfile目录和文件。功能包括文件列表遍历、文件打开、搜索、读取和关闭Rawfile。

效果预览

主页
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

应用界面中展示了Rawfile相关的接口调用,包括获取resources/rawfile目录下的文件及目录结构、对应的rawfile文件内容、对应rawfile文件的descriptor。其中使用到的功能包括文件列表遍历、文件打开、搜索、读取和关闭Rawfile。

工程目录

entry/src/main/
|---cpp
|   |---types
|   |   |---libentry
|   |   |   |---index.d.ts                     // 接口导出
|   |   |   |---oh-package.json5
|   |---CMakeLists.txt                         // 编译脚本
|   |---rawfile_demo.cpp                       // 调用native接口
|---ets
|   |---entryability
|   |   |---EntryAbility.ets
|   |---pages
|   |   |---Index.ets                          // 首页
|   |---utils
|   |   |---Logger.ets                         // 日志工具
|---resources
|   |---rawfile                                // rawfile资源
|   |   |---subrawfile
|   |   |   |---rawfile2.txt
|   |   |---rawfile.txt
|   |   |---rawfile1.txt

具体实现

通过在IDE中创建Native c++ 工程,在c++代码中定义对外接口为getFileList、getRawFileContent、getRawFileDescriptor,映射C++接口分别为GetFileList、GetRawFileContent、GetRawFileDescriptor。
通过获取Js的资源对象,并转为Native的资源对象,即可调用资源的Native接口,获取rawfile列表、rawfile文件内容以及rawfile描述符{fd, offset, length}。
在Js侧导入"libentry.so",通过getContext().resourceManager获取资源管理对象。调用src/main/cpp/types/libentry/index.d.ts中声明的接口,传入js的资源对象和相关参数获取对于rawfile相关资源信息。
源码参考:rawfile_demo.cpp
。 涉及到的相关接口:

接口名描述
初始化native resource manager。NativeResourceManager *OH_ResourceManager_InitNativeResourceManager(napi_env env, napi_value jsResMgr)
打开指定rawfile目录。RawDir *OH_ResourceManager_OpenRawDir(const NativeResourceManager *mgr, const char *dirName)
获取指定rawfile目录下的rawfile文件数量。int OH_ResourceManager_GetRawFileCount(RawDir *rawDir)
获取rawfile名字。const char *OH_ResourceManager_GetRawFileName(RawDir *rawDir, int index)
打开指定rawfile文件。RawFile *OH_ResourceManager_OpenRawFile(const NativeResourceManager *mgr, const char *fileName)
获取rawfile文件大小。long OH_ResourceManager_GetRawFileSize(RawFile *rawFile)
读取rawfile文件内容。int OH_ResourceManager_ReadRawFile(const RawFile *rawFile, void *buf, size_t length)
释放rawfile文件相关资源。void OH_ResourceManager_CloseRawFile(RawFile *rawFile)
释放rawfile目录相关资源。void OH_ResourceManager_CloseRawDir(RawDir *rawDir)
获取rawfile的fd。bool OH_ResourceManager_GetRawFileDescriptor(const RawFile *rawFile, RawFileDescriptor &descriptor)
释放native resource manager相关资源。void OH_ResourceManager_ReleaseNativeResourceManager(NativeResourceManager *resMgr)

相关权限

不涉及。

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568。

  2. 本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

  3. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Native/NdkRawfile/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Native/NdkOpenGL/README_zh.md

OpenGL三棱椎

介绍

XComponent控件常用于相机预览流的显示和游戏画面的绘制,在OpenHarmony上,可以配合Native Window创建OpenGL开发环境,并最终将OpenGL绘制的图形显示到XComponent控件。本示例基于"Native C++"模板,调用OpenGL(OpenGL ES)图形库相关API绘制3D图形(三棱锥),并将结果渲染到页面的XComponent控件中进行展示。同时,还可以在屏幕上通过触摸滑动手势对三棱锥进行旋转,最终得到不同角度的图形并显示到页面。

效果预览

首页滑动屏幕旋转变换
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

应用界面中展示了XComponent相关控件的使用,及采用OpenGL (OpenGL ES)相关标准API绘制3D图形(三棱锥,3D渲染的光源用的是简单的线性光源)。此外,可在屏幕触摸滑动,以使三棱锥进行旋转,其中主要采用了napi接口来更新3D图形的旋转角度。

工程目录

entry/src/main/
|---cpp
|   |---CMakeLists.txt                       // cmake编译配置
|   |---app_napi.cpp                         // 调用native接口
|   |---include
|   |   |---app_napi.h
|   |   |---tetrahedron.h
|   |   |---util
|   |       |---log.h
|   |       |---napi_manager.h
|   |       |---napi_util.h
|   |       |---native_common.h
|   |       |---native_interface_xcomponent.h
|   |---module.cpp                           // napi模块注册
|   |---napi_manager.cpp
|   |---napi_util.cpp
|   |---tetrahedron.cpp                      // OpenGL (ES) 三棱锥实现
|   |---type
|       |---libentry
|           |---oh-package.json5
|           |---tetrahedron_napi.d.ts        // 接口导出
|---ets
|   |---entryability
|   |   |---EntryAbility.ts
|   |---pages
|   |   |---Index.ets                        // 首页
|   |---utils
|       |---Logger.ets                       // 日志工具
|

具体实现

通过在IDE中创建Native C++工程,在C++代码中定义接口为Init和Update用于3D图形绘制环境的初始化和图形渲染更新,并映射NAPI相关接口UpdateAngle。ArkTS侧主要利用XComponent控件实现Index.ets,C++侧主要采用OpenGL ES相关标准API实现三棱锥的绘制流程相关代码,并可与ArkTS进行交互。

应用启动时,NAPI模块也相应进行初始化,此时可通过C++侧的OH_NativeXComponent_GetXComponentId()接口,获取到当前XComponent控件的控件指针,并给到C++侧三棱锥绘制相关的Init和Update函数,实现3D图形显示。同时,为实现三棱锥的触摸屏滑动旋转效果,在C++代码中映射的NAPI接口UpdateAngle给到ArkTS侧调用。ArkTS侧需在导入NAPI模块"libtetrahedron_napi.so"正确的前提下,通过调用src/main/cpp/type/libentry/tetrahedron_napi.d.ts中声明的UpdateAngle接口更新三棱锥旋转角度。
主要源码参考:napi_manager.cppapp_napi.cpptetrahedron.cpp

Native XComponent相关函数如下:

函数名称描述
OH_NativeXComponent_GetXComponentId(OH_NativeXComponent *component, char *id, uint64_t *size)获取ArkUI XComponent的id
OH_NativeXComponent_GetXComponentSize(OH_NativeXComponent *component, const void *window, uint64_t *width, uint64_t *height)获取ArkUI XComponent持有的surface的大小
OH_NativeXComponent_GetXComponentOffset(OH_NativeXComponent *component, const void *window, double *x, double *y)获取ArkUI XComponent组件相对屏幕左上顶点的偏移量
OH_NativeXComponent_GetTouchEvent(OH_NativeXComponent *component, const void *window, OH_NativeXComponent_TouchEvent *touchEvent)获取ArkUI XComponent调度的触摸事件
OH_NativeXComponent_GetTouchPointToolType(OH_NativeXComponent *component, uint32_t pointIndex, OH_NativeXComponent_TouchPointToolType *toolType)获取ArkUI XComponent触摸点工具类型
OH_NativeXComponent_GetTouchPointTiltX(OH_NativeXComponent *component, uint32_t pointIndex, float *tiltX)获取ArkUI XComponent触摸点倾斜与X轴角度
OH_NativeXComponent_GetTouchPointTiltY(OH_NativeXComponent *component, uint32_t pointIndex, float *tiltY)获取ArkUI XComponent触摸点倾斜与Y轴角度
OH_NativeXComponent_GetMouseEvent(OH_NativeXComponent *component, const void *window, OH_NativeXComponent_MouseEvent *mouseEvent)获取ArkUI XComponent调度的鼠标事件
OH_NativeXComponent_RegisterCallback(OH_NativeXComponent *component, OH_NativeXComponent_Callback *callback)实例注册回调
OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent *component, OH_NativeXComponent_MouseEvent_Callback *callback)实例注册鼠标事件回调

相关权限

不涉及。

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行。

  2. 本示例已适配API version 10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0Release) 。

  3. 本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Native/NdkOpenGL/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/DeviceUsageStatistics/DeviceUsageStatistics/README_zh.md

设备使用信息统计

介绍

本示例使用bundleState相关接口完成设备中应用时长的统计功能。

效果预览

主页
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

1.顶部的数据面板展示了最常用的五个应用的使用时间占比情况。

2.中部的竖向滑动栏展示了每个应用的使用总时长和最后一次使用的时间。

3.底部的横向滑动栏展示了不常用应用列表。

工程目录

entry/src/main/ets/
|---common
|   |---FreeApps.ets                     // 不常用应用
|   |---PanelView.ets                    // 使用时长
|   |---UsageList.ets                    // 使用列表
|---entryAbility
|   |---EntryAbility.ts
|---model
|   |---HmsTime.ets                      // 时间
|   |---Logger.ts                        // 日志工具
|---pages
|   |---Index.ets                        // 首页
|---utils
|   |---DataSource.ets                   // 资源数据

具体实现

  • 该示例使用bundleState接口中isIdleState方法判断指定bundleName的应用当前是否是空闲状态来分类不常用应用列表,queryBundleStateInfos方法通过指定起始和结束时间查询应用使用时长统计信息来获得每个应用的使用总时长。
  • 源码链接:BundleStateUtil.etsFreeApps.etsPanelView.etsUsageList.ets
  • 接口参考:@ohos.bundleState

相关权限

应用信息权限:ohos.permission.BUNDLE_ACTIVE_INFO

依赖

不涉及。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行;

4.本示例涉及使用系统接口:queryBundleStateInfos(),需要手动替换Full SDK才能编译通过,具体操作可参考替换指南

5.本示例所配置的权限为ohos.permission.BUNDLE_ACTIVE_INFO为system_basic级别(相关权限级别可通过权限定义列表查看),需要手动配置对应级别的权限签名(具体操作可查看自动化签名方案

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/DeviceUsageStatistics/DeviceUsageStatistics/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/WebSocket/README_zh.md

WebSocket

介绍

本示例展示了WebSocket的使用,包括客户端与服务端的连接和断开以及客户端数据的接收和发送。

WebSocket连接:使用WebSocket建立服务器与客户端的双向连接,需要先通过createWebSocket方法创建WebSocket对象,然后通过connect方法连接到服务器。
当连接成功后,客户端会收到open事件的回调,之后客户端就可以通过send方法与服务器进行通信。 当服务器发信息给客户端时,客户端会收到message事件的回调。
当客户端不要此连接时,可以通过调用close方法主动断开连接,之后客户端会收到close事件的回调。

效果预览

主页未连接连接
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用方法:

1.输入服务器IP地址,点击绑定服务器IP地址按钮,即可绑定该IP并退出弹框,如果要解绑IP,重启应用即可。

2.点击顶部栏的连接按钮,按钮颜色从灰色变为绿色,即可与服务器建立WebSocket连接,并开始监听服务器发来的消息。

3.在底部消息输入框输入消息,点击发送按钮,即可收到来自服务端的消息回馈。

4.再次点击顶部栏的连接按钮,按钮颜色从绿色重新变成灰色,即可与服务器断开连接,接收不到服务器发来的消息。

5.重新连接需要退出应用重新绑定ip,再次点击连接才可以发送接收消息。

工程目录

entry/src/main/ets/
|---Application
|   |---AbilityStage.ts
|---common
|   |---BindServiceIp.ets                    // 绑定服务器IP地址
|   |---ChatsPage.ets                        // 聊天框
|   |---SendMessage.ets                      // 发送信息
|   |---TopBar.ets                           // 顶部栏
|---MainAbility
|   |---MainAbility.ts
|---model
|   |---ChatData.ets                          // 数据类型
|   |---DataSource.ets                        // 源数据
|   |---Logger.ts                             // 日志工具
|---pages
|   |---Chats.ets                             // 首页

具体实现

相关权限

ohos.permission.INTERNET

依赖

依赖于WebSocketServer服务器才能实现相关功能。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本项目仅包含客户端,不包含服务端,当前服务端回复客服端为固定消息。

3.本示例仅支持API9版本SDK,版本号:3.2.11.9 及以上。

4.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code\BasicFeature\Connectivity\WebSocket > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/StageSocket/README_zh.md

网络管理-Socket连接

介绍

本示例主要演示了Socket在网络通信方面的应用,展示了Socket在两端设备的连接验证、聊天通信方面的应用。

效果预览

输入IP创建房间聊天
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.搭建服务器环境:修改服务器脚本中的服务端IP地址,与本机IP地址保持一致,修改完成后双击运行脚本(端口号不必修改,与客户端工程中的端口保持一致即可)。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.运行成功后为阻塞状态,等待客户端连接成功后会有相应提示。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.打开应用,点击用户选择框选择要登录的用户(不同客户端保持用户选择不一致),点击协议选择框选择通信协议(与运行的服务器一致),并输入另一个设备的IP地址(如果是TCP和TLS,则输入服务端IP地址),点击登录按钮进入创建房间用户页面(两个设备都要依次执行此步骤)。

4.在两台设备都成功连上服务器后,在其中一个设备上点击创建房间按钮,任意输入房间号,另一个设备会收到邀请进入房间的信息弹框,点击确定按钮后,两个设备进入聊天页面。

5.在其中一个设备上输入聊天信息并点击发送按钮后,另一个设备的聊天页面会收到该聊天消息。

6.点击顶部标题栏左侧的返回图标按钮,则返回创建房间页面。

7.以上运行完成后如需再次创建房间请重启客户端和服务端进行调试。

工程目录

/Socket
├── entry             # 主entry模块目录
│   └── src
│       ├── main
│           ├── ets                                # ets模块目录
│               ├── components                     # 组件目录
│                   ├── ChatComponent.ets          # 聊天组件
│                   ├── CreateRoomDialog.ets       # 创建房间弹窗
│                   ├── InvitationDialog.ets       # 邀请进入房间弹窗
│                   ├── SelectAgreementDialog.ets  # 选择协议弹窗
│                   ├── SelectUserDialog.ets       # 选择用户弹窗
│                   ├── ToolComponent.ets          # 工具面板组件
│               ├── controller                     # 
│                   ├── LoginController.ts         # 负责与服务器的连接和接发消息
│               ├── data                           # 
│                   ├── ChatBox.ts                 # 聊天组件对应实体
│                   ├── DataSource.ts              # 数据源实体
│                   ├── ToolData.ts                # 工具面板对应实体
│               ├── entryability                
│               ├── model                          #  
│                   ├── Socket.ts                  # 负责创建相应Socket实例
│                   ├── SocketFactory.ts           # Socket工厂
│               ├── pages                          # 
│                   ├── CreateRoom.ets             # 创建房间页面
│                   ├── NewIndex.ets               # 聊天首页
│                   ├── NewLogin.ets               # 连接服务器页面
│               ├── socket                         # tcp\tls\udp
│               ├── utils                          # 工具类目录
│               ├── Constants.ts                   # 定义UI事件常量

具体实现

  • UDP Socket:使用UDP Socket实现文本传输,无需搭建服务器,对端直接交流。代码:UdpSocket.ts
  • TCP Socket:使用TCP Socket实现文本传输和公共通知事件转发,需要Python脚本搭建TCP服务器,公共通知用于来起音频通话应用。代码:TcpSocket.ts,服务器代码:TCP_Server.py
  • TLS Socket:使用TLS Socket实现文本传输,需要Python脚本搭建TLS服务器,服务器和客户端需要同一套证书文件。代码:TlsSocket.ts,服务器代码:TLS_Server.py

相关权限

网络权限: ohos.permission.INTERNET
获取WIFI信息的权限: ohos.permission.GET_WIFI_INFO

依赖

  1. windows上启动socket服务端,模拟消息转发服务器服务器目录
  2. 需要使用音频通话示例启动语音通话功能

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568。

  2. 本示例为Stage模型,仅支持API9版本SDK,版本号:3.2.11.10,镜像版本号: OpenHarmony 4.0.7.5。

  3. 本示例需要使用DevEco Studio 3.1 Release (Build Version: 3.1.0.500, built on April 28, 2023)才可编译运行。

  4. 本示例在启动前需搭建服务端环境,成功启动相应服务端后再运行客户端,服务端脚本(server_python)需要在Python 3.8.5版本下运行(需与客户端处于同一局域网)。

  5. TCP和TLS脚本使用同一端口,不可同时运行,在使用某一类型的协议前运行对应协议的服务端脚本即可;TLS脚本需与证书文件(certificate_file)存在于同级非中文路径目录。

  6. 该示例运行测试完成后,再次运行需要重新启动服务端和客户端。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/StageSocket/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/VPN/README_zh.md

VPN连接

介绍

本示例使用@ohos.net.vpn接口创建VPN 隧道,建立vpn网络,vpn隧道保护,销毁VPN网络以及使用@ohos.net.vpnExtension接口创建三方vpn等功能。
实现了VPN的进行服务器连接,发送数据的功能

效果预览

主页vpn启动vpn关闭
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 进入应用前请先安装VPNFoundation

  2. 进入应用后,主界面有启用VPN和停用VPN的选项。分别对应开启和关闭VPN功能。

  3. 在主界面,可以点击启用VPN来创建VPN连接。

  4. 在VPN启动界面,可以配置VPN服务器IP地址/隧道IP地址/使用VPN的应用程序。

  5. 在VPN启动界面,点击创建对象可以创建VPN隧道,点击隧道保护可以开启隧道保护,点击启动VPN可以进行网络连接。

  6. 在主界面,可以点击停用VPN来断开和关闭VPN连接。

  7. 以上演示系统vpn,如果使用三方vpn,点击启动vpnExt按钮,弹窗提示vpn使用许可,同意后三方vpn启动并自动连接,尝试用浏览器等hap包访问百度

三方vpn弹窗
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

8 .访问成功后返回主页面,点击关闭vpnExt按钮,断开三方vpn连接

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ts            // 项目入口,请求相关权限
|---pages
|   |---Index.ets                  // 首页
|   |---StartVpn.ets               // 打开vpn
|   |---StopVpn.ets                // 关闭vpn
|---model
|   |---Logger.ets                 // 日志
|---serviceextability
|   |---MyVpnExtAbility.ts         // 三方vpn能力

具体实现

创建VPN隧道,建立VPN网络,VPN隧道保护,销毁VPN网络,接口封装在StartVpn和StopVpn,源码参考:StartVpn.ets和StopVpn.ets。

* 创建VPN隧道:调用StartVpn.CreateTunnel()来创建VPN隧道;
* 建立VPN网络:调用StartVpn.SetupVpn()来建立VPN网络;
* 销毁VPN网络:调用StopVpn.Destroy()来销毁VPN网络;
* VPN隧道保护:调用StartVpn.Protect()来开启VPN隧道保护;

相关权限

允许系统应用获取网络权限: ohos.permission.INTERNET,允许系统应用获取VPN权限: ohos.permission.MANAGE_VPN。

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API11版本SDK,SDK版本号(API Version 4.1 Beta1),镜像版本号(4.1 Beta1)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.本示例在启动前需搭建服务端环境,成功启动相应服务端后再运行客户端,服务端脚本(server_python)需要在Python 3.8.5版本下运行(需与客户端处于同一局域网)。

5.该示例运行测试完成后,再次运行需要重新启动服务端和客户端。

6.本示例使用了system_basic级别的权限(相关权限级别请查看权限定义列表 ),需要手动配置高级别的权限签名(具体操作可查看自动化签名方案 ) 。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/VPN/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/Http/README_zh.md

Http

介绍

本示例通过@ohos.net.http
等接口,实现了根据URL地址和相关配置项发起http请求的功能。

效果预览

首页结果页
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.启动应用可配置网络请求,设置网址、请求方式、请求参数;

2.点击确认按钮,跳转请求结果页面;

3.点击返回按钮,返回配置页面;

4.支持将本示例中的http模块编译成tgz包。

工程目录

entry/src/main/ets/
|---Application
|---MainAbility
|   |---MainAbility.ts            // 项目入口,请求相关权限
|---page
|   |---Index.ets                 // 首页
|---util                          // 日志文件
http/src/main/ets/
|---components
|   |---MainPage
|   |   |---MainPage.ets          // 首页主体内容
|   |---model
|   |   |---http.ts               // 封装了http参数和发起请求的接口

具体实现

  • 本示例将发送http请求的接口封装在Http模块,源码参考:http.ts
    • 发起请求:在MainPage.ets
      通过TextInput组件获取参数,点击“确认”按钮后通过Http.request()方法调用http.createHttp().request()接口向指定的地址发送请求。

相关权限

ohos.permission.INTERNET

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.运行本示例需全程联网。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/Http/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/Bluetooth/README_zh.md

蓝牙

介绍

本示例通过使用蓝牙低功耗心率服务,展示蓝牙相关API用法。实现了以下几点功能:

  1. 发现具有特定服务的设备。
  2. 连接到设备。
  3. 发现服务。
  4. 发现服务的特征、如何读取给定特征的值、为特征设置通知等。

相关概念

  1. BLE扫描:通过BLE扫描接口实现对BLE设备的搜索。
  2. BLE连接:通过BLE的GattClientDevice实现对BLE设备的连接、断连等操作。
  3. 接收数据:通过BLECharacteristicChange接收特征值的改变。

效果预览

搜索设备搜索结果
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
连接成功实时心率
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 启动应用后,弹出是否允许应用访问位置信息,点击允许后开始操作。
  2. 点击界面中搜索设备,如未开启蓝牙会自动开启并搜索心率设备,如已开启直接搜索设备。
  3. 点击连接按钮可以连接到对应的蓝牙心率设备。
  4. 点击列表Item可以进入实时心率图查看页面。
  5. 点击实时心率图页断开连接可以断开与当前心率设备的连接。

工程目录

entry/src/main/ets/
|---constants
|   |---BleConstants.ts                    // BLE常量
|   |---StyleConstants.ts                  // Style样式常量
|---entryability
|---model
|   |---BluetoothDevice.ets                // 蓝牙设备model
|---pages
|   |---Main.ets                           // 首页
|   |---HeartRate.ets                      // 实时心率图
|---uicomponents
|   |---HeartRateGraph.ets                 // 实时心率图表
|   |---NavigationBar.ets                  // 顶部导航栏
|---uitls
|   |---ArrayBufferUtils.ts                // ArrayBuffer工具
|   |---DateUtils.ts                       // 日期工具
|   |---Log.ts                             // 日志工具
|---viewmodel
|   |---BluetoothViewModel.ets             // 主要封装了蓝牙库相关的接口,实现相关功能,如:开启蓝牙、扫描BLE、连接、断连等功能
advertiser/src/main/ets/
|---constants
|   |---BleConstants.ts                    // BLE常量
|---entryability
|---pages
|   |---Main.ets                           // 首页
|---uitls
|   |---ArrayBufferUtils.ts                // ArrayBuffer工具
|   |---Log.ts                             // 日志工具
|   |---MathUtils.ts                       // Math工具,用于生成随机数
|---viewmodel
|   |---AdvertiserBluetoothViewModel.ets   // 主要封装了蓝牙库相关的接口,实现相关功能,如:开启蓝牙、开启蓝牙心率广播等功能

具体实现

  1. 首页扫描蓝牙心率设备:使用bluetooth 来实现蓝牙的开启和BLE的扫描,然后再使用一个List显示扫描到BLE心率设备,点击连接按钮可以连接上对应的心率设备。
  2. 实时心率图页:使用bluetooth 来接收心率设备发送的心率数据,并使用画布Canvas 来绘制实时心率图,点击断开连接可以断开与当前心率设备的连接。

相关权限

权限名权限说明级别
ohos.permission.USE_BLUETOOTH允许应用查看蓝牙的配置。normal
ohos.permission.DISCOVER_BLUETOOTH允许应用配置本地蓝牙,查找远端设备且与之配对连接。normal
ohos.permission.MANAGE_BLUETOOTH允许应用配对蓝牙设备,并对设备的电话簿或消息进行访问。system_basic
ohos.permission.APPROXIMATELY_LOCATION允许应用获取设备模糊位置信息。normal
ohos.permission.LOCATION允许应用获取设备位置信息。normal

依赖

本示例需要使用设备来模拟BLE心率设备。这里使用OpenHarmony来模拟了BLE心率设备,相关代码在module - advertiser。使用另一台OpenHarmony设备运行advertiser编译出来的hap后,点击开启BLE心率广播。当BLE心率服务应用扫描并连接到模拟的BLE心率设备后,就可以在应用中查看当前模拟的实时心率。

约束与限制

  1. 本示例仅支持标准系统上运行。
  2. 本示例为Stage模型,从API version 9开始支持。SDK版本号:3.2.12.1 Release,镜像版本号:OpenHarmony 3.2.12.2。
  3. 本示例需要使用DevEco Studio 3.1 Release (Build Version: 3.1.0.500, built on April 28, 2023)编译运行。
  4. 本示例所配置的权限包含system_basic级别(相关权限级别可通过[权限定义列表](OpenAtom OpenHarmony查看),需要手动配置对应级别的权限签名或者使用ACL使能(具体操作可查看自动化签名方案)。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/Bluetooth/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/RPC/README_zh.md

RPC连接

介绍

本示例使用@ohos.rpc 相关接口,实现了一个前台选择商品和数目,后台计算总价的功能,使用rpc进行前台和后台的通信。

效果预览

主页选择列表
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  1. 点击商品种类的空白方框,弹出商品选择列表,选择点击对应的商品,空白方框显示相应内容。

  2. 点击商品选择框后的 +- 按钮,选择商品所对应的数量。

  3. 点击 Confirm an order 按钮,根据相应的菜品数量与单价,计算出总价并显示。

工程目录

entry/src/main/ets/
|---common
|   |---CustomDialogList.ets           // 选项弹窗
|   |---FlexList.ets                   // 首页视频种类列表
|   |---Logger.ets                     // 日志工具
|   |---TitleBar.ets                   // 头部
|---entryability
|   |---EntryAbility.ets               // 入口文件
|---model
|   |---OptionsData.ets                // 选项懒加载
|   |---ProcessData.ets                // 封装了获取总价的api
|   |---ReceivedData.ets               // 重写了请求方法
|---muck
|   |---MyData.ets                     // muck数据
|---pages
|   |---Index.ets                      // 首页

具体实现

  • 发送数据:在首页的sortString()中通过rpc.MessageSequence.create()创建MessageSequence对象,然后通过MessageSequence.writeStringArray()将
    我们的处理过的购物数据写入MessageSequence对象中,通过rpc.RemoteObject.sendMessageRequest()将我们得出总价所需要的参数发送到进程中,
    源码参考:Index.ets ;

  • 读取数据:处理MessageRequest请求的接口封装在ReceivedData里面,在这里接收传递来的数据,然后经过处理得出总价,
    并通过rpc.MessageParcel.writeInt()写入MessageParcel对象,源码参考:ReceivedData.ets

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上版本才可编译运行。

3.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/RPC/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/UploadAndDownLoad/README_zh.md

上传和下载

介绍

本示例使用@ohos.request接口创建上传和下载任务,实现上传、下载功能,hfs作为服务器,实现了文件的上传和下载和任务的查询功能。

效果预览

主页上传片段上传下载
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.本示例功能需要先配置服务器环境后使用,具体配置见上传下载服务配置

2.首页展示上传和下载两个入口组件,点击进入对应的页面,如果要使用后台下载任务,请开启后台任务开关。

3.上传页面:

点击 +从相册选择拉起图库选择照片,图片选择页面支持拍照,选择照片后点击上传进行上传。

可选的,点击缩略图,显示文件片段上传配置选项弹窗,可以配置上传起点和终点,取值为闭区间;起点默认为0,终点默认为文件结尾。点击上传进行选中文件片段以及后续文件全部内容上传。

点击返回键或片段上传配置选项弹窗外区域,取消片段上传。

在首页中打开后台任务开关后,上传页面开启的是后台上传任务,后台任务在应用退出到后台时可以在通知栏看到任务状态。

后台上传暂停时,需要服务器支持上传暂停服务(HFS暂不支持此操作)。如仍然使用HFS作为服务器,此时HFS服务将中断文件写入,立即将当前传输的数据保存为文件片段。点击继续时则会重新生成一份文件,并在新文件中开始写入。

4.下载页面:

点击文件列表选择要下载的文件后,点击下载选择指定路径后开始下载。

点击查看下载文件进入下载文件页面,点击文件夹查看文件夹内的文件。

在首页中打开后台任务开关后,下载页面开启的是后台下载任务,后台任务在应用退出到后台时可以在通知栏看到任务状态。

前台下载时只支持单文件下载,后台下载时支持选择多个文件下载。

后台下载暂停时,本示例功能将自动记录断点。此时HFS服务仍会进行一定时间的传输,但是传输的数据并不会被接受。点击继续后将会从上次暂停的断点继续下载。

工程目录

UploadAndDownload
├── AppScope                                    
│   └── app.json5                               //APP信息配置文件
├── entry/src/main                              //应用首页
│   ├── ets
│   │   ├── entryability
│   │   ├── components                          //自定义组件
│   │   ├── pages
│   │   │   ├── Index.ets                       //主页入口
│   │   │   ├── Download.ets                    //下载页面                     
│   │   │   ├── DownloadFiles.ets               //查看下载文件页面
│   │   │   ├── Upload.ets                      //上传页面 
│   └── module.json5
│
├── features/uploadanddownload/src/main         //上传和下载
│   ├── ets
│   │   ├── Index.ets                           //对外提供的接口列表      
│   │   ├── components
│   │   │    └── FileBrowse.ets                 //查看下载文件组件  
│   │   ├── download                            //下载任务相关
│   │   ├── upload                              //上传任务相关
│   │   ├── utils                               //相关工具类
│   └── module.json5

具体实现

  • 该示例分为两个模块:

相关权限

ohos.permission.INTERNET

ohos.permission.READ_MEDIA

依赖

上传下载服务配置

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.运行本示例需全程联网。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Connectivity/UploadAndDownload/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Connectivity/Socket/README_zh.md

网络管理-Socket连接

介绍

本示例主要演示了Socket在网络通信方面的应用,展示了Socket在两端设备的连接验证、聊天通信方面的应用。

效果预览

输入IP创建房间聊天
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.打开应用,点击用户文本框选择要登录的用户,并输入另一个设备的IP地址,点击确定按钮进入已登录的用户页面(两个设备都要依次执行此步骤)。

2.在其中一个设备上点击创建房间按钮,任意输入房间号,另一个设备会收到有房间号信息的弹框,点击确定按钮后,两个设备进入聊天页面。

3.在其中一个设备上输入聊天信息并点击发送按钮后,另一个设备的聊天页面会收到该聊天消息。

4.点击顶部标题栏右侧的退出图标按钮,则返回已登录的用户页面。

5.点击聊天页面中的昵称栏,会弹出一个菜单,选择离线选项后,两端设备的状态图标都会切换为离线图标,并且昵称栏都会变成灰色,此时任何一端发送消息另一端都接收不到消息。

6.当点击昵称栏再次切换为在线状态,则两端的己方账号状态会切换为在线图标,同时两端的昵称栏会显示蓝色,此时可正常收发消息。

工程目录

entry/src/main/ets/MainAbility
|---app.ets
|---model
|   |---chatBox.ts                     // 聊天页面
|   |---DataSource.ts                  // 数据获取
|   |---Logger.ts                      // 日志工具
|---pages
|   |---Index.ets                      // 监听消息页面
|   |---Login.ets                      // 首页登录页面
|---Utils
|   |---Utils.ets

具体实现

相关概念

UDP Socket是面向非连接的协议,它不与对方建立连接,而是直接把我要发的数据报发给对方,适用于一次传输数据量很少、对可靠性要求不高的或对实时性要求高的应用场景。

相关权限

1.允许使用Internet网络权限:ohos.permission.INTERNET

2.允许应用获取WLAN信息权限:ohos.permission.GET_WIFI_INFO

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例仅支持API9版本SDK,版本号:3.2.11.9 及以上。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code\BasicFeature\Connectivity\Socket > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/CryptoFramework/README_zh.md

通用密钥库系统

介绍

本示例使用@ohos.security.cryptoFramework
相关接口实现了对文本文件的加解密、签名验签操作。

实现场景如下:

1)软件需要加密存储本地文本文件,需要调用加解密算法库框架选择密钥文本文件,对本地文本文件进行加密,其中密钥文本文件可由加解密算法库生成。

2)软件需要解密存储本地文本文件,需要调用加解密算法库框架选择密钥文本文件,对本地文本文件进行解密,其中密钥文本文件可由加解密算法库生成。

3)软件需要对存储本地文本文件签名,调用加解密算法库框架选择密钥文本文件,对本地文本文件进行完整性签名,其中密钥文本文件可由加解密算法库生成。

4)软件需要验证存储本地文本文件的签名完整性,需要调用加解密算法库框架选择密钥文本文件与签名文件,对文件进行验签,其中密钥文本文件可由加解密算法库生成。

效果预览

加密页面解密页面签名页面验签界面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.点击主页面tab栏的加密,在加密界面点击打开文件,通过文件选择器选择文本文件,选择完毕自动返回加密界面,
其内容显示在文件内容文本框中,
点击选择密钥,选择密钥文件,如果没有密钥文件,可以通过在加密界面点击随机生成AES密钥,生成并通过文件选择器保存密钥文件。
选择完文本文件和密钥文件后,点击加密按钮,完成加密,并通过文件选择器保存密文文件。
下方加密内容文本框中显示加密后的消息内容。

2.点击主页面tab栏的解密,在解密界面点击打开文件,通过文件选择器选择文本文件,选择完毕自动返回解密界面,
其内容显示在文件内容文本框中,
点击选择密钥,选择和加密相同的密钥文件。
选择完文本文件和密钥文件后,点击解密按钮,完成解密,并通过文件选择器保存明文文件。
下方解密内容文本框中显示解密后的消息内容。

3.点击主页面tab栏的签名,在签名界面点击打开文件,通过文件选择器选择文本文件,选择完毕自动返回签名界面,
其内容显示在文件内容文本框中,
点击选择密钥,选择密钥文件,如果没有密钥文件,可以通过在签名界面点击随机生成RSA密钥,生成并通过文件选择器保存密钥文件,注意RSA密钥生成耗时较长。
选择完文本文件和密钥文件后,点击签名按钮,完成完整性签名,并通过文件选择器保存签名文件。

4.点击主页面tab栏的验签,在验签界面点击打开文件,通过文件选择器选择文本文件,选择完毕自动返回验签界面,
其内容显示在文件内容文本框中,
点击选择密钥,选择和签名一致的密钥文件。点击选择签名文件,通过文件选择器选择签名时保存的签名文件,
选择完文本文件、密钥文件和签名文件后,点击验签按钮,完成验签。

工程目录

entry/src/main/ets/
|---cryptoframework
|   |---CryptoOperation.ts                                    // 封装加解密算法库相关算法能力
|---entryability
|   |---EntryAbility.ts       
|---pages
|   |---Index.ets                                             // 主页界面
|---tab
|   |---Decrypt.ets                                           // 解密tab界面
|   |---Encrpyt.ts                                            // 加密tab界面
|   |---Sign.ts                                               // 签名tab界面
|   |---Verify.ts                                             // 验签tab界面
|---textfilemanager
|   |---TextFileManager.ts                                    // 封装文件读写相关能力
|---util
|   |---Logger.ts                                             // 日志文件

具体实现

进行对文本文件进行加解密、签名验签的功能接口封装在CryptoOperation中,源码参考:CryptoOperation.ts

  • 对文本文件加密:在Encrypt.ets
    文件中依次点击打开文件、选择密钥,通过filePicker选择明文文本文件和密钥文件,点击加密按钮,调用加密函数实现对文本内容进行加密,并将密文文件通过filePicker保存。
    需要生成密钥文本文件时,可以点击随机生成AES密钥,通过调用cryptoFramework.symKeyGenerator
    生成用于加密的AES密钥,并通过filePicker保存密钥文本文件。
    对消息加密的过程中采用cryptoFramework.Cipher
    完成加密操作。
  • 对文本文件解密:在Decrypt.ets
    文件中依次点击打开文件、选择密钥,通过filePicker选择密文文本文件和密钥文件,点击解密按钮,调用解密函数实现对文本内容进行解密,并将明文文件通过filePicker保存。
    对消息解密的过程中采用cryptoFramework.Cipher
    完成解密操作。
  • 对文本文件签名:在Sign.ets
    文件中依次点击打开文件、选择密钥,通过filePicker选择待签名文本文件和密钥文件,点击签名按钮,调用签名函数实现对文本内容进行加密,并将签名文件通过filePicker保存。
    需要生成密钥文本文件时,可以点击随机生成RSA密钥,通过调用cryptoFramework.asyKeyGenerator
    生成用于签名的RSA密钥,并通过filePicker保存密钥文本文件。
    对消息签名的过程中采用cryptoFramework.Sign
    完成加密操作。
  • 对文本文件验签:在Verify.ets
    文件中依次点击打开文件、选择密钥、选择签名文件,通过filePicker选择密文文本文件、密钥文件和签名文件,点击验签按钮,调用验签函数实现对文本内容进行验签,并显示验签结果。
    对消息验签的过程中采用cryptoFramework.Verify
    完成验签操作。

相关权限

不涉及。

依赖

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.12.2,镜像版本号:OpenHarmony 4.0.7.2。

3.本示例需要使用DevEco Studio 3.1 Release (Build Version: 3.1.0.500)及以上版本才可编译运行。

4.本示例所选择文件,用filePicker文件选择器保存的文件,比如新增的密钥,能够实时更新,如直接推送至文件夹,需要重启后刷新显示。

5.本示例所选择文本文件内容当前只支持英文字符,作为演示,能成功使用的文本长度不超过8000字节。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/CryptoFramework/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/Asset/README_zh.md

关键资产存储服务

介绍

本示例使用@kit.AssetStoreKit相关接口实现了对敏感数据的保存、更新、查询、删除操作。

实现场景如下:

1)用户使用本应用保存密码或信用卡号。

2)用户更新本应用管理的密码或信用卡号。

3)用户查询本应用管理的密码或信用卡号。

4)用户删除本应用管理的密码或信用卡号。

效果预览

保存页面删除页面更新列表页面更新编辑页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
查询页面批量查询结果页面单个查询结果页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  • 保存敏感数据:

    • 输入账号、密码、标签,其中标签可以填写多个,但不超过4个
    • 点击“保存”按钮
  • 删除敏感数据,可使用以下任意一种方式删除:

    • 批量删除:不输入任何信息,或输入单个或多个标签),点击“删除”按钮
    • 单个删除:输入账号、标签(可选),点击“删除”按钮
  • 更新敏感数据:

    • 点击标题栏的“更新”,进入更新页面
    • 在显示的账号列表中,点击待更新的账号
    • 输入锁屏密码,进入编辑界面
    • 输入更新后的密码和标签,点击“更新”
  • 查询敏感数据,可使用以下任意一种方式删除:

    • 批量查询:不输入任何信息,或输入单个或多个标签),点击“查询”按钮,显示保存的信息列表,不含“密码/信用卡号”
    • 单个查询:输入账号、标签(可选),点击“查询”按钮,输入锁屏密码,显示该账号详细信息,含“密码/信用卡号”

工程目录

entry/src/main/ets/
|---entryAbility
|   |---EntryAbility.ts
|---model
|   |---AssetModel.ets                     // 关键资产存储模型文件
|---pages
|   |---Index.ets                          // 主页面
|   |---QueryResultPage.ets                // 查询结果界面
|   |---UpdatePage.ets                     // 更新页面

具体实现

本应用分为四个主页面:保存、删除、更新、查询,通过TabBuilder组件实现页面直接的切换。

  • 保存页面:解析用户输入的账号、密码、标签信息,传入@kit.AssetStoreKit提供的add接口,从而实现将短敏感数据存储到关键资产存储服务中。

  • 删除页面:解析用户输入的账号、标签信息,传入@kit.AssetStoreKit提供的remove接口,删除满足条件的短敏感数据。

  • 更新页面

    1)调用@kit.AssetStoreKit提供的query接口,查询关键资产中存储的全量账号。

    2)调用@kit.AssetStoreKit提供的preQuery接口,将返回的challenge传给@kit.UserAuthenticationKit提供的on接口。

    3)待用户输入锁屏密码后,将onResult接口返回的AuthToken传给@kit.AssetStoreKit提供的query接口,用以查询旧的敏感数据明文。

    4)解析用户输入的账号、标签信息,传入@kit.AssetStoreKit提供的update接口,更新关键资产存储服务中存储的敏感数据。

    5)退出更新界面时,调用@kit.AssetStoreKit提供的postQuery接口清理资源

  • 查询页面

    用户未输入账号:

    解析用户输入的标签信息,传入@kit.AssetStoreKit提供的query接口,查询关键资产存储服务中存储的账号、标签。

    用户输入了账号:

    1)调用@kit.AssetStoreKit提供的preQuery接口,将返回的challenge传给@kit.UserAuthenticationKit提供的on接口。

    2)待用户输入锁屏密码后,将onResult接口返回的AuthToken、用户输入的账号、标签信息传给@kit.AssetStoreKit提供的query接口,用以查询敏感数据明文。

    3)调用@kit.AssetStoreKit提供的postQuery接口清理资源。

相关权限

ohos.permission.ACCESS_BIOMETRIC

ohos.permission.STORE_PERSISTENT_DATA

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例支持API11版本SDK,SDK版本号(API Version 11 Release), 镜像版本号(4.1Release)。

3.本示例需要使用DevEco Studio版本号(4.1Release)及以上版本才可编译运行。

4.本示例需要在设备设置锁屏密码后使用。其中,更新、查询结果页面输入锁屏密码方可进入。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/Asset/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/Cipher/README_zh.md

加解密

介绍

本示例使用cipher相关接口实现了字符串加解密算法,包括RSA加密算法与AES加密算法。

RSA加密算法:RSA公开密钥密码体制是一种使用不同的加密密钥与解密密钥,由已知加密密钥推导出解密密钥在计算上是不可行的密码体制。

AES加密算法:AES密码学中的高级加密标准,又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。

效果预览

主页加密页面解密页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.点击主页面的加密按钮,在加密界面中点击Encryption Algorithm下拉选择加密算法,在输入框中输入待加密的内容,点击加密
按钮,下方文本框中显示加密后内容。

2.点击重置按钮,清除文本框中内容。

3.点击主页面的解密按钮,在解密界面中点击Decrypt Algorithm下拉选择解密算法,在输入框中输入待解密的内容,点击解密
按钮,下方文本框中显示解密后内容。

4.点击重置按钮,清除文本框中内容。

工程目录

entry/src/main/ets/
|---common
|   |---Decrypt.ets                       // 解密页面
|   |---Encryption.ets                    // 加密页面
|---entryAbility
|   |---EntryAbility.ts
|---model
|   |---CipherModel.ts                    // 加密与解密方法
|   |---Logger.ts                         // 日志工具
|---pages
|   |---Index.ets                         // 首页
|   |---Second.ets                        // 加密与解密页面

具体实现

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/Cipher/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/PaySecurely/README_zh.md

支付

介绍

本示例主要展示了加解密算法库框架的相关功能,使用@ohos.security.cryptoFramework
接口,利用RSA非对称加密、ECC数字签名模拟选购支付功能;

效果预览

选购首页支付SDK首页密码输入界面支付成功界面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 在选购首页,点击任意商品进入对支付主面;
  2. 在支付主面,点击立即支付按钮,弹出密码输入框;
  3. 输入密码满6位后得到支付结果,支付成功会进入支付成功界面,3s后自动回到选购首页;

工程目录

entry/src/main/ets/
|---entryability
|---pages
|   |---Index.ets                          // 选购首页
cloud/src/main/ets/
|---MerchantServer.ts                      // 商家云模拟
|---PayServer.ts                           // 支付云模拟
paySDK/src/main/ets/
|---component
|   |---payView.ets                        // 密码输入界面
|   |---TitleBar.ets                       // 标题栏
|---paysdkability
|---pages
|   |---Index.ets                          // 支付首页
|---util
|   |---Logger.ets

具体实现

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 选购页面通过商家云获取商品信息,选定商品通过商家云生成订单。
  2. 商家云通过RSA非对称加密,使用支付云公钥,将商品信息传输给支付云SDK。
  3. 支付云通过支付云私钥解密获得消息后生成订单明文orderString返回商家云。
  4. 商家云通过ECC进行数字签名,添加到明文orderString后,形成完整的orderString返回给选购端。
  5. 支付SDK通过RSA非对称加密,使用支付SDK公钥,将支付账号密码信息传输给支付云SDK,并携带完整的orderString。
  6. 支付云通过支付SDK私钥解密账号密码信息,并通过商家云公钥进行验签。
  • 商家云可用接口封装在cloud模块MerchantServer,提供商品获取,生成订单功能,源码参考:MerchantServer.ts
  • 支付云可用接口封装在cloud模块PayServer,提供生成支付订单,支付转账功能,源码参考:PayServer.ts
  • 支付SDK为单独feature,需要支付时拉起此hap,提供输入密码进行支付功能。逻辑位于PaySDK模块index,源码参考:Index.ets

相关权限

不涉及

依赖

不涉及

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568;
  2. 本示例已适配API version 10版本SDK,版本号:4.0.10.11,镜像版本号:OpenHarmony 4.0.10.13;
  3. 本示例需要使用DevEco Studio 4.0 Release (Build Version: 4.0.0.600, built on October 17, 2023)及以上版本才可编译运行;

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/PaySecurely/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/CertManager/README_zh.md

证书管理

介绍

本示例使用了@ohos.security.certManager相关接口实现了对签名数据进行校验的功能。

实现场景如下:

1)使用正确的原始数据和签名数据进行签名校验场景:模拟服务端对签名数据进行校验,验证客户端身份和原始数据完整性。

2)使用错误的原始数据或签名数据进行签名校验场景:模拟攻击者修改原始数据或签名数据,服务端进行签名校验时,攻击者身份不可信或原始数据不完整,验证失败。

效果预览

主页校验通过校验失败
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1、点击安装按钮,页面弹出弹窗,提示安装成功

2、点击数据展示按钮,页面文本框中分别显示正确的证书、原始数据内容。

3、点击签名校验按钮,页面文本框中分别显示签名数据内容。

4、点击修改原始数据按钮,页面显示修改后的原始数据和正确的证书、签名数据;点击校验按钮,页面弹出弹窗,提示校验失败

5、点击修改签名数据按钮,页面显示修改后的签名数据和正确的证书、原始数据;点击校验按钮,页面弹出弹窗,提示校验失败

6、点击校验按钮,页面弹出弹窗,提示校验通过

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ts       
|---model
|   |---Data.ts                                               // 证书数据
|   |---Model.ts                                              // 证书管理文件
|   |---Logger.ts                                             // 日志文件
|---pages
|   |---Index.ets                                             // 主界面

具体实现

相关权限

ohos.permission.ACCESS_CERT_MANAGER

依赖

不涉及。

约束与限制

1、本示例仅支持标准系统上运行。

2、本示例已适配API version 11版本SDK,适用版本号:2023年12月23日及之后的CI每日构建版本(4.1.5.3),或更新的Beta版本、Release版本。

3、本示例需要使用DevEco Studio 4.0 Release(Build Version: 4.0.0.600)及以上版本才可编译运行,由于hvigor的限制,本Sample工程在同步hvigor的方式存在一定的限制,需要通过如下步骤规避:

(1)将build-profile.json5中的compileSdkVersion、compatibleSdkVersion支持的版本从11修改为10,同步hvigor;

(2)成功同步hvigor后,再将build-profile.json5中的compileSdkVersion、compatibleSdkVersion支持的版本从10修改为11,即可执行编译。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/CertManager/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/Huks/README_zh.md

通用密钥库系统

介绍

本示例使用@ohos.security.huks相关接口实现了对任意输入内容进行加密和解密的功能。

实现场景如下:

1)使用新密钥进行消息加解密传输:使用HUKS的生成密钥接口在本地生成一个新密钥,模拟设备对发送的消息进行加密和对接收的消息进行解密场景。

2)使用旧密钥进行消息加解密传输:使用HUKS的导入密钥接口导入一个旧密钥,模拟在旧设备上对发送的消息进行加密,在新设备上对接收的消息进行解密的场景。

3)使用低安访问控制进行密码加解密:使用HUKS的生成密钥接口在本地生成一个新的密钥,模拟设备对密码进行加密和对接收的密码进行解密场景。

效果预览

主页使用新密钥消息加解密页面使用旧密钥消息加解密页面使用低安访问控制保存/读取密码
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.点击主页面的新密钥按钮,在新密钥界面的输入框中输入待发送的消息内容,点击发送消息
按钮,下方文本框中显示加密后的消息内容,然后点击接收消息按钮,下方文本框中显示解密后的消息内容。

2.点击主页面的旧密钥按钮,在旧密钥界面的输入框中输入待发送的消息内容,点击发送消息
按钮,下方文本框中显示加密后的消息内容,首先点击导入密钥按钮,弹窗提示导入密钥成功,然后点击接收消息按钮,下方文本框中显示解密后的消息内容。

3.点击主页面的低安访问控制按钮,在新密钥界面的输入框中输入待保存的密码内容,点击保存密码
按钮,下方文本框中显示加密后的密码内容,录入锁屏密码, 然后点击读取密码按钮,在输入PIN码(锁屏密码,需要预先录入)之后,下方文本框中显示解密后的消息内容。

工程目录

entry/src/main/ets/
|---common
|   |---NewKey.ets                                            // 新密钥组件
|   |---OldKey.ets                                            // 旧密钥组件
|   |---MinAccessControl.ets                                  // 低安访问控制组件
|---entryability
|   |---EntryAbility.ts       
|---model
|   |---HuksModel.ts                                          // 通用密钥库模型文件
|   |---Logger.ts                                             // 日志文件
|---pages
|   |---Index.ets                                             // 主页界面
|   |---SelectPage.ets                                        // 选择跳转界面

具体实现

  • 使用新密钥、旧密钥与低安访问控制进行消息的加密和解密的功能接口封装在HuksModel中,源码参考:HuksModel.ts
    • 使用新密钥加密:在NewKey.ets文件中通过HuksModel.encryptData方式调用加密函数实现对发送的消息内容进行加密,设置好生成密钥和解密密钥的密钥属性信息,加密前会先调用生成密钥接口
      huks.generateKeyItem
      生成用于加密的AES密钥,对消息加密的过程中采用三段式接口huks.initSession,huks.updateSession,huks.finishSession
      完成加密操作。
    • 使用新密钥解密:在NewKey.ets文件中通过HuksModel.decryptData方式调用解密函数实现对发送消息的解密,设置好解密密钥的密钥属性信息,使用加密时的密钥对消息进行解密,仍然是采用三段式接口完成解密操作,解密动作完成后调用删除密钥接口
      huks.deleteKeyItem清除本地保存的密钥。
    • 使用旧密钥加密:在OldKey.ets文件中通过HuksModel.encryptDataUserOldKey方式调用加密函数对发送的消息内容进行加密,设置好加密密钥的密钥属性信息,采用三段式接口使用本地已保存的旧密钥完成加密操作。
    • 使用旧密钥解密:在OldKey.ets文件中通过HuksModel.decryptDataUserOldKey方式调用解密函数对发送的消息内容进行解密,首先模拟在新设备上导入旧设备的加密密钥,同样采用三段式接口完成解密操作,解密完成后删除密钥。
    • 使用低安访问控制管理密码:在MinAccessControl.ets文件中通过 huksModel.encryptDataUseSm2 方式生成SM2密钥并调用加密函数对发送的消息内容进行加密,设置好加密密钥的密钥属性信息,采用两段式接口使用本地已保存的旧密钥完成加密操作。读取密码时(需先设定系统锁屏密码)调用IAM的PIN码(锁屏密码)接口进行验证。

相关权限

ohos.permission.ACCESS_BIOMETRIC

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0Release)。

3.本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。

4.本示例在无设备证书的设备中运行时,需预先在本机命令行中"hdc shell setenforce 0"命令,才可保证示例功能正常执行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/Huks/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/AppAccountManager/README_zh.md

应用帐号管理

介绍

本示例选择应用进行注册/登录,并设置帐号相关信息,简要说明应用帐号管理相关功能。效果图如下:

效果预览

主页注册页面登录页面账户信息页面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.首页面选择想要进入的应用,首次进入该应用需要进行注册,如已注册帐号则直接登录。

2.注册页面可设置帐号名、邮箱、个性签名、密码(带*号为必填信息),注册完成后返回登录页面使用注册的帐号进行登录。

3.登录后进入帐号详情界面,点击修改信息按钮可跳转至帐号信息修改页面重新设置帐号信息。

4.点击切换应用按钮则退出该帐号并返回首页面。重新选择想要进入的应用。

5.点击删除帐号按钮则会删除该帐号所有相关信息。

工程目录

entry/src/main/ets/
|---common
|   |---AccountInfo.ets                    // 切换应用组件
|   |---BundleInfo.ets                     // 首页列表组件
|   |---LoginInfo.ets                      // 登录组件
|   |---ModifyInfo.ets                     // 修改信息组件
|   |---NavigationBar.ets                  // 路由跳转组件
|   |---RegisterInfo.ets                   // 注册组件
|---entryAbility
|   |---EntryAbility.ts             
|---model
|   |---AccountData.ts                     // 数据存储
|   |---AccountModel.ts                    // 数据管理
|   |---Logger.ts                          // 日志工具
|---pages
|   |---Index.ets                          // 首页
|   |---Account.ets                        // 切换应用页面
|   |---Login.ets                          // 登录页面
|   |---Modify.ets                         // 修改信息页面
|   |---Register.ets                       // 注册信息页面

具体实现

相关概念

应用帐号管理:本模块不仅用于对应用帐号的添加、删除、查询、修改和授权,且提供帐号将数据写入磁盘和数据同步的能力。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/AppAccountManager/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Security/DLPManager/README_zh.md

DLPManager

介绍

本示例主要展示了DLP文件管理相关的功能,使用@ohos.dlpPermission@ohos.file.fs@ohos.file.fileAccess@ohos.file.picker@ohos.app.ability.Want等接口,实现了生成和打开DLP文件、查看原始应用沙箱目录的原始文件打开列表、编辑保存文件、拉取文件夹、查看文件权限和监听DLP文件的功能。

效果预览

主页文件内容页

使用说明

1.进入界面,显示原始应用沙箱目录获取原始文件打开列表。

2.点击右上角的图标,可以设置沙箱保留信息。

3.点击右下角的加号图标,可以跳转进入文件夹。

4.点击某个文件,可以显示其文件内容。

5.在文件显示页面,可以点击下面的编辑图标对文件内容进行编辑,编辑后点击保存图标进行保存;点击更多可以文件另存为,查看权限。

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ets               // dlpSample应用的ability
|   |---FuncAbility.ets                // dlp文件显示的ability
|---media
|   |---dlpPage.ets                    // dlp文件内容页
|   |---filePage.ets                   // 原始文件内容页
|   |---MediaFileUri.ts                // 函数方法
|---pages
|   |---Index.ets                      // 首页
|---utils
|   |---Logger.ts                      // 日志工具

具体实现

  • 本实例获取DLP文件和普通文件列表的功能结主要封装在Index,源码参考:Index.ets
    • 获取列表信息:在Index页面中通过onPageShow()调用fs.listFile()、fs.stat()等方法能够应用沙箱路径下的原始文件列表;通过context.startAbility(want)对DLP文件进行生成和打开,通过dlpPermission的接口查看DLP文件的权限。

相关权限

权限名权限说明级别
ohos.permission.MEDIA_LOCATION允许应用访问用户媒体文件中的地理位置信息normal
ohos.permission.READ_MEDIA允许应用读取用户外部存储中的媒体文件信息normal
ohos.permission.WRITE_MEDIA允许应用读写用户外部存储中的媒体文件信息normal
ohos.permission.FILE_ACCESS_MANAGER允许文件管理类应用通过FAF框架访问公共数据文件system_basic
ohos.permission.GET_BUNDLE_INFO_PRIVILEGED允许查询应用的基本信息和敏感信息system_basic
ohos.permission.ACCESS_DLP_FILE允许对DLP文件进行权限配置和管理system_core
ohos.permission.START_INVISIBLE_ABILITY无论Ability是否可见,都允许应用进行调用system_core

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例已适配API version 11版本SDK,版本号:4.1.3.3。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Security/DLPManager > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Notification/CustomNotificationBadge/README_zh.md

自定义通知角标

介绍

本示例主要展示了设定应用的桌面图标角标的功能,使用@ohos.notificationManager
接口,进行桌面角标的设置,通知的发送,获取等。

效果预览

主页通知发送界面通知列表
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 在使用本应用时,需安装并启动仿桌面应用
  2. 在主界面,可以看到当前应用的所有消息通知;
  3. 点击右下角Tab页签进入通知发送页面,点击对应的通知即可发送相应类型的通知,点击几次发送几条;
  4. 点击左下角Tab页签进入消息列表,可以查看刚才发送的消息,消息右边会显示消息数量,点击相应的消息可进行消息读取,取消相应通知;
  5. 回到仿桌面,可以看到角标数量,对应消息数量。

工程目录

entry/src/main/ets/
|---components
|   |---NotificationList.ets                 //通知列表控件
|   |---NotificationPublish.ets              //通知发送控件
|   |---NotificationList.ets                 //通知列表控件
|---feature
|   |---NotificationOperations.ets           // 对外提供发布通知的接口
|---entryability
|---pages
|   |---Index.ets                            // 首页
entry/src/ohosTest/ets/
|---test
|   |---Index.test.ets                       // 首页的自动化测试    
notification/src/main/ets/
|---notification
|   |---NotificationContentUtil.ets          // 封装各种通知的主体内容
|   |---NotificationManagementUtil.ets       // 封装消息列表,角标设置的接口
|   |---NotificationRequestUtil.ets          // 接收通知的主体内容,返回完整的通知
|   |---NotificationUtil.ets                 // 封装允许发布通知、发布通知、关闭通知的接口
|---util                                     // 日志文件

具体实现

  • 允许发送通知,发送通知的功能接口封装在NotificationUtil,源码参考:NotificationUtil.ets

    • 允许发送通知:在进入Index.ets
      前通过notificationUtil.enableNotification()调用notification.requestEnableNotification()接口向用户请求发送通知;
    • 发送通知:通过publishNotification()封装发布通知的接口;
  • 获取应用所有消息通知、取消相关类型通知,角标管理接口封装在NotificationManagementUtil,源码参考:NotificationManagementUtil.ets

    • 获取应用所有消息通知:在constructor()构造函数中调用@ohos.notificationManager中的getActiveNotifications接口获取所有通知及相应类型通知数量,通过封装getAllNotifications()对外提供接口获取当前消息及消息数量。
    • 取消相关类型通知:通过cancelNotificationType()封装取消相关通知类型的接口;
    • 角标管理接口:通过setBadgeNumber()封装设置应用角标数量的接口,通过getBadgeNumber()封装获取当前应用角标数量的接口。
    • 添加一条通知:通过addNotification()封装接口添加一条通知到消息管理器,当发送通知的时候进行调用。
  • NotificationOperations向外提供接口,在页面中调用它们来实现功能,源码参考:NotificationOperations.ets

    • 发布通知:在Index.ets
      页面中进入发送通知Tab页签,通过点击事件调用NotificationOperations中封装的对应的方法,然后从NotificationContentUtil中获取对应的主体内容content,将
      content传递给NotificationRequestUtil得到完整的发布信息,最后调用NotificationUtil.publishNotification()发布内容,并调用NotificationManagementUtil的addNotification()添加一条消息;

相关权限

依赖

应用的角标依赖于仿桌面应用进行显示:
仿桌面应用

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568;
  2. 本示例仅支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0Release);
  3. 本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomNotificationBadge/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Notification/CustomEmitter/README_zh.md

自定义Emitter

介绍

本示例使用Emitter实现事件的订阅和发布,使用自定义弹窗设置广告信息。

效果预览

首页列表页详情内购买页面购物车
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传shopping_cart

使用说明

  1. 进入首页后弹出广告弹窗,点击即可关闭。
  2. 点击商品列表中的一个商品可以跳转到商品详情页。
  3. 在商品详情页点击首页可以返回到商品列表页,点击购物车可以跳转到购物车页面,点击加入购物车可以在购物车页面添加一条商品信息,点击立即购买可以增加一次已购物数量显示在购物车页面。
  4. 在购物车页面点击购物车列表内商品的减号图标,可以将此商品信息从购物车列表内删除,点击清空购买数量可以将已购物数量清空、显示为0。

工程目录

entry/src/main/ets/
|---components
|   |---BottomNavigation.ets                    // 底部按钮导航栏
|   |---Choice.ets                              // 商品规格选择
|   |---EventsDialog.ets                        // 广告弹窗
|   |---Information.ets                         // 详细信息页面
|   |---Valueation.ets                          // 价格页面
|---mock
|   |---DetailData.ets                          // 商品详情数据
|   |---ProductsData.ets                        // 产品列表数据
|---model
|   |---DetailMode.ets                          // 商品详情数据结构
|   |---GoodsModel.ets                          // 商品数据结构
|---pages
|   |---Detail.ets                              // 商品详情
|   |---Index.ets                               // 首页
|   |---ShopCart.ets                            // 购物车
|---shoppingCart
|   |---Cart.ets                                // 购物车
|   |---FavorGoodlist.ets                       // 推荐列表
|---util
|   |---Logger.ets                              // 日志工具
feature/emitter/src/main/ets/
|---common
|   |---EmitterConst.ts                         // 事件通知常量
|---components
|   |---feature
|   |   |---CustomEmitter.ets                   // 封装事件通知类

具体实现

  • 订阅事件通知在CustomEmitter中实现,源码参考CustomEmitter.ets
    • 广告弹窗:使用Emitter的事件单次订阅emitter.once(eventId,call),eventId为number类型,单次订阅CustomDialogController弹窗事件,弹窗触发后自动取消订阅。
    • 关闭广告弹窗:使用Emitter的事件单次订阅emitter.once(eventId,call),eventId为string类型,单次订阅CustomDialogController弹窗事件,弹窗关闭后自动取消订阅。
    • 购物车添加商品:使用Emitter.on持续订阅商品添加事件,eventId为number类型,添加商品时更新购物车商品列表。
    • 购物车删除商品:使用Emitter.on持续订阅商品删除事件,eventId为string类型,删除商品时更新购物车商品列表。
    • 购物数量:使用Emitter.getListenerCount获取购买事件订阅者数量,进入购物车页面显示数量结果,清空时取消订阅,结果为0。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568;

2.本示例为Stage模型,支持API11版本SDK,版本号:4.1.3.5;

3.本示例需要使用DevEco Studio 3.1.1 Release (Build Version: 3.1.0.501, built on June 20, 2023)才可编译运行;

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomEmitter/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Notification/CustomNotificationPush/README_zh.md

自定义通知推送

介绍

本示例主要展示了通知过滤回调管理的功能,使用@ohos.notificationManager
接口,进行通知监听回调,决定应用通知是否发送。

效果预览

通知过滤关闭通知过滤开启
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 在使用本应用时,需安装自定义通知角标应用
  2. 在主界面,进行通知过滤的开启及关闭;
  3. 开启通知过滤后,可以选择允许通知的类型,去勾选后,相应类型的通知将不会发送出现通知栏;
  4. 打开自定义通知角标应用应用,进行通知的发送,查看是否发送成功;
  5. 发送通知的应用必须为普通应用才能进行通知过滤,系统应用默认所有通知都能发送。

工程目录

entry/src/main/ets/
|---feature
|   |---NotificationFilterUtil.ets           // 对外提供通知过滤的接口
|---entryability
|---pages
|   |---Index.ets                            // 首页
|---util
|   |---Logger.ets                           // 日志工具

具体实现

  • 允许通知过滤、指定通知类型过滤的功能接口封装在NotificationFilterUtil,源码参考:NotificationFilterUtil.ets
    • 允许通知过滤:在Index.ets
      页面中通过Toggle状态改变事件调用setNotificationEnableFilter()接口开启通知监听并设置通知过滤回调管理;
    • 指定类型通知过滤:在Index.ets
      页面中,开启通知过滤后,勾选或取消勾选指定通知类型调用接口setContentTypeEnable()接口设置通知类型是否允许发送;

相关权限

ohos.permission.NOTIFICATION_CONTROLLER

ohos.permission.NOTIFICATION_AGENT_CONTROLLER

依赖

通知发送依赖于自定义通知角标应用
进行不同类型通知的发送测试。

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568;
  2. 本示例仅支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0Release)。
  3. 本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。
  4. 本示例涉及系统接口,需要配置系统应用签名,可以参考特殊权限配置方法 ,把配置文件中的“app-feature”字段信息改为“hos_system_app”,"apl"字段修改为“system_core”。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomNotificationPush/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Notification/CustomCommonEvent/README_zh.md

事件的订阅和发布

介绍

本示例主要展示了公共事件相关的功能,实现了一个检测用户部分行为的应用。具体而言实现了如下几点功能:

1.通过订阅系统公共事件,实现对用户操作行为(亮灭屏、锁屏和解锁屏幕、断联网)的监测;

2.通过在用户主动停止监测行为时发布自定义有序公共事件,实现对用户主动触发监听行为的持久化记录;

3.通过在用户设置对某一事件的监听状态时发布粘性事件,记录下本次应用运行期间允许监听的事件列表,同时在应用退出时将临时允许的修改为不允许;

4.打开自定义订阅事件页面需先安装CardEvent应用,通过订阅指定应用事件,实现用户对指定卡片发送事件的监听。

效果预览

订阅系统公共事件,主动停止监听行为及对某一事件的监听状态时发布粘性事件
主页监控页面设置页面自定义订阅事件页面

使用说明:

1.安装编译生成的hap包,依赖包hap,桌面上显示应用图标如下,点击图标即可进入应用。

2.进入应用显示菜单页,可选择“进入”,“历史”,“设置”及“关于”几个选项。

3.点击“进入”后跳转至主页面,点击主页面“开始监控”按钮,将开始监听系统公共事件,并进行计时,此时按钮内容变更为“停止监听”;点击停止监听按钮,页面上将显示本次监听时长及监听期间收到的干扰信息汇总,并在页面右下角显示“查看详情”按钮,点击按钮将跳转至详情页,显示监听期间收到的干扰信息,应用当前仅监听了亮灭屏、锁屏和解锁屏幕、断联网等用户可操作的系统公共事件,后续可根据需求快速扩展。

4.返回至应用菜单页面,点击“历史”可查看用户操作监听的历史记录,当前支持每次运行期间最多存储10条历史记录,超过10条后将删除历史数据。

5.返回至应用菜单页面,点击“设置”可进行具体系统事件的监听配置,应用提供了“一直”、“仅本次”及“从不”三个选项,其中“仅本次”选项是指本次应用运行期间将监听特定系统公共事件,应用退出后该选项将自动调整为“从不”。

6.在设置页面,点击“自定义事件定向订阅”进入订阅页面,

  • 点击”订阅“按钮进行订阅事件,同时订阅指定本应用事件和订阅非指定应用事件。

  • 点击应用内卡片发送事件或点击应用外卡片发送事件。

  • 点击应用内卡片发送事件后,指定应用事件和非指定应用事件均会接收到卡片所发送的事件 ;点击应用外卡片发送事件后,非指定应用事件会被接收,指定应用事件不会被接收。

  • 点击”取消订阅“ 页面中会提示当前事件取消订阅。

7.返回至应用菜单页面,点击“关于”可查看应用版本信息及本示例的说明。

工程目录

CustomCommonEvent

entry/src/main/ets/
|---Application
|   |---MyAbilityStage.ts                    
|---component
|   |---Header.ets                           // 头部组件
|---entryformability
|   |---EntryFormAbility.ts                  // 卡片提供方  
|---feature
|   |---HistoryFeature.ts                    
|   |---LaunchFeature.ts                    
|   |---MainFeature.ts                    
|   |---SettingFeature.ts                    
|---LauncherAbility 
|   |---LauncherAbility.ts
|---MainAbility
|   |---MainAbility.ts
|---model
|   |---Consts.ts                            // 数据定义
|   |---Logger.ts                            // 日志打印  
|   |---SurveillanceEventsManager.ts         // 公共事件模块
|   |---Utils.ts                        
|---pages
|   |---About.ets                            // 关于页面
|   |---Detail.ets                           // 详情页面
|   |---History.ets                          // 历史页面
|   |---jumpToCommonEvent.ets                // 自定义订阅事件页面
|   |---Launch.ets                           // 发起页面
|   |---Main.ets                             // 进入页面
|   |---Setting.ets                          // 设置页面
|---publishcard
|   |---pages
|   |	|---PublishCard.ets              	 // 卡片页面

CustomCommonEventRely

entry/src/main/ets/
|---entryformability
|   |---EntryFormAbility.ts					// 发布事件
|---pages
|   |---Index.ets
|---widget
|   |---pages
|   |	|---PublishCard.ets 				// 发布事件的卡片

具体实现

相关权限

ohos.permission.COMMONEVENT_STICKY

ohos.permission.REQUIRE_FORM

ohos.permission.GET_BUNDLE_INFO_PRIVILEGED

依赖

本应用依赖CustomCommonEventRely应用进行运行。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API11版本SDK,版本号:4.1.3.1;

3.本示例需要使用DevEco Studio 3.1.1 Release (Build Version: 3.1.0.501, built on June 20, 2023)才可编译运行;

4.本示例涉及ohos.permission.REQUIRE_FORMohos.permission.GET_BUNDLE_INFO_PRIVILEGED权限为system_basic级别,需要配置高权限签名;

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomCommonEvent/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Notification/CustomNotification/README_zh.md

自定义通知

介绍

本示例使用@ohos.notificationManager
等接口,展示了如何初始化不同类型通知的通知内容以及通知的发布、取消及桌面角标的设置,通知类型包括基本类型、长文本类型、多行文本类型、图片类型、带按钮的通知、点击可跳转到应用的通知。

效果预览:

主页通知发送页面通知列表
homenotificationsnotifications_expanded

使用说明

1.启动应用后,弹出是否允许发送通知的弹窗,点击允许后开始操作;

2.点击界面中对应的按钮发布不同类型的通知,下拉状态栏,在通知栏可以看到发布的通知;

3.打开提示音和震动效果开关后,再点击对应按钮发布不同类型的通知,在通知的同时会伴有提示音或震动效果;

4.点击消息列表Tab页,可以查看到刚才发送的消息,消息右边会显示数量,点击相应的消息可进行消息读取,取消相应通知;

5.回到仿桌面,可以看到角标数量,对应消息数量(使用前需安装并启动仿桌面应用);

6.点击取消所有通知,可以取消本应用发布的所有通知;

工程目录

entry/src/main/ets/
|---Application
|---components
|   |---NotificationList.ets                 //通知列表控件
|   |---NotificationPublish.ets              //通知发送控件
|   |---TitleBar.ets                         //标题控件
|---feature
|   |---NotificationOperations.ets           // 对外提供发布通知的接口
|---MainAbility
|---pages
|   |---Index.ets                            // 首页
entry/src/ohosTest/ets/
|---test
|   |---Index.test.ets                       // 首页的自动化测试    
notification/src/main/ets/
|---notification
|   |---NotificationContentUtil.ets          // 封装各种通知的主体内容
|   |---NotificationManagementUtil.ets       // 封装消息列表,角标设置的接口
|   |---NotificationRequestUtil.ets          // 接收通知的主体内容,返回完整的通知
|   |---NotificationUtil.ets                 // 封装允许发布通知、发布通知、关闭通知的接口
|   |---WantAgentUtil.ets                    // 封装wantAgent
|---util                                     // 日志文件

具体实现

  • 允许发送通知、发送通知、取消通知的功能接口封装在NotificationUtil,源码参考:NotificationUtil.ets

    • 允许发送通知:在进入Index.ets
      通过notificationUtil.enableNotification()调用notification.requestEnableNotification()接口向用户请求发送通知;
    • 发送通知:通过publishNotification()封装发布通知的接口;
    • 取消通知:在Index.ets
      页面中通过点击事件调用cancelAllNotifications()取消所有的通知或者通过cancelNotificationById()取消指定id的通知;
  • 获取应用所有消息通知、取消相关类型通知,角标管理接口封装在NotificationManagementUtil,源码参考:NotificationManagementUtil.ets

    • 获取应用所有消息通知:在constructor()
      构造函数中调用@ohos.notificationManager中的getActiveNotifications接口获取所有通知及相应类型通知数量,通过封装getAllNotifications()
      对外提供接口获取当前消息及消息数量。
    • 取消相关类型通知:通过cancelNotificationType()封装取消相关通知类型的接口;
    • 角标管理接口:通过setBadgeNumber()封装设置应用角标数量的接口,通过getBadgeNumber()封装获取当前应用角标数量的接口。
    • 添加一条通知:通过addNotification()封装接口添加一条通知到消息管理器,当发送通知的时候进行调用。
  • NotificationOperations向外提供接口,在页面中调用它们来实现功能,源码参考:NotificationOperations.ets

    • 发布通知:在Index.ets
      页面中通过点击事件调用NotificationOperations中封装的对应的方法,然后从NotificationContentUtil中获取对应的主体内容content,
      将content传递给NotificationRequestUtil得到完整的发布信息,最后调用NotificationUtil.publishNotification()发布内容;
  • 播放提示音、马达震动的功能在NotificationUtil调用发布通知的接口处进行判断是否开启,源码参考:NotificationOperations.ets

    • 发布通知:在Index.ets
      通过publishNotification()封装发布通知的接口的同时,根据NotificationUtil类中对应变量的值判断是否开启了提示音或马达,若已开启,则执行对应代码段;
    • 控制提示音或马达的开关:在Index.ets
      通过调用NotificationUtil类两个方法对NotificationUtil类中对应变量进行更改,开启为true,关闭为false;
  • 自动化测试,对应用接口或系统接口进行单元测试,并且对基于UI操作进行UI自动化测试

    • 模拟点击:在Index.test.ets的beforeAll中调用startAbility()拉起应用并进入首页,
      然后通过Driver的assertComponentExist、findComponent和findWindow等获取到对应组件的位置,
      最后通过click()模拟出人工点击对应组件的效果;
    • 模拟各种操作流程:在Index.test.ets
      的每个it里面,按一定逻辑顺序排好点击组件的顺序,从而模拟出人为操作的过程,最终,所有的it组成了整一个应用的自动化测试。

相关权限

1.调用马达需要应用权限,ohos.permission.VIBRATE:允许应用控制马达振动,权限级别为normal,授权方式为system_grant,ACL使能为TRUE

依赖

1.大禹200的板子上没有马达,需要手动自己安装一个,购买链接:https://item.szlcsc.com/2787125.html

2.应用的角标依赖于仿桌面应用进行显示:仿桌面应用

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例需自行使用工具签名。

3.本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

4.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomNotification/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Web/Browser/README_zh.md

浏览器

介绍

本示例使用@ohos.systemparameter接口和Web组件展示了一个浏览器的基本功能,展示网页,根据页面历史栈前进回退等。

效果预览

首页打开网址
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  1. 连接Wifi,启动应用,展示默认页面内容;
  2. 点击默认页面的图标跳转到对应网页,或者在输入框输入网址,点击右侧跳转按钮跳转到对应网页;
  3. 点击输入框左侧向右向左按钮进行页面的前进后退;
  4. 点击主页图标回到主页,点击加号按钮新建一个页面。

工程目录

entry/src/main/ets/
|---Application
|   |---AbilityStage.ets                        // 入口
|---pages
|   |---Index.ets                               // 首页
|---common
|   |---PhoneLayout.ets                         // 窗口管理工具
|   |---TitleBar.ets                            // 导航栏
|---model
|   |---Logger.ts                               // 日志工具
|   |---Browser.ets                             // 浏览器实例

具体实现

  • Web展示与历史栈操作功能在Browser中,源码参考Browser.ets
    • 加载网页及刷新:使用WebController提供的loadUrl可以加载目标网址内容,使用refresh方法刷新页面;
    • 页面前进后退功能:页面在前进或者后退前使用accessForward/accessBackward查询是否有历史记录,然后调用forward/backward进行前进/后退操作。

相关权限

ohos.permission.INTERNET

ohos.permission.GET_WIFI_INFO

依赖

不涉及。

约束与限制

  1. 本示例仅支持标准系统上运行;
  2. 本示例需外接鼠标进行验证;
  3. 本示例已适配API version 9版本SDK,版本号:3.2.11.9。
  4. 本示例不支持点击tab页签,切换网页并刷新页面;
  5. 本示例涉及使用系统接口:@ohos.systemparameter,需要手动替换Full SDK才能编译通过,具体操作可参考替换指南;
  6. 本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Web/Browser/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/Web/RunJsInWeb/README_zh.md

JS注入与执行

介绍

本示例基于H5游戏,通过arkui的button实现对游戏实现基本控制,展示webview的JS注入与执行能力,及native应用与H5的通信能力。

本例的H5游戏页面,由https://yangyunhe369.github.io/h5-game-blockBreaker/ 提供

效果预览

主页
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

1.设备连接热点,可访问互联网。

2.打开应用,通过界面中按钮进行游戏控制。

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ts                // 弹窗组件
|---model
|   |---Logger.ts                      // 日志工具
|---pages
|   |---Index.ets                      // 首页

具体实现

相关权限

网络访问权限: ohos.permission.INTERNET

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行。

2.本示例已适配API version 9版本SDK,版本号:3.2.11.9。

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Telephony/RunJsInWeb/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/MediaCollections/README_zh.md

媒体管理合集

介绍

具体功能
  1. 网络流播放能力
  2. 音视频播控能力
  3. 音量调节能力

效果预览

主页音频视频重命名
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 启动应用,点击音频或视频可以查看本地音视频资源。若本地没有音视频资源,可以push视频到本地媒体库路径,视频路径(storage/media/100/local/files/Videos) 音频路径(storage/media/100/local/files/Audios),需要先hdc进入storage/media/100/local/files路径下查看是否有Videos/Audios文件夹,没有则需要mkdir Videos/Audios创建文件夹后push音视频资源。
  2. 进入首页,可以通过输入网络地址或点击音频,视频进行播放音视频。
  3. 音视频播放后,对于播控按键显示,点击播放、暂停可以播放、暂停音视频,点击循环图标可以在单曲循环和列表循环进行切换。
  4. 点击下一曲、上一曲可以切换音视频,拖动seek可以跳到指定位置播放,点击详细信息可以查看当前音视频信息,视频点击倍速可以开启倍速播放。
  5. 音视频列表左滑可以开启重命名、删除图标,点击对应图标可以进行音视频的重命名和删除。

工程目录

entry/src/main/ets/
|---Application
|   |---MyAbilityStage.ts
|---common
|   |---constants
|   |   |---AVplayerConstants.ets               // AVplayer常量
|   |   |---DrmConstants.ets                    // Drm常量
|   |---BroadcastControl.ets                    // 窗口
|   |---DeleteDialog.ets                        // 删除弹窗
|   |---IsInformationDialog.ets                 // 信息弹窗
|   |---mainDialog.ets                          // 弹窗组件
|   |---MediaItem.ets                           // 音频每一项
|   |---RenameDialog.ets                        // 重命名
|   |---StreamingMedia.ets                      // 视频播放
|   |---TitleBar.ets                            // 首页标题组件
|   |---Toolkit.ets                             // 工具栏
|   |---ToolkitItem.ets                         // 工具栏每一项
|---MainAbility
|   |---MainAbility.ts
|---model
|   |---AVPleyer.ets                            // AVPlayer控制器
|   |---DrmController.ets                       // Drm控制器
|   |---GridData.ts                             // 数据
|   |---HttpUtil.ets                            // 网络请求方法
|   |---JsonListData.ets                        // 播放列表JSON类型
|   |---KVManagerUtil.ets                       // 持久化工具
|   |---Logger.ts                               // 日志工具
|   |---MediaUtils.ts                           // 音频方法
|   |---myMedia.ts                              // 我的
|   |---Prompt.ts                               // 弹窗
|   |---TimeTools.ts                            // 时间工具
|   |---TypeConversion.ets                      // 类型转换工具
|---pages
|   |---online
|   |   |---OnlineList.ets                      // Drm播放列表页
|   |   |---OnlinePlayer.ets                    // Drm播放页
|   |---HomePage.ets                            // 切换页
|   |---index.ets                               // 首页
|   |---phoneMain.ets                           // 主页面
|---phoneView
|   |---online
|   |   |---OnlineListItemView.ets              // Drm播放列表项
|   |   |---OnlineListView.ets                  // Drm播放列表
|   |   |---OnlinePlayerView.ets                // Drm播放窗口
|   |---BroadcastControl.ets                    // 窗口
|   |---GridDataItem.ets                        // 每项数据
|   |---LoadingDialog.ets                       // 加载
|   |---TitleBar.ets                            // 标题
|   |---Toolkit.ets                             // 工具

具体实现

相关权限

1.读取公共媒体文件权限:ohos.permission.READ_MEDIA

2.读写公共媒体文件权限:ohos.permission.WEITE_MEDIA

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例已适配API version 10版本SDK,本示例涉及使用系统接口:getXComponentSurfaceId(),需要手动替换Full SDK才能编译通过,具体操作可参考替换指南

3.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400 构建 2023年4月7日)及以上版本才可编译运行。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/FileManagement/MediaCollections/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/FileShare/Picker/README_zh.md

选择并查看文档与媒体文件

介绍

应用使用@ohos.file.picker@ohos.multimedia.mediaLibrary@ohos.file.fs 等接口,实现了picker拉起文档编辑保存、拉起系统相册图片查看、拉起视频并播放的功能。

效果预览

首页查看并编辑文档界面查看图片界面查看视频界面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  1. 在首页,应用展示出最近打开过的文档信息,点击信息可以进入对应文档的查看界面。通过点击右上方的三个按钮,可以分别实现新建文档、选择图片或视频并打开预览、选择文档并打开的功能。
  2. 在查看文档界面,点击右上方左一按钮,可以实现当前文档另存为的功能;点击右上方中间的按钮,开启文档的编辑功能,textArea变成可编辑状态,用户输入数据后点击右上方第三个按钮,可以将当前文档内容进行保存操作。
  3. 在查看图片界面,picker拉起系统相册的图片,用户至多可选择三张图片查看,点击图片可以切换所显示的图片名及大小信息。
  4. 在查看视频界面,picker拉起系统相册的视频,用户至多可选择三个视频查看,点击视频播放并且可以显示的视频名及大小信息。

工程目录

entry/src/main/ets/
|---common
|	|---Common.ts
|	|---Utils.ts						
|	|---Logger.ts						//日志工具
|---entryability
|	|---EntryAbility.ts					//ability类
|---media
|	|---MediaFileUri.ts					//媒体文件相关函数
|---pages
|	|---EditFile.ets					//查看并编辑文档界面
|	|---Index.ets						//首页
|	|---ViewMedia.ets					//查看图片和视频界面

具体实现

  • 拉起picker选择文件、拉起picker保存文件、拉起picker选择图片或视频的功能封装在Index.ets,源码参考:Index.ets

    • 使用mediaLiabrary.getMediaLibrary来获取媒体库的实例,用于访问和修改用户等个人媒体数据信息(如视频、图片、文档等);使用media.getFileAssets来获取文件资源;使用来fetchFileResult.getFirstObject获取文件检索结果中的头一个文件资产,接口参考:@ohos.multimedia.mediaLibrary
    • 使用new picker.DocumentViewPicker来创建文件picker实例,使用documentPicker.select来拉起picker选择文件,使用documentPicker.save来拉起picker保存文件,接口参考:@ohos.file.picker
    • 使用new picker.PhotoViewPicker来创建图库picker实例,使用photoPicker.select来拉起picker选择图片或视频,接口参考:@ohos.file.picker
  • 编辑文件并保存的功能封装在EditFile.ets,源码参考:EditFile.ets

    • 使用fs.mkdirSync、fs.openSync、fs.writeSync、fs.readSync、fs.closeSync分别用来来创建文件夹、打开文件、写文件、读文件、关闭文件,接口参考:@ohos.file.fs
  • 拉起图片或视频并查看的功能封装在ViewMedia.ets,源码参考:ViewMedia.ets

    • 使用new picker.PhotoViewPicker来创建图库picker实例,使用photoPicker.save来拉起picker保存图片或视频,接口参考:@ohos.file.picker
    • 使用mediaLiabrary.getMediaLibrary来获取媒体库的实例,用于访问和修改用户等个人媒体数据信息(如视频、图片、文档等),然后使用media.getFileAssets来获取文件资源再使用fileAsset.displayName来获取图片或视频的名称,接口参考:@ohos.multimedia.mediaLibrary

相关权限

权限名权限说明级别
ohos.permission.MEDIA_LOCATION允许应用访问用户媒体文件中的地理位置信息normal
ohos.permission.READ_MEDIA允许应用读取用户外部存储中的媒体文件信息normal
ohos.permission.WRITE_MEDIA允许应用读写用户外部存储中的媒体文件信息normal
ohos.permission.WRITE_IMAGEVIDEO允许修改用户公共目录的图片或视频文件system_basic
ohos.permission.READ_IMAGEVIDEO允许读取用户公共目录的图片或视频文件system_basic

依赖

不涉及

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.本示例涉及部分接口需要配置系统应用签名,可以参考特殊权限配置方法 ,把配置文件中的“apl”字段信息改为“system_basic”。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/FileManagement/FileShare/Picker > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/FileShare/SandboxShare/README_zh.md

为应用之间分享和文件访问提供统一的入口能力

介绍

本示例主要展示了沙箱文件分享相关的功能,使用 @ohos.file.fileuri@ohos.file.fs@ohos.ability.wantConstant@ohos.application.Want 等接口,实现了获取文件uri、创建沙箱文件、提供want中操作want常数和解释Flags说、应用组件间的信息传递的功能。

效果预览

首页分享界面分享至picker后的编辑界面
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  1. 因本应用的功能依赖Picker应用,在使用本应用之前首先应安装Picker应用;
  2. 在主界面,可以点击沙箱文件夹列出文件夹中的文件,同时也可以直接点击沙箱目录下的文件进入文件分享界面;
  3. 点击沙箱文件,进入文件分享界面,点击分享图标,文件将以picker方式打开文件,点击编辑图标,文件进入可编辑模式,在textArea中输入内容,然后点击保存,文件内容更新,返回沙箱应用首页,文件修改成功。

工程目录

entry/src/main/ets/
|---Application
|---Common
|   |---Common.ts                      // 公共方法
|	|---Utils.ts	
|   |---Logger.ts                      // 日志工具
|---MainAbility
|   |---EntryAbility.ts                // Ability类
|---fileFs
|   |---fileFs.ts                      // 创建沙箱文件
|---pages
|   |---Index.ets                      // 首页
|   |---Show.ets                       // 文件分享页面

具体实现

  • 增添文件、查找指定类型文件、获取文件uri、传递want信息启动ability的功能接口封装在fileFs.ts,源码参考:fileFs.ts

    • 使用fs.mkdirSync、fs.openSync、fs.writeSync、fs.readSync、fs.closeSync分别用来来创建文件夹、打开文件、写文件、读文件、关闭文件,接口参考:@ohos.file.fs

    • 使用fileUri.getUriFromPath来获取文件uri,接口参考:@ohos.file.fileuri

    • 分享文件至picker应用打开并编辑:在分享页面show.ets

      调用 implicitStartAbility 方法传递want参数启动新的ability,接口参考:@ohos.ability.wantConstant@ohos.application.Want

相关权限

权限名权限说明级别
ohos.permission.GET_BUNDLE_INFO_PRIVILEGED允许查询应用的基本信息和其他敏感信息。system_basic
ohos.permission.MEDIA_LOCATION允许应用访问用户媒体文件中的地理位置信息normal
ohos.permission.READ_MEDIA允许应用读取用户外部存储中的媒体文件信息normal
ohos.permission.WRITE_MEDIA允许应用读写用户外部存储中的媒体文件信息normal

依赖

本应用需要依赖Picker应用,沙箱文件需分享至Picker应用打开并编辑保存

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568;

2.本示例为Stage模型,仅支持API9版本SDK,版本号:3.2.12.2,镜像版本号:OpenHarmony 4.0.9.1。

3.本示例需要使用DevEco Studio 3.1 Release (Build Version: 3.1.0.500, built on April 28, 2023)及以上版本才可编译运行。

4.本示例涉及部分接口需要配置系统应用签名,可以参考特殊权限配置方法 ,把配置文件中的“apl”字段信息改为“system_basic”。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/FileManagement/FileShare/SandboxShare > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/FileManager/README_zh.md

文件管理

介绍

本示例主要展示了文件管理相关的功能,使用@ohos.multimedia.medialibrary@ohos.filemanagement.userFileManager@ohos.fileio@ohos.file.fs@ohos.app.ability.contextConstant

等接口,实现了增添文件、删除文件、查找指定类型文件文件、复制并移动文件、切换加密分区和预览图片、监听文件的功能;

效果预览

首页图片列表图片预览文档删除加密分区
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 在主界面,可以点击图片、视频、文档、音频等按钮进入对应目录的文件列表浏览界面;
  2. 在文档列表浏览界面,点击“+”按钮,可以添加文件;
  3. 在文档列表浏览界面,长按列表项会出现删除图片,点击删除图标可以删除文件;
  4. 在图片文件列表界面,点击图片可以进入图片预览界面。
  5. 进入“我的手机”页面前应先安装MyPhoneFilePage,在主页点击“我的手机”,进入应用沙箱目录下。
    1. 列表的上方是默认的EL2加密分区的应用根目录下文件列表,点击下方两个按钮“data/app/el3”和“data/app/el4”分别进入EL3和EL4加密分区应用根目录,进入后对文件或文件夹操作与EL2加密分区相同。

    2. 点击左下角“新建文件夹”按钮,在弹窗中输入文件夹名称,点击弹窗中的“确定”按钮,完成创建。

    3. 点击新建的文件夹,进入目录,在新目录中点击左下角的“新建文件”,在弹窗的窗口中填写文件名称,然后点击确定,完成创建。

    4. 点击右上角多选按钮,选择需要重命名的文件(仅选中一个文件时可用),点击重命名,在弹窗中修改文件名称,点击“确定”,完成修改。

    5. 点击右上角多选按钮,选择需要复制和移动的文件(可多选,并且不可移动到本身的子目录下),选中后点击左下角“复制和移动”按钮,在页面中点击目标目录会进入该目录,在目标目录下点击“移动到这”按钮,完成文件复制和移动。

    6. 点击右上角多选按钮,选择需要删除的文件,选中后点击右下角“更多”按钮,弹出的菜单中选择“删除”,在弹窗中点击“删除”,即可删除文件。

    7. 点击右上角多选按钮,选择一项需要修改时间的文件,选中后点击右下角“更多”按钮,弹出的菜单中选择“修改文件(夹)时间”,在弹窗的文本框中输入要修改的时间,点击“确定”,即可修改文件(夹)时间。

    8. 点击单个文件,可进入文件内容页面,点击右上角编辑按钮,进入编辑模式编辑、修改文件内容,然后点击右上角的保存按钮保存对文件的修改,点击左上角"X"按钮退出编辑模式,点击返回按钮返回上一页。

  6. 在主页点击“监听文件”,进入文件监听页面。
    1. 点击添加监听按钮,选择IN_CREATE监听,然后点击确定按钮,成功添加IN_CREATE监听。
    2. 点击添加按钮,成功添加一个文件,触发事件后日志显示为相应日志:event:256,fileName为新增文件的路径。
    3. 点击停止监听按钮,选择IN_CREATE监听,然后点击确定按钮,成功停止IN_CREATE监听。
    4. 点击添加按钮,成功添加一个文件,触发事件后日志无变化。
    5. 点击添加监听按钮,选择IN_DELETE监听,然后点击确定按钮,成功添加IN_DELETE监听。
    6. 选择要删除的文件item,左滑后点击删除图标,成功删除一个文件,触发事件后日志显示为相应日志:event:512,fileName为删除文件的路径。
    7. 点击停止监听按钮,选择IN_DELETE监听,然后点击确定按钮,成功停止IN_CREATE监听。
    8. 选择要删除的文件item,左滑后点击删除图标,成功删除一个文件,触发事件后日志无变化。
    9. 点击添加监听按钮,选择IN_MODIFY监听,然后点击确定按钮,成功添加IN_MODIFY监听。
    10. 选择要编辑的文件item,左滑后点击编辑图标,进入文件编辑界面,修改文件名和文件内容,修改之后点击保存图标,页面显示的文件文件大小发生变化,然后点击返回图标后返回文件监听界面,查看触发事件后日志显示为相应日志:event:2,fileName为修改后文件的路径。IN_MODIFY监听只监听文件内容是否发生变化,若单独修改文件名,则不会更新监听日志。
    11. 点击停止监听按钮,选择IN_MODIFY监听,然后点击确定按钮,成功停止IN_MODIFY监听。
    12. 选择要编辑的文件item,左滑后点击编辑图标,进入文件编辑界面,修改文件名和文件内容,修改之后点击保存图标,页面显示的文件文件大小发生变化,然后点击返回图标后返回文件监听界面,查看触发事件后日志无变化。

工程目录

entry/src/main/ets/
|---Application
|---common
|   |---Common.ts             // 公用方法,如bufferToString
|   |---Logger.ts             // 监听文件日志
|---filemanager
|   |---data
|   |   |---FileDataSource.ets             // 懒加载数据格式
|   |---fileFs
|   |   |---MyWatcher.ts      // 预制10个文件进行监听,并对文件增删改进行处理,以及对添加watcher和删除watcher进行处理
|   |---pages
|   |   |---audio
|   |   |   |---AudioFileList.ets          // 音频列表页面
|   |   |---common
|   |   |   |---FileList.ets               // 同类型文件列表展示页面,接收文件类型,展示特定类型的文件列表
|   |   |---document
|   |   |   |---DocumentFileList.ets       // 文档列表页面
|   |   |---image
|   |   |   |---ImageFileList.ets          // 图片列表页面
|   |   |   |---ImagePreview.ets           // 图片预览页面
|   |   |---MyPhone
|   |   |   |---ChangeTimeDialog.ets       //修改时间的弹窗
|   |   |   |---DeleteDialog.ets           // 删除时的询问弹窗
|   |   |   |---InputNameDialog.ets        // 新增文件时的输入框
|   |   |   |---MyPhone.ets                // MyPhone主页
|   |   |   |---OpenFile.ets               // 文件内容查看编辑页面
|   |   |---video
|   |   |   |---VideoFileList.ets          // 视频列表页面
|   |   |---FileManagerHome.ets            // 首页主体内容
|---MainAbility
|---pages
|   |---WatcherFile.ets       // 监听文件页面,可对当前目录添加监听和停止监听,同时可以添加文件和删除文件并显示触发事件后日志
|   |---Index.ets             // 首页
|   |---EditFile.ets          // 文件编辑界面,可对文件名和文件内容进行修改,并可对文件的修改进行撤销
Library/src/main/ets/
|---filemanager
|   |---components
|   |   |---ThumbnailImage.ets             // 缩略图组件
|   |---fileio
|   |   |---FileIoManager.ts               // 文件管理模块,封装了fileio的接口,实现MyPhone部分的功能
|   |---medialibrary
|   |   |---MediaLibraryManager.ts         // 主要封装了mediaLibrary库相关的接口,实现相关功能,如:对文件的增、删、查和图片预览功能
|   |---userfilemanager
|   |   |---UserFileManager.ts             // 封装userFileManager库相关的接口
|   |---FileManager.ts                     // 文件管理接口,统一封装了各模块对外提供的功能接口
|---mock                                   // 本地数据
|---utils                                  // 日志工具

具体实现:

  • 增添文件、删除文件、查找指定类型文件文件和预览图片的功能接口封装在MediaLibraryManager,源码参考:MediaLibraryManager.ts

    • 使用mediaLibrary.getMediaLibrary来获取MediaLibrary对象;
    • 读取每个文件的数据:使用MediaLibrary.getFileAssets读取满足条件的文件集合FetchFileResult,然后调用FetchFileResult.getFirstObject();
    • 创建模拟文件:使用MediaLibrary.getPublicDirectory()获取系统预定的目录,然后使用MediaLibrary.createAsset();
    • 删除指定路径的文件:使用MediaLibrary.deleteAsset();
    • 获取预览图:使用image.createImageSource()创建指定的文件资源ImageSource,然后调用ImageSource.createPixelMap(),接口参考:@ohos.multimedia.image
  • MyPhone模块中的文件增删、复制移动、查找功能封装在FileSystem,源码参考:FileIoManager.ets

    • 读取文件列表:使用fileio.opendirSync()打开指定目录dir,然后使用dir.readSync()读取文件内容dirent,在调用dirent中相关api获取想要的文件参数;
    • 创建目录:使用fileio.mkdirSync()创建文件夹;
    • 创建文件:使用fileio.openSync()创建文件;
    • 删除选中内容:使用fileio.rmdirSync()删除文件夹,使用fileio.unlinkSync()删除文件;
    • 复制文件:使用fileio.copyFileSync()复制目标文件;
    • 移动文件:使用fileio.mkdirSync()创建指定目录,再递归选中目录中的文件,将内部的文件创建到指定的位置。
    • 修改加密分区:修改应用上下文Context的area,实现当前加密分区的修改。
  • 在Library模块中通过封装FileManager向外提供功能接口,如MediaLibraryManager.getPixelMapByFileAsset(),源码参考:FileManager.ts

    • 如效果预览中的图片列表,读取指定类型的文件:在FileList.ets
      中调用FileManager.getFileAssets();
    • 创建模拟文件:在FileList.ets
      中调用FileManager.createTxtFileAsset();
    • 删除指定路径的文件:在FileList.ets
      中调用FileManager.deleteFileAsset();
    • 获取缩略图:在ThumbnailImage.ets 中调用FileManager.getThumbnail();
    • 如效果预览中的图片预览,获取预览图:在ImagePreview.ets 中调用FileManager.getPixelMapByFileAsset()。
  • 监听文件模块中的文件增删、查找、修改、监听功能封装在MyWatcher,源码参考:MyWatcher.ts

    • 增加文件、删除文件、监听文件、停止监听文件:在WatcherFile.ets
      中调用MyWathcer.addFileToWatcher()、MyWathcer.deleteFileToWatcher()、MyWathcer.startWatcher(watcherName)、MyWathcer.stopWatcher();

    • 修改文件:在EditFile.ets

      中调用MyWatcher.modifyFileToWatcher()。

相关权限

ohos.permission.READ_MEDIA

ohos.permission.WRITE_MEDIA

ohos.permission.FILE_ACCESS_MANAGER

ohos.permission.STORAGE_MANAGER

依赖

不涉及

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568;
  2. 本示例为Stage模型,仅支持API11版本SDK,SDK版本号(API Version 11 Beta),镜像版本号(4.1Beta)。
  3. 本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。
  4. 本示例涉及调用系统权限的接口,需要配置允许权限列表,可以参考特殊权限配置方法 ,在配置文件中的“allowed-acls”字段中增加"ohos.permission.READ_MEDIA", “ohos.permission.WRITE_MEDIA”, “ohos.permission.FILE_ACCESS_MANAGER”, "ohos.permission.STORAGE_MANAGER"四个权限。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/FileManager/FileManager/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/Photos/README_zh.md

相册

介绍

本示例主要展示了相册相关的功能,使用@ohos.file.photoAccessHelper
接口,实现了查看系统相册、创建用户相册、查看相册照片、用户相册文件添加和删除、以及预览图片、最近删除、收藏夹操作等功能;

效果预览

主页图片列表大图图片选择
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明

  1. 主界面:查询显示所有照片、系统相册(相机/视频/截屏录屏/我的收藏/最近删除)、用户相册
  2. 主界面点击“+”,创建用户相册
  3. 创建用户相册时添加图片到用户相册
  4. 长按相册,删除相册
  5. 长按相册,重命名相册(不可重名)
  6. 长按相册,相册多选,批量删除
  7. 点击相册,查看相册中的图片列表
  8. 点击图片,查看单个图片大图
  9. 点击心形图标,收藏图片
  10. 点击心形图标,取消收藏
  11. 大图界面,重命名文件(可重名)
  12. 大图界面,删除文件(移动到最近删除相册)
  13. 从最近删除恢复照片
  14. 点击视频,查看视频并播放
  15. 点击图片页面右上角叹号,查看图片详情
  16. 长按图片批量操作:多选/全选、删除、恢复
  17. 相册内图片列表界面点击“+”,从已有相册添加照片
  18. 长按图片列表图片,更多菜单,从图片选择添加到已有相册
  19. 在相册图片列表界面,长按图片,选择图片,点击更多,可以将图片加入到其他相册(可多选)
  20. 在用户相册图片列表界面,长按图片,选择图片,点击更多,可以将图片从当前相册移除(可多选)
  21. 在用户相册图片列表界面,长按图片,选择图片,点击更多,可以查看图片详情(可多选)

工程目录

.
├── base // @ohos.file.photoAccessHelper接口封装
│   ├── FavorUserFileDataItem.ts            // 收藏夹图片数据类
│   ├── InnerUserFileDataItem.ts            // 大图数据类
│   ├── TrashUserFileDataItemCache.ts       // 最近删除图片数据缓存
│   ├── TrashUserFileDataItem.ts            // 最近删除图片数据类
│   ├── UserFileDataChangeCallback.ts       // 图片数据变化回调
│   ├── UserFileDataHelper.ts               // 图片展示信息查询接口
│   ├── UserFileDataItemCache.ts            // 图片数据缓存
│   ├── UserFileDataItem.ts                 // 图片数据类
│   ├── UserFileModel.ts                    // photoAccessHelper接口封装
│   ├── UserFileObserverCallback.ts         // 图片数据监听回调
│   └── UserFileObserver.ts                 // 图片数据监听类
├── common //业务逻辑
│   ├── ActionBarProp.ts
│   ├── AlbumDataImpl.ts                    // 相册数据查询接口封装
│   ├── AlbumDataItem.ts                    // 相册数据类
│   ├── AlbumsDataSource.ts
│   ├── BroadcastManager.ts
│   ├── Broadcast.ts
│   ├── CommonObserverCallback.ts
│   ├── EventPipeline.ts
│   ├── GlobalContext.ts
│   ├── GroupDataImpl.ts                    // 相册成员数组数据接口封装
│   ├── GroupItemDataSource.ts              // 相册成员数组数据
│   ├── ItemDataSource.ts
│   ├── MultimodalInputManager.ts
│   ├── ScreenManager.ts                    // 屏幕显示逻辑
│   ├── SelectManager.ts                    // 选择状态逻辑
│   └── SimpleAlbumDataItem.ts              // 简化相册数据类
├── components //UI组件
│   ├── ActionBarButton.ets
│   ├── ActionBar.ets
│   ├── AddNotesDialog.ets
│   ├── AlbumGridItemNewStyle.ets
│   ├── AlbumListCard.ets
│   ├── AlbumScrollBar.ets
│   ├── AlbumSelectGridItemNewStyle.ets
│   ├── AlbumSetPage.ets
│   ├── CancelOperationDialog.ets
│   ├── CustomDialogView.ets
│   ├── DeleteDialog.ets
│   ├── DeleteProgressDialog.ets
│   ├── DetailMenuPanel.ets
│   ├── DetailsDialog.ets
│   ├── DetailTitle.ets
│   ├── EmptyAlbumComponent.ets
│   ├── FindSameNameDialog.ets
│   ├── GridScrollBar.ets
│   ├── ImageGridItemComponent.ets
│   ├── LoadingPanel.ets
│   ├── MediaOperationActionBar.ets
│   ├── MultiSelectDialog.ets
│   ├── NewAlbumDialog.ets
│   ├── NoPhotoComponent.ets
│   ├── NoPhotoIndexComponent.ets
│   ├── PhotoBrowserActionBar.ets
│   ├── PhotoBrowserBg.ets
│   ├── PhotoItem.ets
│   ├── PhotoSwiper.ets
│   ├── ProgressDialog.ets
│   ├── RenameDialog.ets
│   ├── SaveDialog.ets
│   ├── SaveImageDialog.ets
│   ├── SelectionTitle.ets
│   ├── SingleTitle.ets
│   ├── ToolBarButton.ets
│   ├── ToolBar.ets
│   └── VideoIcon.ets
├── constants //常量
│   ├── AnimationConstants.ts
│   ├── BroadcastConstants.ts
│   ├── BrowserConstants.ts
│   ├── Constants.ts
│   ├── MediaConstants.ts
│   ├── QueryConstants.ts
│   └── RouterConstants.ts
├── entryability //HAP入口
│   └── EntryAbility.ts
├── menus //菜单操作
│   ├── AlbumSetDeleteMenuOperation.ts
│   ├── AlbumSetNewMenuOperation.ts
│   ├── AlbumSetRenameMenuOperation.ts
│   ├── AsyncCallback.ts
│   ├── BatchDeleteMenuOperation.ts
│   ├── BatchRecoverMenuOperation.ts
│   ├── BatchRemoveMenuOperation.ts
│   ├── ClearRecycleMenuOperation.ts
│   ├── GotoPhotosMenuOperation.ts
│   ├── MenuContext.ts
│   ├── MenuOperationCallback.ts
│   ├── MenuOperation.ts
│   ├── MoveMenuOperation.ets
│   ├── ProcessMenuOperation.ts
│   ├── RenameMenuOperation.ts
├── models //类型定义
│   ├── ActionBarMode.ts
│   ├── Action.ts
│   ├── AlbumBarModel.ts
│   ├── AlbumSelectBarModel.ts
│   ├── JumpSourceToMain.ts
│   ├── MediaOperationType.ts
│   ├── NewAlbumBarModel.ts
│   ├── PhotoGridBarModel.ts
│   ├── ThumbnailModel.ts
│   └── ViewType.ts
├── pages //页面
│   ├── AlbumSelect.ets                           // 相册选择页面
│   ├── Index.ets                                 // 主页面
│   ├── MediaOperationPage.ets                    // 图片文件操作页面
│   ├── NewAlbumPage.ets                          // 新建相册页面
│   ├── PhotoBrowser.ets                          // 大图展示页面
│   ├── PhotoGridPage.ets                         // 图片列表页面
│   ├── SelectPhotoBrowser.ets                    // 图片选择页面
│   └── VideoBrowser.ets                          // 视频查看页面
└── utils //工具类
    ├── AbilityUtils.ts
    ├── AlbumUtil.ts
    ├── DateUtil.ts
    ├── DialogUtil.ts
    ├── hisysEventUtil.ts
    ├── ImageUtil.ts
    ├── Log.ts
    ├── MathUtils.ts
    ├── ResourceUtils.ts
    ├── SingleInstanceUtils.ts
    └── UiUtil.ts

具体实现

在base模块中通过封装photoAccessHelper向外提供功能接口,如Album查询操作,源码参考:AlbumDataImpl.ts

  • 如效果预览中的相册列表:在AlbumSetPage.ets
    中调用AlbumDataImpl.reloadAlbumItemData();

在base模块中通过封装photoAccessHelper向外提供功能接口,源码参考:UserFileModel.ts

相关权限

ohos.permission.WRITE_IMAGEVIDEO

ohos.permission.READ_IMAGEVIDEO

约束与限制

  1. 本示例仅支持标准系统上运行,支持设备:RK3568。

  2. 本示例为Stage模型,支持API10版本SDK,SDK版本号(API Version 10 Release),镜像版本号(4.0 Release)

  3. 本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。需要配置"apl":"system_basic"才可安装成功;

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo FileManagement/Photos/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/FileManagement/FileBackupExtension/README_zh.md

应用接入数据备份恢复

介绍

应用接入数据备份恢复需要通过配置BackupExtensionAbility实现。

BackupExtensionAbility,是Stage模型中扩展组件ExtensionAbility的派生类。开发者可以通过修改配置文件定制备份恢复框架的行为,包括是否允许备份恢复,备份哪些文件等。

本sample主要给备份流程提供应用,用于生成数据和显示数据。

效果预览

初始界面生成文件界面恢复备份后显示
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用说明:

  1. 点击按钮“生成文件数据”,应用会随机生成2个到10个txt文件,大小在1Byte到1024Byte之间,用于校验备份和恢复的数据为同一数据。
  2. 本应用仅适用于生成和显示数据,具体的备份和恢复的操作目前需要使用hdc shell命令操作。
  3. 具体操作方面,进入应用点击按钮生成文件数据后,进入hdc shell,使用backup_tool backup --isLocal=true --bundle com.samples.backupextension --pathCapFile /data/backup/tmp命令进行备份。然后可以把应用删掉,重新安装应用后进入hdc shell,使用backup_tool restore --bundle com.samples.backupextension --pathCapFile /data/backup/tmp,提示成功后,重新打开应用可以看到备份的文件显示在列表里。

工程目录

entry/src/main/ets/
|---Application
|---Common
|   |---Logger.ts                      // 日志工具
|---MainAbility
|   |---EntryAbility.ts                // Ability类
|---fileFs
|   |---CreateFile.ts                  // 创建文件
|---pages
|   |---Index.ets                      // 首页

具体实现

  1. 在应用配置文件module.json5中注册extensionAbilities相关配置

新增"extensionAbilities"字段,其中注册类型"type"设置为"backup",元数据信息"metadata"新增一个"name""ohos.extension.backup"的条目。

BackupExtensionAbility配置文件示例:

{
    "extensionAbilities": [
        {
            "description": "$string:ServiceExtAbility",
            "icon": "$media:icon",
            "name": "BackupExtensionAbility",
            "type": "backup",
            "visible": true,
            "metadata": [
                {
                    "name": "ohos.extension.backup",
                    "resource": "$profile:backup_config"
                }
            ],
            "srcEntrance": "./ets/common/BackupExtension.ts",
        }      
    ]
}
  1. 新增元数据资源配置文件

在元数据资源配置文件中,定义备份恢复时需要传输的文件。元数据资源配置文件名称需要与module.json5"metadata.resource"名称保持一致,其保存位置在Profile文件夹下。

元数据资源配置文件示例:

{
  "allowToBackupRestore": true,
    "includes": [
    "data/storage/el1/database/",
    "data/storage/el1/base/files/",
    "data/storage/el1/base/preferences/",
    "data/storage/el1/base/haps/<module-name>/files/",
    "data/storage/el1/base/haps/<module-name>/preferences/",
    "data/storage/el2/database/",
    "data/storage/el2/base/files/",
    "data/storage/el2/base/preferences/",
    "data/storage/el2/base/haps/<module-name>/files/",
    "data/storage/el2/base/haps/<module-name>/preferences/",
    "data/storage/el2/distributedfiles/"
    ],
    "excludes": [
      "/data/storage/el2/base/files/users/"
    ]
}

其中includes里面的文件夹是用户需要备份数据的路径,excludes为用户在includes内所需要排除的备份数据目录。includes配置内中是应用子Hap名称。

  1. 使用应用生成数据:

点击界面的“生成文件数据”按钮,会使用以下代码生成文件,并在onPageShow中获取文件名列表和文件大小列表,然后显示在界面上。

async createTestFiles(): Promise<void> {
    try {
      let num = Math.floor(Math.random() * FILE_NUM_MAX) + FILE_NUM_MIN;
      if (!fs.accessSync(this.baseDir)) {
        fs.mkdirSync(this.baseDir);
      }
      let dpath = this.baseDir;
      Logger.info(TAG, 'sanBoxFileDir = ' + dpath);
      Logger.info(TAG, 'num is  = ' + num);
      for (let i = 0; i < num; i++) {
        let myFile = dpath + `/TestFile_${i}.txt`;
        Logger.info(TAG, 'readyFile myFile = ' + myFile);
        let file = fs.openSync(myFile, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
        fs.writeSync(file.fd, new ArrayBuffer(ONE_KILOBYTE * Math.random()));
        fs.closeSync(file);
      }
    } catch (e) {
      Logger.error(TAG, 'Failed to prepare media files, error:' + e.message + e.code);
    }
  }
  1. 备份与恢复操作:

由于目前备份与恢复尚未提供具体的应用接口,所以备份与功能仅提供命令行方式进行检验:

应用备份
backup_tool backup --isLocal=true --bundle com.sample.backupextension  --pathCapFile /data/backup/tmp
备份成功提示:
BundleStarted errCode = 0, BundleName = com.example.backupextension
FileReady owner = com.example.backupextension, fileName = manage.json, sn = 0, fd = 9
FileReady owner = com.example.backupextension, fileName = part.0.tar, sn = 0, fd = 9
BundleFinished errCode = 0, BundleName = com.example.backupextension
backup successful

应用恢复
backup_tool restore --bundle com.sample.backupextension --pathCapFile /data/backup/tmp
恢复成功提示:
BundleStarted errCode = 0, BundleName = com.example.backupextension
FileReady owner = com.example.backupextension, fileName = part.0.tar, sn = 0, fd = 8
FileReady owner = com.example.backupextension, fileName = manage.json, sn = 0, fd = 8
BundleFinished errCode = 0, BundleName = com.example.backupextension
Restore successful

backup详细说明可以使用backup -help查看。

相关权限

ohos.permission.GET_BUNDLE_INFO_PRIVILEGED

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行,支持设备:RK3568。

2.本示例为Stage模型,支持API11版本SDK,SDK版本号(API Version 11 Beta1),镜像版本号(4.1 Beta1)

3.本示例需要使用DevEco Studio 版本号(4.0 Release)及以上版本才可编译运行。

4.本示例所配置的权限ohos.permission.GET_BUNDLE_INFO_PRIVILEGED为system_basic级别(相关权限级别可通过权限定义列表 查看),需要手动配置对应级别的权限签名(具体操作可查看自动化签名方案) 。

下载

如需单独下载本工程,执行如下命令:

git init
git config core.sparsecheckout true
echo code/BasicFeature/FileManagement/FileBackupExtension > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

https://gitee.com/openharmony/applications_app_samples/blob/master/code/BasicFeature/DataManagement/Preferences/README_zh.md

首选项

简介

本示例使用[@ohos.data.preferen

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值