图库源码开发说明

1. 简介

图库是系统内置的可视资源访问应用，提供图片和视频的管理、浏览、显示、编辑操作、分享等功能，并支持默认相册和用户相册管理。 图库项目采用 TS 语言开发。

图库整体以 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 图库流程设计

图库分享流程设计如下，展示图库分享的整体交互流程。

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. 首先进入图库应用， 长按选择一张图片，点击分享按钮

   

2. 拉起分享弹窗，获取设备列表，选择设备分享图片/视频

   

3. 接收端收到发送的图片，拉起接收弹窗，展示接收进度

   

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/