# oh-share **Repository Path**: ohos-oneconnect/oh-share ## Basic Information - **Project Name**: oh-share - **Description**: OH文件传输、图片传输 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 1 - **Created**: 2024-05-13 - **Last Updated**: 2026-03-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 图库源码开发说明 ## 1. 简介 图库是系统内置的可视资源访问应用，提供图片和视频的管理、浏览、显示、编辑操作、分享等功能，并支持默认相册和用户相册管理。 图库项目采用 TS 语言开发。 ![](./figures/1层逻辑.png) 图库整体以 OpenHarmony 既有的 MVVM 的 App 架构设计为基础，向下扩展出一套 MVP（View, Presenter, Model）分层架构（既有的 MVVM 框架整体理解为新扩展的 MVP 框架的 View 层），用于处理图库的业务逻辑与数据管理。 各层的作用分别如下： - 视图层（View）：负责更新 UI 显示以及触摸与点击事件的监听。 - 展现层（Presenter）：负责处理视图层（View）发送的业务逻辑处理请求，并连通 Model 层获取数据。 - 模型层（Model）：负责处理展现层（Presenter） 中关于数据处理的请求以及返回数据请求结果。 应用各层中重要类及其功能如下表所示 | 模块 | 层级 | 类名 | 作用 | | ------ | ------ | ------------------------ | ------------------------------------ | | photos | 视图层 | phone.view.Index | phone图库入口画面的视图层逻辑控制类 | | photos | 视图层 | pad.view.Index | pad图库入口画面的视图层逻辑控制类 | | photos | 视图层 | TimelinePage | 图库图片视图层逻辑控制类 | | photos | 视图层 | AlbumSetPage | 图库相册视图层逻辑控制类 | | photos | 视图层 | PhotoBrowser | 图库大图浏览视图层逻辑控制类 | | photos | 视图层 | PhotoGridPage | 图库宫格视图层逻辑控制类 | | photos | 视图层 | ThirdSelectAlbumSetPage | 图库三方选择相册视图层逻辑控制类 | | photos | 视图层 | ThirdSelectPhotoGridPage | 图库三方选择宫格视图层逻辑控制类 | | photos | 视图层 | ThirdSelectPhotoBrowser | 图库三方选择大图浏览视图层逻辑控制类 | | photos | 展现层 | GroupItemDataSource | 图库列大图浏览展现层数据逻辑类 | | photos | 展现层 | TimelineItemDataSource | 图库日试图展现层数据逻辑类 | | photos | 展现层 | AlbumsDataSource | 图库相册展现层数据逻辑类 | | photos | 展现层 | GroupItemDataSource | 图库宫格展现层数据逻辑类 | | photos | 展现层 | SelectManager | 图库展现层选择逻辑类 | | photos | 展现层 | BroadCast | 图库展现层消息分发类 | | photos | 模型层 | AlbumDataItem | 图库模型层相册信息类 | | photos | 模型层 | MediaDataItem | 图库模型层媒体信息类 | | photos | 模型层 | TimelineDataItem | 图库模型层日试图信息类 | ## 2. 目录 ``` /applications ├── src │ └── main │ ├── ets # ets代码目录 │ ├── MainAbility │ ├── common # 共同代码目录 │ ├── model # model目录 │ ├── common # 共同业务逻辑和实体模型目录 │ └── view # 共同视图组件 │ ├── actionbar # 共同标题栏、底层栏和工具栏组件目录 │ ├── browserOperation # 共同操作项目录 │ └── dialog # 共同对话框目录 │ ├── feature # 功能模块目录 │ ├── album # 相册组件目录 │ ├── model # 相册model目录 │ └── view # 相册视图组件目录 │ ├── albumSelect # 相册视图目录 │ ├── model # 三方相册选择model目录 │ ├── utils # 三方相册选择工具目录 │ └── view # 三方相册选择视图组件目录 │ ├── brower # 图库浏览功能目录 │ ├── view # 图库浏览视图组件目录 │ ├── editor # 图库图片编辑功能目录 │ ├── base # 图片编辑基础目录 │ ├── crop # 裁剪框组件目录 │ ├── utils # 图片编辑工具目录 │ └── view # 图片编辑视图组件目录 │ ├── formEditor # 图库FA卡片编辑功能目录 │ ├── view # 图库FA卡片编辑视图组件目录 │ ├── newAlbum # 新建相册功能目录 │ ├── model # 新建相册model目录 │ └── view # 新建相册视图组件目录 │ ├── photoGrid # 图片宫格功能目录 │ ├── model # 图片宫格model目录 │ └── view # 图片宫格视图组件目录 │ ├── thirdSelect # 第三方选择功能目录 │ ├── model # 第三方选择model目录 │ └── view # 第三方选择视图组件目录 │ └── timeline # 日视图宫格功能目录 │ ├── model # 日视图model目录 │ └── view # 日试图视图目录 │ ├── product # 产品模块目录 │ ├── pad # pad模块目录 │ └── view # pad模块视图目录 │ └── phone # phone模块目录 │ └── view # phone模块视图目录 │ ├── resources # 资源目录 │ └── module.json5 # 项目配置信息 ``` ### ## 3. 图库分享功能 #### 3.1 背景 行业设备存在互联互通诉求：1.OpenHarmony 富富设备之间主要是文件传输、图片 / 视频传输。 图库分享功能为OHOS和HOS富对富设备之间进行图片和文件共享，通过WiFi P2P进行设备发现和文件传输。 增强图库文件互联互通能力，解决以下问题： ◦ 支持 HOS（源）->OHOS（目标）设备图片 / 视频分享 ◦ 支持 OHOS 和 OHOS 设备之间图片 / 视频分享 #### 3.2 图库流程设计 图库分享流程设计如下，展示图库分享的整体交互流程。 ![](./figures/分享流程.png) ### 3.3 图库分享交互流程 WiFi P2P 服务会话创建流程如下 : 1. WiFi P2P 发现 2. WiFi P2P 连接 3. TCP Socket 建立会话 WiFi P2P 文件发送服务 : 1. P2P连接后，WiFi P2P GO 设备当做 TCP 服务端， 主动监听 9000 端口， GC 需主动连接 GO 建立双向通讯 2. TCP连接建立成功后，GC端解析分享的文件，向GO端发起文件分享，发送文件数据流， GO端接收数据流，保存并写入到文件中 3. 文件接收结束后，GO端发送消息，通知GC端，断开TCP连接 ### 3.4 图库分享使用说明 操作步骤： 1. 首先进入图库应用， 长按选择一张图片，点击分享按钮 ![](./figures/share1.png) 2. 拉起分享弹窗，获取设备列表，选择设备分享图片/视频 ![](./figures/share2.png) 3. 接收端收到发送的图片，拉起接收弹窗，展示接收进度 ![](./figures/share3.png) 4. 发送/接收完成， 接收端接收弹窗收起，展示接收的视频/图片，发送端弹窗收起 注意事项： 1. 传输图片/视频大小限制100M ## 4. 典型接口的使用 1. 开启 P2P 扫描发现 ``` scanP2PDevices() { if (wifiManager.isWifiActive()) { console.info(TAG, "scanP2PDevices.") wifiManager.startDiscoverDevices(); } else { Prompt.showToast({ message: "请打开WiFi！", duration: 3000 }) } } ``` 2. 连接 P2P 设备 ``` connectP2pDevice(device: wifiManager.WifiP2pDevice) { Log.info(TAG, "connectP2pDevice: " + JSON.stringify(device)) wifiManager.off("p2pPeerDeviceChange", this.p2pPeerDeviceChangeCb.bind(this)) try { let config: wifiManager.WifiP2PConfig = { deviceAddress: device.deviceAddress, deviceAddressType: device.deviceAddressType, netId: -2, passphrase: "12345678", groupName: "SwanLink_Share", goBand: 1 } wifiManager.p2pConnect(config); } catch (error) { Log.info(TAG, "failed:" + JSON.stringify(error)) } } ``` 3. tcp连接 ``` connectTcpServer() { Log.info(TAG, "connectTcpServer:"+this.goAddr) if (this.goAddr.length === 0) { Prompt.showToast({ message: "GO Addr is null.", duration: 3000 }) return } let option: socket.TCPConnectOptions = { address: { address: this.goAddr, port: this.tcpServerPort, family: 1 }, timeout: 1000 * 30 } this.tcp.connect(option, (err) => { if (err) { Log.info(TAG, 'connectTcpServer fail:' + JSON.stringify(err)) return; } Log.info(TAG, 'connect success') let tcpExtraOptions: socket.TCPExtraOptions = { keepAlive: true, socketLinger: { on: false, linger: 10 } } this.tcp.setExtraOptions(tcpExtraOptions, (err: BusinessError) => { if (err) { console.log('setExtraOptions fail'); return; } console.log('setExtraOptions success'); }) this.tcp.on('message', this.onMessageReceived.bind(this)) }) } ``` ## 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request ## 特技 1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md 2. Gitee 官方博客 blog.gitee.com 3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目 4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 https://gitee.com/help 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/