1# 图库源码开发说明 2## 1. 简介 3图库是系统内置的可视资源访问应用，提供图片和视频的管理、浏览、显示、编辑操作等功能，并支持默认相册和用户相册管理。 4图库项目采用 TS 语言开发。 5 6 7 8 9 10图库整体以 OpenHarmony 既有的 MVVM 的 App 架构设计为基础，向下扩展出一套 MVP（View, Presenter, Model）分层架构（既有的 MVVM 框架整体理解为新扩展的 MVP 框架的 View 层），用于处理图库的业务逻辑与数据管理。 11 12各层的作用分别如下： 13 14- 视图层（View）：负责更新 UI 显示以及触摸与点击事件的监听。 15- 展现层（Presenter）：负责处理视图层（View）发送的业务逻辑处理请求，并连通 Model 层获取数据。 16- 模型层（Model）：负责处理展现层（Presenter） 中关于数据处理的请求以及返回数据请求结果。 17 18应用各层中重要类及其功能如下表所示 19 20| 模块 | 层级 | 类名 | 作用 | 21| ------ | ------ | ------------------------ | ------------------------------------ | 22| photos | 视图层 | phone.view.Index | phone图库入口画面的视图层逻辑控制类 | 23| photos | 视图层 | pad.view.Index | pad图库入口画面的视图层逻辑控制类 | 24| photos | 视图层 | TimelinePage | 图库图片视图层逻辑控制类 | 25| photos | 视图层 | AlbumSetPage | 图库相册视图层逻辑控制类 | 26| photos | 视图层 | PhotoBrowser | 图库大图浏览视图层逻辑控制类 | 27| photos | 视图层 | PhotoGridPage | 图库宫格视图层逻辑控制类 | 28| photos | 视图层 | ThirdSelectAlbumSetPage | 图库三方选择相册视图层逻辑控制类 | 29| photos | 视图层 | ThirdSelectPhotoGridPage | 图库三方选择宫格视图层逻辑控制类 | 30| photos | 视图层 | ThirdSelectPhotoBrowser | 图库三方选择大图浏览视图层逻辑控制类 | 31| photos | 展现层 | PhotoDataSource | 图库列大图浏览展现层数据逻辑类 | 32| photos | 展现层 | TimelineDataSource | 图库日试图展现层数据逻辑类 | 33| photos | 展现层 | AlbumSetDataSource | 图库相册展现层数据逻辑类 | 34| photos | 展现层 | MediaDataSource | 图库宫格展现层数据逻辑类 | 35| photos | 展现层 | TimelineSelectManager | 图库日试图展现层选择逻辑类 | 36| photos | 展现层 | ThirdSelectManager | 图库三方选择展现层选择逻辑类 | 37| photos | 展现层 | AlbumSetSelectManager | 图库相册展现层选择逻辑类 | 38| photos | 展现层 | SelectManager | 图库展现层选择逻辑类 | 39| photos | 展现层 | BroadCast | 图库展现层消息分发类 | 40| photos | 模型层 | AlbumInfo | 图库模型层相册信息类 | 41| photos | 模型层 | MediaItem | 图库模型层媒体信息类 | 42| photos | 模型层 | Thumbnail | 图库模型层媒体缩略信息类 | 43 44 45 46## 2. 目录 47 48``` 49/applications 50├── src 51│ └── main 52│ ├── ets # ets代码目录 53│ ├── MainAbility 54│ ├── common # 共同代码目录 55│ ├── access # 媒体库接口目录 56│ ├── model # model目录 57│ ├── browser # 浏览model目录 58│ ├── album # 相册model目录 59│ ├── dataObserver # 数据注册model目录 60│ ├── interface # 接口model目录 61│ ├── operation # 操作项model目录 62│ └── photo # 照片model目录 63│ └── common #共同业务逻辑和实体模型目录 64│ ├── utils # 共同工具目录 65│ └── view # 共同视图组件 66│ ├── actionbar 共同标题栏、底层栏和工具栏组件目录 67│ ├── dialog 共同对话框目录。 68│ └── mediaOperation 共同相册选择页目录 69│ ├── feature # 功能模块目录 70│ ├── brower # 图库浏览功能目录 71│ ├── utils # 图库浏览工具目录 72│ └── view # 图库浏览视图目录 73│ ├── album # 相册视图目录 74│ ├── photo # 照片视图目录 75│ └── photoGrid # 照片宫格目录 76│ ├── thirdSelect # 第三方选择功能目录 77│ ├── utils # 第三方选择工具目录 78│ └── view # 第三方视图目录 79│ └── timeline # 日视图宫格功能目录 80│ ├── model # 日视图model目录 81│ ├── utils # 日试图工具目录 82│ └── view # 日试图视图目录 83│ ├── product # 产品模块目录 84│ ├── pad # pad模块目录 85│ └── view # pad模块视图目录 86│ └── phone # phone模块目录 87│ └── view # phone模块视图目录 88│ ├── resources # 资源目录 89│ └── config.json # 项目配置信息 90``` 91### 92 93## 3. 基础开发说明 94### 资源引用 95#### 定义资源文件 96- 在 `src/main/resources/`目录下，根据不同的资源类型，定义资源文件。 97 98 ```json 99 { 100 "name": "default_background_color", 101 "value": "#F1F3F5" 102 }, 103 ``` 104#### 引用资源 105- 在有对应page的ets文件中，可直接通过`$r()`引用。 106 ```` JavaScript 107 @Provide backgroundColor: Resource = $r('app.color.default_background_color'); 108 ```` 109## 4. 典型接口的使用 1101. 相机启动图库大图浏览 111 112 ``` 113 this.context.startAbility({ 114 bundleName:"com.ohos.photos", 115 abilityName: "com.ohos.photos.MainAbility", 116 parameters: { 117 uri: "photodetail" 118 } 119 }).then((data) => { 120 console.debug('startAbility complete'); 121 }).catch((error) => { 122 console.debug(`startAbility failed, error: ${JSON.stringify(error)}`); 123 }) 124 ``` 125 1262. 三方应用启动图库三方单选 127 128 ``` 129 let startParmameter = { 130 bundleName:"com.ohos.photos", 131 abilityName: "com.ohos.photos.MainAbility", 132 parameters: { 133 uri: "singleselect" 134 } 135 }; 136 this.context.startAbilityForResult(startParmameter).then((result) => { 137 console.info(`startAbilityForResult Promise.resolve is called, result.resultCode = ${JSON.stringify(result)}`) 138 let want = result['want']; 139 console.info(`test select single ${JSON.stringify(want)}`); 140 if (want != null && want != undefined) { 141 let param = want['parameters']; 142 console.info(`test select single ${JSON.stringify(param)}`); 143 if (param != null && param != undefined) { 144 let uri = param['select-item-list']; 145 console.info(`test select single ${uri}`); 146 } 147 } 148 }, (error) => { 149 console.info(`startAbilityForResult Promise.Reject is called, error.code = ${error.code}`) 150 }) 151 ``` 152 1533. 三方应用启动图库三方多选 154 155 ``` 156 let startParmameter = { 157 bundleName:"com.ohos.photos", 158 abilityName: "com.ohos.photos.MainAbility", 159 parameters: { 160 uri: "multipleselect" 161 } 162 }; 163 this.context.startAbilityForResult(startParmameter).then((v) => { 164 let want = v['want']; 165 console.info(`test select multiple ${want}`); 166 if (want != null && want != undefined) { 167 let param = want['parameters']; 168 console.info(`test select multiple ${param}`); 169 if (param != null && param != undefined) { 170 let uri = param['select-item-list']; 171 console.info(`test select multiple ${uri[0]} ${uri[1]}`); 172 } 173 } 174 }, (error) => { 175 console.debug(`startAbility failed, error: ${JSON.stringify(error)}`); 176 }) 177 ``` 178 179## 5. 签名打包 180### 签名 181#### 签名文件的获取 1821. 拷贝 OpenHarmony 标准版的 prebuilts\signcenter 目录到操作目录。 1832. 标准版的签名文件下载路径：https://gitee.com/openharmony/signcenter_tool?_from=gitee_search。 1843. 拷贝图库工程的 signature\photos.p7b 到该目录下。 185 186 187#### 签名文件的配置 188打开项目工程，选择 File → Project Structure 189 190 191 192选择 Modules → Signing Configs，将对应的签名文件配置如下，完成后点击Apply，再点击OK。 193密码为生成签名文件时的密码，如果使用默认的签名文件，则使用默认密码123456。 194 195 196 197配置完成后，对应的build.gradle文件中会出现如下内容 198 199 200 201使用的SDK 3.2.2.5版本编译master仓代码，在/entry/package.json里手动触发npm install 202 203 204### 打包 205DevEco Studio 支持 debug 与 release 两种打包类型。可以在 OhosBuild Variants 窗口中进行切换。 206 207  208 209#### release打包 2101. 代码准备完成后，在 OhosBuild Variants 窗口的 Selected Variant 中选择 release 211 212  213 2142. 选择Build → Build Haps(s)/APP(s) → Build Hap(s) 215 216  217 2183. 编译完成后，hap包会生成在工程目录下的 `\build\outputs\hap\release\`路径下（如果没有配置签名，则只会生成未签名的hap包） 219 220  221 222 223## 6. 安装、运行、调试 224### 应用安装 225配置 hdc： 226进入SDK目录中的toolchains文件夹下，获取文件路径： 227 228 229 230 231并将此路径配置到环境变量中： 232 233 234 235连接开发板，打开一个新的cmd命令窗口，执行`hdc list targets`，弹出窗口如下： 236 237 238 239等待一段时间后，窗口出现如下打印，可回到输入 hdc list targets 的命令窗口继续操作: 240 241 242 243再次输入hdc list targets，出现如下结果，说明hdc连接成功 244 245 246 247首次安装需要卸载系统自带的图库 248 249```html 250hdc shell mount -o remount,rw / 251 252hdc shell rm -rf /system/app/com.ohos.photos/Photos.hap 253 254hdc shell reboot 255``` 256 257安装签过名的hap包 258 259```html 260hdc install 包路径 261``` 262 263长按图库图标添加到工作区 264 265### 应用调试 266#### log打印 267- 在程序中添加 log 268```JS 269const TAG = "MoudleXXX" 270 271entry() { 272 let input = 'hello' 273 Log.info(TAG, `onPhotoChanged start ${input}`); 274} 275``` 276上述log打印为： 277 278``` 279Photos_MoudleXXX:entry: hello 280``` 281 282可以在DevEco Studio中查看log 283 284 285#### log获取及过滤 286- log获取 287 288 289将log输出至文件 290``` 291hdc shell hilog > 输出文件名称 292``` 293 294例： 295在真实环境查看log，将全log输出到当前目录的hilog.log文件中 296``` 297hdc shell hilog > hilog.log 298``` 299 300- log过滤 301 302在命令行窗口中过滤log 303``` 304hilog | grep 过滤信息 305``` 306 307例：过滤包含信息 Album的 hilog 308``` 309hilog | grep Album 310``` 311## 7. 贡献代码 312### Fork 代码仓库 3131. 在码云上打开 photos代码仓库（[仓库地址](https://gitee.com/OHOS_STD/applications_photos)）。 3142. 点击仓库右上角的 Forked 按钮 315  3163. 在弹出的画面中，选择将仓库 fork 到哪里，点击确认。 317  3184. Fork 成功之后，会在自己的账号下看见 fork 的代码仓库。 319  320 321### 提交代码 3221. 访问我们自己在码云账号上 fork 的代码仓库，点击“克隆/下载”按钮，选择 SSH，点击“复制”按钮。 323  324 3252. 在本地新建 Photos 目录，在 Photos 目录中执行如下命令 326 ``` 327 git clone 步骤1中复制的地址 328 ``` 329 3303. 修改代码。 331 332 > 将代码引入工程，以及编译工程等相关内容请参见 **3. 代码使用** 部分的相关内容。 3334. 提交代码到 fork 仓库。 334 > 修改后的代码，首先执行 `git add` 命令，然后执行 `git commit` 命令与 `git push` 命令，将代码 push 到我们自己的 fork 仓中。 335 > 关于代码提交的这部分内容涉及 git 的使用，可以参照 [git官网](https://git-scm.com/) 的内容，在此不再赘述。 336 > 注意事项：需要使用commit -s,暴露提交者信息，否则门禁不通过 337 338### 发起 Pull Request (PR) 339在将代码提交到 fork 仓之后，我们可以通过发起 Pull Request（PR）的方式来为 OpenHarmony 的相关项目贡献代码。 340 3411. 打开 fork 仓库。选择 `Pull Requests` → `新建 Pull Request` 342 343  344 3452. 在 `新建 Pull Request` 画面填入标题与说明，点击 `创建` 按钮。 346 347  3483. 创建 Pull Request 完成。 PR 创建完成后，会有专门的代码审查人员对代码进行评审，评审通过之后会合入相应的代码库。 349 350  351 352 353 354
