Слияние кода завершено, страница обновится автоматически
[
{
"category": {
"categoryName": "case",
"categoryDesc": "源码引入"
},
"categoryDetailList": [
{
"typeInfo": {
"typeName": "ui",
"typeDesc": "UI布局",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "封装弹窗",
"id": "178",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/encapsulation_dialog.gif",
"description": "本示例介绍如何封装弹窗，以及如何使用这种封装后的弹窗",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/encapsulationdialog",
"caseRepositoriesInfo": "",
"insertCode": "DialogExampleView()",
"importCode": "import { DialogExampleView } from 'encapsulationdialog';",
"codeAnnotation": "/**\n * 功能描述：使用WaterFlow组件展示多列不同数据，通过设置sections属性来配置不同数据的列间距、行间距等信息。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/multicolumndisplay/README.md\n */",
"napi": false
}
},
{
"name": "多段混合数据展示案例",
"id": "175",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/multi_column_display.gif",
"description": "本示例为多段混合数据展示案例",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/multicolumndisplay/",
"caseRepositoriesInfo": "",
"insertCode": "MultiColumnDisplayComponent()",
"importCode": "import { MultiColumnDisplayComponent } from 'multicolumndisplay';",
"codeAnnotation": "/**\n * 功能描述：使用WaterFlow组件展示多列不同数据，通过设置sections属性来配置不同数据的列间距、行间距等信息。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/multicolumndisplay/README.md\n */",
"napi": false
}
},
{
"name": "限制高度底部弹窗",
"id": "172",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/limited_height_bottom_dialog.gif",
"description": "本示例介绍了如何实现一个限制高度的底部弹窗，以购物应用的“我的”页面来呈现。当给一个底部弹窗的可滚动区域设置最大高度后，如果弹窗内部视图的高度超过了这个最大高度，弹窗可滚动区域的高度就是这个最大高度，视图内容不会展示完全，需要滚动查看；如果弹窗内部视图的高度没有超过这个最大高度，弹窗可滚动区域高度就是视图的高度，视图内容展示完全。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/limitedheightbottomdialog/",
"caseRepositoriesInfo": "",
"insertCode": "LimitedHeightBottomDialogComponent()",
"importCode": "import { LimitedHeightBottomDialogComponent } from 'limitedheightbottomdialog';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了如何实现一个限制高度的底部弹窗，以购物应用的“我的”页面来呈现。当给一个底部弹窗的可滚动区域设置最大高度后，如果弹窗内部视图的高度超过了这个最大高度，弹窗可滚动区域的高度就是这个最大高度，视图内容不会展示完全，需要滚动查看；如果弹窗内部视图的高度没有超过这个最大高度，弹窗可滚动区域高度就是视图的高度，视图内容展示完全。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/limitedheightbottomdialog/README.md\n */",
"napi": false
}
},
{
"name": "多重筛选案例",
"id": "171",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/multiple_screening.gif",
"description": "本示例主要介绍多重筛选场景，利用数组方法过滤满足条件的数据，利用LazyForEach实现列表信息的渲染以及刷新。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/multiplescreening/",
"caseRepositoriesInfo": "",
"insertCode": "MultipleScreeningComponent()",
"importCode": "import { MultipleScreeningComponent } from 'multiplescreening';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍多重筛选场景，利用数组方法过滤满足条件的数据，利用LazyForEach实现列表信息的渲染以及刷新。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/multiplescreening/README.md\n */",
"napi": false
}
},
{
"name": "多层级轮播图切换",
"id": "159",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/swiper_component.gif",
"description": "本示例介绍使用ArkUI中的Stack组件实现多层级轮播图。该场景多用于购物、资讯类应用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/swipercomponent/",
"caseRepositoriesInfo": "",
"insertCode": "SwiperMainPage()",
"importCode": "import { SwiperMainPage } from 'swipercomponent';",
"codeAnnotation": "/**\n * 功能描述：通过Stack组件堆叠图片，实现多层级效果，配合手势滑动和显式动画实现切换的动画效果。同时通过改变数据中间值currentIndex来改变组件zIndex层级和高度来实现切换的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/swipercomponent/README.md\n */",
"napi": false
}
},
{
"name": "背景模糊效果的自定义TabBar实现案例",
"id": "158",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/background_blur.gif",
"description": "在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/backgroundblur/",
"caseRepositoriesInfo": "",
"insertCode": "TabsSample()",
"importCode": "import { TabsSample } from 'backgroundblur';",
"codeAnnotation": "/**\n * 功能描述：在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/backgroundblur/README.md\n */",
"napi": false
}
},
{
"name": "沉浸式适配案例",
"id": "156",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/immersive.gif",
"description": "开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。本案例分别针对Navigation、列表滑动、Web页、底部弹框等场景实现了沉浸式适配。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/immersive/",
"caseRepositoriesInfo": "",
"insertCode": "NavImmersive()",
"importCode": "import { NavImmersive } from 'immersive';",
"codeAnnotation": "/**\n * 功能描述：开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。本案例分别针对Navigation、列表滑动、Web页、底部弹框等场景实现了沉浸式适配。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/immersive/README.md\n */",
"napi": false
}
},
{
"name": "自定义Stepper",
"id": "117",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_stepper.gif",
"description": "在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customstepper/",
"caseRepositoriesInfo": "",
"insertCode": "CustomStepperViewComponent()",
"importCode": "import { CustomStepperViewComponent } from 'customstepper';",
"codeAnnotation": "/**\n * 功能描述：在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customstepper/README.md\n */",
"napi": false
}
},
{
"name": "自定义TabBar页签案例",
"id": "2",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_tabbar.gif",
"description": "本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customtabbar/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "TabViewComponent()",
"importCode": "import { TabViewComponent } from 'customtabbar';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customtabbar/README.md\n */",
"napi": false
}
},
{
"name": "swiper指示器导航点位于swiper下方",
"id": "67",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/indicator_below_swiper.gif",
"description": "本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/indicatorbelowswiper/",
"caseRepositoriesInfo": "",
"insertCode": "IndicatorBelowSwiperComponent()",
"importCode": "import { IndicatorBelowSwiperComponent } from 'indicatorbelowswiper';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/indicatorbelowswiper/README.md\n */",
"napi": false
}
},
{
"name": "ArkWeb同层渲染",
"id": "64",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_embed.jpg",
"description": "该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/nativeembed/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebViewDemoComponent()",
"importCode": "import { WebViewDemoComponent } from 'nativeembed';",
"codeAnnotation": "/**\n * 功能描述：该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativeembed/README.md\n */",
"napi": false
}
},
{
"name": "自定义安全键盘案例",
"id": "61",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_safe_keyboard.gif",
"description": "金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customsafekeyboard/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "CustomSafeKeyboardViewComponent()",
"importCode": "import { CustomSafeKeyboardViewComponent } from 'customsafekeyboard';",
"codeAnnotation": "/**\n * 功能描述：金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customsafekeyboard/README.md\n */",
"napi": false
}
},
{
"name": "元素超出List区域",
"id": "51",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/listitem_overflow.gif",
"description": "本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。List组件clip属性默认为true，超出容器边缘的子组件会按照List的布局范围被裁剪。为此，可以在List组件内部添加一个占位的ListItem，以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下，也可以在List外占位，同时设置List的clip属性为false达成同样的效果。该布局效果多用于头像、列表子项标题等元素的突出显示。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/listitemoverflow/",
"caseRepositoriesInfo": "",
"insertCode": "AboutMeComponent()",
"importCode": "import { AboutMeComponent } from 'listitemoverflow';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。List组件clip属性默认为true，超出容器边缘的子组件会按照List的布局范围被裁剪。为此，可以在List组件内部添加一个占位的ListItem，以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下，也可以在List外占位，同时设置List的clip属性为false达成同样的效果。该布局效果多用于头像、列表子项标题等元素的突出显示。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listitemoverflow/README.md\n */",
"napi": false
}
},
{
"name": "手写绘制及保存图片",
"id": "70",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/hand_wring_to_image.gif",
"description": "本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/handwritingtoimage/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "HandWritingToImageView()",
"importCode": "import { HandWritingToImageView } from 'handwritingtoimage';",
"codeAnnotation": "/**\n * 功能描述：本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/handwritingtoimage/README.md\n */",
"napi": false
}
},
{
"name": "视频卡片和列表区域的联动滚动",
"id": "122",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_linkage_list.gif",
"description": "本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videolinkagelist/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "VideoLinkageListView()",
"importCode": "import { VideoLinkageListView } from 'videolinkagelist';",
"codeAnnotation": "/**\n * 功能描述：本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videolinkagelist/README.md\n */",
"napi": false
}
},
{
"name": "城市选择案例",
"id": "39",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/city_search.gif",
"description": "本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/citysearch/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "CitySearch()",
"importCode": "import { CitySearch } from 'citysearch';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/citysearch/README.md\n */",
"napi": false
}
},
{
"name": "文字展开收起案例",
"id": "112",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/text_expand.gif",
"description": "本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/textexpand/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "TextExpand()",
"importCode": "import { TextExpand } from 'textexpand';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/textexpand/README.md\n */",
"napi": false
}
},
{
"name": "验证码布局",
"id": "23",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/verify_code.gif",
"description": "本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/verifycode/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VerifyCodeViewComponent()",
"importCode": "import { VerifyCodeViewComponent } from 'verifycode';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/verifycode/README.md\n */",
"napi": false
}
},
{
"name": "底部面板嵌套列表滑动案例",
"id": "89",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/bottom_panel_slide.gif",
"description": "本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/bottompanelslide/",
"caseRepositoriesInfo": "",
"insertCode": "BottomPanelSlideComponent()",
"importCode": "import { BottomPanelSlideComponent } from 'bottompanelslide';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/bottompanelslide/README.md\n */",
"napi": false
}
},
{
"name": "左右拖动切换图片效果案例",
"id": "58",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_to_switch_pictures.gif",
"description": "本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/dragtoswitchpictures/",
"caseRepositoriesInfo": "",
"insertCode": "DragToSwitchPicturesComponent()",
"importCode": "import { DragToSwitchPicturesComponent } from 'dragtoswitchpictures';",
"codeAnnotation": "/**\n * 功能描述：本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragtoswitchpictures/README.md\n */",
"napi": false
}
},
{
"name": "列表编辑",
"id": "10",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/todo_list.gif",
"description": "本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pendingitems/",
"caseRepositoriesInfo": "",
"insertCode": "ToDoListComponent()",
"importCode": "import { ToDoListComponent } from 'pendingitems';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pendingitems/README.md\n */",
"napi": false
}
},
{
"name": "全屏登录页面",
"id": "3",
"image": "https://gitee.com/fanjiaojiaoar/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/modal_window.gif",
"description": "本例介绍各种应用登录页面。全屏登录页面：在主页面点击跳转到全屏登录页后，显示全屏模态页面，全屏模态页面从下方滑出并覆盖整个屏幕，模态页面内容自定义，此处分为默认一键登录方式和其他登录方式。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/modalwindow/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ModalWindowComponent()",
"importCode": "import { ModalWindowComponent } from 'modalwindow';",
"codeAnnotation": "/**\n * 功能描述：本例介绍各种应用登录页面。全屏登录页面：在主页面点击跳转到全屏登录页后，显示全屏模态页面，全屏模态页面从下方滑出并覆盖整个屏幕，模态页面内容自定义，此处分为默认一键登录方式和其他登录方式。\n * 参数介绍：无\n * README：https://gitee.com/fanjiaojiaoar/cases/blob/master/CommonAppDevelopment/feature/modalwindow/README.md\n */",
"napi": false
}
},
{
"name": "图片九宫格封装案例",
"id": "75",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/images_aligned.gif",
"description": "本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagegridlayout/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageGridLayoutComponent()",
"importCode": "import { ImageGridLayoutComponent } from 'imagegridlayout';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagegridlayout/README.md\n */",
"napi": false
}
},
{
"name": "tabContent内容可以在tabBar上显示并响应滑动事件案例",
"id": "99",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/tabcontentoverflow.gif",
"description": "本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/tabcontentoverflow/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "TabContentOverFlowComponent()",
"importCode": "import { TabContentOverFlowComponent } from 'tabcontentoverflow';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/tabcontentoverflow/README.md\n */",
"napi": false
}
},
{
"name": "纵向横向列表联动案例",
"id": "142",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/vertical_horizontal_linkage.gif",
"description": "本示例主要通过List组件绑定Scroller滚动控制器和LazyForEach数据懒加载来实现纵向横向列表联动。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/verticalhorizontallinkage/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VerticalAndHorizontalListComponent()",
"importCode": "import { VerticalAndHorizontalListComponent } from 'verticalhorizontallinkage';",
"codeAnnotation": "/**\n * 功能描述：本示例主要通过List组件绑定Scroller滚动控制器和LazyForEach数据懒加载来实现纵向横向列表联动。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/verticalhorizontallinkage/README.md\n */",
"napi": false
}
},
{
"name": "textOverflow长文本省略",
"id": "115",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/text_overflow.gif",
"description": "本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/textoverflow/",
"caseRepositoriesInfo": "",
"insertCode": "TextOverflowPageComponent()",
"importCode": "import { TextOverflowPageComponent } from 'textoverflow';",
"codeAnnotation": "/**\n * 功能描述：本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/textoverflow/README.md\n */",
"napi": false
}
},
{
"name": "Canvas实现模拟时钟案例",
"id": "96",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/canvas_clock.gif",
"description": "本示例介绍利用Canvas和定时器setInterval实现模拟时钟功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/analogclock/",
"caseRepositoriesInfo": "",
"insertCode": "AnalogClockComponent()",
"importCode": "import { AnalogClockComponent } from 'analogclock';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍利用Canvas和定时器setInterval实现模拟时钟功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/analogclock/README.md\n */",
"napi": false
}
},
{
"name": "Tab组件实现增删Tab标签",
"id": "13",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/handle_tabs.gif",
"description": "本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/handletabs/",
"caseRepositoriesInfo": "",
"insertCode": "HandleTabsComponent()",
"importCode": "import { HandleTabsComponent } from 'handletabs';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/handletabs/README.md\n */",
"napi": false
}
},
{
"name": "骨架屏实现案例",
"id": "129",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/skeleton_diagram.gif",
"description": "提供一个在页面数据加载完成前，先给用户展示出页面的大致结构的骨架屏（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏，以此来提升加载时用户体验的骨架屏功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/skeletondiagram/",
"caseRepositoriesInfo": "",
"insertCode": "SkeletonDiagramComponent()",
"importCode": "import { SkeletonDiagramComponent } from 'skeletondiagram';",
"codeAnnotation": "/**\n * 功能描述：提供一个在页面数据加载完成前，先给用户展示出页面的大致结构的骨架屏（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏，以此来提升加载时用户体验的骨架屏功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/skeletondiagram/README.md\n */",
"napi": false
}
},
{
"name": "自定义TabBar页签凸起和凹陷案例",
"id": "140",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_draw_tabbar.gif",
"description": "通过canvas，clipShape，radialGradient实现自定义TabBar选择时凸起点交界处的圆滑过渡动效以及扩展了一个凹陷选择时不遮挡原本内容的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customdrawtabbar/",
"caseRepositoriesInfo": "",
"insertCode": "CustomDrawTabbarComponent()",
"importCode": "import { CustomDrawTabbarComponent } from 'customdrawtabbar';",
"codeAnnotation": "/**\n * 功能描述：通过canvas，clipShape，radialGradient实现自定义TabBar选择时凸起点交界处的圆滑过渡动效以及扩展了一个凹陷选择时不遮挡原本内容的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customdrawtabbar/README.md\n */",
"napi": false
}
},
{
"name": "日历切换案例",
"id": "132",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/calendar_switch.gif",
"description": "本示例主要介绍如何使用自定义日历组件CustomCalendar实现日历年视图，月视图，周视图以及视图切换功能。还有使用Calendar Kit日历服务实现日程提醒的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/calendarswitch/",
"caseRepositoriesInfo": "",
"insertCode": "CustomCalendarSamplePage()",
"importCode": "import { CustomCalendarSamplePage } from 'calendarswitch';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍如何使用自定义日历组件CustomCalendar实现日历年视图，月视图，周视图以及视图切换功能。还有使用Calendar Kit日历服务实现日程提醒的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/calendarswitch/README.md\n */",
"napi": false
}
},
{
"name": "适配挖孔屏案例",
"id": "60",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/digging_hole_screen.gif",
"description": "本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/diggingholescreen/",
"caseRepositoriesInfo": "",
"insertCode": "DiggingHoleScreenComponent()",
"importCode": "import { DiggingHoleScreenComponent } from 'diggingholescreen';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/diggingholescreen/README.md\n */",
"napi": false
}
},
{
"name": "滚动吸顶效果实现案例",
"id": "33",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/component_stack.gif",
"description": "本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。其中，搜索框能够实现“吸顶”效果，在用户滚动页面时始终保持在顶部。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/componentstack/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ComponentStackComponent()",
"importCode": "import { ComponentStackComponent } from 'componentstack';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。其中，搜索框能够实现“吸顶”效果，在用户滚动页面时始终保持在顶部。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/componentstack/README.md\n */",
"napi": false
}
},
{
"name": "Scroll容器嵌套多种组件事件处理案例",
"id": "157",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/container_nested_slide.gif",
"description": "本示例主要介绍了由父组件Scroll统一计算派发偏移量，从而达到子组件web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滑动效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/containernestedslide/",
"caseRepositoriesInfo": "",
"insertCode": "NewsDetailPage()",
"importCode": "import { NewsDetailPage } from 'containernestedslide';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了由父组件Scroll统一计算派发偏移量，从而达到子组件web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滑动效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/containernestedslide/README.md\n */",
"napi": false
}
},
{
"name": "二级联动",
"id": "10",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/secondary_linkage.gif",
"description": "本示例主要介绍了List组件实现二级联动（Cascading List）的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/secondarylinkage/",
"caseRepositoriesInfo": "",
"insertCode": "SecondaryLinkExample()",
"importCode": "import { SecondaryLinkExample } from 'secondarylinkage';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了List组件实现二级联动（Cascading List）的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/secondarylinkage/README.md\n */",
"napi": false
}
},
{
"name": "编辑收货地址案例",
"id": "139",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/edit_address.gif",
"description": "本示例多用于表单填写场景：其中通过使用TextPicker滑动选择文本内容组件实现三级联动选择省市区，并回填到输入框。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/editaddress/",
"caseRepositoriesInfo": "",
"insertCode": "EditAddressView()",
"importCode": "import { EditAddressView } from 'editaddress';",
"codeAnnotation": "/**\n * 功能描述：本示例多用于表单填写场景：其中通过使用TextPicker滑动选择文本内容组件实现三级联动选择省市区，并回填到输入框。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/editaddress/README.md\n */",
"napi": false
}
},
{
"name": "组件随软键盘弹出避让案例",
"id": "152",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/keyboard_avoid.gif",
"description": "本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/keyboardavoid/",
"caseRepositoriesInfo": "",
"insertCode": "KeyboardAvoid()",
"importCode": "import { KeyboardAvoid } from 'keyboardavoid';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/keyboardavoid/README.md\n */",
"napi": false
}
},
{
"name": "图形锁屏案例",
"id": "153",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pattern_lock.gif",
"description": "本示例介绍使用图案密码锁组件与振动接口实现图形锁屏场景。该场景多用于桌面及系统类应用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/patternlock/",
"caseRepositoriesInfo": "",
"insertCode": "PatternLockMainPage()",
"importCode": "import { PatternLockMainPage } from 'patternlock';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用图案密码锁组件与振动接口实现图形锁屏场景。该场景多用于桌面及系统类应用。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/patternlock/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "animation",
"typeDesc": "动效",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "底部抽屉滑动效果案例",
"id": "55",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/bottom_drawer_slide.gif",
"description": "本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/bottomdrawerslidecase/",
"caseRepositoriesInfo": "",
"insertCode": "BottomDrawerSlideCase()",
"importCode": "import { BottomDrawerSlideCase } from 'bottomdrawerslidecase';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/bottomdrawerslidecase/README.md\n */",
"napi": false
}
},
{
"name": "悬浮工具箱案例",
"id": "169",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/toolbox.gif",
"description": "本示例介绍使用zIndex、gesture等接口实现悬浮工具箱效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/toolbox/",
"caseRepositoriesInfo": "",
"insertCode": "ToolBoxView()",
"importCode": "import { ToolBoxView } from 'toolbox';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用zIndex、gesture等接口实现悬浮工具箱效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/toolbox/README.md\n */",
"napi": false
}
},
{
"name": "听歌识曲水波纹特效案例",
"id": "35",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/water_ripples.gif",
"description": "本示例介绍在很多应用中，会出现点击按钮出现水波纹的特效。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/waterripples/",
"caseRepositoriesInfo": "",
"insertCode": "WaterRipplesComponent()",
"importCode": "import { WaterRipplesComponent } from 'waterripples';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍在很多应用中，会出现点击按钮出现水波纹的特效。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/waterripples/README.md\n */",
"napi": false
}
},
{
"name": "使用弹簧曲线实现抖动动画及手机振动效果案例",
"id": "24",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/vibrate_effect.gif",
"description": "本示例介绍使用vibrator.startVibration方法实现手机振动效果，用keyframeAnimateTo关键帧动画实现点击后的抖动动画。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/vibrateeffect/",
"caseRepositoriesInfo": "",
"insertCode": "VibrateEffectViewComponent()",
"importCode": "import { VibrateEffectViewComponent } from 'vibrateeffect';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用vibrator.startVibration方法实现手机振动效果，用keyframeAnimateTo关键帧动画实现点击后的抖动动画。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/vibrateeffect/README.md\n */",
"napi": false
}
},
{
"name": "长列表滑动到指定列表项动效实现案例",
"id": "48",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/list_slide_to_history.gif",
"description": "在长列表场景时，当用户在浏览过程中打断时，列表会从第一项开始重新加载，此时我们使用scrollToIndex跳转到某个列表项时，当开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题，影响用户体验。因此我们使用currentOffset方法获取并记录偏移量，然后使用scrollTo方法跳转到上次浏览记录功能，可以流畅滑动到上次列表的位置。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/listslidetohistory/",
"caseRepositoriesInfo": "",
"insertCode": "ListSlideToHistoryComponent()",
"importCode": "import { ListSlideToHistoryComponent } from 'listslidetohistory';",
"codeAnnotation": "/**\n * 功能描述：在长列表场景时，当用户在浏览过程中打断时，列表会从第一项开始重新加载，此时我们使用scrollToIndex跳转到某个列表项时，当开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题，影响用户体验。因此我们使用currentOffset方法获取并记录偏移量，然后使用scrollTo方法跳转到上次浏览记录功能，可以流畅滑动到上次列表的位置。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listslidetohistory/README.md\n */",
"napi": false
}
},
{
"name": "下拉刷新与上滑加载案例",
"id": "20",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pull_to_refresh_news.gif",
"description": "本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pulltorefreshnews/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PullToRefreshNewsComponent()",
"importCode": "import { PullToRefreshNewsComponent } from 'pulltorefreshnews';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pulltorefreshnews/README.md\n */",
"napi": false
}
},
{
"name": "地址交换动画",
"id": "1",
"image": "https://gitee.com/sephyrothcloud/cases_0628/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/address_exchange.gif",
"description": "本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/addressexchange/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "AddressExchangeViewComponent()",
"importCode": "import { AddressExchangeViewComponent } from 'addressexchange';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/addressexchange/README.md\n */",
"napi": false
}
},
{
"name": "Swiper高度可变化效果实现",
"id": "36",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/swiper_smooth_variation.gif",
"description": "在很多应用中，swiper组件每一个page的高度是不一致的，所以需要swiper组件下方页面的高度跟着一起变化。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/swipersmoothvariation/",
"caseRepositoriesInfo": "",
"insertCode": "SwiperSmoothVariationComponent()",
"importCode": "import { SwiperSmoothVariationComponent } from 'swipersmoothvariation';",
"codeAnnotation": "/**\n * 功能描述：在很多应用中，swiper组件每一个page的高度是不一致的，所以需要swiper组件下方页面的高度跟着一起变化。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/swipersmoothvariation/README.md\n */",
"napi": false
}
},
{
"name": "翻页动效案例",
"id": "21",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_turning_animation.gif",
"description": "翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pageturninganimation/",
"caseRepositoriesInfo": "",
"insertCode": "PageTurningAnimationComponent()",
"importCode": "import { PageTurningAnimationComponent } from 'pageturninganimation';",
"codeAnnotation": "/**\n * 功能描述：翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageturninganimation/README.md\n */",
"napi": false
}
},
{
"name": "自定义Swiper卡片预览效果实现",
"id": "80",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/card_swiper_animation.gif",
"description": "本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/cardswiperanimation/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "CardSwiperAnimationComponent()",
"importCode": "import { CardSwiperAnimationComponent } from 'cardswiperanimation';",
"codeAnnotation": "/**\n * 功能描述：本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/cardswiperanimation/README.md\n */",
"napi": false
}
},
{
"name": "Grid和List内拖拽交换子组件位置",
"id": "95",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_and_exchange.gif",
"description": "本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/dragandexchange/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "Launcher()",
"importCode": "import { Launcher } from 'dragandexchange';",
"codeAnnotation": "/**\n * 功能描述：本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragandexchange/README.md\n */",
"napi": false
}
},
{
"name": "悬浮窗拖拽和吸附动画",
"id": "93",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/float_window.gif",
"description": "本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/floatwindow/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "FloatWindowMainPage()",
"importCode": "import { FloatWindowMainPage } from 'floatwindow';",
"codeAnnotation": "/**\n * 功能描述：本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/floatwindow/README.md\n */",
"napi": false
}
},
{
"name": "语音录制和声音动效实现",
"id": "90",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/normal_AV_record2.gif",
"description": "本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/voicerecordynamiceffect/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "GestureGroupExample()",
"importCode": "import { GestureGroupExample } from 'voicerecordynamiceffect';",
"codeAnnotation": "/**\n * 功能描述：本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/voicerecordynamiceffect/README.md\n */",
"napi": false
}
},
{
"name": "列表项交换案例",
"id": "88",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/list_exchange.gif",
"description": "本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/listexchange/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ListExchangeViewComponent()",
"importCode": "import { ListExchangeViewComponent } from 'listexchange';",
"codeAnnotation": "/**\n * 功能描述：本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listexchange/README.md\n */",
"napi": false
}
},
{
"name": "使用绘制组件实现自定义进度动画",
"id": "46",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/paint_component.gif",
"description": "本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/paintcomponent/",
"caseRepositoriesInfo": "",
"insertCode": "PaintComponentComponent()",
"importCode": "import { PaintComponentComponent } from 'paintcomponent';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/paintcomponent/README.md\n */",
"napi": false
}
},
{
"name": "滑动页面信息隐藏与组件位移效果案例",
"id": "5",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/slide_to_hide_and_displace.gif",
"description": "在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/slidetohideanddisplace/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "SlideToHideAndDisplaceComponent()",
"importCode": "import { SlideToHideAndDisplaceComponent } from 'slidetohideanddisplace';",
"codeAnnotation": "/**\n * 功能描述：在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/slidetohideanddisplace/README.md\n */",
"napi": false
}
},
{
"name": "网格元素交换案例",
"id": "105",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/grid_exchange.gif",
"description": "直接进行交换和删除元素会给用户带来不好的体验效果，因此需要在此过程中注入一些特色的动画来提升体验效果，本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/gridexchange/",
"caseRepositoriesInfo": "",
"insertCode": "GridExchangeComponent()",
"importCode": "import { GridExchangeComponent } from 'gridexchange';",
"codeAnnotation": "/**\n * 功能描述：直接进行交换和删除元素会给用户带来不好的体验效果，因此需要在此过程中注入一些特色的动画来提升体验效果，本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/gridexchange/README.md\n */",
"napi": false
}
},
{
"name": "数字滚动动效实现",
"id": "50",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/number_scroll.gif",
"description": "本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新，例如页面刷新抢票数量等场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/digitalscrollanimation/",
"caseRepositoriesInfo": "",
"insertCode": "DigitalScrollExampleComponent()",
"importCode": "import { DigitalScrollExampleComponent } from 'digitalscrollanimation';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新，例如页面刷新抢票数量等场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/digitalscrollanimation/README.md\n */",
"napi": false
}
},
{
"name": "视频横竖屏切换及进度条热区拖动案例",
"id": "138",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_screen_direction_switching.gif",
"description": "本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videoscreendirectionswitching/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VideoScreenDirectionSwitchingComponent()",
"importCode": "import { VideoScreenDirectionSwitchingComponent } from 'videoscreendirectionswitching';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videoscreendirectionswitching/README.md\n */",
"napi": false
}
},
{
"name": "SideBarContainer侧边栏淡入淡出动效实现案例",
"id": "43",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/side_bar_animation.gif",
"description": "在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/sidebaranimation/",
"caseRepositoriesInfo": "",
"insertCode": "SideBarAnimationViewComponent()",
"importCode": "import { SideBarAnimationViewComponent } from 'sidebaranimation';",
"codeAnnotation": "/**\n * 功能描述：在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sidebaranimation/README.md\n */",
"napi": false
}
},
{
"name": "文本选择菜单案例",
"id": "160",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/select_text_menu.gif",
"description": "本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/selecttextmenu/",
"caseRepositoriesInfo": "",
"insertCode": "SelectTextMenuComponent()",
"importCode": "import { SelectTextMenuComponent } from 'selecttextmenu';",
"codeAnnotation": "/**\n * 功能描述：本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/selecttextmenu/README.md\n */",
"napi": false
}
},
{
"name": "跑马灯案例",
"id": "19",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/marquee.gif",
"description": "本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/marquee/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MarqueeViewComponent()",
"importCode": "import { MarqueeViewComponent } from 'marquee';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/marquee/README.md\n */",
"napi": false
}
},
{
"name": "投票动效实现案例",
"id": "57",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/voting_component.gif",
"description": "本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/votingcomponent/",
"caseRepositoriesInfo": "",
"insertCode": "VotingViewComponent()",
"importCode": "import { VotingViewComponent } from 'votingcomponent';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/votingcomponent/README.md\n */",
"napi": false
}
},
{
"name": "视频全屏切换案例",
"id": "28",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/media_fullscreen.gif",
"description": "本示例介绍了使用@ohos.multimedia.media接口和@ohos.window接口配合XComponent组件实现媒体全屏的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/mediafullscreen/",
"caseRepositoriesInfo": "",
"insertCode": "MediaFullScreenComponent()",
"importCode": "import { MediaFullScreenComponent } from 'mediafullscreen';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了使用@ohos.multimedia.media接口和@ohos.window接口配合XComponent组件实现媒体全屏的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/mediafullscreen/README.md\n */",
"napi": false
}
},
{
"name": "阅读翻页方式案例",
"id": "91",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_flip.gif",
"description": "本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pageflip/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PageFlipComponent()",
"importCode": "import { PageFlipComponent } from 'pageflip';",
"codeAnnotation": "/**\n * 功能描述：本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageflip/README.md\n */",
"napi": false
}
},
{
"name": "状态栏动画实现案例",
"id": "141",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/status_bar_animation.gif",
"description": "本案例展示了状态栏的动态交互效果。通过监听页面滚动事件 onDidScroll，随着页面的上下滚动，实现状态栏颜色的变化。搜索框会在滚动时流畅地展开或收起，并伴有自然的透明度过渡效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/statusbaranimation/",
"caseRepositoriesInfo": "",
"insertCode": "StatusBarAnimationComponent()",
"importCode": "import { StatusBarAnimationComponent } from 'statusbaranimation';",
"codeAnnotation": "/**\n * 功能描述：本案例展示了状态栏的动态交互效果。通过监听页面滚动事件 onDidScroll，随着页面的上下滚动，实现状态栏颜色的变化。搜索框会在滚动时流畅地展开或收起，并伴有自然的透明度过渡效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/statusbaranimation/README.md\n */",
"napi": false
}
},
{
"name": "边框或背景图片拉伸案例",
"id": "113",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_resizable.png",
"description": "HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imageresizable/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ProductWaterFlowPageComponent()",
"importCode": "import { ProductWaterFlowPageComponent } from 'imageresizable';",
"codeAnnotation": "/**\n * 功能描述：HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageresizable/README.md\n */",
"napi": false
}
},
{
"name": "页面加载效果实现案例",
"id": "42",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_loading.gif",
"description": "本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后，LoadingProgress组件会消失并展示加载结果页（即商品页）。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pageloading/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PageLoadingComponent()",
"importCode": "import { PageLoadingComponent } from 'pageloading';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后，LoadingProgress组件会消失并展示加载结果页（即商品页）。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageloading/README.md\n */",
"napi": false
}
},
{
"name": "搜索框热搜词自动滚动",
"id": "120",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/search_swiper.gif",
"description": "本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/searchswiper/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "SearchSwiperComponent()",
"importCode": "import { SearchSwiperComponent } from 'searchswiper';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/searchswiper/README.md\n */",
"napi": false
}
},
{
"name": "边缘渐变实现",
"id": "116",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/fading_edge.gif",
"description": "本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/fadingedge/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "FadingEdgeComponent()",
"importCode": "import { FadingEdgeComponent } from 'fadingedge';",
"codeAnnotation": "/**\n * 功能描述：本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/fadingedge/README.md\n */",
"napi": false
}
},
{
"name": "状态栏显隐变化",
"id": "25",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/navigation_bar_change.gif",
"description": "本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/navigationbarchange/",
"caseRepositoriesInfo": "",
"insertCode": "NavigationBarChangeView()",
"importCode": "import { NavigationBarChangeView } from 'navigationbarchange';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/navigationbarchange/README.md\n */",
"napi": false
}
},
{
"name": "页面转场一镜到底动画",
"id": "68",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/transition_animation.gif",
"description": "本方案做的是页面点击卡片跳转到详情预览的转场动画效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/transitionanimation/",
"caseRepositoriesInfo": "",
"insertCode": "TransitionAnimationPage()",
"importCode": "import { TransitionAnimationPage } from 'transitionanimation';",
"codeAnnotation": "/**\n * 功能描述：本方案做的是页面点击卡片跳转到详情预览的转场动画效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/transitionanimation/README.md\n */",
"napi": false
}
},
{
"name": "首页下拉进入二楼效果案例",
"id": "108",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/second_floor_load_animation.gif",
"description": "本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/secondfloorloadanimation/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "SecondFloorLoadAnimationComponent()",
"importCode": "import { SecondFloorLoadAnimationComponent } from 'secondfloorloadanimation';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/secondfloorloadanimation/README.md\n */",
"napi": false
}
},
{
"name": "自定义地址选择案例",
"id": "166",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_address_picker.gif",
"description": "本示例介绍如何使用bindSheet，changeIndex，onAreaChange实现带切换动效的自定义地址选择组件。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customaddresspicker/",
"caseRepositoriesInfo": "",
"insertCode": "AddressPickerSamplePage()",
"importCode": "import { AddressPickerSamplePage } from 'customaddresspicker';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何使用bindSheet，changeIndex，onAreaChange实现带切换动效的自定义地址选择组件。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customaddresspicker/README.md\n */",
"napi": false
}
},
{
"name": "直播界面双击效果动画实现案例",
"id": "168",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/click_animation.gif",
"description": "本示例展示了如何通过使用LazyForEach和组件内转场 (transition)实现双击或连续快速点击时的图标动画效果，增强用户交互体验。每次用户双击或连续快速点击特定区域时，都会动态显示图标并带有生动的动画效果，如图标放大淡出或向上移动淡出等。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/clickanimation/",
"caseRepositoriesInfo": "",
"insertCode": "ClickAnimationSamplePage()",
"importCode": "import { ClickAnimationSamplePage } from 'clickanimation';",
"codeAnnotation": "/**\n * 功能描述：本示例展示了如何通过使用LazyForEach和组件内转场 (transition)实现双击或连续快速点击时的图标动画效果，增强用户交互体验。每次用户双击或连续快速点击特定区域时，都会动态显示图标并带有生动的动画效果，如图标放大淡出或向上移动淡出等。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/clickanimation/README.md\n */",
"napi": false
}
},
{
"name": "网络监听案例",
"id": "169",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/network_status_observer.gif",
"description": "本示例展示如何使用网络连接管理接口监听网络状态，实现视频根据不同网络修改播放状态的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/networkstatusobserver/",
"caseRepositoriesInfo": "",
"insertCode": "NetworkStatusObserverComponent()",
"importCode": "import { NetworkStatusObserverComponent } from 'networkstatusobserver';",
"codeAnnotation": "/**\n * 功能描述：本示例展示如何使用网络连接管理接口监听网络状态，实现视频根据不同网络修改播放状态的功能。。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/networkstatusobserver/README.md\n */",
"napi": false
}
},
{
"name": "3D立方体旋转轮播实现案例",
"id": "174",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/cube_rotate_animation.gif",
"description": "本示例展示了如何通过使用Swiper组件的customContentTransition属性和rotate属性实现3D立方体旋转轮播效果，增强用户交互体验。每次用户滑动轮播项时，都会展示生动的3D立方体旋转过渡效果。组件支持通过控制器对象动态更新轮播数据，包括添加、删除、替换等操作。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/cuberotateanimation/",
"caseRepositoriesInfo": "",
"insertCode": "CubeRotateAnimationSamplePage()",
"importCode": "import { CubeRotateAnimationSamplePage } from 'cuberotateanimation';",
"codeAnnotation": "/**\n * 功能描述：本示例展示了如何通过使用Swiper组件的customContentTransition属性和rotate属性实现3D立方体旋转轮播效果，增强用户交互体验。每次用户滑动轮播项时，都会展示生动的3D立方体旋转过渡效果。组件支持通过控制器对象动态更新轮播数据，包括添加、删除、替换等操作。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/cuberotateanimation/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "native",
"typeDesc": "Native",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "Native保存图片到应用沙箱",
"id": "41",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_image2sandbox.gif",
"description": "本示例主要介绍Native如何将网络上的图片及Rawfile中的图片保存到应用沙箱中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/nativesavepictosandbox/",
"caseRepositoriesInfo": "",
"insertCode": "NativePictureToSandboxViewComponent()",
"importCode": "import { NativePictureToSandboxViewComponent } from 'nativesavepictosandbox';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍Native如何将网络上的图片及Rawfile中的图片保存到应用沙箱中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativesavepictosandbox/README.md\n */",
"napi": true
}
},
{
"name": "在Native侧实现进度通知功能",
"id": "22",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_progress_notify.gif",
"description": "本示例介绍如何通过自定义native侧下载方法startDownload将Native的进度信息实时同步到ArkTS侧的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/nativeprogressnotify/",
"caseRepositoriesInfo": "",
"insertCode": "NativeProgressNotifyComponent()",
"importCode": "import { NativeProgressNotifyComponent } from 'nativeprogressnotify';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何通过自定义native侧下载方法startDownload将Native的进度信息实时同步到ArkTS侧的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativeprogressnotify/README.md\n */",
"napi": true
}
},
{
"name": "XComponent + Vsync 实现自定义动画",
"id": "97",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/xcomponent_vsync.gif",
"description": "XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/xcomponentvsync/",
"caseRepositoriesInfo": "",
"insertCode": "XcomponentVsyncComponent()",
"importCode": "import { XcomponentVsyncComponent } from 'xcomponentvsync';",
"codeAnnotation": "/**\n * 功能描述： XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/xcomponentvsync/README.md\n */",
"napi": true
}
}
]
},
{
"typeInfo": {
"typeName": "library",
"typeDesc": "三方库",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "配置ImageKnife请求头实现防盗链功能",
"id": "71",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_theft.gif",
"description": "使用第三方库imageknife，通过在请求头中添加Referer来实现防盗链图片的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagetheft/",
"caseRepositoriesInfo": "",
"insertCode": "ImageTheftComponent()",
"importCode": "import { ImageTheftComponent } from 'imagetheft';",
"codeAnnotation": "/**\n * 功能描述：使用第三方库imageknife，通过在请求头中添加Referer来实现防盗链图片的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagetheft/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "performance",
"typeDesc": "性能示例",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "全局自定义组件复用实现案例",
"id": "125",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_reusable_pool.gif",
"description": "本示例是全局自定义组件复用实现的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/perfermance/customreusablepool/",
"caseRepositoriesInfo": "",
"insertCode": "BuilderNodePoolDemoComponent()",
"importCode": "import { BuilderNodePoolDemoComponent } from 'customreusablepool';",
"codeAnnotation": "/**\n * 功能描述：本示例是全局自定义组件复用实现的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/customreusablepool/README.md\n */",
"napi": false
}
}
],
"repositoriesInfoList": [
{
"name": "解决相机预览花屏案例",
"id": "176",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/deal_stride_solution.gif",
"description": "本示例用于开发者在使用相机服务时，如果仅用于预览流展示，通常使用XComponent组件实现，如果需要获取每帧图像做二次处理（例如获取每帧图像完成二维码识别或人脸识别场景），可以通过ImageReceiver中imageArrival事件监听预览流每帧数据，解析图像内容。在解析图像内容时，如果未考虑stride，直接通过使用width*height读取图像内容去解析图像，会导致相机预览异常，从而出现相机预览花屏的现象。当预览流图像stride与width不一致时，需要对stride进行无效像素的去除处理。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/dealstridesolution/",
"caseRepositoriesInfo": "",
"insertCode": "DealStrideSolutionComponent()",
"importCode": "import { DealStrideSolutionComponent } from 'dealstridesolution';",
"codeAnnotation": "/**\n * 功能描述：本示例用于开发者在使用相机服务时，如果仅用于预览流展示，通常使用XComponent组件实现，如果需要获取每帧图像做二次处理（例如获取每帧图像完成二维码识别或人脸识别场景），可以通过ImageReceiver中imageArrival事件监听预览流每帧数据，解析图像内容。在解析图像内容时，如果未考虑stride，直接通过使用width*height读取图像内容去解析图像，会导致相机预览异常，从而出现相机预览花屏的现象。当预览流图像stride与width不一致时，需要对stride进行无效像素的去除处理。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/feature/dealstridesolution/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "other",
"typeDesc": "其他",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "视频下载保存及剪辑压缩上传",
"id": "177",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_trimmer.gif",
"description": "本示例主要介绍从网上下载视频到相册，以及从相册中选择视频进行剪辑、压缩、以及上传到服务器进行保存。从相册中选择一个视频保存到沙箱中，再使用FFmpeg命令对沙箱中的视频进行压缩、剪辑。最后使用request.agent将剪辑后的视频上传到服务器进行保存。主要用于在平台上发布视频。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videotrimmer/",
"caseRepositoriesInfo": "",
"insertCode": "VideoTrimmerHomePage()",
"importCode": "import { VideoTrimmerHomePage } from 'videotrimmer';",
"codeAnnotation": "/**\n * 功能描述：通过MP4Parser的ffmpegCmd方法截取视频的首页图片以及对某一个时间段的视频进行截取、压缩，并通过request.agent将剪辑后的视频保存到服务器。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videotrimmer/README.md\n */",
"napi": false
}
},
{
"name": "数据库版本升级案例",
"id": "74",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/database_upgrade.gif",
"description": "本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/databaseupgrade/",
"caseRepositoriesInfo": "",
"insertCode": "DatabaseUpgradeComponent()",
"importCode": "import { DatabaseUpgradeComponent } from 'databaseupgrade';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/databaseupgrade/README.md\n */",
"napi": false
}
},
{
"name": "多文件下载监听案例",
"id": "62",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/multiple_files_download.gif",
"description": "多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务，相关规格说明请参考request.agent.create。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/multiplefilesdownload/",
"caseRepositoriesInfo": "",
"insertCode": "MultipleFilesDownloadComponent()",
"importCode": "import { MultipleFilesDownloadComponent } from 'multiplefilesdownload';",
"codeAnnotation": "/**\n * 功能描述：多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务，相关规格说明请参考request.agent.create。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/multiplefilesdownload/README.md\n */",
"napi": false
}
},
{
"name": "图片选择和下载保存案例",
"id": "16",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/photo_pick_and_save.gif",
"description": "本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/photopickandsave/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PictureManagerComponent()",
"importCode": "import { PictureManagerComponent } from 'photopickandsave';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/photopickandsave/README.md\n */",
"napi": false
}
},
{
"name": "图片压缩方案",
"id": "45",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_compression.gif",
"description": "图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagecompression/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageCompressionComponent()",
"importCode": "import { ImageCompressionComponent } from 'imagecompression';",
"codeAnnotation": "/**\n * 功能描述：图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagecompression/README.md\n */",
"napi": false
}
},
{
"name": "图片缩放效果实现",
"id": "7",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/picturepreview_example.gif",
"description": "图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imageviewer/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "PicturePreviewSample()",
"importCode": "import { PicturePreviewSample } from 'imageviewer';",
"codeAnnotation": "/**\n * 功能描述：图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageviewer/README_PREVIEW_IMAGE.md\n */",
"napi": false
}
},
{
"name": "Worker子线程中解压文件",
"id": "31",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/decompress_file.gif",
"description": "本示例介绍在Worker 子线程使用@ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作，解压成功后将解压路径返回主线程，获取解压文件列表。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/decompressfile/",
"caseRepositoriesInfo": "",
"insertCode": "DecompressFileViewComponent()",
"importCode": "import { DecompressFileViewComponent } from 'decompressfile';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍在Worker 子线程使用@ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作，解压成功后将解压路径返回主线程，获取解压文件列表。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/decompressfile/README.md\n */",
"napi": false
}
},
{
"name": "Web组件预览PDF文件实现案例",
"id": "79",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_pdf_viewer.gif",
"description": "本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webpdfviewer/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebPDFViewerComponent()",
"importCode": "import { WebPDFViewerComponent } from 'webpdfviewer';",
"codeAnnotation": "/**\n * 功能描述：本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpdfviewer/README.md\n */",
"napi": false
}
},
{
"name": "表情聊天案例",
"id": "102",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/chat_with_expression.gif",
"description": "本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/chatwithexpression/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ChatWithExpressionComponent()",
"importCode": "import { ChatWithExpressionComponent } from 'chatwithexpression';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/chatwithexpression/README.md\n */",
"napi": false
}
},
{
"name": "Web获取相机拍照图片案例",
"id": "52",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_get_camera_image.gif",
"description": "本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webgetcameraimage/",
"caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
"insertCode": "WebGetCameraImageView()",
"importCode": "import { WebGetCameraImageView } from 'webgetcameraimage';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webgetcameraimage/README.md\n */",
"napi": false
}
},
{
"name": "水印案例",
"id": "114",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/water_mark.gif",
"description": "在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/watermark/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MainViewComponent()",
"importCode": "import { MainViewComponent } from 'watermark';",
"codeAnnotation": "/**\n * 功能描述：在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/watermark/README.md\n */",
"napi": false
}
},
{
"name": "根据icon自适应背景颜色",
"id": "83",
"image": "https://gitee.com/fanjiaojiaoar/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/icon_main_color.png",
"description": "本示例将介绍如何根据图片设置自适应的背景色。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/iconmaincolor/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "IconMainColorComponent()",
"importCode": "import { IconMainColorComponent } from 'iconmaincolor';",
"codeAnnotation": "/**\n * 功能描述：本示例将介绍如何根据图片设置自适应的背景色。\n * 参数介绍：无\n * README：https://gitee.com/fanjiaojiaoar/cases/blob/master/CommonAppDevelopment/feature/iconmaincolor/README.md\n */",
"napi": false
}
},
{
"name": "使用colorPicker实现背景跟随主题颜色转换",
"id": "85",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/color_picker.gif",
"description": "本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/effectkit/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "MainPageComponent()",
"importCode": "import { MainPageComponent } from 'effectkit';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/effectkit/README.md\n */",
"napi": false
}
},
{
"name": "Text实现部分文本高亮和超链接样式",
"id": "109",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/styled_text.gif",
"description": "本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。此外还可以通过属性字符串灵活设置文本样式实现同样效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/styledtext/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "StyledTextMainPageComponent()",
"importCode": "import { StyledTextMainPageComponent } from 'styledtext';",
"codeAnnotation": "/**\n * 功能描述：本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。此外还可以通过属性字符串灵活设置文本样式实现同样效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/styledtext/README.md\n */",
"napi": false
}
},
{
"name": "标题下拉缩放案例",
"id": "47",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/expand_title.gif",
"description": "本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/expandtitle/",
"caseRepositoriesInfo": "",
"insertCode": "TitleExpansionView()",
"importCode": "import { TitleExpansionView } from 'expandtitle';",
"codeAnnotation": "/**\n * 功能描述：本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/expandtitle/README.md\n */",
"napi": false
}
},
{
"name": "PixelMap深拷贝案例",
"id": "77",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_depthcopy.gif",
"description": "本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagedepthcopy/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageDepthCopyComponent()",
"importCode": "import { ImageDepthCopyComponent } from 'imagedepthcopy';",
"codeAnnotation": "/**\n * 功能描述：本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagedepthcopy/README.md\n */",
"napi": false
}
},
{
"name": "汉字转拼音案例",
"id": "56",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/Chinese_to_pinyin.gif",
"description": "本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/chinesetopinyin/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ChineseToPinyinComponent()",
"importCode": "import { ChineseToPinyinComponent } from 'chinesetopinyin';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/chinesetopinyin/README.md\n */",
"napi": false
}
},
{
"name": "图片混合案例",
"id": "107",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/blend_mode.gif",
"description": "本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/blendmode/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "BlendModeViewComponent()",
"importCode": "import { BlendModeViewComponent } from 'blendmode';",
"codeAnnotation": "/**\n * 功能描述：本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/blendmode/README.md\n */",
"napi": false
}
},
{
"name": "图片编辑实现马赛克效果",
"id": "131",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_mosaic.gif",
"description": "本实例介绍如何将图片中手指划过的区域分割成若干个大小一致的小方格，并通过createPixelMapSync接口将新的像素点数据写入图片，实现局部马赛克的效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagemosaic/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImageMosaicViewComponent()",
"importCode": "import { ImageMosaicViewComponent } from 'imagemosaic';",
"codeAnnotation": "/**\n * 功能描述：本实例介绍如何将图片中手指划过的区域分割成若干个大小一致的小方格，并通过createPixelMapSync接口将新的像素点数据写入图片，实现局部马赛克的效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagemosaic/README.md\n */",
"napi": false
}
},
{
"name": "画笔调色板案例",
"id": "130",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/palette.gif",
"description": "本示例实现了一个网格渐变的画笔调色板，能够根据给定的 HSL 类型颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/palette/",
"caseRepositoriesInfo": "",
"insertCode": "PaletteComponent()",
"importCode": "import { PaletteComponent } from 'palette';",
"codeAnnotation": "/**\n * 功能描述：本示例实现了一个网格渐变的画笔调色板，能够根据给定的 HSL 类型颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/palette/README.md\n */",
"napi": false
}
},
{
"name": "发布图片评论",
"id": "29",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_comment.gif",
"description": "本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imagecomment/",
"caseRepositoriesInfo": "",
"insertCode": "ImageCommentViewComponent()",
"importCode": "import { ImageCommentViewComponent } from 'imagecomment';",
"codeAnnotation": "/**\n * 功能描述：本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagecomment/README.md\n */",
"napi": false
}
},
{
"name": "图片拖拽AI抠图案例",
"id": "49",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_enableanalyzer.gif",
"description": "本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/imageenableanalyzer/",
"caseRepositoriesInfo": "",
"insertCode": "ImageViewComponent()",
"importCode": "import { ImageViewComponent } from 'imageenableanalyzer';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageenableanalyzer/README.md\n */",
"napi": false
}
},
{
"name": "滑动视频自动播放",
"id": "137",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_list_autoplay.gif",
"description": "利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/videolistautoplay/",
"caseRepositoriesInfo": "",
"insertCode": "VideoListAutoplayComponent()",
"importCode": "import { VideoListAutoplayComponent } from 'videolistautoplay';",
"codeAnnotation": "/**\n * 功能描述：利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videolistautoplay/README.md\n */",
"napi": false
}
},
{
"name": "文字识别案例",
"id": "84",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/word_recognition.gif",
"description": "本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/wordrecognition/",
"caseRepositoriesInfo": "",
"insertCode": "WordRecognitionComponent()",
"importCode": "import { WordRecognitionComponent } from 'wordrecognition';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/wordrecognition/README.md\n */",
"napi": false
}
},
{
"name": "多层嵌套类对象监听",
"id": "15",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/variable_watch.gif",
"description": "本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/variablewatch/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "VariableWatchViewComponent()",
"importCode": "import { VariableWatchViewComponent } from 'variablewatch';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/variablewatch/README.md\n */",
"napi": false
}
},
{
"name": "Web自定义长按菜单案例",
"id": "92",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_custom_menu.gif",
"description": "本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webcustompressmenu/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebCustomPressMenuComponent()",
"importCode": "import { WebCustomPressMenuComponent } from 'webcustompressmenu';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webcustompressmenu/README.md\n */",
"napi": false
}
},
{
"name": "大文件拷贝案例",
"id": "53",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/big_file_copy.gif",
"description": "文件拷贝是应用开发中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是使用buffer多次读写。前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/bigfilecopy/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "BigFileCopyViewComponent()",
"importCode": "import { BigFileCopyViewComponent } from 'bigfilecopy';",
"codeAnnotation": "/**\n * 功能描述：文件拷贝是应用开发中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是使用buffer多次读写。前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/bigfilecopy/README.md\n */",
"napi": false
}
},
{
"name": "应用新功能引导实现案例",
"id": "73",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/high_light_guide.gif",
"description": "本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比，让用户快速锁定重点功能，了解版本变更和业务入口。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/highlightguide/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "HighLightGuideMainComponent()",
"importCode": "import { HighLightGuideMainComponent } from 'highlightguide';",
"codeAnnotation": "/**\n * 功能描述：本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比，让用户快速锁定重点功能，了解版本变更和业务入口。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/highlightguide/README.md\n */",
"napi": false
}
},
{
"name": "侧滑返回事件拦截案例",
"id": "66",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/side_slip_Intercept.gif",
"description": "本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/sideslipintercept/",
"caseRepositoriesInfo": "",
"insertCode": "SideslipIntercept()",
"importCode": "import { SideslipIntercept } from 'sideslipintercept';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sideslipintercept/README.md\n */",
"napi": false
}
},
{
"name": "多媒体发布",
"id": "155",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/publish_multimedia_updates.gif",
"description": "本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。 该场景多用于社交软件朋友圈、评论动态发布的场景。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/publishmultimediaupdates/",
"caseRepositoriesInfo": "",
"insertCode": "PublishMultimediaUpdates()",
"importCode": "import { PublishMultimediaUpdates } from 'publishmultimediaupdates';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。 该场景多用于社交软件朋友圈、评论动态发布的场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/publishmultimediaupdates/README.md\n */",
"napi": false
}
},
{
"name": "发短信案例",
"id": "127",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/send_message.gif",
"description": "本示例介绍如何在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/sendmessage/",
"caseRepositoriesInfo": "",
"insertCode": "MessageView()",
"importCode": "import { MessageView } from 'sendmessage';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍如何在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sendmessage/README.md\n */",
"napi": false
}
},
{
"name": "AI图片文字智能识别",
"id": "144",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/address_recognize.gif",
"description": "本示例使用CoreVisionKit智能识别图片中的文字，并使用NaturalLanguageKit自然语言处理工具集将识别的文字智能转换为姓名、手机、地址等信息。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/addressrecognize/",
"caseRepositoriesInfo": "",
"insertCode": "AddressRecognize()",
"importCode": "import { AddressRecognize } from 'addressrecognize';",
"codeAnnotation": "/**\n * 功能描述：本示例使用CoreVisionKit智能识别图片中的文字，并使用NaturalLanguageKit自然语言处理工具集将识别的文字智能转换为姓名、手机、地址等信息。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/addressrecognize/README.md\n */",
"napi": false
}
},
{
"name": "H5页面资源离线缓存案例",
"id": "145",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/h5_cache.gif",
"description": "本模块结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/h5cache/",
"caseRepositoriesInfo": "",
"insertCode": "H5Cache()",
"importCode": "import { H5Cache } from 'h5cache';",
"codeAnnotation": "/**\n * 功能描述：本模块结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/h5cache/README.md\n */",
"napi": false
}
},
{
"name": "启动页实现案例",
"id": "146",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/window_start_icon.gif",
"description": "本示例介绍了如何实现全屏启动页。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/advertisingpage/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "AdvertisingPageComponent()",
"importCode": "import { AdvertisingPageComponent } from 'advertisingpage';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了如何实现全屏启动页。\n * 参数介绍：isShow：控制启动页是否显示 * README：https://gitee.com/wangzhiyusss/cases_1/blob/master/CommonAppDevelopment/doc/WINDOW_SATART_ICON.md\n */",
"napi": false
}
},
{
"name": "应用异常处理案例",
"id": "17",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/application_exception.gif",
"description": "本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法，主要分为应用崩溃、应用卡死以及系统查杀三种。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/applicationexception/",
"caseRepositoriesInfo": "",
"insertCode": "ApplicationExceptionView()",
"importCode": "import { ApplicationExceptionView } from 'applicationexception';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法，主要分为应用崩溃、应用卡死以及系统查杀三种。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/applicationexception/README.md\n */",
"napi": false
}
},
{
"name": "Web页面长截图",
"id": "101",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_snapshot.gif",
"description": "本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/webpagesnapshot/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "WebPageSnapshotComponent()",
"importCode": "import { WebPageSnapshotComponent } from 'webpagesnapshot';",
"codeAnnotation": "/**\n * 功能描述：本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpagesnapshot/README.md\n */",
"napi": false
}
},
{
"name": "GBK文本格式解码",
"id": "12",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/gbk_friends_book.jpeg",
"description": "本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/gbktranscoding/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "FriendsBookComponent()",
"importCode": "import { FriendsBookComponent } from 'gbktranscoding';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/gbktranscoding/README.md\n */",
"napi": false
}
},
{
"name": "视频悬浮窗案例",
"id": "161",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pip_window.gif",
"description": "本示例主要介绍视频小窗口播放场景，利用媒体的AVPlayer实现视频播放以及相关操作，利用PiPWindow开启悬浮窗从而实现小窗口播放视频。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/pipwindow/",
"caseRepositoriesInfo": "",
"insertCode": "PipWindowViewComponent()",
"importCode": "import { PipWindowViewComponent } from 'pipwindow';",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍视频小窗口播放场景，利用媒体的AVPlayer实现视频播放以及相关操作，利用PiPWindow开启悬浮窗从而实现小窗口播放视频。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pipwindow/README.md\n */",
"napi": false
}
},
{
"name": "地图定位打卡案例",
"id": "162",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/clock_in.gif",
"description": "本示例使用[geoLocationManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-geolocationmanager-V5)进行地理位置定位和地理信息获取，并利用[MapComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-mapcomponent-V5)组件展示地图，添加用户位置和打卡范围，通过计算用户位置和打卡中心点的距离判断用户是否处于打卡区域，实现了打卡功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/clockin/",
"caseRepositoriesInfo": "",
"insertCode": "ClockInSamplePage()",
"importCode": "import { ClockInSamplePage } from 'clockin';",
"codeAnnotation": "/**\n * 功能描述：本示例使用geoLocationManager进行地理位置定位和地理信息获取，并利用MapComponent组件展示地图，添加用户位置和打卡范围，通过计算用户位置和打卡中心点的距离判断用户是否处于打卡区域，实现了打卡功能。\n * 参数介绍：clockInController: 打卡组件控制器，isInArea: 是否在打卡范围内，isLocationButtonVisible: 是否显示右下角定位按钮，locationButtonPosition: 设置定位按钮位置，mapOptions: 地图初始化参数，getMapController: 获取地图控制器的方法，customInfoWindowSlotParam: 自定义信息窗口插槽\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/clockin/README.md\n */",
"napi": false
}
},
{
"name": "文件压缩案例",
"id": "164",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media//compress_file.gif",
"description": "本示例介绍使用zlib.compressfile接口在worker子线程中进行文件压缩。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/compressfile/",
"caseRepositoriesInfo": "",
"insertCode": "CompressFileViewComponent()",
"importCode": "import { CompressFileViewComponent } from 'compressfile';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用zlib.compressfile接口在worker子线程中进行文件压缩。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/compressfile/README.md\n */",
"napi": false
}
},
{
"name": "用户隐私协议案例",
"id": "165",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/privacy_agreement.gif",
"description": "本示例主要介绍使用web组件实现隐私协议与用户协议的展示。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/privacyagreement/",
"caseRepositoriesInfo": "",
"insertCode": "PrivacyAgreementComponent()",
"importCode": "import { PrivacyAgreementComponent } from 'privacyagreement';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用web组件加载用户协议、隐私协议等场景。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/privacyagreement/README.md\n */",
"napi": false
}
},
{
"name": "人脸指纹解锁案例",
"id": "173",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/face_and_finger_print_unlocking.PNG",
"description": "本示例介绍了使用@ohos.userIAM.userAuth用户认证服务实现人脸或指纹识别的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/faceandfingerprintunlocking/",
"caseRepositoriesInfo": "",
"insertCode": "FaceAndFingerprintUnlockingComponent()",
"importCode": "import { FaceAndFingerprintUnlockingComponent } from 'faceandfingerprintunlocking';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了使用@ohos.userIAM.userAuth用户认证服务实现人脸或指纹识别的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/faceandfingerprintunlocking/README.md\n */",
"napi": false
}
},
{
"name": "智能填充案例",
"id": "178",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/smart_fill.gif",
"description": "本示例介绍了使用智能填充自动补充表单的功能。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/smartfill/",
"caseRepositoriesInfo": "",
"insertCode": "SmartFillComponent()",
"importCode": "import { SmartFillComponent } from 'smartfill';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了使用智能填充自动补充表单的功能。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/smartfill/README.md\n */",
"napi": false
}
}
]
},
{
"typeInfo": {
"typeName": "perfermance",
"typeDesc": "性能示例",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "使用ArkUI的FrameNode扩展实现动态布局类框架",
"id": "135",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/imperative_dynamic_layouts.gif",
"description": "本实例主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/perfermance/imperativedynamiclayouts/",
"caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
"insertCode": "ImperativeViewComponent()",
"importCode": "import { ImperativeViewComponent } from 'imperativedynamiclayouts';",
"codeAnnotation": "/**\n * 功能描述：本实例主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/imperativedynamiclayouts/README.md\n */",
"napi": false
}
},
{
"name": "在TaskPool线程中操作关系型数据库实现案例",
"id": "126",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/operate_rdb_in_taskpool.gif",
"description": "本示例通过通讯录场景实例进行讲解，介绍了在 TaskPool 线程中操作关系型数据库的方法，涵盖了单条插入（新增联系人）、批量插入（通讯录同步）、删除（删除联系人）、修改（更新联系人信息）和查询等基本操作。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/perfermance/operaterdbintaskpool/",
"caseRepositoriesInfo": "",
"insertCode": "OperateRDBInTaskPool()",
"importCode": "import { OperateRDBInTaskPool } from 'operaterdbintaskpool';",
"codeAnnotation": "/**\n * 功能描述：本示例通过通讯录场景实例进行讲解，介绍了在 TaskPool 线程中操作关系型数据库的方法，涵盖了单条插入（新增联系人）、批量插入（通讯录同步）、删除（删除联系人）、修改（更新联系人信息）和查询等基本操作。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/operaterdbintaskpool/README.md\n */",
"napi": false
}
},
{
"name": "自定义动效tab",
"id": "126",
"image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif",
"description": "本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。",
"codeInfo": {
"casePath": "CommonAppDevelopment/feature/customanimationtab/",
"caseRepositoriesInfo": "",
"insertCode": "CustomAnimationTabView()",
"importCode": "import { CustomAnimationTabView } from '@ohos-cases/custom_animation_tab';",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。\n * 参数介绍：无\n * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/customanimationtab/README.md\n */",
"napi": false
}
}
]
}
]
},
{
"category": {
"categoryName": "library",
"categoryDesc": "三方库"
},
"categoryDetailList": [
{
"typeInfo": {
"typeName": "animation",
"typeDesc": "",
"typeDetail": ""
},
"repositoriesInfoList": [
{
"name": "lottie",
"id": "1",
"image": "",
"description": "Lottie is an animation library for OpenHarmony that parses Adobe After Effects animations, exported as JSON files with Bodymovin, and renders them natively on mobile devices.",
"codeInfo": {
"insertCode": "Canvas(this.politeChickyController)\n .width(150)\n .height(150)\n .backgroundColor(\"#46B1E3\")\n .borderRadius(12)\n .onReady(() => {\n // TODO:知识点:必须要Canvas组件初始化之后才能执行lottie.loadAnimation方法去加载动画。\n this.initAnimation();\n })\n .onClick(() => {\n this.animateItem?.goToAndPlay(0);\n })",
"importCode": "import lottie, { AnimationItem } from '@ohos/lottie';",
"dependenciesName": "@ohos/lottie",
"dependenciesVersion": "2.0.14",
"codeAnnotation": "/**\n * 功能描述：Lottie is an animation library for OpenHarmony that parses Adobe After Effects animations, exported as JSON files with Bodymovin, and renders them natively on mobile devices.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie\n */",
"napi": false,
"permissions":[
"ohos.permission.INTERNET"
],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// TODO:知识点:页面销毁时需要调用lottie的资源回收\n if (this.animateItem !== undefined) {\n this.animateItem.destroy();\n }",
"methodName":"aboutToDisappear"
},
{
"fileType":2,
"methodPosition":0,
"code":"private politeChickyController: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象\n private politeChicky: string = 'politeChicky'; // 动画名称\n private politeChickyPath: string = '请填入lottie动画资源文件路径'; // hap包内动画资源文件路径，仅支持json格式\n private animateItem: AnimationItem | undefined = undefined; // 初始化loadAnimation接口的返回对象\n/**\n * 加载动画\n * @param autoplay 控制动画是否自动播放参数\n */\n initAnimation() {\n // TODO:知识点:lottie.loadAnimation将json数据生成动画\n this.animateItem = lottie.loadAnimation({\n container: this.politeChickyController,\n renderer: 'canvas',\n loop: false,\n autoplay: false,\n name: this.politeChicky,\n path: this.politeChickyPath,\n initialSegment: [60, 120]\n })\n }\n ",
"methodName":""
}
]
}
},
{
"name": "ImageKnife",
"id": "2",
"image": "",
"description": "专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。",
"codeInfo": {
"insertCode": "ImageKnifeComponent({\n imageKnifeOption: new ImageKnifeOption({\n loadSrc: \"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png\",\n objectFit: ImageFit.Auto\n })\n}).width(100).height(100)",
"importCode": "import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/imageknife';",
"dependenciesName": "@ohos/imageknife",
"dependenciesVersion": "3.1.0",
"codeAnnotation": "/**\n * 功能描述：专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fimageknife\n */",
"napi": false,
"permissions":[
"ohos.permission.INTERNET"
],
"extraInfos":[]
}
},
{
"name": "MMKV for HarmonyOS NEXT",
"id": "3",
"image": "",
"description": "MMKV is an efficient, small, easy-to-use mobile key-value storage framework used in the WeChat application. It's now available on HarmonyOS NEXT.",
"codeInfo": {
"insertCode": "",
"importCode": "import { MMKV } from '@tencent/mmkv';",
"dependenciesName": "@tencent/mmkv",
"dependenciesVersion": "2.0.1",
"codeAnnotation": "/**\n * 功能描述：MMKV is an efficient, small, easy-to-use mobile key-value storage framework used in the WeChat application. It's now available on HarmonyOS NEXT.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@tencent%2Fmmkv\n */",
"napi": false,
"extraInfos":[
{
"fileType":1,
"methodPosition":0,
"code":"let appCtx = this.context.getApplicationContext();\n let mmkvRootDir = MMKV.initialize(appCtx);\n console.info('mmkv rootDir: ', mmkvRootDir);",
"methodName":"onCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"import { MMKV } from '@tencent/mmkv';",
"methodName":""
},
{
"fileType":2,
"methodPosition":0,
"code":"let mmkv = MMKV.defaultMMKV();\nmmkv.encodeBool('bool', true);\nconsole.info('bool = ', mmkv.decodeBool('bool'));",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "crypto-js",
"id": "4",
"image": "",
"description": "本软件是移植开源软件 crypto-js 源码在OpenHarmony上进行功能适配，在OpenHarmony上已支持原库crypto-js的功能，目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2、AES、RC4、DES等。",
"codeInfo": {
"insertCode": "",
"importCode": "import { CryptoJS } from '@ohos/crypto-js';",
"dependenciesName": "@ohos/crypto-js",
"dependenciesVersion": "2.0.4",
"codeAnnotation": "/**\n * 功能描述：本软件是移植开源软件 crypto-js 源码在OpenHarmony上进行功能适配，在OpenHarmony上已支持原库crypto-js的功能，目前crypto-js已支持的算法有：MD5、SHA-1、SHA-256、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2、AES、RC4、DES等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fcrypto-js\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"let hash: CryptoJS.lib.WordArray = CryptoJS.MD5(\"123456\");\nlet key: string = 'secret key 1234';\n// 在需要使用AES加密的业务逻辑，调用AES加密\nlet encrypted: string = CryptoJS.AES.encrypt('hello world', key).toString();\n// 在需要把上面的加密块解密的业务逻辑，调用AES解密，注意key必须相同\nlet decrypted: CryptoJS.lib.WordArray = CryptoJS.AES.decrypt(encrypted, key);",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "Axios",
"id": "5",
"image": "",
"description": "Axios is a promise-based network request library that runs in Node.js and browsers. By adapting Axios v1.3.4, this library works with OpenHarmony while retaining the following features inherent in Axios.",
"codeInfo": {
"insertCode": "",
"importCode": "import axios, { Axios,AxiosResponse,AxiosError } from '@ohos/axios';",
"dependenciesName": "@ohos/axios",
"dependenciesVersion": "2.2.4",
"codeAnnotation": "/**\n * 功能描述：Axios is a promise-based network request library that runs in Node.js and browsers. By adapting Axios v1.3.4, this library works with OpenHarmony while retaining the following features inherent in Axios.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios\n */",
"napi": false,
"permissions":[
"ohos.permission.INTERNET"
],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"// Send a GET request.\naxios<string, AxiosResponse<string>, null>({\n method: 'get',\n url: 'https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios'\n}).then((res: AxiosResponse) => {\n console.info('result:' + JSON.stringify(res.data));\n}).catch((error: AxiosError) => {\n console.error(error.message);\n})",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "PullToRefresh",
"id": "6",
"image": "",
"description": "PullToRefresh is an OpenHarmony UI component which allows users to pull down on a list or a page to trigger a refresh action and pull up to trigger a load action. You can set built-in animation properties, customize animations, and use lazyForEarch data as the data source.",
"codeInfo": {
"insertCode": "PullToRefresh({\n // (Mandatory) Data source of the list component.\n data: $data,\n // (Mandatory) List or grid component in the main layout.\n scroller: this.scroller,\n // (Mandatory) Custom list or grid view.\n customList: () => {\n // A UI method decorated by @Builder.\n this.getListView();\n },\n // (Optional) Callback used to handle the pull-down refresh action.\n onRefresh: () => {\n return new Promise<string>((resolve, reject) => {\n // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to refresh the list data.\n setTimeout(() => {\n resolve('Refresh successful');\n this.data = [...this.dataNumbers];\n }, 2000);\n });\n },\n // (Optional) Callback used to handle the pull-up loading action.\n onLoadMore: () => {\n return new Promise<string>((resolve, reject) => {\n // Simulate a network request operation. When data is obtained 2 seconds after the network request, inform the component to update the list data.\n setTimeout(() => {\n resolve('');\n this.data.push(\"Added items\" + this.data.length);\n }, 2000);\n });\n },\n customLoad: null,\n customRefresh: null,\n })",
"importCode": "import { PullToRefresh } from '@ohos/pulltorefresh';",
"dependenciesName": "@ohos/pulltorefresh",
"dependenciesVersion": "2.1.1",
"codeAnnotation": "/**\n * 功能描述：PullToRefresh is an OpenHarmony UI component which allows users to pull down on a list or a page to trigger a refresh action and pull up to trigger a load action. You can set built-in animation properties, customize animations, and use lazyForEarch data as the data source.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"private scroller: Scroller = new Scroller();\n @State data: string[] = [];\n private dataNumbers: string[] =\n ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'];\n\n @Builder\n private getListView() {\n List({ space: 20, scroller: this.scroller }) {\n ForEach(this.data, (item: string) => {\n ListItem() {\n Text(item)\n .width('100%')\n .height(150)\n .fontSize(20)\n .textAlign(TextAlign.Center)\n .backgroundColor('#95efd2')\n }\n })\n }\n .backgroundColor('#eeeeee')\n .divider({ strokeWidth: 1, color: 0x222222 })\n .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果\n }",
"methodName":""
}
]
}
},
{
"name": "gpu_transform",
"id": "7",
"image": "",
"description": "该module通过获取图片的buffer数据，使用openGL、着色器（Shader），操作GPU，达到图片滤波器的效果。",
"codeInfo": {
"insertCode": "",
"importCode": "import { GPUImageVignetterFilter } from '@ohos/gpu_transform';\nimport { image } from '@kit.ImageKit';",
"dependenciesName": "@ohos/gpu_transform",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：该module通过获取图片的buffer数据，使用openGL、着色器（Shader），操作GPU，达到图片滤波器的效果。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgpu_transform\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"let imageSource: image.ImageSource = image.createImageSource(\"替换为本地沙箱文件路径\");\n let bitmap: image.PixelMap = imageSource.createPixelMapSync();\n //获取像素点数据\n let bufferData: ArrayBuffer = new ArrayBuffer(bitmap.getPixelBytesNumber());\n bitmap.readPixelsToBufferSync(bufferData);\n // 使用GPUImageVignetterFilter过滤器\n let filter = new GPUImageVignetterFilter();\n filter.setImageData(bufferData, this.targetWidth, this.targetHeight);\n //获取经过gpu处理的像素点数据\n let buf =await filter.getPixelMapBuf(0, 0, this.targetWidth, this.targetHeight);\n //像素点数据写入\n bitmap.writeBufferToPixels(buf);",
"methodName":"aboutToAppear"
},
{
"fileType":2,
"methodPosition":0,
"code":"private targetWidth: number = 100;\n private targetHeight: number = 100;",
"methodName":""
}
]
}
},
{
"name": "AGConnect Core SDK for HarmonyOS",
"id": "8",
"image": "",
"description": "AppGalleryConnect Core 是AGC业务的基础核心SDK，提供以下能力：\n提供AGC 上层业务SDK(Serverless、增长类服务)初始化\n提供读取agconnect-services.json配置文件的接口\n提供AAID获取接口\n提供对接AGC端侧网关的能力，SDK提供接口获取网关的认证凭据。",
"codeInfo": {
"insertCode": "",
"importCode": "import { getString ,getRegion,getClientSecret,getApiKey,getAaid ,getToken } from \"@hw-agconnect/hmcore\";",
"dependenciesName": "@hw-agconnect/hmcore",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：AppGalleryConnect Core 是AGC业务的基础核心SDK，提供以下能力：\n * 提供AGC 上层业务SDK(Serverless、增长类服务)初始化\n * 提供读取agconnect-services.json配置文件的接口\n * 提供AAID获取接口\n * 提供对接AGC端侧网关的能力，SDK提供接口获取网关的认证凭据。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgpu_transform\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":1,
"methodPosition":0,
"code":"//请确认agconnect-services.json文件是否存在，文件位置不做约束，由开发者自行导入\n initialize(this.context, json);",
"methodName":"onCreate"
},
{
"fileType":1,
"methodPosition":0,
"code":"import { initialize } from \"@hw-agconnect/hmcore\";\n// 导入你在AGC网站上下载的agconnect-services.json文件\nimport json from '../agconnect-services.json';",
"methodName":""
},
{
"fileType":2,
"methodPosition":0,
"code":"//采用通用方法获取\nlet client_id:string = getString('/client/client_id');\n// 直接通过SDK提供的方法获取\nlet region = getRegion();\n// 获取agconnect-services.json中的加密数据\nlet clientSecret = await getClientSecret();\nlet apiKey = await getApiKey();\n// SDK完成初始化后，获取AAID\nlet aaid = await getAaid();\n// 获取AGC网关的认证凭据\nlet token = await getToken();",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "Refresh",
"id": "9",
"image": "",
"description": "一款简单，高效的上拉下拉刷新组件，支持列表、网格、瀑布流、支持各种任意组件刷新，支持侧滑删除、条目吸顶，下滑二楼等功能。",
"codeInfo": {
"insertCode": "ListView({\n lazyDataSource: this.dataSource,\n itemLayout: (item, index) => this.itemLayout(item, index), //条目布局\n controller: this.controller, //控制器，负责关闭下拉和上拉\n onRefresh: () => {\n //下拉刷新\n //数据懒加载使用：\n //0、数据初始化，this.dataSource.initData()\n // 1、数组数据添加，this.dataSource.pushDataArray()，\n // 2、单个数据添加，this.dataSource.pushData()\n this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭\n },\n onLoadMore: () => {\n //上拉加载\n //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()\n this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭\n }\n})\nGridView({\n lazyDataSource: this.dataSource,\n itemLayout: (item, index) => this.itemLayout(item, index), //条目布局\n controller: this.controller, //控制器，负责关闭下拉和上拉\n onRefresh: () => {\n //下拉刷新\n //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()\n this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭\n },\n onLoadMore: () => {\n //上拉加载\n //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()\n this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭\n }\n})",
"importCode": "import {GridView, ListView, RefreshController, RefreshDataSource } from '@abner/refresh';",
"dependenciesName": "@abner/refresh",
"dependenciesVersion": "1.3.8",
"codeAnnotation": "/**\n * 功能描述：一款简单，高效的上拉下拉刷新组件，支持列表、网格、瀑布流、支持各种任意组件刷新，支持侧滑删除、条目吸顶，下滑二楼等功能。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Frefresh\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"/**\n * Author:AbnerMing\n * Describe:条目布局\n * @param item 数据对象\n * @param index 数据索引\n */\n@Builder\nitemLayout(item: Object, index: number): void {\n //条目视图，任意组件\n}",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量\ndataSource: RefreshDataSource = new RefreshDataSource()//数据懒加载操作对象，执行数据增删改查",
"methodName":""
}
]
}
},
{
"name": "httpclient",
"id": "10",
"image": "",
"description": "HTTP是现代应用程序通过网络交换数据和媒体的的主要方式。httpclient是OpenHarmony 里一个高效执行的HTTP客户端，使用它可使您的内容加载更快，并节省您的流量。httpclient以人们耳熟能详的OKHTTP为基础，整合android-async-http，AutobahnAndroid，OkGo等库的功能特性，致力于在OpenHarmony 打造一款高效易用，功能全面的网络请求库。",
"codeInfo": {
"insertCode": "",
"importCode": "import {Response, HttpClient,TimeUnit ,Request,Logger} from '@ohos/httpclient';",
"dependenciesName": "@ohos/httpclient",
"dependenciesVersion": "2.0.4",
"codeAnnotation": "/**\n * 功能描述：HTTP是现代应用程序通过网络交换数据和媒体的的主要方式。httpclient是OpenHarmony 里一个高效执行的HTTP客户端，使用它可使您的内容加载更快，并节省您的流量。httpclient以人们耳熟能详的OKHTTP为基础，整合android-async-http，AutobahnAndroid，OkGo等库的功能特性，致力于在OpenHarmony 打造一款高效易用，功能全面的网络请求库。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fhttpclient\n */",
"napi": false,
"permissions":["ohos.permission.INTERNET","ohos.permission.GET_NETWORK_INFO"],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"let status: string = '' // 响应码\n let content: string | Object | ArrayBuffer = '' // 响应内容\n let client: HttpClient = new HttpClient.Builder()\n .setConnectTimeout(10, TimeUnit.SECONDS)\n .setReadTimeout(10, TimeUnit.SECONDS)\n .setWriteTimeout(10, TimeUnit.SECONDS)\n .build();\n let request: Request = new Request.Builder()\n .get(\"https://postman-echo.com/get?foo1=bar1&foo2=bar2\")\n .addHeader(\"Content-Type\", \"application/json\")\n .params(\"testKey1\",\"testValue1\")\n .build();\n // 发起请求\n client.newCall(request).enqueue((result: Response) => {\n if (result) {\n status = result.responseCode.toString();\n }\n if (result.result) {\n content = result.result;\n } else {\n content = JSON.stringify(result);\n }\n Logger.info(\"onComplete -> Status : \" + status);\n Logger.info(\"onComplete -> Content : \" + JSON.stringify(content));\n }, (error: ESObject) => {\n status = error.code.toString();\n content = error.data;\n Logger.info(\"onError -> Error : \" + content);\n });",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "zxing",
"id": "11",
"image": "",
"description": "zxing是一个解析/生成一维码/二维码的库。",
"codeInfo": {
"insertCode": "",
"importCode": "import {MultiFormatReader, BarcodeFormat, DecodeHintType, RGBLuminanceSource, BinaryBitmap, HybridBinarizer , MultiFormatWriter, BitMatrix, ZXingStringEncoding, EncodeHintType} from \"@ohos/zxing\";\nimport { image } from \"@kit.ImageKit\";",
"dependenciesName": "@ohos/zxing",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：zxing是一个解析/生成一维码/二维码的库。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fzxing\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"let width: number = 100;\n let height: number = 100;\n // 解码（二维码转数据）\n const hints: Map<DecodeHintType, BarcodeFormat[]> = new Map();\n const formats = [BarcodeFormat.QR_CODE];\n hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);\n const reader = new MultiFormatReader();\n reader.setHints(hints);\n let pic:image.PixelMap = image.createImageSource(\"替换为二维码图片路径\").createPixelMapSync();\n let num:number = pic.getPixelBytesNumber();\n let arrayBuffer: ArrayBuffer = new ArrayBuffer(num);\n const luminances = new Int32Array(arrayBuffer);\n const luminanceSource = new RGBLuminanceSource(luminances, width, height);\n const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));\n let result = reader.decode(binaryBitmap);\n let text = result.getText();\n // 编码（数据转二维码）\n let content: string = \"123456\";\n const encodeHintTypeMap: Map<EncodeHintType, number> = new Map();\n //设置二维码边空白的宽度\n encodeHintTypeMap.set(EncodeHintType.MARGIN, 0);\n const writer: MultiFormatWriter = new MultiFormatWriter();\n let matrix: BitMatrix = writer.encode(content, BarcodeFormat.QR_CODE, width, height, encodeHintTypeMap);",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "ohos-svg",
"id": "12",
"image": "",
"description": "ohos-svg is used to parse and render SVG images on pages. This project supports most SVG 1.1 specifications, including basic shape, path, text, style, and gradient, and can render most standard SVG images. It features good performance and low memory usage.",
"codeInfo": {
"insertCode": "SVGImageView({ model: this.model })",
"importCode": "import { SVGImageView } from '@ohos/svg';",
"dependenciesName": "@ohos/svg",
"dependenciesVersion": "2.2.1",
"codeAnnotation": "/**\n * 功能描述：ohos-svg is used to parse and render SVG images on pages. This project supports most SVG 1.1 specifications, including basic shape, path, text, style, and gradient, and can render most standard SVG images. It features good performance and low memory usage.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fsvg\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":1,
"methodPosition":0,
"code":"GlobalContext.getContext().setObject(\"context\", this.context);",
"methodName":"onCreate"
},
{
"fileType":1,
"methodPosition":0,
"code":"import { GlobalContext } from '@ohos/svg/src/main/ets/components/GlobalContext';",
"methodName":""
},
{
"fileType":2,
"methodPosition":0,
"code":"model: SVGImageView.SVGImageViewModel = new SVGImageView.SVGImageViewModel();",
"methodName":""
}
]
}
},
{
"name": "DiskLruCache",
"id": "13",
"image": "",
"description": "专门为OpenHarmony打造的一款磁盘缓存库，通过LRU算法进行磁盘数据存取。",
"codeInfo": {
"insertCode": "",
"importCode": "import { DiskLruCache } from '@ohos/disklrucache';\nimport fs from '@ohos.file.fs';",
"dependenciesName": "@ohos/disklrucache",
"dependenciesVersion": "2.0.2",
"codeAnnotation": "/**\n * 功能描述：专门为OpenHarmony打造的一款磁盘缓存库，通过LRU算法进行磁盘数据存取。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fdisklrucache\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"// 使用应用缓存路径创建文件夹名称为diskLruCache,设置磁盘缓存大小为3M(可选参数，默认设置缓存大小为300M，最大设置不能超过300M)\nthis.testDiskLruCache = DiskLruCache.create(getContext(), 3 * 1024 * 1024)\n// 同步设置字符串缓存数据。\nlet data: string = \"Hello World Simple Example.\";\nthis.testDiskLruCache.set('test', data);\n// 同步读取字符串磁盘缓存数据。\nlet dataRead:ArrayBuffer = this.testDiskLruCache.get('test');",
"methodName":"aboutToAppear"
},
{
"fileType":2,
"methodPosition":0,
"code":"testDiskLruCache: DiskLruCache | undefined = undefined;",
"methodName":""
}
]
}
},
{
"name": "AGConnect Serverless SDK for HarmonyOS",
"id": "14",
"image": "",
"description": "AppGallery Connect Serverless针对应用开发领域做了深度支持。提供了主流应用平台的支持，完善的用户认证体系，以及丰富的应用领域微解决方案，可帮助开发者高效构建应用。 面向鸿蒙开发者，提供了端云一体化开发的开发体验。开发者可以在DevEco Studio中基于统一的技术栈，高效、协同地完成端、云代码的编写、调试、编译和部署，极大提高开发者构建鸿蒙应用和元服务的效率。",
"codeInfo": {
"insertCode": "",
"importCode": "import cloud ,{ SignInResult, VerifyCodeAction } from '@hw-agconnect/cloud';",
"dependenciesName": "@hw-agconnect/cloud",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：AppGallery Connect Serverless针对应用开发领域做了深度支持。提供了主流应用平台的支持，完善的用户认证体系，以及丰富的应用领域微解决方案，可帮助开发者高效构建应用。 面向鸿蒙开发者，提供了端云一体化开发的开发体验。开发者可以在DevEco Studio中基于统一的技术栈，高效、协同地完成端、云代码的编写、调试、编译和部署，极大提高开发者构建鸿蒙应用和元服务的效率。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@hw-agconnect%2Fcloud\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"async init() {\n// 申请验证码\ncloud.auth().requestVerifyCode({\n action: VerifyCodeAction.RESET_PASSWORD,\n lang: 'zh_CN',\n sendInterval: 60,\n verifyCodeType: {\n phoneNumber: \"188********\",\n countryCode: \"86\", \n kind: \"phone\",\n }\n})\n// 登录\nlet signInResult: SignInResult = await cloud.auth().signIn({\n autoCreateUser: true,\n credentialInfo: {\n kind: \"phone\",\n phoneNumber:\"188********\",\n countryCode: \"86\",\n verifyCode: \"验证码\"\n }\n})\nlet user = signInResult.getUser();\ncloud.auth().getCurrentUser().then((user) => {\n if (user == null) {\n console.info('no user login in')\n } else {\n console.info('getcurrentUser success: getUid' + user.getUid())\n}\n})\n}",
"methodName":""
},
{
"fileType":2,
"methodPosition":0,
"code":"this.init();",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "ef_ui",
"id": "15",
"image": "",
"description": "ef_ui是eftool的UI组件相关包.封装了常用的通知、拍照、定位、预览、全局loading、toast、alert、confirm等,提供丰富的UI组件。",
"codeInfo": {
"insertCode": "",
"importCode": "import { Cascade, ToastUtil, TipsUtil, AuthUtil, CameraUtil } from '@yunkss/ef_ui';import { fileUri } from '@kit.CoreFileKit';import fs from '@ohos.file.fs';",
"dependenciesName": "@yunkss/ef_ui",
"dependenciesVersion": "1.0.0",
"codeAnnotation": "/**\n * 功能描述：ef_ui是eftool的UI组件相关包.封装了常用的通知、拍照、定位、预览、全局loading、toast、alert、confirm等,提供丰富的UI组件。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@yunkss%2Fef_ui\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"// 单次校验一个权限,入参为需要校验的权限\n let result = await AuthUtil.checkPermissions('ohos.permission.APPROXIMATELY_LOCATION');\n if (!result) {\n //此处可调用拉起授权方法\n ToastUtil.showToast('用户未授权~');\n } else {\n ToastUtil.showToast('用户已授权~');\n }\n// picker 调起照相和录屏\n let bufferImg = new ArrayBuffer(40960000);\n //调起拍照\n let res = await CameraUtil.picker();\n if (res) {\n //此处只是举例操作\n let str = res.resultUri;\n let fileUriObject = new fileUri.FileUri(str);\n let name = fileUriObject.name;\n let file = fs.openSync(str, fs.OpenMode.READ_ONLY);\n fs.closeSync(file);\n }",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "APMS Harmony SDK",
"id": "16",
"image": "",
"description": "自动收集鸿蒙应用崩溃、挂起、打开性能、运行性能的日志和堆栈，在AGC上生成应用质量报告。 通过质量报告，您可以观察应用程序的用户体验，并相应地改进它们。",
"codeInfo": {
"insertCode": "",
"importCode": "",
"dependenciesName": "@hw-agconnect/ohos-apms",
"dependenciesVersion": "1.0.0",
"codeAnnotation": "/**\n * 功能描述：自动收集鸿蒙应用崩溃、挂起、打开性能、运行性能的日志和堆栈，在AGC上生成应用质量报告。 通过质量报告，您可以观察应用程序的用户体验，并相应地改进它们。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@hw-agconnect%2Fohos-apms\n */",
"napi": false,
"permissions":["ohos.permission.GET_BUNDLE_INFO","ohos.permission.INTERNET"],
"extraInfos":[
{
"fileType":1,
"methodPosition":0,
"code":"import { APMS } from '@hw-agconnect/ohos-apms';\n//导入您在AGC网站上下载的agconnect-services.json文件\nimport json from \"../XXX/agconnect-services.json\";",
"methodName":""
},
{
"fileType":1,
"methodPosition":0,
"code":"// 初始化\nAPMS.getInstance().start(this.context, json);\n// 自定义用户标识\nAPMS.getInstance().setUserIdentifier(\"自定义用户标识\");\n// 启动APMS\nAPMS.getInstance().setAPMSEnable(true);",
"methodName":"onCreate"
}
]
}
},
{
"name": "pinyin4js",
"id": "17",
"image": "",
"description": "适配了OpenHarmony的一款汉字转拼音的Javascript开源库，零依赖，词库灵活导入、打包，准确、完善的字库，拼音转换速度快，多拼音格式输出支持，常见多音字识别，简繁体中文转换，支持添加自定义字典。",
"codeInfo": {
"insertCode": "",
"importCode": "import {pinyin4js} from '@ohos/pinyin4js';",
"dependenciesName": "@ohos/pinyin4js",
"dependenciesVersion": "2.0.0",
"codeAnnotation": "/**\n * 功能描述：适配了OpenHarmony的一款汉字转拼音的Javascript开源库，零依赖，词库灵活导入、打包，准确、完善的字库，拼音转换速度快，多拼音格式输出支持，常见多音字识别，简繁体中文转换，支持添加自定义字典。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpinyin4js\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"// more detail methods in test\n // WITH_TONE_NUMBER--数字代表声调，WITHOUT_TONE--不带声调，WITH_TONE_MARK--带声调\n // output: xià#mén#nǐ#hǎo#dà#shà#xià#mén\n console.info(\"00771-\" + pinyin4js.convertToPinyinString('校对', '#', pinyin4js.WITH_TONE_MARK));\n console.info(\"00771-\" + pinyin4js.convertToPinyinString('學校', '#', pinyin4js.WITH_TONE_MARK));\n console.info(\"00772-\" + pinyin4js.convertToPinyinString('厦门你好大厦厦门', '#', pinyin4js.WITHOUT_TONE));\n // 首字母风格\n // output: xmnhdsxm\n console.info(\"00773-\" + pinyin4js.convertToPinyinString('厦门你好大厦厦门', '', pinyin4js.FIRST_LETTER));\n// 繁体转简体\n console.info(\"00775-\" + pinyin4js.convertToSimplifiedChinese('歲月時光'));\n // 简体转繁体\n console.info(\"00776-\" + pinyin4js.convertToTraditionalChinese('岁月时光'));",
"methodName":"aboutToAppear"
}
]
}
},
{
"name": "mcCharts",
"id": "18",
"image": "",
"description": "mcCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库。作为HarmonyOS一款开源的图表组件库，组件库将会提供以下图表：折线图、柱状图、饼图、散点图、雷达图等等。 并提供了配套的设计资源，充分满足可定制化的需求。",
"codeInfo": {
"insertCode": "McLineChart({\n options: this.seriesOption\n })",
"importCode": "import { McLineChart, Options } from '@mcui/mccharts';",
"dependenciesName": "@mcui/mccharts",
"dependenciesVersion": "2.8.4",
"codeAnnotation": "/**\n * 功能描述：mcCharts(莓创图表)是McUI提供的一款开箱即用的图表工具库。作为HarmonyOS一款开源的图表组件库，组件库将会提供以下图表：折线图、柱状图、饼图、散点图、雷达图等等。 并提供了配套的设计资源，充分满足可定制化的需求。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@mcui%2Fmccharts\n */",
"napi": false,
"permissions":[],
"extraInfos":[
{
"fileType":2,
"methodPosition":0,
"code":"setTimeout(() => {\n // 传递需要修改的属性与数值，不需要全部传\n this.seriesOption.setVal({\n series:[\n {\n name:'最高气温',\n data:[110, 110, 150, 130, 120, 190, 100]\n }\n ]\n })\n }, 2000)",
"methodName":"aboutToAppear"
},
{
"fileType":2,
"methodPosition":0,
"code":"// 初始化数据\n @State seriesOption: Options = new Options({\n xAxis:{\n data:['周一','周二','周三','周四','周五','周六','周日']\n },\n yAxis:{\n name:'温度'\n },\n series:[\n {\n name:'最高气温',\n data:[11, 11, 15, 13, 12, 130, 10]\n },\n {\n name:'最低气温',\n data:[1, -20, 2, 5, 3, 2, 0]\n }\n ]\n })",
"methodName":""
}
]
}
},
{
"name": "cjcalendar",
"id": "19",
"image": "",
"description": "cjcalendar 是一款日常开发常用的日历组件，内部集成常规、单选、时间范围选择、多选、自定义日期每项显示等。",
"codeInfo": {
"insertCode": "CJCalendar()",
"importCode": "import { CJCalendar } from 'cjcalendar';",
"dependenciesName": "cjcalendar",
"dependenciesVersion": "2.2.6",
"codeAnnotation": "/**\n * 功能描述：cjcalendar 是一款日常开发常用的日历组件，内部集成常规、单选、时间范围选择、多选、自定义日期每项显示等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/cjcalendar\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},
{
"name": "LoadingDialog",
"id": "20",
"image": "",
"description": "简单易用的 Harmony LoadingDialog。",
"codeInfo": {
"insertCode": "",
"importCode": "import LoadingDialog from '@lyb/loading-dialog';",
"dependenciesName": "@lyb/loading-dialog",
"dependenciesVersion": "2.1.5",
"codeAnnotation": "/**\n * 功能描述：简单易用的 Harmony LoadingDialog。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@lyb%2Floading-dialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"LoadingDialog.showLoading({\n msg: '这是一个loading',\n tintColor: Color.Red,\n textColor: Color.Yellow,\n })",
"methodName":"aboutToAppear"
}]
}
},
{
"name": "lv-markdown-in",
"id": "21",
"image": "",
"description": "鸿蒙原生Markdown解析预览库，可在OpenHarmony、HarmonyOS系统运行，兼容api9（1.x.x版本）、api10及以上（2.x.x版本），支持3种内容加载模式（纯文本、资源文件、沙箱文件） ，支持html常用标签解析，致力于更便捷的OpenHarmony设备的Markdown内容解析。",
"codeInfo": {
"insertCode": "LvMarkdownIn({\n text: \"替换为需要加载的md文本内容\", // content为文本内容\n loadMode: \"text\", // 默认text可省略\n loadCallBack: { // loadCallBack回调可省略\n success(r: LMICallBack) {\n console.log(\"luvi-markdown-in > \" + r.code, r.message)\n },\n fail(r: LMICallBack) {\n console.error(\"luvi-markdown-in > \" + r.code, r.message);\n }\n }\n})",
"importCode": "import { LvMarkdownIn, LMICallBack } from '@luvi/lv-markdown-in';",
"dependenciesName": "@luvi/lv-markdown-in",
"dependenciesVersion": "2.0.12",
"codeAnnotation": "/**\n * 功能描述：鸿蒙原生Markdown解析预览库，可在OpenHarmony、HarmonyOS系统运行，兼容api9（1.x.x版本）、api10及以上（2.x.x版本），支持3种内容加载模式（纯文本、资源文件、沙箱文件） ，支持html常用标签解析，致力于更便捷的OpenHarmony设备的Markdown内容解析。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@luvi%2Flv-markdown-in\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},
{
"name": "LiveEventBus",
"id": "22",
"image": "",
"description": "LiveEventBus是一款消息总线，具有生命周期感知能力，支持Sticky，支持跨进程，支持跨APP发送消息。",
"codeInfo": {
"insertCode": "Column() {\n Text('LiveEventBus Demo')\n .fontSize(30)\n .fontWeight(FontWeight.Bold)\n Button('关闭All').onClick(event => {\n //发送消息\n LiveEventBus.get(\"KEY_TEST_CLOSE_ALL_PAGE\").post(true);\n })\n }",
"importCode": "import { LiveEventBus,Lifecycle,MState } from '@ohos/liveeventbus';",
"dependenciesName": "@ohos/liveeventbus",
"dependenciesVersion": "2.1.1",
"codeAnnotation": "/**\n * 功能描述：LiveEventBus是一款消息总线，具有生命周期感知能力，支持Sticky，支持跨进程，支持跨APP发送消息。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fliveeventbus\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.mLifecycle.markState(MState.DESTROYED);",
"methodName":"aboutToDisappear"
},{
"fileType":2,
"methodPosition":0,
"code":"//订阅消息\n LiveEventBus\n .get<boolean>(\"KEY_TEST_CLOSE_ALL_PAGE\")\n .observe(this, {\n onChanged(b:boolean) {\n }\n });",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"//创建生命周期感知对象\nprivate mLifecycle: Lifecycle= new Lifecycle(MState.STARTED);\n//生命周期感知对象\n getLifecycle(): Lifecycle{\n return this.mLifecycle\n }",
"methodName":""
}]
}
},{
"name": "AGConnect Base SDK",
"id": "23",
"image": "",
"description": "AGConnect Base SDK提供基础工具类的接口能力：\n哈希算法：支持MD5和SHA256\nAES加解密\n数据本地存储：支持文件和Preference。",
"codeInfo": {
"insertCode": "",
"importCode": "import { Hash } from \"@hw-agconnect/base-ohos\";",
"dependenciesName": "@hw-agconnect/base-ohos",
"dependenciesVersion": "1.1.2",
"codeAnnotation": "/**\n * 功能描述：AGConnect Base SDK提供基础工具类的接口能力：哈希算法，支持MD5和SHA256；AES加解密；数据本地存储，支持文件和Preference。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@hw-agconnect%2Fapi-ohos\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"let str = Hash.md5(\"Hello, world!\");",
"methodName":"aboutToAppear"
}]
}
},{
"name": "hp-richtext",
"id": "24",
"image": "",
"description": "hp-richtext 是一个适用于 HarmonyOS 的富文本解析组件。",
"codeInfo": {
"insertCode": "HPRichTextV2({\n richTextModel: this.richTextModel\n })",
"importCode": "import { HPRichTextV2, RichTextOptionModelV2 } from '@ohasasugar/hp-richtext';",
"dependenciesName": "@ohasasugar/hp-richtext",
"dependenciesVersion": "3.0.4",
"codeAnnotation": "/**\n * 功能描述：hp-richtext 是一个适用于 HarmonyOS 的富文本解析组件。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohasasugar%2Fhp-richtext\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.richTextModel.richTextOption = {\n content: '我是 ComponentV2 的 HPRichText 组件',\n imageProp: {\n webp: true,\n }\n }",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"richTextModel: RichTextOptionModelV2 = new RichTextOptionModelV2();",
"methodName":""
}]
}
},{
"name": "Log4a",
"id": "25",
"image": "",
"description": "轻量、易集成、易使用，有时甚至可以不需写代码的HarmonyOS log系统，灵感来自log4j。",
"codeInfo": {
"insertCode": "",
"importCode": "import { LogManager, Logger } from '@pie/log4a';",
"dependenciesName": "@pie/log4a",
"dependenciesVersion": "1.5.13",
"codeAnnotation": "/**\n * 功能描述：轻量、易集成、易使用，有时甚至可以不需写代码的HarmonyOS log系统，灵感来自log4j。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@pie%2Flog4a\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"const logger: Logger = LogManager.getLogger(this);\nlogger.info('log message from log4a');",
"methodName":"aboutToAppear"
}]
}
},{
"name": "wtr",
"id": "26",
"image": "",
"description": "基本快捷方法、下拉刷新、上拉加载，可自定义刷新加载风格(refresh)；加载弹框、消息弹框、成功提示、失败提示；JSON转对应模型；WTRRefresh 下拉刷新、上拉加载，支持自定义；WTRHUD 加载弹框、消息弹框；wtrhttp 系统http简单封装",
"codeInfo": {
"insertCode": "WTRRefresh({\n controller: this.refreshController,\n contentBuilder: (scroller: Scroller) => {\n this.contentBuilder(scroller);\n },\n // 自定义刷新加载显示\n // customHeaderBuilder:($$:WTRRefreshBuilderParam)=>{\n //\n // },\n // customFooterBuilder:($$:WTRRefreshBuilderParam)=>{\n //\n // }\n })\n .layoutWeight(1)\n //.margin({ bottom: 60 + WTR.safeTop() }) //顶部标题高度多少这里就设置多少或者用layoutWeight(1)",
"importCode": "import { WTRRefresh, WTRRefreshController, WTRRefreshControllerOptions, WTRRefreshState, WTRRefreshBuilderParam, WTR} from 'wtr';",
"dependenciesName": "wtr",
"dependenciesVersion": "1.3.8",
"codeAnnotation": "/**\n * 功能描述：基本快捷方法、下拉刷新、上拉加载，可自定义刷新加载风格(refresh)；加载弹框、消息弹框、成功提示、失败提示；JSON转对应模型；WTRRefresh 下拉刷新、上拉加载，支持自定义；WTRHUD 加载弹框、消息弹框；wtrhttp 系统http简单封装\n * README：https://ohpm.openharmony.cn/#/cn/detail/wtr\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State arr: Array<number> = [];\nrefreshController: WTRRefreshController = new WTRRefreshController({\n contentEndOffset: WTR.safeBottom(), //需要和List的contentEndOffset一样\n onRefresh: () => {\n console.log(\"开始刷新\");\n setTimeout(() => {\n this.arr.reverse();\n this.refreshController.endRefresh();\n }, 1000)\n },\n onLoad: () => {\n console.log(\"开始加载\");\n setTimeout(() => {\n for (let i = 0; i < 5; i++) {\n this.arr.push(Math.round((Math.random() * 100) % 100));\n }\n //noMoreData 是否显示已加载全部 dataAdded数据是否已加载更多，如果没有数据增加，内容高度不变，dataAdded需要设置成false\n this.refreshController.endLoad(false, true);\n }, 1000)\n }\n })",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"@Builder\n contentBuilder(scroller: Scroller) {\n List({ scroller: scroller }) {\n ForEach(this.arr, (item: number) => {\n ListItem() {\n Text(\"哈哈哈哈:\" + item)\n .height(50)\n }\n .width(\"100%\")\n .backgroundColor(item % 2 == 0 ? Color.Orange : WTR.randomColor())\n .onClick(() => {\n console.log(\"点击cell:\", item);\n })\n })\n }\n .width(\"100%\")\n .height(\"100%\")\n .contentEndOffset(WTR.safeBottom()) //需要和WTRRefreshController内的一样\n }",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"setTimeout(() => {\n this.refreshController.beginRefresh()\n }, 500)",
"methodName":"onPageShow"
}]
}
},{
"name": "@open_9527/titlebar",
"id": "27",
"image": "",
"description": "自定义Component实现TitleBar\n支持自定义左边,中间,右边,图标,文本\n支持自定义状态栏高度,颜色\n支持自定义下划线配置\n支持全局配置属性",
"codeInfo": {
"insertCode": "TitleBarView({\n config: this.titleBarConfig\n })\n .width('100%')",
"importCode": "import { TitleBarConfig, TitleBarView } from '@open_9527/titlebar';",
"dependenciesName": "@open_9527/titlebar",
"dependenciesVersion": "2.0.3",
"codeAnnotation": "/**\n * 功能描述：自定义Component实现TitleBar，支持自定义左边,中间,右边,图标,文本；支持自定义状态栏高度,颜色；支持自定义下划线配置；支持全局配置属性\n * README：https://ohpm.openharmony.cn/#/cn/detail/@open_9527%2Ftitlebar\n */",
"napi": true,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.titleBarConfig.centerTextContent = \"标题\";",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@State titleBarConfig: TitleBarConfig = new TitleBarConfig();",
"methodName":""
}]
}
},{
"name": "lunar",
"id": "28",
"image": "",
"description": "lunar是一款无第三方依赖的公历(阳历)、农历(阴历、老黄历)、佛历和道历工具，支持星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。",
"codeInfo": {
"insertCode": "",
"importCode": "import {Solar} from 'lunar';",
"dependenciesName": "lunar",
"dependenciesVersion": "1.0.0",
"codeAnnotation": "/**\n * 功能描述：lunar是一款无第三方依赖的公历(阳历)、农历(阴历、老黄历)、佛历和道历工具，支持星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/lunar\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"const solar: Solar = Solar.fromYmd(1986, 5, 29);\nconsole.log(solar.toFullString());\nconsole.log(solar.getLunar().toFullString());",
"methodName":"aboutToAppear"
}]
}
},{
"name": "materialprogressbar",
"id": "29",
"image": "",
"description": "MaterialProgressBar是一个自定义ProgressBar效果。本库基于 materialish-progress、 MaterialProgressBar、 SmoothProgressBar 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。",
"codeInfo": {
"insertCode": "MaterialProgressBar({ style: MaterialProgressStyle.MaterialHorizontal,\n modelBuild: {\n color: '#009688',\n secondColor: '#9fc6c2',\n secondProgress: 60,\n bgColor: \"#b3ddd9\"\n } })",
"importCode": "import { MaterialProgressBar , MaterialProgressStyle} from \"@ohos/materialprogressbar\";",
"dependenciesName": "@ohos/materialprogressbar",
"dependenciesVersion": "2.1.1",
"codeAnnotation": "/**\n * 功能描述：MaterialProgressBar是一个自定义ProgressBar效果。本库基于 materialish-progress、 MaterialProgressBar、 SmoothProgressBar 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fmaterialprogressbar\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "calendar",
"id": "30",
"image": "",
"description": "一个支持三种模式的轻量级日历组件：\n支持常规日历，全月日期、切换月份、点击反馈、标注显示、controller控制、选中样式、国际化、深色模式\n支持超级迷你日历，全月日期、当前时间\n支持单周日历，当周日期、当前时间",
"codeInfo": {
"insertCode": "HmCalendar({\n color: '#00aa00',\n selectedDays: [\n { date: '2024-01-01' },\n { date: '2024-01-10' },\n { date: '2024-01-20' },\n ]\n })\n .borderRadius(8)\n .border({ width: 0.5, color: '#ededed' })\n .shadow({ color: '#ededed', radius: 16 })",
"importCode": "import { HmCalendar } from '@ohmos/calendar';",
"dependenciesName": "@ohmos/calendar",
"dependenciesVersion": "2.1.4",
"codeAnnotation": "/**\n * 功能描述：一个支持三种模式的轻量级日历组件：支持常规日历，全月日期、切换月份、点击反馈、标注显示、controller控制、选中样式、国际化、深色模式；支持超级迷你日历，全月日期、当前时间；支持单周日历，当周日期、当前时间。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohmos%2Fcalendar\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "high_light_guide",
"id": "31",
"image": "",
"description": "基于OpenHarmony的高亮型新手引导组件，通过高亮区域与蒙版背景的明暗度对比，使用户快速锁定重点功能，快速掌握应用基本使用方法。",
"codeInfo": {
"insertCode": "// 添加引导页布局\n HighLightGuideComponent({\n highLightContainer: this.HighLightComponent, // 引导页覆盖时的内容布局插槽\n currentHLIndicator: null, // 引导页的引导层插槽\n builder: this.builder, // 引导页的通用配置构建类\n onReady: (controller: Controller) => { // 引导页准备好的回调，获取引导页控制器\n this.controller = controller; \n }\n })",
"importCode": "import { HighLightGuideBuilder,HighLightGuideComponent,Controller,GuidePage,HighLightShape,RectF} from '@ohos/high_light_guide';",
"dependenciesName": "@ohos/high_light_guide",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：基于OpenHarmony的高亮型新手引导组件，通过高亮区域与蒙版背景的明暗度对比，使用户快速锁定重点功能，快速掌握应用基本使用方法。 \n* README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fhigh_light_guide\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private builder: HighLightGuideBuilder | null = null;\nprivate controller: Controller | null = null;\n@Builder\nprivate HighLightComponent() {\n Column() {\n ... // 布局内容\n }.alignItems(HorizontalAlign.Start)\n .width('100%')\n .height('100%');\n}\n\n@Builder\nprivate SimpleIndicator() {\n ... // 引导层内容\n}",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"this.builder = new HighLightGuideBuilder()\n .setLabel('guide1')\n .alwaysShow(true)\n .addGuidePage(GuidePage.newInstance()\n .addHighLight('Simple')\n .addHighLight(new RectF(0, 310, 200, 360))\n .setHighLightIndicator(this.SimpleIndicator))",
"methodName":"aboutToAppear"
}]
}
},{
"name": "json5",
"id": "32",
"image": "",
"description": "移植 JSON5 解析库。",
"codeInfo": {
"insertCode": "",
"importCode": "import { JSON5 } from '@wolfx/json5';",
"dependenciesName": "@wolfx/json5",
"dependenciesVersion": "2.2.3-rc.1",
"codeAnnotation": "/**\n * 功能描述：移植 JSON5 解析库。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@wolfx%2Fjson5\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"const message: string = JSON5.stringify(JSON5.parse(`{ a: 1, b: '2' } // comment`));",
"methodName":"aboutToAppear"
}]
}
},{
"name": "rapid_kit_foundation",
"id": "33",
"image": "",
"description": "RAPID缩写自Real-time Audio-visual Platform for IoT Devices，致力于为物联网视觉设备提供一个高效的跨平台音视频解决方案。rapid_kit_foundation是RAPID针对鸿蒙平台的适配，你可在TIVS平台中查阅更多文档。",
"codeInfo": {
"insertCode": "",
"importCode": "import { Rapid } from 'rapid_kit_foundation';",
"dependenciesName": "rapid_kit_foundation",
"dependenciesVersion": "1.0.6",
"codeAnnotation": "/**\n * 功能描述：RAPID缩写自Real-time Audio-visual Platform for IoT Devices，致力于为物联网视觉设备提供一个高效的跨平台音视频解决方案。rapid_kit_foundation是RAPID针对鸿蒙平台的适配，你可在TIVS平台中查阅更多文档。 \n* README：https://ohpm.openharmony.cn/#/cn/detail/rapid_kit_foundation\n */",
"napi": false,
"permissions":["ohos.permission.INTERNET"],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"Rapid.initialize();",
"methodName":"aboutToAppear"
}]
}
},{
"name": "ohos_smart_dialog",
"id": "34",
"image": "",
"description": "强大的SmartDialog\n单次初始化后即可使用，无需多处配置相关Component\n优雅，极简的用法\n非UI区域内使用，自定义Component\n返回事件处理，优化的跨页面交互\n多弹窗能力，多位置弹窗：上下左右中间\n定位弹窗：自动定位目标Component\n极简用法的loading弹窗\n鸿蒙版本的SmartDialog，功能会逐步和 flutter_smart_dialog 对齐（长期），api会尽量保持一致",
"codeInfo": {
"insertCode": "Button(\"show dialog\").onClick(() => {\n SmartDialog.show({\n builder: this.dialogArgs,\n builderArgs: Math.random(),\n })\n })\n OhosSmartDialog()",
"importCode": "import { OhosSmartDialog, SmartDialog } from 'ohos_smart_dialog';",
"dependenciesName": "ohos_smart_dialog",
"dependenciesVersion": "1.7.5",
"codeAnnotation": "/**\n * 功能描述：强大的SmartDialog；单次初始化后即可使用，无需多处配置相关Component；优雅，极简的用法；非UI区域内使用，自定义Component；返回事件处理，优化的跨页面交互；多弹窗能力，多位置弹窗：上下左右中间；定位弹窗：自动定位目标Component；极简用法的loading弹窗；鸿蒙版本的SmartDialog，功能会逐步和 flutter_smart_dialog 对齐（长期），api会尽量保持一致\n * README：https://ohpm.openharmony.cn/#/cn/detail/ohos_smart_dialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@Builder\n dialogArgs(args: number) {\n Text(args.toString()).padding(50).backgroundColor(Color.White)\n}",
"methodName":""
}]
}
},{
"name": "harmony-dialog",
"id": "35",
"image": "",
"description": "harmony-dialog 一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。其涵盖了 AlertDialog、TipsDialog、ConfirmDialog、SelectDialog、CustomContentDialog、TextInputDialog、TextAreaDialog、BottomSheetDialog、ActionSheetDialog、TextPickerDialog、DatePickerDialog、CustomDialog、LoadingDialog、LoadingProgress、Toast、ToastTip 等多种类型，能够满足各种不同的弹窗开发需求。",
"codeInfo": {
"insertCode": "",
"importCode": "import { DialogAction, DialogHelper, ToastUtil } from '@pura/harmony-dialog';",
"dependenciesName": "@pura/harmony-dialog",
"dependenciesVersion": "1.1.0",
"codeAnnotation": "/**\n * 功能描述：harmony-dialog 一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。其涵盖了 AlertDialog、TipsDialog、ConfirmDialog、SelectDialog、CustomContentDialog、TextInputDialog、TextAreaDialog、BottomSheetDialog、ActionSheetDialog、TextPickerDialog、DatePickerDialog、CustomDialog、LoadingDialog、LoadingProgress、Toast、ToastTip 等多种类型，能够满足各种不同的弹窗开发需求。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fharmony-dialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":1,
"methodPosition":0,
"code":"DialogHelper.setDefaultConfig((config) => {\n config.uiAbilityContext = this.context;\n })",
"methodName":"onCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"import { DialogHelper } from '@pura/harmony-dialog';",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"//操作确认类弹出框\n DialogHelper.showAlertDialog({\n content: \"确定保存该WPS文件吗？\",\n onAction: (action) => {\n if (action == DialogAction.CANCEL) {\n console.info(`您点击了取消按钮`);\n } else if (action == DialogAction.SURE) {\n console.info(`您点击了确认按钮`);\n }\n }\n })",
"methodName":"aboutToAppear"
}]
}
},{
"name": "@visactor/harmony-vchart",
"id": "36",
"image": "",
"description": "VChart 是 VisActor 可视化系统中的图表组件库。它基于可视化语法库 VGrammar 和基于可视化渲染引擎 VRender 的组件封装，封装了基于可视化语法库的图表逻辑。其核心能力如下：\n跨平台：自动适应桌面、H5 和多个小程序环境 叙事：全面的注释、动画、流程控制、叙事模板等增强功能，用于视觉叙事 场景：将视觉叙事能力传递给最终用户，提高开发者的生产力\nHarmonyOS 是华为研发的智能终端操作系统，以 ArkTS 为主要开发语言，VChart 从 1.11.1 版本开始，支持兼容 HarmonyOS 的图表开发（支持 HarmonyOS API 11 以上）。\nOpenHarmony 是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。VChart 同时也兼容 OpenHarmony 应用开发的图表开发（支持 API 10 Release 以上）",
"codeInfo": {
"insertCode": "VChart({\n spec: this.spec, w: 300, h: 300,\n onChartInitCb: (vchart) => {\n return;\n },\n onChartReadyCb: (vchart) => {\n vchart.on('touchstart', {level: 'mark', type: 'bar'}, (e: ESObject) => {\n e.item.addState('aaa')\n })\n },\n initOption: {\n beforeRender: () => {\n // this.t = Date.now();\n },\n afterRender: () => {\n // this.delta = Date.now() - this.t;\n }\n }\n });",
"importCode": "import { VChart } from '@visactor/harmony-vchart';",
"dependenciesName": "@visactor/harmony-vchart",
"dependenciesVersion": "1.13.1",
"codeAnnotation": "/**\n * 功能描述：VChart 是 VisActor 可视化系统中的图表组件库。它基于可视化语法库 VGrammar 和基于可视化渲染引擎 VRender 的组件封装，封装了基于可视化语法库的图表逻辑。其核心能力如下：\n * 跨平台：自动适应桌面、H5 和多个小程序环境 叙事：全面的注释、动画、流程控制、叙事模板等增强功能，用于视觉叙事 场景：将视觉叙事能力传递给最终用户，提高开发者的生产力\n * HarmonyOS 是华为研发的智能终端操作系统，以 ArkTS 为主要开发语言，VChart 从 1.11.1 版本开始，支持兼容 HarmonyOS 的图表开发（支持 HarmonyOS API 11 以上）。\n * OpenHarmony 是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。VChart 同时也兼容 OpenHarmony 应用开发的图表开发（支持 API 10 Release 以上） * README：https://ohpm.openharmony.cn/#/cn/detail/@visactor%2Fharmony-vchart\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State spec:Record<string, string|ESObject> = {\n 'type': 'bar',\n 'data': {\n values: ([\n {\n \"type\": \"Autocracies\",\n \"year\": \"1930\",\n \"value\": 129\n },\n {\n \"type\": \"Autocracies\",\n \"year\": \"1940\",\n \"value\": 133\n },\n {\n \"type\": \"Autocracies\",\n \"year\": \"1950\",\n \"value\": 130\n }\n ]) as ESObject\n },\n 'xField': ['year', 'type'],\n 'yField': 'value',\n 'seriesField': 'type',\n 'bar': {\n 'state': ({\n 'aaa': ({\n 'fill': 'red'\n } as ESObject)\n } as ESObject),\n 'style': ({\n \"stroke\": \"#000\",\n \"lineWidth\": 1\n } as ESObject)\n },\n 'legends': {\n \"visible\": true,\n \"position\": \"start\",\n \"orient\": \"top\"\n }\n }\n",
"methodName":""
}]
}
},{
"name": "svga",
"id": "37",
"image": "",
"description": "SVGA SVGA动画播放器 harmonyOSNext版本，不兼容1.x版本资源",
"codeInfo": {
"insertCode": "SvgaPlayer({\n url: \"替换为需要播放的SVGA动画资源路径，如$('app.media.svga')\"\n })\n .width(300)\n .aspectRatio(0.5)",
"importCode": "import { SvgaPlayer } from '@tb-open/svga';",
"dependenciesName": "@tb-open/svga",
"dependenciesVersion": "1.2.8",
"codeAnnotation": "/**\n * 功能描述：SVGA SVGA动画播放器 harmonyOSNext版本，不兼容1.x版本资源\n * README：https://ohpm.openharmony.cn/#/cn/detail/@tb-open%2Fsvga\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "ohos_videocompressor",
"id": "38",
"image": "",
"description": "videoCompressor是一款ohos高性能视频压缩器。",
"codeInfo": {
"insertCode": "",
"importCode": "import { CompressorResponseCode, CompressQuality, VideoCompressor } from '@ohos/videocompressor';\nimport { BusinessError } from '@kit.BasicServicesKit';",
"dependenciesName": "@ohos/videocompressor",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：videoCompressor是一款ohos高性能视频压缩器。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fvideocompressor\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"let videoCompressor = new VideoCompressor();\nvideoCompressor.compressVideo(getContext(),\"替换为需要压缩的视频路径\",CompressQuality.COMPRESS_QUALITY_HIGH).then((data) => {\n if (data.code == CompressorResponseCode.SUCCESS) {\n console.log(\"videoCompressor HIGH message:\" + data.message + \"--outputPath:\" + data.outputPath);\n } else {\n console.log(\"videoCompressor HIGH code:\" + data.code + \"--error message:\" + data.message);\n }\n }).catch((err:BusinessError) => {\n console.log(\"videoCompressor HIGH get error message\" + err.message);\n })",
"methodName":"aboutToAppear"
}]
}
},{
"name": "XTHUD",
"id": "39",
"image": "",
"description": "V3.0.0 新增 XTPromptHUD 工具类，HUD 支持在任意位置显示，不再受限于 ArkUI 的 @Component 上下文环境\n基于ArkUI封装的通用型 LoadingHUD、ToastHUD、ProgressHUD 组件库\n适配 API11 和 API12 beta1\n代码测试完成度高，整体 API 简单易用\nV1.1.0 新增 XTEasyHUD 工具类，HUD 无需挂载即可直接使用\nHUD 组件基于 CustomDialogController/ComponentContent 定制开发，兼容了物理返回事件导致的 Dialog 关闭问题\nHUD 支持多种默认样式，样式支持高度自定义\nHUD 支持响应式更新自定义样式和 text，且不会重复创建 Dialog 实例\n单类型 HUD 为全局唯一 Dialog 实例，避免重复创建导致的内存消耗问题，避免叠加显示和切换显示闪烁问题\nToastHUD 除了支持常规模式，还支持队列弹出模式\nLoadingHUD 支持 ArkUI 的 LoadingProgress 样式，支持自定义加载样式，支持 SVG 动效\nProgressHUD 基于 Progress 组件做了逻辑封装",
"codeInfo": {
"insertCode": "Button('show toast')\n .onClick(() => {\n XTPromptHUD.showToast('toast')\n })",
"importCode": "import { XTHUDToastOptions, XTPromptHUD } from '@jxt/xt_hud';\nimport { window } from '@kit.ArkUI';",
"dependenciesName": "@jxt/xt_hud",
"dependenciesVersion": "3.3.0",
"codeAnnotation": "/**\n * 功能描述：V3.0.0 新增 XTPromptHUD 工具类，HUD 支持在任意位置显示，不再受限于 ArkUI 的 @Component 上下文环境\n * 基于ArkUI封装的通用型 LoadingHUD、ToastHUD、ProgressHUD 组件库\n * 适配 API11 和 API12 beta1\n * 代码测试完成度高，整体 API 简单易用\n * V1.1.0 新增 XTEasyHUD 工具类，HUD 无需挂载即可直接使用\n * HUD 组件基于 CustomDialogController/ComponentContent 定制开发，兼容了物理返回事件导致的 Dialog 关闭问题\n * HUD 支持多种默认样式，样式支持高度自定义\n * HUD 支持响应式更新自定义样式和 text，且不会重复创建 Dialog 实例\n * 单类型 HUD 为全局唯一 Dialog 实例，避免重复创建导致的内存消耗问题，避免叠加显示和切换显示闪烁问题\n * ToastHUD 除了支持常规模式，还支持队列弹出模式\n * LoadingHUD 支持 ArkUI 的 LoadingProgress 样式，支持自定义加载样式，支持 SVG 动效\n * ProgressHUD 基于 Progress 组件做了逻辑封装\n * README：https://ohpm.openharmony.cn/#/cn/detail/@jxt%2Fxt_hud\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"window.getLastWindow(getContext()).then((window) => {\n XTPromptHUD.globalConfigToast(window.getUIContext(), (options: XTHUDToastOptions) => {\n options.isQueueMode = true\n })\n })",
"methodName":"aboutToAppear"
}]
}
},{
"name": "image-preview",
"id": "40",
"image": "",
"description": "image-preview 提供图片预览组件，支持缩放和平移，提供一些自定义属性和事件监听。",
"codeInfo": {
"insertCode": "OneImagePreview({image: \"替换为需要预览的图片\",controller: this.controller})",
"importCode": "import { ImagePreviewController , OneImagePreview } from '@rv/image-preview';",
"dependenciesName": "@rv/image-preview",
"dependenciesVersion": "1.0.14",
"codeAnnotation": "/**\n * 功能描述：image-preview 提供图片预览组件，支持缩放和平移，提供一些自定义属性和事件监听。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@jxt%2Fxt_hud\n */",
"napi": false,
"permissions":["ohos.permission.INTERNET"],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private readonly controller: ImagePreviewController = new ImagePreviewController();",
"methodName":""
}]
}
},{
"name": "customtabbar",
"id": "41",
"image": "",
"description": "TabBar在大部分的APP当中都能够使用到，不同的APP可能存在不一样的TabBar样式，Tab组件自带的TabBar属性对于部分效果无法满足，如页签中间显示一圈圆弧外轮廓等， 因此我们需要去自己定义一个TabBar页签来满足开发的需要。",
"codeInfo": {
"insertCode": "CustomTabBar({ selectedIndex: this.selectedIndex, tabsInfo: this.tabsInfoArr })",
"importCode": "import { CustomTabBar, TabBarInfo } from '@ohos-cases/customtabbar';",
"dependenciesName": "@ohos-cases/customtabbar",
"dependenciesVersion": "1.0.1",
"codeAnnotation": "/**\n * 功能描述：TabBar在大部分的APP当中都能够使用到，不同的APP可能存在不一样的TabBar样式，Tab组件自带的TabBar属性对于部分效果无法满足，如页签中间显示一圈圆弧外轮廓等， 因此我们需要去自己定义一个TabBar页签来满足开发的需要。 * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcustomtabbar\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private tabsInfoArr: TabBarInfo[] = [\n new TabBarInfo(0, $r('app.string.custom_tab_home'), $r(\"app.media.custom_tab_home_selected\"),\n $r(\"app.media.custom_tab_home\"), $r('app.color.custom_tab_selected_text_color'),\n $r('app.color.custom_tab_text_color')),\n new TabBarInfo(1, $r('app.string.custom_tab_news'), $r(\"app.media.custom_tab_new_selected\"),\n $r(\"app.media.custom_tab_new\"), $r('app.color.custom_tab_selected_text_color'),\n $r('app.color.custom_tab_text_color')),\n new TabBarInfo(2, $r(\"app.string.custom_tab_video\"), $r(\"app.media.custom_tab_video_selected\"),\n $r(\"app.media.custom_tab_video\"), $r('app.color.custom_tab_selected_text_color'),\n $r('app.color.custom_tab_text_color')),\n new TabBarInfo(3, $r(\"app.string.custom_tab_friend\"), $r(\"app.media.custom_tab_friend_selected\"),\n $r(\"app.media.custom_tab_friend\"), $r('app.color.custom_tab_selected_text_color'),\n $r('app.color.custom_tab_text_color')),\n new TabBarInfo(4, $r('app.string.custom_tab_mine'), $r(\"app.media.custom_tab_user_selected\"),\n $r(\"app.media.custom_tab_user\"), $r('app.color.custom_tab_selected_text_color'),\n $r('app.color.custom_tab_text_color'))];\n@State selectedIndex: number = 0;",
"methodName":""
}]
}
},{
"name": "listexchange",
"id": "42",
"image": "",
"description": "本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。",
"codeInfo": {
"insertCode": "ListExchange({\n appInfoList: this.appInfoList,\n listExchangeCtrl: this.listExchangeCtrl,\n deductionView: (listItemInfo: Object) => {\n this.deductionView(listItemInfo as ListInfo)\n }\n })",
"importCode": "import { ListExchange, ListExchangeCtrl } from '@ohos-cases/listexchange';\nimport { ListInfo } from './LibraryExtraFile';",
"dependenciesName": "@ohos-cases/listexchange",
"dependenciesVersion": "1.0.1",
"codeAnnotation": "/**\n * 功能描述：本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Flistexchange\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.listExchangeCtrl.initData(this.appInfoList);",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@State appInfoList: ListInfo[] = [\n new ListInfo($r(\"app.media.list_exchange_ic_public_cards_filled\"), '账户余额'),\n new ListInfo($r(\"app.media.list_exchange_ic_public_cards_filled2\"), 'xx银行储蓄卡（1234）'),\n new ListInfo($r(\"app.media.list_exchange_ic_public_cards_filled3\"), 'xx银行储蓄卡（1238）'),\n new ListInfo($r(\"app.media.list_exchange_ic_public_cards_filled4\"), 'xx银行储蓄卡（1236）') ];\n // 列表项交换类\n @State listExchangeCtrl: ListExchangeCtrl<ListInfo> = new ListExchangeCtrl();\n // 列表项数据信息\n @Builder\n deductionView(listItemInfo: ListInfo) {\n Row() {\n Image(listItemInfo.icon)\n .width(48)\n .height(48)\n Text(listItemInfo.name)\n .fontSize(16)\n}\n .width('100%')\n }",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"export class ListInfo {\n icon: ResourceStr = '';\n name: ResourceStr = '';\n \n constructor(icon: ResourceStr = '', name: ResourceStr = '') {\n this.icon = icon;\n this.name = name;\n }\n }",
"methodName":""
}]
}
},{
"name": "imagegridlayout",
"id": "43",
"image": "",
"description": "本示例介绍使用(Flex) 组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。",
"codeInfo": {
"insertCode": "MultiImageGrid({\n imageSource: this.imageArray9,\n clickImageHandle: (image: ResourceStr) => {\n // 点击图片事件\n }\n})",
"importCode": "import { MultiImageGrid } from '@ohos-cases/imagegridlayout';",
"dependenciesName": "@ohos-cases/imagegridlayout",
"dependenciesVersion": "1.0.0",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用(Flex) 组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fimagegridlayout\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private imageArray9: Resource[] =[$r(\"app.media.a\"), $r(\"app.media.b\"), $r(\"app.media.c\"), $r(\"app.media.d\"),\n$r(\"app.media.e\"), $r(\"app.media.f\"),$r(\"app.media.g\"), $r(\"app.media.h\"), $r(\"app.media.i\")];",
"methodName":""
}]
}
},{
"name": "marquee",
"id": "44",
"image": "",
"description": "本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。",
"codeInfo": {
"insertCode": "MarqueeSection({\n marqueeTextBuilder: () => {\n this.marqueeTextBuilder(\"替换为需要跑马灯显示的长文字\")\n },\n marqueeAnimationModifier: new MarqueeAnimationModifier(),\n marqueeScrollModifier: new MarqueeScrollModifier( $r('app.string.marquee_scroll_phone_width'),\n Constants.BLANK_SPACE)\n})",
"importCode": "import { MarqueeSection, MarqueeScrollModifier, MarqueeAnimationModifier } from '@ohos-cases/marquee';\nimport Constants from '@ohos-cases/marquee/src/main/ets/common/Constants';",
"dependenciesName": "@ohos-cases/marquee",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fmarquee\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@Builder\n marqueeTextBuilder(marqueeText: ResourceStr) {\n Text(marqueeText)\n }",
"methodName":""
}]
}
},{
"name": "citysearch",
"id": "45",
"image": "",
"description": "本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。",
"codeInfo": {
"insertCode": "AlphabetListView({\n hotSelectList: this.hotCityList,\n hotSelectListTitle: $r('app.string.citysearch_hotCity'),\n alphabetSelectList: this.cityList,\n hotSelectHandle: (hotSelectValue: string) => {\n },\n alphabetSelectHandle: (alphabetSelectValue: string) => {\n }\n})",
"importCode": "import { AlphabetListView, AlphabetListItemView, HotListItemView, AlphabetListItemType } from '@ohos-cases/citysearch';\nimport { city, hotCity } from './LibraryExtraFile';",
"dependenciesName": "@ohos-cases/citysearch",
"dependenciesVersion": "1.0.3",
"codeAnnotation": "/**\n * 功能描述：本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcitysearch\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// 热门城市列表\nhotCityList: HotListItemView[] = [new HotListItemView('北京', wrapBuilder(hotCity))];\n // 城市列表\ncityList: AlphabetListItemView[] = [new AlphabetListItemView(new AlphabetListItemType('A', ['北京', '上海', '广州', '深圳']), wrapBuilder(city)),\n new AlphabetListItemView(new AlphabetListItemType('B', ['杭州']), wrapBuilder(city))];",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"@Builder\nexport function hotCity(city: string) {\n Text(city)\n}\n\n@Builder\nexport function city(city: string) {\n Text(city)\n .width('100%')\n .textAlign(TextAlign.Start)\n}",
"methodName":""
}]
}
},{
"name": "watermark",
"id": "46",
"image": "",
"description": "在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。",
"codeInfo": {
"insertCode": "Image($r('app.media.water_mark_image_1'))\n .overlay(createWaterMarkView(this.textModify))",
"importCode": "import { createWaterMarkView, TextModify } from '@ohos-cases/watermark'\nimport { CommonConstants } from '@ohos-cases/watermark/src/main/ets/common/CommonConstants';",
"dependenciesName": "@ohos-cases/watermark",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fwatermark\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private textModify: TextModify = new TextModify(CommonConstants.TEXT_CONTENT2, CommonConstants.FONT_SIZE1,\n CommonConstants.FONT_COLOR2, CommonConstants.TEXT_ALIGN,\n CommonConstants.TEXT_BASE_LINE, 100, 100);",
"methodName":""
}]
}
},{
"name": "bottomdrawerslidecase",
"id": "47",
"image": "",
"description": "本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。",
"codeInfo": {
"insertCode": "RelativeContainer() {\n Image($r('app.media.bottomdrawerslidecase_map'))\n .height('100%')\n .width('100%')\n .id('image')\n // 底部可变分阶段滑动列表\n BottomDrawer({\n searchAddress: this.searchAddress,\n listBuilder: this.listBuilder,\n isShow: this.isShow,\n bottomDrawerHeight: this.bottomDrawerHeight\n }).id('scrollPart')\n .alignRules({\n 'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },\n 'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },\n 'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },\n })\n }",
"importCode": "import { BottomDrawer, BottomDrawerHeight } from '@ohos-cases/bottomdrawerslidecase';",
"dependenciesName": "@ohos-cases/bottomdrawerslidecase",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fbottomdrawerslidecase\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State bottomDrawerHeight: BottomDrawerHeight = new BottomDrawerHeight(200, 400, 600);\n @State isShow: boolean = true;\n @Builder\n searchAddress() {\n Text(\"可拖拽区域\")\n }\n @Builder\n listBuilder() {\n }",
"methodName":""
}]
}
},{
"name": "votingcomponent",
"id": "48",
"image": "",
"description": "本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。",
"codeInfo": {
"insertCode": "VotingView({\n votingSource: this.votingSource,\n votingHandle: (option: string) => {\n this.notice = '已选择\"' + option + '\"';\n }\n })\n Text(this.notice)",
"importCode": "import { VotingView, VotingType } from '@ohos-cases/votingcomponent';",
"dependenciesName": "@ohos-cases/votingcomponent",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fvotingcomponent\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State votingSource: VotingType = new VotingType(100, 200, \"left\", \"right\");\n @State notice: string = \"\";",
"methodName":""
}]
}
},{
"name": "calendarswitch",
"id": "49",
"image": "",
"description": "本示例介绍使用Swiper实现自定义日历年视图、月视图、周视图左右滑动切换年、月、周的效果。同时使用Tabs实现年视图、月视图、周视图之间的切换效果。还有使用Calendar Kit日历服务实现日程提醒的功能。",
"codeInfo": {
"insertCode": "Column(){\nCustomCalendar() // 不传参默认显示月视图\nSchedulePoint()\n}\n",
"importCode": "import { CustomCalendar, SchedulePoint } from '@ohos-cases/calendarswitch';",
"dependenciesName": "@ohos-cases/calendarswitch",
"dependenciesVersion": "1.0.1",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用Swiper实现自定义日历年视图、月视图、周视图左右滑动切换年、月、周的效果。同时使用Tabs实现年视图、月视图、周视图之间的切换效果。还有使用Calendar Kit日历服务实现日程提醒的功能。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcalendarswitch\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"",
"methodName":""
}]
}
},{
"name": "自定义动效tab",
"id": "50",
"image": "",
"description": "本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果",
"codeInfo": {
"insertCode": "CustomAnimationTab({\n animationAttribute: this.animationAttribute,\n tabsInfo: this.tabsInfo,\n indicatorBarAttribute: this.indicatorBarAttribute,\n tabBarAttribute: this.tabBarAttribute,\n tabController: this.tabController,\n scroller: this.scroller\n})",
"importCode": "import { CustomAnimationTab, CustomAnimationTabController, IndicatorBarAttribute, SizeMode, TabBarAttribute, TabInfo } from '@ohos-cases/custom_animation_tab';\nimport { MyAnimationAttribute } from '@ohos-cases/custom_animation_tab/src/main/ets/view/MyAnimationAttribute';\nimport { CustomAnimationTabConfigure } from '@ohos-cases/custom_animation_tab/src/main/ets/view/CustomAnimationTabConfigure';",
"dependenciesName": "@ohos-cases/custom_animation_tab",
"dependenciesVersion": "1.0.5",
"codeAnnotation": "/**\n * 功能描述：本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcustom_animation_tab\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":" @State animationAttribute:MyAnimationAttribute=new MyAnimationAttribute(Color.Blue);\n tabsInfo: TabInfo[] = [];\n indicatorBarAttribute: IndicatorBarAttribute = new IndicatorBarAttribute(this.indicatorBar, SizeMode.Padding, 20, 10,\n CustomAnimationTabConfigure.INDICATOR_MAX_LEFT, CustomAnimationTabConfigure.DEFAULT_INDICATOR_EXPAND);\n tabBarAttribute: TabBarAttribute = new TabBarAttribute(CustomAnimationTabConfigure.LIST_ITEM_WIDTH, CustomAnimationTabConfigure.TABBAR_HEIGHT);\n // tabController\n tabController: CustomAnimationTabController = new CustomAnimationTabController();\n // scroller\n scroller: Scroller = new Scroller();\n @Builder\n indicatorBar() {\n Column()\n .height($r(\"app.string.custom_animation_tab_one_hundred_percent\"))\n .width($r(\"app.string.custom_animation_tab_one_hundred_percent\"))\n .backgroundColor(this.animationAttribute.indicatorBarColor)\n .borderRadius($r(\"app.float.custom_animation_tab_indicator_border_radius\"))\n }",
"methodName":""
}]
}
},{
"name": "storm",
"id": "51",
"image": "",
"description": "Storm是直接基于纯TypeScript编写的高效简洁的轻量级OpenHarmonyOS SQL ORM框架，提供了强类型的SQL DSL ，直接将低级bug暴露在编译期。",
"codeInfo": {
"insertCode": "",
"importCode": "import { Bookcase, myDatabase } from './LibraryExtraFile';",
"dependenciesName": "@zxhhyj/storm",
"dependenciesVersion": "2.0.2",
"codeAnnotation": "/**\n * 功能描述：Storm是直接基于纯TypeScript编写的高效简洁的轻量级OpenHarmonyOS SQL ORM框架，提供了强类型的SQL DSL ，直接将低级bug暴露在编译期。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@zxhhyj%2Fstorm\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":3,
"methodPosition":0,
"code":"export class BookcaseTable extends Table<Bookcase> {\n readonly tableName = 't_bookcase'\n\n readonly id = Column.integer('id').primaryKey(true).bindTo(this, 'id')\n readonly name = Column.text('name').notNull().bindTo(this, 'name');\n}\n\nexport const TableBookcase = new BookcaseTable();\nclass AppDatabase extends Database {\n initDb(context: Context) {\n return relationalStore.getRdbStore(context, { name: \"app.db\", securityLevel: relationalStore.SecurityLevel.S1 });\n //重写`AppDatabase`中的`initDb`函数，在此返回你的`RdbStore`\n }\nreadonly bookcaseDao = TableBookcase;\n}\n\nexport const myDatabase = Storm\n .databaseBuilder(AppDatabase)\n .setVersion(1)//设置数据库的版本\n .addMigrations(AutoMigration)//设置当数据库未初始化时自动初始化，初始化后的版本号为 setVersion 设置版本号，即 1\n .build();\nexport interface Bookcase {\nid?: number;\nname: string;\n}",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { AutoMigration, Database, Storm } from '@zxhhyj/storm';\nimport { relationalStore } from '@kit.ArkData';\nimport { Context } from '@kit.AbilityKit';\nimport { Column, Table } from '@zxhhyj/storm';",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"await myDatabase.init(getContext());\nmyDatabase.bookcaseDao.add(this.bookcase);",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"private bookcase: Bookcase = {\n name: \"科幻小说\"\n };",
"methodName":""
}]
}
},{
"name": "@abner/dialog",
"id": "52",
"image": "",
"description": "HarmonyOsDialog是一个便捷的弹窗，一行代码便可以搞定，无须初始化，便在任何地方都可以弹出，Dialog中也封装了包含常见的弹窗样式，并且支持自定义组件形式。",
"codeInfo": {
"insertCode": "Button(\"show dialog\").onClick(()=>{\nshowDialogInfo({\n title: \"我是标题\",\n message: \"我是一段描述\",\n clickConfirm: () => {\n //确认\n console.log(\"===确认\")\n hide() //隐藏\n }\n})\n})",
"importCode": "import { hide, initDialog, showDialogInfo } from '@abner/dialog';\nimport { FusionAttribute } from '@abner/dialog/src/main/ets/attr/FusionAttribute';",
"dependenciesName": "@abner/dialog",
"dependenciesVersion": "1.1.3",
"codeAnnotation": "/**\n * 功能描述：HarmonyOsDialog是一个便捷的弹窗，一行代码便可以搞定，无须初始化，便在任何地方都可以弹出，Dialog中也封装了包含常见的弹窗样式，并且支持自定义组件形式。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"initDialog(new FusionAttribute())",
"methodName":"aboutToAppear"
}]
}
},{
"name": "@pura/spinkit",
"id": "53",
"image": "",
"description": "SpinKit 是一个适用于OpenHarmony/HarmonyOS的加载动画库。",
"codeInfo": {
"insertCode": " SpinKit({\n spinType: SpinType.spinA,\n spinColor: Color.Pink,\n spinSize: 70\n })",
"importCode": "import { SpinKit, SpinType } from '@pura/spinkit';",
"dependenciesName": "@pura/spinkit",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：SpinKit 是一个适用于OpenHarmony/HarmonyOS的加载动画库。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fspinkit\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "@ohos/apng",
"id": "54",
"image": "",
"description": "ohos_apng是以开源库apng-js为参考，基于1.1.2版本，通过重构解码算法，拆分出apng里各个帧图层的数据；使用arkts能力，将每一帧数据组合成imagebitmap，使用定时器调用每一帧数据 通过canvas渲染，从而达到帧动画效果.对外提供解码渲染能力。",
"codeInfo": {
"insertCode": "apng({\n src: $r('app.media.stack'), //图片资源\n speedRate: 1 //动画倍速\n })",
"importCode": "import {apng} from '@ohos/apng';",
"dependenciesName": "@ohos/apng",
"dependenciesVersion": "1.1.1",
"codeAnnotation": "/**\n * 功能描述：ohos_apng是以开源库apng-js为参考，基于1.1.2版本，通过重构解码算法，拆分出apng里各个帧图层的数据；使用arkts能力，将每一帧数据组合成imagebitmap，使用定时器调用每一帧数据 通过canvas渲染，从而达到帧动画效果.对外提供解码渲染能力。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fapng\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "@lidary/markdown",
"id": "55",
"image": "",
"description": "基于marked的鸿蒙端markdown渲染库",
"codeInfo": {
"insertCode": "Markdown({\n content: \"替换为需要显示的md文本\",\n lineSpace: 6,\n // 覆盖掉通过markConfig.setTheme设置的全局theme(优先级最高)\n theme: {\n themeColor: Color.Orange,\n link: {\n fontColor: Color.Orange\n }\n },\n fontStyle: {\n fontColor: Color.Black\n }\n}).backgroundColor(Color.White)",
"importCode": "import { Markdown } from '@lidary/markdown';",
"dependenciesName": "@lidary/markdown",
"dependenciesVersion": "2.0.0",
"codeAnnotation": "/**\n * 功能描述：基于marked的鸿蒙端markdown渲染库\n * README：https://ohpm.openharmony.cn/#/cn/detail/@lidary%2Fmarkdown\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "@lvnanqing/lvdialog",
"id": "56",
"image": "",
"description": "提供一种弹窗封装能力以及一些基础的弹窗，与页面进行解耦，使用简单，支持使用builder构建弹窗布局样式（当弹窗逻辑特别复杂时可以自定义一个弹窗组件然后放入builder里，示例写法点这里），支持自定义弹窗关闭回调， 支持自定义点击事件回调，支持设置点击蒙层是否关闭弹窗，且支持定制侧滑事件，支持弹窗外部关闭弹窗，使用时只需要show一下就ok了。",
"codeInfo": {
"insertCode": "Text('底部弹窗')\n .fontSize(50)\n .fontWeight(FontWeight.Bold)\n .onClick(() => {\n DialogUtil.showCustomDialog({\n builder: wrapBuilder(MyBuilder),\n dialogType: DialogTypeEnum.BOTTOM,\n dialogBuilderParam: {\n closeDialog: () => {\n console.log(\"关闭弹窗回调触发\")\n },\n onConfirm: (isCloseDialog?: boolean, data?: ESObject) => {\n console.log(\"isCloseDialog用来控制点击完后是否关闭弹窗, 默认为false, isCloseDialog: \" + isCloseDialog);\n console.log(\"点击事件回调触发，data: {}\" + JSON.stringify(data));\n }\n }\n })\n })",
"importCode": "import { DialogUtil, DialogBuilderParam, DialogTypeEnum } from '@lvnanqing/lvdialog';\nimport { MyBuilder } from './LibraryExtraFile';\nimport { window } from '@kit.ArkUI';",
"dependenciesName": "@lvnanqing/lvdialog",
"dependenciesVersion": "1.1.6",
"codeAnnotation": "/**\n * 功能描述：提供一种弹窗封装能力以及一些基础的弹窗，与页面进行解耦，使用简单，支持使用builder构建弹窗布局样式（当弹窗逻辑特别复杂时可以自定义一个弹窗组件然后放入builder里，示例写法点这里），支持自定义弹窗关闭回调， 支持自定义点击事件回调，支持设置点击蒙层是否关闭弹窗，且支持定制侧滑事件，支持弹窗外部关闭弹窗，使用时只需要show一下就ok了。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@lidary%2Fmarkdown\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":3,
"methodPosition":0,
"code":"@Builder\nexport function MyBuilder(param: DialogBuilderParam) {\n Column() {\n Text('我是测试弹窗')\n .fontSize(20)\n Button('点我关闭弹窗')\n .onClick(() => {\n param.closeDialog!();\n })\n Button('点击事件')\n .onClick(() => {\n param.onConfirm!(true, \"我被点击了\");\n })\n }.height('40%')\n .backgroundColor(Color.White)\n .width('100%')\n .justifyContent(FlexAlign.Center)\n}",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { DialogBuilderParam } from \"@lvnanqing/lvdialog\";",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"window.getLastWindow(getContext()).then((window:window.Window)=>{\n DialogUtil.setUIContext(window.getUIContext());\n });",
"methodName":"aboutToAppear"
}]
}
},{
"name": "ohpm_king_custom_navtion",
"id": "57",
"image": "",
"description": "ohpm_king_custom_navtion是一个自定义导航栏的组件 功能丰富且易用的兼容最新API12",
"codeInfo": {
"insertCode": "ApplicationTitle({\n tStateHeight:0,\n tHeight:60,\n hiddeBackButton:true,\n hiddenBottomLine:false,\n bottomLineColor: Color.Green,\n tBgColor:'#f5f5f5',\n title: '标题',\n titleTextAlign:TextAlign.Center,\n titleOverflow:TextOverflow.Ellipsis,\n rightFirstButtonWidth:50,\n rightFirstButtonStr: '保存',\n rightFirstAction:()=>{\n \n Prompt.showToast({message:'点击事件'});\n }\n })",
"importCode": "import { ApplicationTitle } from 'ohpm_king_custom_navtion';\nimport { Prompt } from '@kit.ArkUI';",
"dependenciesName": "ohpm_king_custom_navtion",
"dependenciesVersion": "1.1.7",
"codeAnnotation": "/**\n * 功能描述：ohpm_king_custom_navtion是一个自定义导航栏的组件 功能丰富且易用的兼容最新API12\n * README：https://ohpm.openharmony.cn/#/cn/detail/ohpm_king_custom_navtion\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "@liushengyi/smartdb",
"id": "58",
"image": "",
"description": "SmartDB (Room 鸿蒙版本)持久性库在 SQLite 的基础上提供了一个抽象层，让用户能够在充分利用 SQLite 的强大功能的同时，获享更强健的数据库访问机制",
"codeInfo": {
"insertCode": "Button('点击插入数据').onClick(() => {\n userDao.insert(100, \"name100\");\n })\n Button('点击获取数据').onClick(() => {\n userDao.findUser(100).then((user: User) => {\n this.result = user.name;\n })\n })\n Text(this.result)",
"importCode": "import appDB, { User, userDao } from './LibraryExtraFile';",
"dependenciesName": "@liushengyi/smartdb",
"dependenciesVersion": "4.0.1",
"codeAnnotation": "/**\n * 功能描述：SmartDB (Room 鸿蒙版本)持久性库在 SQLite 的基础上提供了一个抽象层，让用户能够在充分利用 SQLite 的强大功能的同时，获享更强健的数据库访问机制\n * README：https://ohpm.openharmony.cn/#/cn/detail/@liushengyi%2Fsmartdb\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":3,
"methodPosition":0,
"code":"export class User {\n @sql.SqlColumn(sql.ColumnType.INTEGER)\n id: number;\n @sql.SqlColumn(sql.ColumnType.TEXT)\n name: string;\n\n constructor(id: number, name: string) {\n this.id = id;\n this.name = name;\n }\n}\nclass UserDao {\n constructor() {\n }\n\n @sql.Sql(\"create table if not exists db_user ( id INTEGER PRIMARY KEY AUTOINCREMENT ,name TEXT not null)\")\n createDb(): Promise<void> {\n return sql.PromiseNull()\n }\n@sql.SqlInsert(\"replace into db_user (id,name) values (#{id},#{name}) \")\n insert(@sql.Param(\"id\") id: number, @sql.Param(\"name\") name: string): Promise<void> {\n return sql.PromiseNull()\n }\n @sql.SqlQuery(\"select * from db_user where id=#{id}\")\n @sql.ReturnType(User)\n findUser(@sql.Param(\"id\") id: number): Promise<User> {\n return sql.PromiseNull()\n }\n}\nexport const userDao = new UserDao()\n",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"class AppDB {\n static DB_VERSION: number = 3;\n\n initDb(context: Context) {\n sql.dbHelper.initDb(context, \"test.db\", AppDB.DB_VERSION, new AppDbOpenHelper());\n //配置RdbStore属性\n //sql.dbHelper.initDbWithConfig\n }\n}\nclass AppDbOpenHelper extends sql.DbOpenHelper {\n constructor() {\n super();\n }\n\n async onCreate(db: relationalStore.RdbStore) {\n //用户表\n await userDao.createDb()\n }\n\n async onUpgrade(db: relationalStore.RdbStore, oldVersion: number, newVersion: number) {\n if (oldVersion <= 2) {\n //升级操作\n }\n }\n}\n\nexport default new AppDB()",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import sql from \"@liushengyi/smartdb\";\nimport { relationalStore } from \"@kit.ArkData\";",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"appDB.initDb(getContext());",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@State result: string = \"no data\";",
"methodName":""
}]
}
},{
"name": "@zyc/tablayout",
"id": "59",
"image": "",
"description": "专门为OpenHarmony打造的一款TabLayout库",
"codeInfo": {
"insertCode": "TabLayout({\n tabs: this.tabsInfo,\n gapContinuousAnimation: false,\n smartToIndex: this.smartIndex,\n indicatorStyle: {\n warpTab: true,\n type: \"line\",\n colorGradient: {\n angle: 90,\n direction: GradientDirection.Left,\n colors: [[\"#ff9a9e\", 0], [\"#fad0c4\", 1]],\n }\n },\n})\n .width(\"100%\")",
"importCode": "import { TabItem, TabLayout } from '@zyc/tablayout';",
"dependenciesName": "@zyc/tablayout",
"dependenciesVersion": "1.0.15",
"codeAnnotation": "/**\n * 功能描述：专门为OpenHarmony打造的一款TabLayout库\n * README：https://ohpm.openharmony.cn/#/cn/detail/@zyc%2Ftablayout\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"for (let i = 0; i < 5; i++) {\n let tabItem: TabItem = new TabItem(\"标题\" + i);\n this.tabsInfo.push(tabItem);\n }",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":" @State smartIndex: number = 0;\n @State tabsInfo: TabItem[] = [];",
"methodName":""
}]
}
},{
"name": "@easy_refresh/easy_refresh",
"id": "60",
"image": "",
"description": "EasyRefresh上拉，下拉刷新工具。主要希望构建一种对使用者来说使用快捷，方便的工具，不要使用者在使用过程中感到复杂，繁琐的操作。",
"codeInfo": {
"insertCode": "EasyRefresh({\n refreshType: EasyRefreshType.ListType, //使用类型\n finished: this.dataArray.length < this.total ? true : false, //是否有下一页\n dataSource: this.dataArray,\n isCustomNoMore: false, //是否自定义没有更多内容\n isCustomEmptyView: false, //是否自定义空白页\n refreshing: this.isRefresh, //主动触发下拉刷新\n // isShowAutoEmptyView: false, //是否启用默认空白页，默认启动\n //自定义没有更多的显示内，如果不需要自定义的话，就不需要实现这个\n customNoMoreView: () => {\n this.noMoreView();\n },\n customEmptyView: () => {\n this.customEmptyView(); //自定义空白页\n },\n contentItem: (item?: Object, index?: number) => {\n this.contentItem(item); //主内容\n },\n refreshCallBack: (async () => {\n await this.getData(false); //下拉网络请求的回调\n }),\n loadMoreCallBack: (async () => {\n await this.getData(true); //上拉加载更多的回调\n })\n })\n .width('100%')\n .height('100%')",
"importCode": "import { EasyRefresh, EasyRefreshType } from '@easy_refresh/easy_refresh';",
"dependenciesName": "@easy_refresh/easy_refresh",
"dependenciesVersion": "1.1.4",
"codeAnnotation": "/**\n * 功能描述：EasyRefresh上拉，下拉刷新工具。主要希望构建一种对使用者来说使用快捷，方便的工具，不要使用者在使用过程中感到复杂，繁琐的操作。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@easy_refresh%2Feasy_refresh\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@Builder\n noMoreView() {\n Row() {\n Text('我是list自定义的没有更多内容了')\n .fontColor(Color.White)\n }\n .justifyContent(FlexAlign.Center)\n .backgroundColor(Color.Brown)\n .width('100%')\n .height(60)\n }\n@Builder\n customEmptyView(){\n Row(){\n Text('我是list自定义的空白页')\n .fontSize(16)\n .fontColor(Color.Red)\n }\n .width('100%')\n .height('100%')\n .justifyContent(FlexAlign.Center)\n }\n@Builder\n contentItem(item?: Object) {\n Row() {\n Text(item?.toString())\n .fontSize(16)\n .fontColor(Color.Red)\n }\n .width('100%')\n .height(50)\n .justifyContent(FlexAlign.Center)\n }",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"@State dataArray: number[] = [];\n@State total: number = 30;\n@State title: string = '';\n@State page: number = 1;\n@State isRefresh:boolean = false; //主动触发的设置条件--如果无此需要可以不用设置\n//网络请求方法：\nasync getData(append: boolean) {\n setTimeout(() => {\n if (!append) {\n this.page = 1;\n }\n let array: number[] = [];\n let startIndex = (this.page - 1) * 10;\n let endIndex = this.page * 10;\n for (let index = startIndex; index < endIndex; index++) {\n array.push(index);\n }\n\n if(append){\n this.dataArray.push(...array);\n }else {\n this.dataArray = [];\n this.dataArray = array;\n }\n this.page ++;\n }, 500)\n }",
"methodName":""
}]
}
},{
"name": "@yidun/captcha",
"id": "61",
"image": "",
"description": "全新人机验证方式，高效拦截机器行为，业务安全第一道防线。搭载风险感知引擎，智能切换验证难度，安全性高，极致用户体验。读屏软件深度适配，视障群体也可轻松使用，符合工信部无障碍适配要求",
"codeInfo": {
"insertCode": "Text(\"易盾行为式验证码\")\n .fontSize(\"35fp\")\n .fontWeight(FontWeight.Bold)\n\n Button(\"显示验证码\")\n .width(\"50%\")\n .height(48)\n .backgroundColor(Color.Blue)\n .type(ButtonType.Capsule)\n .stateEffect(true)\n .margin({\n top: 64\n })\n .onClick(() => {\n this.showCaptcha();\n })",
"importCode": "import { Captcha, CaptchaConfiguration, CaptchaListener, CloseType } from '@yidun/captcha';",
"dependenciesName": "@yidun/captcha",
"dependenciesVersion": "1.0.7",
"codeAnnotation": "/**\n * 功能描述：全新人机验证方式，高效拦截机器行为，业务安全第一道防线。搭载风险感知引擎，智能切换验证难度，安全性高，极致用户体验。读屏软件深度适配，视障群体也可轻松使用，符合工信部无障碍适配要求\n * README：https://ohpm.openharmony.cn/#/cn/detail/@yidun%2Fcaptcha\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private listener: CaptchaListener = {\n onValidate: (result: string, validate: string, _msg: string, _captchaType:string, _errorValidate:string) => {\n if (result === \"true\") {\n AlertDialog.show(\n {\n title: \"验证成功\",\n message: `校验码为：${validate}`,\n alignment: DialogAlignment.Center\n }\n )\n }\n },\n onError: (code: number, msg: string) => {\n AlertDialog.show(\n {\n title: \"验证码报错\",\n message: `错误code为${code} 错误信息为${msg}`,\n alignment: DialogAlignment.Center\n }\n )\n },\n onCaptchaShow: () => {\n },\n onClose:(closeType:CloseType)=>{\n }\n }\n\n showCaptcha() {\n let configuration = new CaptchaConfiguration();\n configuration.setCaptchaId(\"易盾验证码业务id\");\n configuration.setListener(this.listener);\n Captcha.getInstance().init(this.getUIContext(), configuration);\n Captcha.getInstance().showCaptcha();\n }",
"methodName":""
}]
}
},{
"name": "@abner/net",
"id": "62",
"image": "",
"description": "HarmonyOS网络库，基于http封装而来，简化了请求方式，增加了常见的业务功能，支持同步、异步、装饰器模式，支持多种返回数据类型，Json、对象、数组，支持数据缓存，支持dialog加载，支持控制台请求信息格式化输出……",
"codeInfo": {
"insertCode": "",
"importCode": "import { Net } from '@abner/net';\nimport { MyNetErrorInterceptor, TestModel } from './LibraryExtraFile';",
"dependenciesName": "@abner/net",
"dependenciesVersion": "1.1.2",
"codeAnnotation": "/**\n * 功能描述：HarmonyOS网络库，基于http封装而来，简化了请求方式，增加了常见的业务功能，支持同步、异步、装饰器模式，支持多种返回数据类型，Json、对象、数组，支持数据缓存，支持dialog加载，支持控制台请求信息格式化输出……\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fnet\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"Net.getInstance().init({\n baseUrl: \"https://www.vipandroid.cn\", //设置全局baseurl\n connectTimeout: 10000, //设置连接超时\n readTimeout: 10000, //设置读取超时\n netErrorInterceptor: new MyNetErrorInterceptor(), //设置全局错误拦截,需要自行创建,可在这里进行错误处理\n header: {}, //头参数\n resultTag: [],//接口返回数据data层参数，比如data,items等等\n plugin:[]//插件，类似于拦截器\n})Net.get(\"url\").request<TestModel>((data) => {\n //data 就是返回的TestModel对象\n})",
"methodName":"aboutToAppear"
},{
"fileType":3,
"methodPosition":0,
"code":"export class MyNetErrorInterceptor extends NetErrorInterceptor {\n httpError(error: NetError) {\n //这里进行拦截错误信息\n }\n}export class TestModel {\n name: string='';\n age: number=0;\n}",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { NetError, NetErrorInterceptor } from '@abner/net';",
"methodName":""
}]
}
},{
"name": "@ohos/gif-drawable",
"id": "63",
"image": "",
"description": "本项目是OpenHarmony系统的一款GIF图像渲染库，基于Canvas进行绘制，主要能力如下:\n支持播放GIF图片。\n支持控制GIF播放/暂停。\n支持重置GIF播放动画。\n支持调节GIF播放速率。\n支持监听GIF所有帧显示完成后的回调。\n支持设置显示大小。\n支持7种不同的展示类型。\n支持设置显示区域背景颜色。",
"codeInfo": {
"insertCode": "GIFComponent({model:$model, autoPlay:$gifAutoPlay, resetGif: $gifReset})",
"importCode": "import { GIFComponent, ResourceLoader } from '@ohos/gif-drawable';",
"dependenciesName": "@ohos/gif-drawable",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：本项目是OpenHarmony系统的一款GIF图像渲染库，基于Canvas进行绘制，主要能力如下:支持播放GIF图片，支持控制GIF播放/暂停，支持重置GIF播放动画，支持调节GIF播放速率，支持监听GIF所有帧显示完成后的回调，支持设置显示大小，支持7种不同的展示类型，支持设置显示区域背景颜色。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// gif绘制组件用户属性设置\n@State model:GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();\n// 是否自动播放\n@State gifAutoPlay:boolean = true;\n// 重置GIF播放，每次取反都能生效\n@State gifReset:boolean = true;",
"methodName":""
}]
}
},{
"name": "@chawloo/state-layout",
"id": "64",
"image": "",
"description": "StateLayout ，是一个针对HarmonyOS Next系统开发的缺省页框架，简单、实用、高效。",
"codeInfo": {
"insertCode": "SelectTitleBar({\n options: [\n { value: '加载中' },\n { value: '空白页（全局文案和图标）' },\n { value: '空白页（单例文案和图标）' },\n { value: '错误页' },\n { value: '加载成功' },\n ],\n subtitle: '如果设置了全局Builder,则完全自定义',\n onSelected: (index:number) => {\n switch (index) {\n case 0:\n this.controller.loading();\n break\n case 1:\n this.controller.empty();\n break\n case 2:\n this.controller.empty({\n emptyStr: '我是单例空白文案',\n })\n break\n case 3:\n this.controller.error()\n break\n case 10:\n this.controller.content()\n break\n }\n },\n hidesBackButton: true\n })\nRow() {\n StateLayout({\n controller: this.controller,\n retry: () => {\n promptAction.showToast({ message: '我是最初重试事件' })\n this.loading();\n },\n }) {\n Column() {\n Text(`加载成功后的内容:::(点击文案跳转直接修改的方案)`)\n .fontSize(30)\n .fontColor(Color.Black)\n .onClick(() => {\n })\n }\n .justifyContent(FlexAlign.Center)\n .alignItems(HorizontalAlign.Center)\n .width('100%')\n }\n }\n .layoutWeight(1)",
"importCode": "import StateLayout from '@chawloo/state-layout/src/main/ets/components/StateLayout';\nimport StateController from '@chawloo/state-layout/src/main/ets/components/StateController';\nimport { promptAction, SelectTitleBar } from '@kit.ArkUI';",
"dependenciesName": "@chawloo/state-layout",
"dependenciesVersion": "1.2.2",
"codeAnnotation": "/**\n * 功能描述：StateLayout ，是一个针对HarmonyOS Next系统开发的缺省页框架，简单、实用、高效。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@chawloo%2Fstate-layout\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":1,
"methodPosition":0,
"code":"//全局配置缺省页的各种图标和文案\n GlobalStateConfig.progressColor = Color.Red// 设置加载中进度条的颜色\n GlobalStateConfig.emptyStr = '我是全局配置的空白提示文案'// 设置空白文案\n GlobalStateConfig.emptyIcon = $r('app.media.startIcon')// 设置空白Icon图标\n GlobalStateConfig.retryStr = '立即重试'// 设置默认重试按钮文案（网络错误和错误共享）\n GlobalStateConfig.defaultState = StateEnum.LOADING// 设置默认缺省页为加载中\n GlobalStateConfig.showLoadingWhenRetry = false// 关闭点击重试按钮自动切换加载中",
"methodName":"onCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"import GlobalStateConfig from '@chawloo/state-layout';\nimport { StateEnum } from '@chawloo/state-layout/src/main/ets/components/StateEnum';",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"controller: StateController = new StateController() //初始化StateController\n//模拟网络加载\n loading() {\n setTimeout(() => {\n //简单设置状态\n this.controller.content();\n }, 2000)\n }",
"methodName":""
}]
}
},{
"name": "@lyb/media-preview",
"id": "65",
"image": "",
"description": "简单易用的媒资预览框架,可自定义支持各种预览，仿微信一镜到底效果",
"codeInfo": {
"insertCode": "Button('打开preview').onClick(()=>{\nMediaPreview.open(this.getUIContext(), this.options)\n})",
"importCode": "import { DefaultMediaModel, MediaPreview, MediaPreviewOptions } from '@lyb/media-preview';",
"dependenciesName": "@lyb/media-preview",
"dependenciesVersion": "1.1.3",
"codeAnnotation": "/**\n * 功能描述：简单易用的媒资预览框架,可自定义支持各种预览，仿微信一镜到底效果\n * README：https://ohpm.openharmony.cn/#/cn/detail/@lyb%2Fmedia-preview\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.resources = [new DefaultMediaModel(\n 'https://mh.storage.shmedia.tech/86f0a492ec0e40b2bb7665e8c1c3f578.jpg',\n 'https://mh.storage.shmedia.tech/86f0a492ec0e40b2bb7665e8c1c3f578.jpg?imageMogr2/auto-orient/thumbnail/300x300>',),\n new DefaultMediaModel(\n 'https://mh.storage.shmedia.tech/98d8ab5e066047aa913c11f6d47136ad.jpg',\n 'https://mh.storage.shmedia.tech/98d8ab5e066047aa913c11f6d47136ad.jpg?imageMogr2/auto-orient/thumbnail/300x300>')\n ];\nthis.options\n .setInitIndex(0)\n .setMedias(this.resources);",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@State options: MediaPreviewOptions = new MediaPreviewOptions();\n @State resources: DefaultMediaModel[] = [];",
"methodName":""
}]
}
},{
"name": "@seagazer/ccplayer",
"id": "66",
"image": "",
"description": "CcPlayer 是一个为 OpenHarmony和HarmonyOS Next 设计，支持音视频媒体的轻量级播放器应用框架。需要使用API13",
"codeInfo": {
"insertCode": "// 注意：Overlay面板采用层叠的组合方式，需要使用Stack或者RelativeContainer作为根容器\n Stack() {\n// 4.引用CcPlayerView视频播放组件，设置参数，绑定CcPlayer\n CcPlayerView({\n player: this.player,\n asRatio: this.videoRatio,\n onGestureAction: (type: GestureType, percent: number, isTouchUp: boolean) => {\n // 刷新手势UI面板参数\n this.gestureOverlay.setGestureType(type)\n this.gestureOverlay.setGesturePercent(percent)\n },\n onGestureUIListener: (visible) => {\n // 刷新手势UI面板参数\n this.gestureOverlay.setVisible(visible)\n }, \n })\n // 5.使用NodeContainer结合CcGestureOverlay默认手势面板\n NodeContainer(this.gestureOverlay) \n // 6.参照上面的手势Overlay使用其他Overlay进行组合 \nButton(\"play\")\n .onClick(() => {\n this.play();\n })\n.layoutWeight(1)\n}",
"importCode": "import { GestureType,AspectRatio, CcGestureOverlay, CcPlayer, CcPlayerView, MediaSourceFactory } from '@seagazer/ccplayer';",
"dependenciesName": "@seagazer/ccplayer",
"dependenciesVersion": "1.1.4",
"codeAnnotation": "/**\n * 功能描述：CcPlayer 是一个为 OpenHarmony和HarmonyOS Next 设计，支持音视频媒体的轻量级播放器应用框架。需要使用API13\n * README：https://ohpm.openharmony.cn/#/cn/detail/@seagazer%2Fccplayer\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// 10.释放资源\n this.player.release()",
"methodName":"aboutToDisappear"
},{
"fileType":2,
"methodPosition":0,
"code":"// 3.设置手势UI面板各项参数\n this.gestureOverlay.setTextSize(18);\n this.gestureOverlay.setTextColor('#ffead981');",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"// 视频画面比例模式\n @State videoRatio: AspectRatio = AspectRatio.AUTO;\n // 1.实例化CcPlayer\n private player: CcPlayer = new CcPlayer(getContext(this));\n // 2.实例化手势UI面板\n private gestureOverlay: CcGestureOverlay = new CcGestureOverlay(this.player);\nprivate async play() {\n // 7.创建mediaSource\n let src = await MediaSourceFactory.createFile(getContext(this).filesDir + \"替换为视频地址\", \"替换为视频名\")\n // 8.设置mediaSource\n this.player!.setMediaSource(src, () => {\n // 9.设置成功回调，开始播放\n this.player.start();\n })\n }",
"methodName":""
}]
}
},{
"name": "桃夭",
"id": "67",
"image": "",
"description": "桃夭是鸿蒙系统上的一款权限请求框架，封装了权限请求逻辑，采用链式调用的方式请求权限，极大的简化了权限请求的代码，同时支持在UI、UIAbility、UIExtensionAbility里面申请权限。需要注意的是，应用在UIExtensionAbility申请授权时，需要在onWindowStageCreate函数执行结束后或在onWindowStageCreate函数回调中申请权限。",
"codeInfo": {
"insertCode": "Button('获取权限').onClick(()=> { \n TaoYao.with(getContext(this) as common.UIAbilityContext)\n .runtime()\n // 要申请的权限\n .permission(this.permissions)\n .onGranted(() => {\n // 权限申请成功\npromptAction.showToast({ message: \"权限申请成功\" })\n })\n .onDenied(() => {\n // 权限申请失败\npromptAction.showToast({ message: \"权限申请失败\" })\n })\n .request()\n})",
"importCode": "import { TaoYao } from \"@shijing/taoyao\";\nimport { common, Permissions } from \"@kit.AbilityKit\";",
"dependenciesName": "@shijing/taoyao",
"dependenciesVersion": "1.0.8",
"codeAnnotation": "/**\n * 功能描述：桃夭是鸿蒙系统上的一款权限请求框架，封装了权限请求逻辑，采用链式调用的方式请求权限，极大的简化了权限请求的代码，同时支持在UI、UIAbility、UIExtensionAbility里面申请权限。需要注意的是，应用在UIExtensionAbility申请授权时，需要在onWindowStageCreate函数执行结束后或在onWindowStageCreate函数回调中申请权限。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@shijing%2Ftaoyao\n */",
"napi": false,
"permissions":["ohos.permission.READ_CALENDAR"],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private permissions: Array<Permissions> = [\"ohos.permission.READ_CALENDAR\"];",
"methodName":""
}]
}
},{
"name": "PullToRefresh",
"id": "68",
"image": "",
"description": "PullToRefresh 实现垂直列表下拉刷新,上拉加载，横向列表左拉刷新，右拉加载。",
"codeInfo": {
"insertCode": "PullToRefreshLayout({\n /*必传，记录刷新时间的key*/\n viewKey: \"列表标识\",\n /*必传，RefreshLayout控制器*/\n controller: this.controller,\n /*必传，设置和列表相关的Scroller，比如List,Grid,Scroll,WaterFlow等组件*/\n scroller: this.scroller,\n /*如果contentView是Web组件时必传，必须设置WebviewController，不用设置scroller*/\n webviewController: this.webviewController,\n /*设置列表内容布局*/\n contentView: () => {\n this.contentView();\n },\n /*根据当前列表滑动距离或者其他业务逻辑判断是否可以下拉，true:可以下拉刷新，false:不能下拉*/\n onCanPullRefresh: () => {\n //判断列表是否滑到顶部\n /*默认带弹性效果的列表需要关闭弹性滑动，.edgeEffect(EdgeEffect.None)*/\n return (this.scroller.currentOffset()?.yOffset ?? 0) <= 0;\n },\n /*根据当前列表滑动距离或者其他业务逻辑判断是否可以上拉，true:可以上拉加载，false:不能上拉*/\n onCanPullLoad: () => {\n //判断列表是否滑到底部\n return this.scroller.isAtEnd();\n },\n /*触发刷新*/\n onRefresh: () => {\n //可以执行刷新数据的操作\n },\n /*触发加载*/\n onLoad: () => {\n //可以执行加载数据的操作\n },\n /*下拉触发打开页面的通知*/\n onOpenPage: () => {\n //可以执行跳转页面或者其他业务逻辑操作\n },\n /*上拉触发打开页面的通知*/\n onLoadOpenPage: () => {\n //可以执行跳转页面或者其他业务逻辑操作\n },\n })\n .width(\"100%\").height(\"100%\")",
"importCode": "import { PullToRefreshLayout, RefreshController, RefreshLayoutConfig } from '@zhongrui/pull_to_refresh';\nimport { webview } from '@kit.ArkWeb';",
"dependenciesName": "@zhongrui/pull_to_refresh",
"dependenciesVersion": "1.1.1",
"codeAnnotation": "/**\n * 功能描述：PullToRefresh 实现垂直列表下拉刷新,上拉加载，横向列表左拉刷新，右拉加载。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@zhongrui%2Fpull_to_refresh\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"/*RefreshLayout控制器*/\n controller: RefreshController = new RefreshController();\n /*RefreshLayout配置*/\n config: RefreshLayoutConfig = new RefreshLayoutConfig();\n /*需要将scroller设置给列表组件*/\n scroller: Scroller = new Scroller();\n /*webview配置器*/\n webviewController: webview.WebviewController = new webview.WebviewController();\n@Builder\n contentView() {\n List({ scroller: this.scroller }) {\n }.width(\"100%\").height(\"100%\").edgeEffect(EdgeEffect.None)\n }",
"methodName":""
}]
}
},{
"name": "SVRefresh",
"id": "69",
"image": "",
"description": "SVRefresh 是一款 OpenHarmony 环境下，基于 ArkUI 封装的下拉刷新、上拉加载组件。\n支持主动触发刷新、开启/关闭刷新。上拉加载支持拖拽触发和完全展示自动触发",
"codeInfo": {
"insertCode": "SVRefresh({\n /// 状态双向同步\n refreshStatus: this.refreshStatus,\n loadMoreStatus: this.loadMoreStatus,\n /// 参数 Scroller 必须绑定滚动组件\n childList: (scroller) => {\n this.listViewBuilder(scroller);\n },\n /// 可选：传入已经初始化的 Scroller | ListScroller。不传则由 SVRefresh 内部自行初始化 Scroller\n /// scroller: this.scroller,\n /// 可选配置\n refreshOptions: {\n /// 底部完全露出即加载更多，无需拖拽。不传默认为 true\n isAutoLoadMore: true,\n /// 深度刷新，下拉更多距离时触发。不传默认为 false\n deepRefreshEnable: false,\n },\n /// 触发刷新的回调\n onRefreshing: () => {\n\n },\n /// 触发深度下拉刷新\n onDeepRefreshing: () => {\n this.refreshStatus = HeaderRefreshStatus.inactive;\n },\n /// 触发加载的回调\n onLoadingMore: () => {\n\n },\n /// 自定义 header\n headerUI: (state) => {\n this.testHeaderBuilder(state);\n },\n /// header 背景 view\n headerBackgroundUI: () => {\n this.headerBackgroundView();\n }\n }).height('100%')",
"importCode": "import { FooterLoadMoreStatus, HeaderRefreshStatus, RefreshStateImp, SVRefresh } from '@mervin/svrefresh';\nimport { TestRefreshHeader } from './LibraryExtraFile';",
"dependenciesName": "@mervin/svrefresh",
"dependenciesVersion": "1.1.63",
"codeAnnotation": "/**\n * 功能描述：SVRefresh 是一款 OpenHarmony 环境下，基于 ArkUI 封装的下拉刷新、上拉加载组件。支持主动触发刷新、开启/关闭刷新。上拉加载支持拖拽触发和完全展示自动触发。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@mervin%2Fsvrefresh\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// 用来控制刷新状态\n @State private refreshStatus: HeaderRefreshStatus = HeaderRefreshStatus.inactive;\n // 用来控制加载状态\n @State private loadMoreStatus: FooterLoadMoreStatus = FooterLoadMoreStatus.inactive;\n@Builder\n private listViewBuilder(scroller: Scroller) {\n List({ space: 20, scroller: scroller })\n .height(\"100%\")\n .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true }) /*不要设置为 Fade，拖动至边缘会一直显示 Fade 效果，很难看*/\n }\n @Builder\n testHeaderBuilder($$: RefreshStateImp) {\n TestRefreshHeader({ state: $$.state })\n }\n @Builder\n headerBackgroundView() {\n Text('backgroundView')\n .fontColor('#FF2E43')\n .fontSize(18)\n .linearGradient({\n direction: GradientDirection.Top,\n colors: [['#551A1A1A', 0.0], ['#221A1A1A', 0.3], ['#001A1A1A', 1.0]]\n })\n .textAlign(TextAlign.Center)\n .width('100%')\n .height(250)\n }",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"@Component\nexport struct TestRefreshHeader {\n @Link state: RefreshState\n ///...\n build() {\n }\n}",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { RefreshState } from \"@mervin/svrefresh\";",
"methodName":""
}]
}
},{
"name": "PJTabBar",
"id": "70",
"image": "",
"description": "PJTabBar是一个用于替换系统Tabs的控件，支持自定义指示器，Tabbar item, Tabbar item的布局(居左居中居右), Tabbar的左右附加额外视图等",
"codeInfo": {
"insertCode": "PJTabComponent({\n items: this.items,\n tabBarOptions: this.options,\n // 注意contentBuilder的传值方式，这种方式下contentBuilder中的this才是正确的。\n contentBuilder: ($$: PJReferenceTabBarItemInterface) => {\n this.contentBuilder($$);\n },\n })",
"importCode": "import { PJTabComponent, PJTabBarOptionsInterface, PJTabBarOptions, PJTabBarItem, PJReferenceTabBarItemInterface,} from '@piaojin/pjtabbar';",
"dependenciesName": "@piaojin/pjtabbar",
"dependenciesVersion": "1.1.1",
"codeAnnotation": "/**\n * 功能描述：PJTabBar是一个用于替换系统Tabs的控件，支持自定义指示器，Tabbar item, Tabbar item的布局(居左居中居右), Tabbar的左右附加额外视图等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@piaojin%2Fpjtabbar\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"private options: PJTabBarOptionsInterface = new PJTabBarOptions();\n@State items: PJTabBarItem[] = [];\n@Builder\n contentBuilder(item: PJReferenceTabBarItemInterface) {\n Text(JSON.stringify(item))\n .width('100%')\n .height('100%')\n .textAlign(TextAlign.Center)\n .backgroundColor(Color.Green)\n}",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"this.items.push(new PJTabBarItem(\"title0\"))\n this.items.push(new PJTabBarItem(\"title1\"))\n this.items.push(new PJTabBarItem(\"title2\"))\nthis.options.indicatorWidth = 30;\nthis.options.indicatorHeight = 6;\nthis.options.indicatorColor= Color.Orange;\nthis.options.tabBarBackGround = Color.Pink;\nthis.options.selectedFontSize = 16;\nthis.options.selectedFontColor = Color.Orange;\nthis.options.tabBarContentMargin = {left: 10, right: 10};\n",
"methodName":"aboutToAppear"
}]
}
},{
"name": "鸿蒙扫一扫组件",
"id": "71",
"image": "",
"description": "利用鸿蒙系统customScan能力，实现二维码识别\n支持多码识别\n支持选择图库扫码能力\n支持开启关闭闪光灯\n支持UI定制\n手指撑开缩小控制镜头缩放倍数",
"codeInfo": {
"insertCode": "Scanner({\n controller: this.scannerController,\n onScanResult: (code: ResultState, value: string) => {\n if (code == ResultState.Success) {\n promptAction.showToast({ message: value });\n }\n },\n onCameraReject: () => {\n promptAction.showToast({ message: '摄像头权限被拒绝' });\n }\n}).layoutWeight(1)",
"importCode": "import { Scanner, ScannerController ,ResultState} from '@coner/scanner';\nimport { promptAction } from '@kit.ArkUI';",
"dependenciesName": "@coner/scanner",
"dependenciesVersion": "1.1.5",
"codeAnnotation": "/**\n * 功能描述：利用鸿蒙系统customScan能力，实现二维码识别，支持多码识别，支持选择图库扫码能力，支持开启关闭闪光灯，支持UI定制，手指撑开缩小控制镜头缩放倍数。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@coner%2Fscanner\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"scannerController: ScannerController = new ScannerController();",
"methodName":""
}]
}
},{
"name": "Checksum",
"id": "72",
"image": "",
"description": "用于计算最典型的散列函数，如 md5 或 sha1",
"codeInfo": {
"insertCode": "Button(\"sha1 编码文字 dshaw \").width(200).height(50).onClick((event: ClickEvent) => {\n this.mArguments.algorithm = \"sha1\";\n let mChecksum = new Checksum();\n \n\n this.mgs = mChecksum.checksum(\"dshaw\", this.mArguments);\n })\n\n Button(\"md5 编码文字 dshaw \").width(200).height(50).onClick((event: ClickEvent) => {\n this.mArguments.algorithm = \"md5\";\n let mChecksum = new Checksum();\n\n this.mgs = mChecksum.checksum(\"dshaw\", this.mArguments);\n })\nText(this.mgs)",
"importCode": "import { Checksum, Options } from '@ohos/checksum';",
"dependenciesName": "@ohos/checksum",
"dependenciesVersion": "2.0.0",
"codeAnnotation": "/**\n * 功能描述：用于计算最典型的散列函数，如 md5 或 sha1\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fchecksum\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State mgs: string = \"空\";\n @State mArguments:Options = new Options();",
"methodName":""
}]
}
},{
"name": "Tyme ",
"id": "73",
"image": "",
"description": "Tyme是一个非常强大的日历工具库，可以看作 Lunar 的升级版，拥有更优的设计和扩展性，支持公历和农历、星座、干支、生肖、节气、法定假日等。",
"codeInfo": {
"insertCode": "",
"importCode": "import {SolarDay} from 'tyme4oh';",
"dependenciesName": "tyme4oh",
"dependenciesVersion": "1.1.8",
"codeAnnotation": "/**\n * 功能描述：Tyme是一个非常强大的日历工具库，可以看作 Lunar 的升级版，拥有更优的设计和扩展性，支持公历和农历、星座、干支、生肖、节气、法定假日等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/tyme4oh\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"const solar = SolarDay.fromYmd(1986, 5, 29);\n// 1986年5月29日\nconsole.log(solar.toString());\n// 农历丙寅年四月廿一\nconsole.log(solar.getLunarDay().toString());",
"methodName":"aboutToAppear"
}]
}
},{
"name": "ImmersionBar",
"id": "74",
"image": "",
"description": "ImmersionBar ，是一个针对HarmonyOS Next系统开发的沉浸式框架，采用官方底层API，简单、实用、高效。",
"codeInfo": {
"insertCode": "",
"importCode": "import immersionBar from '@chawloo/immersion-bar';",
"dependenciesName": "@chawloo/immersion-bar",
"dependenciesVersion": "1.1.0",
"codeAnnotation": "/**\n * 功能描述：ImmersionBar ，是一个针对HarmonyOS Next系统开发的沉浸式框架，采用官方底层API，简单、实用、高效。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@chawloo%2Fimmersion-bar\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":1,
"methodPosition":0,
"code":"immersionBar.init(windowStage.getMainWindowSync());",
"methodName":"onWindowStageCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"import immersionBar from '@chawloo/immersion-bar';",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"immersionBar.immersion({\n statusBarColor: \"#3369E7\",\n statusBarContentColor: \"#FFFFFF\"\n })",
"methodName":"aboutToAppear"
}]
}
},{
"name": "HarmonyOsLog",
"id": "75",
"image": "",
"description": "HarmonyOsLog是一个日志打印工具，支持hilog和console两种工具打印，支持各种类型包含JSON格式化打印，非常的方便！",
"codeInfo": {
"insertCode": "Button('点击打印日志').onClick(()=>{\nLog.info(\"我是一个info类型日志\");\nLog.info(\"我是一个info类型日志\", \"testTag\");\nLog.info(JSON.stringify({ \"code\": 0, \"message\": \"打印一个json字符串\", \"data\": \"\" }));\n})",
"importCode": "import {Log} from '@abner/log';",
"dependenciesName": "@abner/log",
"dependenciesVersion": "1.0.3",
"codeAnnotation": "/**\n * 功能描述：HarmonyOsLog是一个日志打印工具，支持hilog和console两种工具打印，支持各种类型包含JSON格式化打印，非常的方便！\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Flog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"Log.init({\n tag: \"HarmonyOSLog\",\n domain: 0x0000,\n close: false,\n isHilog: true,\n showLogLocation: true,\n logSize: 800\n})",
"methodName":"aboutToAppear"
}]
}
},{
"name": "ohos_multi_navigation",
"id": "76",
"image": "",
"description": "提供高级分栏组件，给三方应用快速接入大尺寸设备的方案",
"codeInfo": {
"insertCode": "MultiNavigation({navDestination: this.PageMap, multiStack: this.pageStack})",
"importCode": "import { MultiNavigation, MultiNavPathStack, SplitPolicy } from '@ohos/multinavigation';\nimport { PageHome1 } from './LibraryExtraFile';",
"dependenciesName": "@ohos/multinavigation",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：提供高级分栏组件，给三方应用快速接入大尺寸设备的方案\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fmultinavigation\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.pageStack.pushPath({ name : 'PageHome1', param: \"paramTest\"}, false, SplitPolicy.HOME_PAGE);",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@Provide('pageStack')pageStack: MultiNavPathStack = new MultiNavPathStack();\n @Builder\n PageMap(name: string, param?: object) {\n if (name === 'PageHome1') {\n PageHome1()\n }\n }",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"@Component\nexport struct PageHome1 {\n @State message: string = 'PageHome1';\n @Consume('pageStack') pageStack: MultiNavPathStack;\n build() {\n NavDestination() {\n Column() {\n Button('pop', { stateEffect: true, type: ButtonType.Capsule})\n .width('50%')\n .height(40)\n .margin(20)\n .onClick(() => {\n if (this.pageStack !== undefined && this.pageStack !== null) {\n this.pageStack.pop();\n }\n })\n }\n }\n .hideTitleBar(true)\n }\n }",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { MultiNavPathStack } from \"@ohos/multinavigation\";",
"methodName":""
}]
}
},{
"name": "@ohos/vlayout",
"id": "77",
"image": "",
"description": "vlayout能够处理列表、网格和其他布局在同一个视图的复杂情况，使用者可以使用已设定好的容器布局组件，也可以在此基础上自定义容器布局组件。",
"codeInfo": {
"insertCode": "GRID_LAYOUT({\n vLayoutContent: (item: layoutDataType, position: number, gridItemHeight: number) => {\n this.gridLayoutContent(item, position, gridItemHeight)\n },\n vLayoutData: [\n { layoutText: 1 }, { layoutText: 2 }, { layoutText: 3 }, { layoutText: 4 },\n { layoutText: 5 }, { layoutText: 6 }, { layoutText: 7 }, { layoutText: 8 },\n ],\n vLayoutAttribute: {\n range: [0, 7],\n spanCount: 3,\n weights: [25, 25],\n layoutHeight: 300,\n bgColor: Color.Pink,\n gap: 10,\n padding: [10, 10, 10, 10],\n margin: [10, 10, 10, 10],\n }\n })",
"importCode": "import { GRID_LAYOUT, layoutDataType } from '@ohos/vlayout';",
"dependenciesName": "@ohos/vlayout",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：vlayout能够处理列表、网格和其他布局在同一个视图的复杂情况，使用者可以使用已设定好的容器布局组件，也可以在此基础上自定义容器布局组件。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fvlayout\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@Builder \ngridLayoutContent(item: layoutDataType, position: number, gridItemHeight: number) {\n Text(`${item.layoutText}`)\n .width('100%')\n .height(200)\n .backgroundColor(0x33EEEEEE)\n .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })\n .fontColor(0x999999)\n .fontSize(50)\n .fontWeight(FontWeight.Bold)\n .textAlign(TextAlign.Center)\n .onClick(() => {\n console.info('position = ' + position)\n })\n}",
"methodName":""
}]
}
},{
"name": "@open_9527/dialog",
"id": "78",
"image": "",
"description": "基于PromptAction 开发自定义dialog，简单好用，拒绝CustomDialog繁琐操作",
"codeInfo": {
"insertCode": "Button('点击显示加载动画').onClick(()=>{\nTipsDialogManager.showLoading();\nsetTimeout(() => {\n TipsDialogManager.dismiss();\n },2000)\n})\nButton('点击显示dialog').onClick(()=>{\nPromptActionUtils.getInstance().openCustomDialog<PromptSettings>(wrapBuilder(customDialogComponent),\n {\n //配置动画\n hasAnimation: true,\n animationDelay: 300,\n maskColor: Color.Transparent,\n transition: PromptActionUtils.getInstance().transitionInDown(),\n alignment: DialogAlignment.Center,\n onWillDismiss: () => {\n }\n })\n})",
"importCode": "import { PromptActionUtils, PromptSettings, TipsDialogManager } from '@open_9527/dialog';\nimport { customDialogComponent } from './LibraryExtraFile';",
"dependenciesName": "@open_9527/dialog",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：基于PromptAction 开发自定义dialog，简单好用，拒绝CustomDialog繁琐操作。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@open_9527%2Fdialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":3,
"methodPosition":0,
"code":" @Builder\n export function customDialogComponent(setting: PromptSettings) {\n Column() {\n Text('弹窗').fontSize(30)\n Row({ space: 50 }) {\n Button(\"确认\").onClick(() => {\n PromptActionUtils.getInstance().closeCustomDialog(setting.dialogId);\n })\n Button(\"取消\").onClick(() => {\n PromptActionUtils.getInstance().closeCustomDialog(setting.dialogId);\n })\n }\n }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween).backgroundColor(Color.Gray)\n }\n",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { PromptActionUtils, PromptSettings } from \"@open_9527/dialog\";",
"methodName":""
}]
}
},{
"name": "CircleIndicator",
"id": "79",
"image": "",
"description": "CircleIndicator是一款UI组件库，为Tabs/Swiper容器提供了多种自定义风格的指示器",
"codeInfo": {
"insertCode": "TriangularIndicator({ itemIndex: this.itemIndex, count: this.data.length, model: this.model })\n Tabs({ index: this.itemIndex, controller: this.controller }) {\n this.TabContentSample(0);\n this.TabContentSample(1);\n this.TabContentSample(2)\n }\n .barWidth(0)\n .onTouch((event: TouchEvent) => {\n this.model.notifyTouch(event, this.itemIndex);\n }).onChange((index)=>{\n this.itemIndex = index;\n })",
"importCode": "import { TriangularIndicator, TriangularModel } from '@ohos/circleindicator';",
"dependenciesName": "@ohos/circleindicator",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：CircleIndicator是一款UI组件库，为Tabs/Swiper容器提供了多种自定义风格的指示器。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fcircleindicator\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.model\n .setReverse(true)\n .setLineHeight(4)\n .setTriangleHeight(10)\n .setLineColor(\"#e94220\")\n .setBackgroundColor(\"#eeeeee\")\n .setChangeListener((itemIndex: number) => {\n console.info(\"change page to \" + this.data[itemIndex])\n })",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"private controller: TabsController = new TabsController();\n model: TriangularModel = new TriangularModel(this.controller);\n@State itemIndex: number = 0;private data: Array<string> = [\"CUPCAKE\", \"DONUT\", \"ECLAIR\", \"GINGERBREAD\", \"NOUGAT\", \"DONUT\"];\n@Builder \nTabContentSample(index: number) {\n TabContent() {\n Text(this.data[index]).fontSize(30).textAlign(TextAlign.Center)\n }\n }",
"methodName":""
}]
}
},{
"name": "@nzy/logger",
"id": "80",
"image": "",
"description": "HarmonyOS使用的日志库，具备轻量、美观强大、可扩展的特性。使用API 12，点击可以跳转到源文件",
"codeInfo": {
"insertCode": "",
"importCode": "import { FileStrategy, Logger } from '@nzy/logger';",
"dependenciesName": "@nzy/logger",
"dependenciesVersion": "1.0.7",
"codeAnnotation": "/**\n * 功能描述：HarmonyOS使用的日志库，具备轻量、美观强大、可扩展的特性。使用API 12，点击可以跳转到源文件。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@nzy%2Flogger\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// 或者传递过去，如果要是写入文件 jsonWrite = true ，必须传递parentPath，必须传递 FileStrategy\nLogger.init({\n domain: 0x0000, // domain\n isEnable: true, // 是否打印，默认是 true，是否打印，不影响写文件\n isShowFile: true, // 是否显示打印日志文件的位置 默认 true\n tag: 'MyTag', // 全局TAG 默认是 Logger\n jsonWrite: true, // 是否写入文件 默认是 true\n debugLevelWrite: true, // debug级别的是否写入文件 默认是 true\n parentPath: '' // 写入文件的 parent 路径\n},\n new FileStrategy(`${Date.now()}.txt`)// 要写入文件策略模式，自己也可以去实现\n);\nLogger.debug('hello world');",
"methodName":"aboutToAppear"
}]
}
},{
"name": "@wuyan/html_parse",
"id": "81",
"image": "",
"description": "一款轻量级富文本解析器-支持自定义主题色-支持事件回调-支持调整字体大小等，支持标签嵌套等复杂显示逻辑。",
"codeInfo": {
"insertCode": "Scroll(this.scroller) {\n HmParseHTML({\n htmlStr:this.htmlStr, // 富文本内容-必传\n });\n }",
"importCode": "import {HmParseHTML} from \"@wuyan/html_parse\";",
"dependenciesName": "@wuyan/html_parse",
"dependenciesVersion": "1.0.7",
"codeAnnotation": "/**\n * 功能描述：一款轻量级富文本解析器-支持自定义主题色-支持事件回调-支持调整字体大小等，支持标签嵌套等复杂显示逻辑。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@wuyan%2Fhtml_parse\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.htmlStr='<h1>h1标签</h1><h2>h2标签</h2><p>p标签</p><a href=\"http://www.baidu.com\">a标签</a><img style=\"width: 750px;height: 500px;\" src=\"https://img2.baidu.com/it/u=1544882228,2394903552&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500\" /><img style=\"width: 750px;height: 500px;\" src=\"https://img0.baidu.com/it/u=3422287847,344441285&fm=253&fmt=auto&app=138&f=JPEG?w=604&h=500\" ><input style=\"color:red\" placeholder=\"请输入...\" type=\"number\" maxlength=\"2\" value=\"我是input标签\"/><div>无序列表</div><ul><li>无序列表1</li><li>无序列表2</li></ul><p>有序列表</p><ol><li>有序列表1</li><li>有序列表2</li></ol>'",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"scroller: Scroller = new Scroller();\n @State htmlStr:string =``;",
"methodName":""
}]
}
},{
"name": "@abner/banner",
"id": "82",
"image": "",
"description": "HarmonyOsBanner是一个基于系统Api的Swiper而封装的一个轮播图，旨在简化代码，扩展相关功能，使用非常简单！",
"codeInfo": {
"insertCode": "Banner({\n data: this.data, //数据源，任意类型\n itemPage: this.itemPage, //轮播组件 @Builder\n onChange: (position) => {\n //页面改变回调\n this.currentPosition = position;\n }\n })",
"importCode": "import {Banner} from \"@abner/banner\";",
"dependenciesName": "@abner/banner",
"dependenciesVersion": "1.0.3",
"codeAnnotation": "/**\n * 功能描述：HarmonyOsBanner是一个基于系统Api的Swiper而封装的一个轮播图，旨在简化代码，扩展相关功能，使用非常简单！\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fbanner\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State data: string[] = [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\"];\n @State currentPosition: number = 0;\n\n @Builder\n itemPage(index: number, item: Object) {\n Column() {\n Text(this.data[index])\n }.backgroundColor(Color.Pink)\n .height('100%')\n .width('100%')\n }",
"methodName":""
}]
}
},{
"name": "@ohos/photoview",
"id": "83",
"image": "",
"description": "图片缩放浏览组件，图片可缩放，平移，旋转",
"codeInfo": {
"insertCode": "PhotoView({model: this.data})",
"importCode": "import {PhotoView} from '@ohos/photoview';",
"dependenciesName": "@ohos/photoview",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：图片缩放浏览组件，图片可缩放，平移，旋转\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fphotoview\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.data\n.setImageResource($r('app.media.app_icon'))\n.setScale(1, false)\n.setImageFit(ImageFit.Contain)\n.setOnPhotoTapListener({\nonPhotoTap(x:number,y:number){\n}\n})",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"data: PhotoView.Model = new PhotoView.Model();",
"methodName":""
}]
}
},{
"name": "FFmpeg for HarmonyOS",
"id": "84",
"image": "",
"description": "目前移植了 fftools/ffmpeg, fftools/ffprobe, 可以在App中执行 ffmpeg 及 ffprobe 相关的脚本命令",
"codeInfo": {
"insertCode": "Button('执行命令').onClick(()=>{\nlet commands:string[] = [\"ffmpeg\", \"-i\", \"原视频地址\", \"输出视频地址\", \"-y\"];\nFFmpeg.execute(commands, {\n logCallback: (logLevel: number, logMessage: string) => console.log(`[${logLevel}]${logMessage}`),\n progressCallback: (message: string) => console.log(`[progress]${JSON.stringify(FFProgressMessageParser.parse(message))}`),\n}).then(() => {\n console.info(\"FFmpeg execution succeeded.\");\n}).catch((error: Error) => {\n console.error(`FFmpeg execution failed with error: ${error.message}`);\n});\n})",
"importCode": "import { FFProgressMessageParser, FFmpeg } from '@sj/ffmpeg';",
"dependenciesName": "@sj/ffmpeg",
"dependenciesVersion": "1.0.8",
"codeAnnotation": "/**\n * 功能描述：目前移植了 fftools/ffmpeg, fftools/ffprobe, 可以在App中执行 ffmpeg 及 ffprobe 相关的脚本命令\n * README：https://ohpm.openharmony.cn/#/cn/detail/@sj%2Fffmpeg\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "ARCVIEW",
"id": "85",
"image": "",
"description": "gauge with gradient clip",
"codeInfo": {
"insertCode": "ArcProgressView({\n isDebug: true,\n steps: 15,\n bgColor: '#0f000000',\n maxAngleDegree: this.maxAngleDegree,\n curAngleDegree: this.curAngleDegree,\n enableGesture: true,\n widthVp: pp(280),\n heightVp: pp(280),\n arcBgStrokeWidthVp: pp(50 + 1 + 0.5),\n arcOuterStrokeWidthVp: pp(20),\n arcInnerStrokeWidthVp: pp(30),\n arcIndicatorStrokeWidthVp: pp(42),\n arcBgWidthVp: pp(280),\n arcOuterWidthVp: pp(280) - pp(1 * 2),\n arcInnerWidthVp: pp(280) - pp(1 * 2) - pp(20) * 2,\n arcIndicatorWidthVp: pp(280) - pp(1 * 2 + 4),\n arcBgColors: [[\"#CCd0dae4\", 0.00], [\"#EEd0dae4\", 1.00]],\n arcOuterColors: ArcColors.arcOuterColors,\n arcInnerColors: ArcColors.arcInnerColors,\n enableIndicator: true,\n arcIndicatorColors: [[\"#00000000\", 0.00], [\"#00000000\", 1.00]],\n buttonPlusEnable: true,\n buttonMinusEnable: true,\n buttonBgSize: pp(50 + 1 + 0.5) + pp(5),\n buttonIconSize: pp(25),\n buttonMinusOffsetX: undefined,\n buttonMinusOffsetY: undefined,\n buttonPlusOffsetX: undefined,\n buttonPlusOffsetY: undefined,\n onButtonClicked: (isMinusButtonClicked: boolean, angleDegree: ANGLE_DEGREE) => {\n console.info('onButtonClicked isMinus=' + isMinusButtonClicked + ', angleDegree=' + angleDegree);\n },\n onAngleDegreeChanged: (angleDegree: ANGLE_DEGREE) => {\n console.info('onAngleDegreeChanged angleDegree=' + angleDegree);\n },\n onTouchChanged: (isTouching: boolean, event: GestureEvent) => {\n let fingerInfo = event.fingerList[0];\n let localX = fingerInfo?.localX;\n let localY = fingerInfo?.localY;\n console.info('onTouchChanged isTouch=' + isTouching + ', event=(' + localX + ',' + localY + ')');\n }\n })\n .margin(pp(32))\n .alignRules({\n center: { anchor: '__container__', align: VerticalAlign.Center },\n middle: { anchor: '__container__', align: HorizontalAlign.Center }\n })\n",
"importCode": "import { ANGLE_DEGREE, ArcColors, ArcProgressView, ArcView, pp } from 'arcview';",
"dependenciesName": "arcview",
"dependenciesVersion": "1.0.2",
"codeAnnotation": "/**\n * 功能描述：gauge with gradient clip\n * README：https://ohpm.openharmony.cn/#/cn/detail/arcview\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"public steps: number = 15;\n public maxAngleDegree: ANGLE_DEGREE = 220;\n @Watch('onCurAngleDegreeChanged')\n @State\n public curAngleDegree: ANGLE_DEGREE = this.maxAngleDegree / this.steps * 5;\n public onCurAngleDegreeChanged() {\n console.log('onCurAngleDegreeChanged curAngleDegree=' + this.curAngleDegree);\n }\n",
"methodName":""
}]
}
},{
"name": "@happay/happay_hud",
"id": "86",
"image": "",
"description": "利用Window子窗口承载各种类型弹窗、提供了丰富的提示-操作弹框。dialog、aleart、 sheet、 toast、 progress、 confirm 、 input弹框组件，从简单一行代码开始。",
"codeInfo": {
"insertCode": "Button('点击显示loading').onClick(()=>{\nhappayHUD.showLoad({\n message:\"loading\",\n maskType:HudMaskType.Black,\n onClickDismiss:true\n })\n})\nButton('点击显示dialog').onClick(()=>{\n happayDialog.showAlert({\n gridCount: 4,\n title: '标题',\n content: \"标题、内容 均可修改位置、大小、颜色、字体、边距。按钮可修改字体颜色大小内容，按钮背景色默认白色\",\n confirm: (index: number) => {\n console.debug(\"点击了第\", +index + \"个\");\n },\n cancel: () => { // 消失回调\n console.debug(\"窗口消失\");\n }\n })\n\n})",
"importCode": "import {HudMaskType,happayHUD,happayDialog} from '@happay/happay_hud';",
"dependenciesName": "@happay/happay_hud",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：利用Window子窗口承载各种类型弹窗、提供了丰富的提示-操作弹框。dialog、aleart、 sheet、 toast、 progress、 confirm 、 input弹框组件，从简单一行代码开始。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@happay%2Fhappay_hud\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":1,
"methodPosition":0,
"code":"happayWindow.setWindowStage(windowStage);",
"methodName":"onWindowStageCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"happayWindow.release();",
"methodName":"onDestroy()"
},{
"fileType":1,
"methodPosition":0,
"code":"import {happayWindow} from '@happay/happay_hud';",
"methodName":""
}]
}
},{
"name": "@candies/image_cropper",
"id": "87",
"image": "",
"description": "一个图片裁剪组件，支持裁剪、旋转、缩放、拖动、镜像、撤消、重做、获取裁剪数据等操作。",
"codeInfo": {
"insertCode": "if (this.image != undefined) {\n ImageCropper(\n {\n image: this.image,\n config: this.config,\n }\n )\n }",
"importCode": "import * as image_cropper from \"@candies/image_cropper\";\nimport { ImageCropper } from \"@candies/image_cropper\";\nimport { image } from '@kit.ImageKit';\nimport { resourceManager } from \"@kit.LocalizationKit\";",
"dependenciesName": "@candies/image_cropper",
"dependenciesVersion": "1.1.0",
"codeAnnotation": "/**\n * 功能描述：一个图片裁剪组件，支持裁剪、旋转、缩放、拖动、镜像、撤消、重做、获取裁剪数据等操作。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@candies%2Fimage_cropper\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State image: image.ImageSource | undefined = undefined;\n private controller: image_cropper.ImageCropperController = new image_cropper.ImageCropperController();\n @State config: image_cropper.ImageCropperConfig = new image_cropper.ImageCropperConfig(\n {\n maxScale: 8,\n cropRectPadding: image_cropper.geometry.EdgeInsets.all(20),\n controller: this.controller,\n initCropRectType: image_cropper.InitCropRectType.imageRect,\n cropAspectRatio: image_cropper.CropAspectRatios.custom,\n }\n );\nasync init(): Promise<void> {\n const context: Context = getContext(this);\n const resourceMgr: resourceManager.ResourceManager = context.resourceManager;\n let rfd = await resourceMgr.getRawFd('替换为rawfile目录下的图片路径');\n this.image = image.createImageSource(rfd);\n }",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"this.init();",
"methodName":"aboutToAppear"
}]
}
},{
"name": "hm_image_select_view",
"id": "88",
"image": "",
"description": "Harmony Next 图片选择库，可设置最大选择数量、单行显示数量、横向竖向间隔；点击图片后全屏预览",
"codeInfo": {
"insertCode": "ImageSelectView({\n maxSelect: 9, // 最大选择数\n columns: 4, // 一行显示数\n gutterX: 10, // 横向间隔\n gutterY: 10, // 竖向间隔\n MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, // IMAGE_TYPE：图片（默认）；VIDEO_TYPE：视频；IMAGE_VIDEO_TYPE：图片+视频；MOVING_PHOTO_IMAGE_TYPE：动态照片\n isOriginalSupported: true, // 是否显示选择原图按钮\n isEditSupported: true, // 是否支持编辑照片\n subWindowName: '子窗窗口名称', // 子窗窗口名称\n imageList: this.imgList, // 提前传入部分图片，则选择数减少\n onImageListChange: (images) => {\n\n }\n })",
"importCode": "import { ImageSelectView } from 'image_select_view';\nimport { photoAccessHelper } from '@kit.MediaLibraryKit';",
"dependenciesName": "image_select_view",
"dependenciesVersion": "1.0.8",
"codeAnnotation": "/**\n * 功能描述：Harmony Next 图片选择库，可设置最大选择数量、单行显示数量、横向竖向间隔；点击图片后全屏预览\n * README：https://ohpm.openharmony.cn/#/cn/detail/image_select_view\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"this.imgList = [\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png\",\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select2.png\",\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png\",\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png\",\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png\",\n \"https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png\"]",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"@State imgList: string[] = []",
"methodName":""
}]
}
},{
"name": "@abner/tab",
"id": "89",
"image": "",
"description": "HarmonyOsTab是一个封装了主页底部按钮和通用的指示器tab，优化了系统tab，支持指示器跟随手势滑动,支持自定义指示器，支持右侧添加按钮。",
"codeInfo": {
"insertCode": "BottomTabLayout({\n itemPage: this.itemPage, //tab对应的页面\n tabSelectedColor: \"#D81E06\", //文字选择颜色\n tabNormalColor: Color.Black, //文字未选择颜色\n tabLabelMarginTop: 10, //文字距离图片的高度\n tabScrollable: false, //是否可以滑动\n tabMarginBottom: 30, //距离底部的距离，一般可以获取底部导航栏的高度，然后进行设置\n onChangePage: (position) => {\n //页面切换\n console.log(\"===========页面切换:\" + position)\n },\n onTabBarClick: (position) => {\n //tab点击\n console.log(\"===========单击:\" + position)\n },\n onDoubleClick: (position) => {\n //双击\n console.log(\"===========双击:\" + position)\n },\n tabBar: [\n new TabBar(\"首页\", $r(\"app.media.startIcon\"), $r(\"app.media.startIcon\")),\n new TabBar(\"网络\", $r(\"app.media.startIcon\"), $r(\"app.media.startIcon\")),\n new TabBar(\"列表\", $r(\"app.media.startIcon\"), $r(\"app.media.startIcon\")),\n new TabBar(\"组件\", $r(\"app.media.startIcon\"), $r(\"app.media.startIcon\"))\n ],\n })",
"importCode": "import {BottomTabLayout, TabBar} from '@abner/tab';",
"dependenciesName": "@abner/tab",
"dependenciesVersion": "1.0.5",
"codeAnnotation": "/**\n * 功能描述：HarmonyOsTab是一个封装了主页底部按钮和通用的指示器tab，优化了系统tab，支持指示器跟随手势滑动,支持自定义指示器，支持右侧添加按钮。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Ftab\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@Builder\n itemPage(index: number, item: TabBar) {\n Text(item.title)\n }",
"methodName":""
}]
}
},{
"name": "@ohos/base64",
"id": "90",
"image": "",
"description": "数据加解密工具。",
"codeInfo": {
"insertCode": "",
"importCode": "import {Base64} from '@ohos/base64';",
"dependenciesName": "@ohos/base64",
"dependenciesVersion": "2.0.1",
"codeAnnotation": "/**\n * 功能描述：数据加解密工具。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fbase64\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":" let test: number[] = [1,2,3,4,5,6,7,8,9]\n let encode = Base64.encode(new Uint8Array(test));\n console.info(\"base64 encode:\"+Base64.bytesToString(encode));\n console.info(\"base64 decode:\"+Base64.bytesToString(Base64.decode(encode)));\n let input='AABDCDHFAGA23';\n let encodeString = Base64.encodeToString(Base64.stringToBytes(input));\n let decodeString = Base64.bytesToString(Base64.decode(encodeString));",
"methodName":"aboutToAppear"
}]
}
},{
"name": "HPTDialog",
"id": "91",
"image": "",
"description": "HPTDialog 一款极简的弹框库，基于自定义弹框CustomDialog进行封装，并简化了其调用方式（在任何地方只需要调用show()方法即可），帮助开发者快速实现自定义的弹框效果，目前包含 HPTDialog 和 HPTBottomSheet 以及 HPTLoading",
"codeInfo": {
"insertCode": "HPTPopup() \n{Button('显示dialog').onClick(()=>{\nHPTDialogUtil.show({\n title: '是否确认退出登录？',\n cancel: \"取消\",\n message: \"退出说明xxxxx\",\n confirm: \"确认退出\",\n confirmOnClick: () => {\n // 执行退出登录逻辑\n }\n})\n})\n}",
"importCode": "import {HPTDialogUtil, HPTPopup} from '@gancao/hptdialog';",
"dependenciesName": "@gancao/hptdialog",
"dependenciesVersion": "1.0.5",
"codeAnnotation": "/**\n * 功能描述：HPTDialog 一款极简的弹框库，基于自定义弹框CustomDialog进行封装，并简化了其调用方式（在任何地方只需要调用show()方法即可），帮助开发者快速实现自定义的弹框效果，目前包含 HPTDialog 和 HPTBottomSheet 以及 HPTLoading\n * README：https://ohpm.openharmony.cn/#/cn/detail/@gancao%2Fhptdialog\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":1,
"methodPosition":0,
"code":"// 获取应用主窗口\nlet windowClass: window.Window = windowStage.getMainWindowSync();\n// 配置（获取安全区域）\nHPTPopup.init(windowClass);",
"methodName":"onWindowStageCreate"
},{
"fileType":1,
"methodPosition":0,
"code":"import { HPTPopup } from '@gancao/hptdialog';",
"methodName":""
}]
}
},{
"name": "cclyric",
"id": "92",
"image": "",
"description": "cclyric 是一个为 OpenHarmony 和 HarmonyOS 设计的音乐歌词组件库。",
"codeInfo": {
"insertCode": "LyricView2({ controller: this.lyricController,\n enableSeek: true, // 开启滑动歌词seek能力\n seekUIColor: \"#ff0000\",// 滑动定位的按钮和文本颜色\n seekLineColor: \"#80ffffff\",// 滑动定位线颜色\n seekUIStyle: \"listItem\",// 滑动定位样式（seekLine传统样式，listItem类似抖音汽水音乐样式）\n onSeekAction: (position) => { // 滑动歌词触发seek定位回调\n return true;\n }\n }).width(\"100%\").layoutWeight(1)",
"importCode": "import {LyricController, LyricParser,LyricView2} from '@seagazer/cclyric';",
"dependenciesName": "@seagazer/cclyric",
"dependenciesVersion": "1.0.7",
"codeAnnotation": "/**\n * 功能描述：cclyric 是一个为 OpenHarmony 和 HarmonyOS 设计的音乐歌词组件库。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@seagazer%2Fcclyric\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"// 2.自定义样式属性\n this.lyricController\n .setTextSize(24)\n .setCacheSize(4)\n .setTextColor(\"#8c000000\")\n .setHighlightColor(\"#ff000000\")\n .setLineSpace(16)\n .setHighlightScale(1.3)\n .setHighlightBold(true)\n .setHighlightBold(false).setEmptyHint(\"当前没有歌词\")\n .setAlignMode(\"center\")\n // 3.解析歌词\n let lyric = this.parser.parse(this.data);\n // 4.设置歌词\n this.lyricController.setLyric(lyric);",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"// 1.初始化controller\n private lyricController: LyricController = new LyricController();\n private parser = new LyricParser();\nprivate data: string[] = ['[00:00.00] 作词 : 宁缺',\n '[00:01.00] 作曲 : 宁缺',\n '[00:02.00] 编曲 : 曲比阿且',\n '[00:26.70]可能南方的阳光 照着北方的风',\n '[00:31.47]可能时光被吹走 从此无影无踪',\n '[00:36.55]可能故事只剩下 一个难忘的人',\n '[00:41.50]'];",
"methodName":""
}]
}
},{
"name": "@chinalike/popup",
"id": "93",
"image": "",
"description": "零侵入弹窗XPopup",
"codeInfo": {
"insertCode": "Button('点击显示').onClick(()=>{\nXPopup.Builder().asLoading().show();\n})",
"importCode": "import {XPopup} from '@chinalike/popup';",
"dependenciesName": "@chinalike/popup",
"dependenciesVersion": "0.0.7",
"codeAnnotation": "/**\n * 功能描述：零侵入弹窗XPopup\n * README：https://ohpm.openharmony.cn/#/cn/detail/@chinalike%2Fpopup\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"",
"methodName":""
}]
}
},{
"name": "@coremail/mail_base",
"id": "94",
"image": "",
"description": "本SDK为方便开发邮件客户端而开发。提供了标准邮件协议解析，MIME格式解析，MSG格式解析等邮件客户端相关的功能。",
"codeInfo": {
"insertCode": "",
"importCode": "import { MailEngine } from \"@coremail/mail_base\";\nimport { BusinessError } from \"@kit.BasicServicesKit\";",
"dependenciesName": "@coremail/mail_base",
"dependenciesVersion": "1.0.1",
"codeAnnotation": "/**\n * 功能描述：本SDK为方便开发邮件客户端而开发。提供了标准邮件协议解析，MIME格式解析，MSG格式解析等邮件客户端相关的功能。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@coremail%2Fmail_base\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"async libraryExample(){\nconst engine = new MailEngine();\nengine.setProperties({\n imap: { host: \"host地址\", port: 993, secure: true },\n smtp: { host: \"host地址\", port: 25, secure: false },\n userInfo: { username: \"用户名\", password: \"用户密码\" },\n});\nconst store = engine.getStore();\nconst transport = engine.getTransport();\n// 是否登录成功\nconst success = await Promise.all([store.check(), transport.check()]).then(v => true)\n .catch((e:BusinessError) => false);\n// 得到收件箱对象\nconst inbox = await engine.getInbox();\n}",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"this.libraryExample();",
"methodName":"aboutToAppear"
}]
}
},{
"name": "HarmonyOsDataStore",
"id": "95",
"image": "",
"description": "HarmonyOsDataStore是一个用于数据存储的工具库，支持用户首选项存储、键值型数据库存储、支持关系型数据库操作，让数据存储使用变得更加的简单。",
"codeInfo": {
"insertCode": "Button('点击存储').onClick(()=>{\nDataPreferences.getInstance().put(\"key\", \"value\", (isSuccess: boolean, error:BusinessError) => {\n if (isSuccess) {\n console.log(\"存储成功\")\n } else {\n console.log(\"存储失败\" + error?.message)\n }\n})\n})",
"importCode": "import {DataPreferences} from '@abner/datastore';\nimport { BusinessError } from '@kit.BasicServicesKit';",
"dependenciesName": "@abner/datastore",
"dependenciesVersion": "1.0.4",
"codeAnnotation": "/**\n * 功能描述：HarmonyOsDataStore是一个用于数据存储的工具库，支持用户首选项存储、键值型数据库存储、支持关系型数据库操作，让数据存储使用变得更加的简单。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdatastore\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"//使用用户首选项存储，此初始化必须\nDataPreferences.getInstance().init(getContext());",
"methodName":"aboutToAppear"
}]
}
},{
"name": "HarmonyOS Debug Database",
"id": "96",
"image": "",
"description": "HarmonyOS Debug Database 是一款功能强大的鸿蒙应用数据库调试工具，方便开发人员在应用程序 Debug 版本下快速调试关系型数据库 (RdbStore)、用户首选项 (Preferences)、键值数据库 (KVStore)、AppStorage。",
"codeInfo": {
"insertCode": "",
"importCode": "import {DebugDB} from '@hadss/debug-db';\nimport { common } from '@kit.AbilityKit';",
"dependenciesName": "@hadss/debug-db",
"dependenciesVersion": "1.0.0-rc.6",
"codeAnnotation": "/**\n * 功能描述：HarmonyOS Debug Database 是一款功能强大的鸿蒙应用数据库调试工具，方便开发人员在应用程序 Debug 版本下快速调试关系型数据库 (RdbStore)、用户首选项 (Preferences)、键值数据库 (KVStore)、AppStorage。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@hadss%2Fdebug-db\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"const context = getContext(this) as common.UIAbilityContext;\nDebugDB.initialize(context); // 在浏览器中访问 http://XXX.XXX.XXX.XXX:8080/index.html (详细地址请在 Log 中查看)",
"methodName":"aboutToAppear"
}]
}
},{
"name": "video_trimmer",
"id": "97",
"image": "",
"description": "video_trimmer is a third-party library that provides the video clip capability on OpenHarmony.",
"codeInfo": {
"insertCode": "VideoTrimmerView( {videoTrimmerOption:this.videoTrimmerOption})",
"importCode": "import { VideoTrimmerOption, VideoTrimmerView } from '@ohos/videotrimmer';\nimport { image } from '@kit.ImageKit';",
"dependenciesName": "@ohos/videotrimmer",
"dependenciesVersion": "1.1.2",
"codeAnnotation": "/**\n * 功能描述：video_trimmer is a third-party library that provides the video clip capability on OpenHarmony.\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fvideotrimmer\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"getContext(this).resourceManager.getMediaContent($r('app.media.app_icon'))\n .then(uint8 =>{\n let imageSource = image.createImageSource(uint8.buffer as Uint8Array); // Step 1: Convert a file into a pixelMap and converting the pixelMap to an Image component.\n imageSource.createPixelMap().then(pixelmap => {\n this.videoTrimmerOption = {\n srcFilePath: '视频文件路径',\n listener:{\n onStartTrim: ()=>{\n console.log ('dodo Started clipping');\n },\n onFinishTrim:(path:string) => {\n console.log ('dodo Clipping success path='+path);\n },\n onCancel:()=>{\n console.log ('dodo Canceled by user');\n }\n },\n loadFrameListener:{\n onStartLoad:()=>{\n console.log('dodo Started obtaining frame data.');\n },\n onFinishLoad:()=>{\n console.log('dodo Obtaining frame data ended');\n }\n },\n frameBackground: \"#FF669900\",\n framePlaceholder: pixelmap\n }\n })\n })",
"methodName":"aboutToAppear"
},{
"fileType":2,
"methodPosition":0,
"code":"videoTrimmerOption:VideoTrimmerOption=new VideoTrimmerOption();",
"methodName":""
}]
}
},{
"name": "rdb-plus ",
"id": "98",
"image": "",
"description": "这是一个sqlite的增强工具，无需编写sql代码，通过继承BaseMapper类，一行搞定增删改查，为简化开发、提高效率而生。",
"codeInfo": {
"insertCode": "Button('查询全部数据').onClick(async () => {\n // 查询全部\n let list:Employee[] = await this.empMapper.getList(new Wapper());\n // 条件查询\n let list2: Employee[] = await this.empMapper.getList(new Wapper().eq('name', '李四'));\n // 统计总数\n const num:number = await this.empMapper.count(new Wapper());\n })",
"importCode": "import { Wapper } from 'rdbplus';\nimport { Employee, EmpMapper } from './LibraryExtraFile';",
"dependenciesName": "rdbplus",
"dependenciesVersion": "1.0.8",
"codeAnnotation": "/**\n * 功能描述：这是一个sqlite的增强工具，无需编写sql代码，通过继承BaseMapper类，一行搞定增删改查，为简化开发、提高效率而生。\n * README：https://ohpm.openharmony.cn/#/cn/detail/rdbplus\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":3,
"methodPosition":0,
"code":"export class Employee {\n id: number=0;\n name: string='';\n constructor() {\n }\n}\nconst getRow = (res: relationalStore.ResultSet) => {\n const emp = new Employee();\n emp.id = res.getLong(res.getColumnIndex('id'));\n emp.name = res.getString(res.getColumnIndex('name'));\n return emp;\n}\n\nexport class EmpMapper extends BaseMapper<Employee> {\n constructor() {\n super(\n { tableName: 't_emp', primaryKey: 'id' },\n getRow,\n // 可选参数\n { name: 'demo.db', securityLevel: relationalStore.SecurityLevel.S1 }\n )\n }\n}",
"methodName":""
},{
"fileType":3,
"methodPosition":0,
"code":"import { relationalStore } from '@kit.ArkData';\nimport { BaseMapper } from 'rdbplus';",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"empMapper = new EmpMapper();",
"methodName":""
}]
}
},{
"name": "subsampling-scale-image-view",
"id": "99",
"image": "",
"description": "深度缩放视图，图像显示，手势平移缩放双击等。",
"codeInfo": {
"insertCode": "//使用SubsamplingScaleImageView组件\n SubsamplingScaleImageView({ model: this.model })",
"importCode": "import {SubsamplingScaleImageView} from '@ohos/subsampling-scale-image-view';",
"dependenciesName": "@ohos/subsampling-scale-image-view",
"dependenciesVersion": "2.1.0",
"codeAnnotation": "/**\n * 功能描述：深度缩放视图，图像显示，手势平移缩放双击等。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fsubsampling-scale-image-view\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"//创建model对象\nmodel: SubsamplingScaleImageView.Model = new SubsamplingScaleImageView.Model();",
"methodName":""
},{
"fileType":2,
"methodPosition":0,
"code":"this.model.setImage($r('app.media.app_icon'));",
"methodName":"aboutToAppear"
}]
}
},{
"name": "UIAlertView",
"id": "100",
"image": "",
"description": "一个仿iOS alert组件创建的弹窗库，已支持弹窗输入框样式。",
"codeInfo": {
"insertCode": "Button('点击显示弹窗').onClick(()=>{\nlet controller = new UIAlertView('弹窗提示', '这是一个系统弹窗，仿iOS风格是吗', UIAlertControllerStyle.Alert, this);\n let confirmAction = new UIAlertAction('确定', UIAlertActionStyle.Destructive, (action) => {\n controller.close();\n });\n let okAction = new UIAlertAction('知道了', UIAlertActionStyle.Default, (action) => {\n controller.close();\n });\n let cancelAction = new UIAlertAction('取消', UIAlertActionStyle.Cancel, (action) => {\n controller.close();\n })\n controller.addAction(confirmAction);\n // controller.addAction(okAction);\n controller.addAction(cancelAction);\n controller.show();\n})",
"importCode": "import {UIAlertView,UIAlertAction} from '@yung/uialertview';import { UIAlertControllerStyle} from '@yung/uialertview//src/main/ets/components/UIAlertController';\nimport { UIAlertActionStyle} from '@yung/uialertview//src/main/ets/components/UIAlertAction';",
"dependenciesName": "@yung/uialertview",
"dependenciesVersion": "1.0.11",
"codeAnnotation": "/**\n * 功能描述：一个仿iOS alert组件创建的弹窗库，已支持弹窗输入框样式。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@yung%2Fuialertview\n */",
"napi": false,
"permissions":[],
"extraInfos":[]
}
},{
"name": "@xinyansoft/oh-crop",
"id": "101",
"image": "",
"description": "oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。",
"codeInfo": {
"insertCode": "CropView({\n model: this.model,\n})\n .layoutWeight(1)\n .width('100%')",
"importCode": "import {CropView,CropModel} from '@xinyansoft/oh-crop';",
"dependenciesName": "@xinyansoft/oh-crop",
"dependenciesVersion": "1.0.3",
"codeAnnotation": "/**\n * 功能描述：oh-crop: OpenHarmony/HarmonyOS上的简单的图片剪裁库，可用于头像剪裁等常见场景。\n * README：https://ohpm.openharmony.cn/#/cn/detail/@xinyansoft%2Foh-crop\n */",
"napi": false,
"permissions":[],
"extraInfos":[{
"fileType":2,
"methodPosition":0,
"code":"@State private model: CropModel = new CropModel()\n .setFrameWidth(1000)\n // 如果要矩形取景框，把这个设置删掉\n .setEllipseFrame(true)\n // 如果要圆形，把比例设置成1\n .setFrameRatio(0.8)\n.setImage('替换为图片地址');",
"methodName":""
}]
}
}
]
}
]
}
]
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )