# imageSelect_JS

**Repository Path**: wb_monkey/imageSelect_JS

## Basic Information

- **Project Name**: imageSelect_JS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-03
- **Last Updated**: 2021-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# image_select

#### 组件介绍

- 组件名称：image_select
- 功能：实现本地图片选择，返回选择路径
- 开发版本：sdk6，DevEco Studio2.2 Beta1

#### 效果演示

![输入图片说明](./screen/imageSelect.gif)


#### 代码模块说明
 - 1、在common目录拷贝image_select组件，包含image_select.hml、image_select.css、image_select.js文件
 
 - 2、在页面引入组件
 
```hml
<element name='image_select' src='../../common/component/image_select/image_select.hml'></element>
```
 - 3、在java代码目录拷贝ImageDataInternalAbility类实现js和java通信，加载本地图片数据
 
 - 4、在image_select.js修改initAction方法中修改action.bundleName属性为对应的自己的包名
 
```javascript
   initAction: function (code, sync) {
        var actionData = {};
        var action = {};
        action.bundleName = "替换自己的包名";
        action.abilityName = "ImageDataInternalAbility";
        action.messageCode = code;
        action.data = actionData;
        action.abilityType = 1;
        action.syncOption = sync;
        return action;
    },
```
 
 - 5、选择地址回传利用app.js文件中data对象中的imageSelect属性
 
```javascript
//app.js
export default {
    data: {
        imageSelect:[]
    },
    onCreate() {
        console.info('AceApplication onCreate');
    },
    onDestroy() {
        console.info('AceApplication onDestroy');
    }
};
```

- 6、跳转图片选择页面参数

```javascript
  router.push({
            // 指定要跳转的页面
            uri: 'pages/select_image/select_image',
            params: {
            //本次可以选择图片的上限
                imageCount: 2,
            //已经选择的图片路径
                selectImage: this.selectImage,
            }
        })
```
- 7、例如在onShow方法中获取app.js的data中imageSelect字段判断是否有数据返回

```javascript
 onShow() {
        var appData = this.$app.$def.data;
        console.log("router.push console " + appData.imageSelect);
        if (appData.imageSelect != undefined) {
            this.selectImage = appData.imageSelect;
            if (this.selectImage.length > 0) {
                this.imagePath = this.selectImage[0]
            }
        }
    },
```

- 8、本组件需要用到本地文件夹权限

```json
"reqPermissions": [
      {
        "name": "ohos.permission.READ_USER_STORAGE",
        "reason": "读取本地图片",
        "usedScene": {
          "ability": [
            "com.monkey.imageselect.MainAbility"
          ],
          "when": "always"
        }
      }
    ],
```