1# 多媒体发布 2 3### 介绍 4 5本示例主要介绍使用[@ohos.file.photoAccessHelper](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper.md#photoaccesshelpergetphotoaccesshelper)实现访问系统相册获取媒体资源的多媒体发布场景。 该场景多用于社交软件朋友圈、评论动态发布的场景。 6 7### 效果图预览 8 9 10 11**使用说明**： 12 131. 点击右上角添加标志，弹出分享菜单。 142. 分别点击文字、照片、视频发布按键，弹出发布内容的自定义弹窗。 153. 在系统相册中选择相应的媒体资源进行发布。 16 17### 实现思路 181. 使用LazyForEach+cachedCount+@Reusable实现懒加载列表，并且缓存附近组件。源码参考[PublishMultimediaUpdates.ets](./publishmultimediaupdate/src/main/ets/pages/PublishMultimediaUpdates.ets)和[OneMoment.ets](./publishmultimediaupdate/src/main/ets/components/OneMoment.ets)。 19 ```typescript 20 21 List({ space: ListConstants.LIST_SPACE, scroller: this.listScroller }) { 22 // TODO：高性能知识点：列表数据较多，不需要全部渲染上屏，采用LazyForEach。 23 LazyForEach(this.commentList, (moment: FriendMoment) => { 24 ListItem() { 25 OneMoment({ moment: moment }); 26 27 } 28 }, (moment: FriendMoment) => moment.id) 29 } 30 // TODO：高性能知识点：为保证滑动流畅，采用cachedCount缓存前后节点。 31 .cachedCount(this.cachedCountNumber) 32 .width($r('app.string.publish_multimedia_updates_layout_100')) 33 .height($r('app.string.publish_multimedia_updates_layout_94')) 34 .listDirection(Axis.Vertical) 35 .divider({ 36 strokeWidth: $r('app.integer.publish_multimedia_updates_divider_width'), 37 color: $r('app.color.publish_multimedia_updates_divider_color'), 38 startMargin: $r('app.integer.publish_multimedia_updates_list_divider_margin'), 39 endMargin: $r('app.integer.publish_multimedia_updates_list_divider_margin') 40 }) 41 42 43 ``` 442. 使用[@ohos.file.photoAccessHelper](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-media-library-kit/js-apis-photoAccessHelper.md#photoaccesshelpergetphotoaccesshelper)对图库资源进行选取访问。 45 ```typescript 46 async getPictureFromAlbum() { 47 // 拉起相册，选择图片 48 let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 49 // 选择图库内媒体资源种类 50 PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; 51 // 设置媒体文件选择数量上限 52 PhotoSelectOptions.maxSelectNumber = this.maxSelectMedia; 53 // 创建photoPicker 54 let photoPicker = new photoAccessHelper.PhotoViewPicker(); 55 // 使用photoAccessHelper获取媒体资源信息 56 let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions); 57 // 获取对应资源文件uri地址 58 this.selectedImages = photoSelectResult.photoUris[0]; 59 60 } 61 ``` 62 63### 高性能知识点 64 65参考了[长列表加载性能优化](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/performance/list-perf-improvment.md)，使用了里面的LazyForEach+cacheCount+@Reusable实现长列表不卡顿滑动。 66 67### 工程结构&模块类型 68 69``` 70 publishmultimediaupdate // har包 71 |---components 72 | |---ImageText // 图标+文字组件 73 | |---OneMoment // 列表内图文混排组件 74 |---constants 75 | |---ListConstants // 列表常量 76 |---model 77 | |---BasicDataSource // 列表LazyForEach数据类 + 图文数据类 78 | |---mockdata // 模拟列表数据内容 79 |---pages 80 | |---CommentInputDialog // 内容输入弹窗 81 | |---PublishMultimediaUpdates // 多媒体发布主页面 82``` 83 84### 模块依赖 85 86不涉及 87 88### 参考资料 89 90[LazyForEach详细用法](https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md) 91 92### 相关权限 93 94不涉及 95 96### 约束与限制 97 981.本示例仅支持在标准系统上运行。 99 1002.本示例为Stage模型，支持API12版本SDK，SDK版本号（API Version 12 Release）。 101 1023.本示例需要使用DevEco Studio 5.0.4 Release 才可编译运行。 103 104### 下载 105 106如需单独下载本工程，执行如下命令： 107``` 108git init 109git config core.sparsecheckout true 110echo code/Solutions/Social/PublishMultimediaUpdate/ > .git/info/sparse-checkout 111git remote add origin https://gitee.com/openharmony/applications_app_samples.git 112git pull origin master 113```
