# WebviewPicker

**Repository Path**: saigequn/webview-picker

## Basic Information

- **Project Name**: WebviewPicker
- **Description**: 基于webview的Picker拉起,在webview中拉起文件管理器，图库以及相机。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-16
- **Last Updated**: 2024-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 基于webview的Picker拉起
### 场景描述

在webview中拉起文件管理器，图库以及相机。

场景一：在web页面拉起文件管理器。
<br>
场景二：在web页面拉起图库。
<br>
场景三：在web页面拉起摄像头，实现拍照上传

### 实现方案

通过调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮，并使用对应的select方法拉起对应应用
<br>
例如

```markdown
.onShowFileSelector((event) => {
            hilog.info(0xFF00, "testTag",'MyFileUploader onShowFileSelector invoked');
            const photoSelectOptions: photoAccessHelper.PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
            // 过滤选择媒体文件类型为IMAGE_VIDEO_TYPE
            photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
            // 选择媒体文件的最大数目
            photoSelectOptions.maxSelectNumber = 2;
            //let uris: Array<string> = [];
            const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
            photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
              this.uris = photoSelectResult.photoUris;
              if (event) {
                event.result.handleFileList(this.uris);
              }
              hilog.isLoggable(0xFF00, "testTag", hilog.LogLevel.INFO);
              hilog.info(0xFF00, "testTag", "photoViewPicker.select to file succeed and uris are:%{public}s", this.uris);
            }).catch((err: BusinessError) => {
              hilog.isLoggable(0xFF00, "testTag", hilog.LogLevel.ERROR);
              hilog.info(0xFF00, "testTag", "Invoke photoViewPicker.select failed, code is %{public}s, message is %{public}s", err.code, err.message);
            })
            return true
          })
```
### 效果预览
![img.png](Screenshots/Screenshot_2024-12-02T181026.png)
![img.png](Screenshots/Screenshot_2024-12-02T181042.png)

### 工程目录
```markdown
entry/src/main/ets/
|---pages
|   |---Index.ets                          // 首页
|   |---CameraViewPicker.ets               //拉起相机
|   |---DocumentViewPicker.ets             //拉起文件管理器
|   |---PhotoViewPicker.ets                //拉起图库
```
### 约束与支持
1.本示例仅支持标准系统上运行，支持设备：华为手机或运行在DevEco Studio上的华为手机设备模拟器。

2.本示例为Stage模型，支持API Version 12。