ionic3 android端开发高仿微信多选图cordova插件（相册内带相机功能）---自己重新编写集成流程

    ionic开发中,很多时候需要图片上传,这时候就需要集成拍照和选取图片的功能,如果用官方的cordova-plugin-image-picker插件,则会出现样式比较丑的情况,从ionic1.0到现在最新版本ionic3.9.2这个插件的样式都没有改过，如下图所示（Android界面）:

       看到这样的界面我也是醉了,这时候我们就可以用到github上提供的一个开源项目,将选择图片集成为高仿微信选择图片的形式,这样看上去是不是美观了不少呢.示列图如下:

       这样是不是会看起来舒服很多呢！下面就大致说下集成的步骤以及我遇到问题的处理吧

一、安装ImagePicker插件

切换到项目目录下,使用命令安装ImagePicker插件,注意:此处的ImagePicker插件不是ionic native官网里面的cordova-plugin-image-picker插件

cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git

如果安装git中出现no git binary found in $path的问题,请参考如下操作:

配置Git环境变量提示no git binary found in $path解决

git下载官网

二、添加Android Support库

切换到项目目录下,使用命令添加Android Support 库,该命令其实也是添加一个android支持库插件 

cordova plugin add cordova-android-support-gradle-release

三、项目中集成并使用

完成了上面两个步骤,我们就可以在我们的项目中使用了,其中ionic 中使用本插件，

需要声明： declare let ImagePicker:any

declare let ImagePicker:any

private selectImage(){
    ImagePicker.getPictures((result)=> {
      console.log("selectImage=="+JSON.stringify(result));
    }, (err)=> {
      alert(err);
    }, {
      maximumImagesCount : 9,
      width : 1920,
      height : 1440,
      quality : 100
    });
  }

这时候只需要在需要调用拍照的地方调用selectImage()方法就好了.这样集成是不是非常简单呢！

四、处理打包apk文件报错

在使用cordova build android --prod打包的过程中,我这边报了一个错,
Could not find method implementation() for arguments [com.android.support:recy clerview-v7:+] on object of type org.gradle.api.internal.artifacts.dsl.dependenc ies.DefaultDependencyHandler.

这时候只需要把platform下的build.gradle里面的dependencies里面的implementation改为compile即可

打包apk 报Could not find method implementation()的错误解决

五、点击缩略图查看大图(支持缩放,上拉和下拉退出)

完成了上一步,我们就集成了拍照和选取图片并且显示缩略图的功能,但一般情况下点击缩略图是能够支持查看大图的,但我们这个ImagePicker暂时是不提供这个方法的,这个时候就需要用到GitHub上开源插件ionic-img-viewer,

github地址:https://github.com/Riron/ionic-img-viewer

ionic-img-viewer集成步骤:

1、ionic-img-viewer的安装,切换到项目根目录下,执行如下命令

npm install --save ionic-img-viewer

2、ionic-img-viewer项目中使用

2.1、在app.module.ts的imports中加入IonicImageViewerModule

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})
export class AppModule {}

2.2、在需要应用的ts文件里面按如下代码集成

import { ImageViewerController } from 'ionic-img-viewer';

export class HomePage{

  constructor(private imageViewerCtrl: ImageViewerController) {

  }

  /**
   *
   * @param imagePath  当前图片路径
   */
  presentImage(imagePath) {
    const imageViewer = this.imageViewerCtrl.create(imagePath);
    imageViewer.present();

    setTimeout(() => imageViewer.dismiss(), 1000);
    imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
  }
}

2.3、在页面的img标签按如下配置

    //IMAGE_URL是拍照或者选取的图片的路径

注意事项:imageViewer 这个配置只能在需要缩放的img标签里面添加,不要在不需要的地方添加，比如添加图片的那个添加按钮,因为一旦加上,会出现拍照或者选择照片后必须要手动点击返回按钮才会显示选择的图片

参考文章:

ImagePicker github官网

ionic native官网

Ionic2实战-图片点击缩放功能开发

demo下载地址:

ionic高仿微信选择图片demo