Ionic使用常用插件时遇到的坑与解决方法

一、 什么是Ionic

Ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。它是基于Cordova框架，利用Cordova实现应用的手机功能调用、调试与发布。

简单的话就是可以使用一套代码，利用Ionic可以生成安卓、IOS和网页端应用。

二、 使用插件时遇到的坑与解决方法

在开发Ionic应用时，因为程序本身是不具备调用手机功能的，需要利用Cordova插件进行手机功能调用，而一些插件因为停止更新或更新不及时，导致对新版本系统的手机或不同厂商生产出来的手机的支持度都不一样，现在总结一下本人在开发Ionic时，在使用一些常用的插件遇到的坑和解决方法。

2.1. cordova-plugin-file-transfer插件

最新发行版本：1.7.1

说明：cordova-plugin-file-transfer是一个文件传输插件，可利用它进行文件的上传与下载。

问题：使用最新发行版本进行IOS打包发布时，Xcode会报userAgent错误。

解决：

使用GIT代码库里的最新代码进行发行，可解决些问题，具体操作：ionic cordova plugin add

https://github.com/apache/cordova-plugin-file-transfer

2.2. cordova-plugin-telerik-imagepicker插件

最新发行版本：2.3.6

说明：cordova-plugin-telerik-imagepicker是图片选择插件，可调用系统图库进行图片与视频的选择。

问题：最新版本与ANDROID_SUPPORT_V4_VERSION或ANDROID_SUPPORT_APPCOMPAT_V7_VERSION为27.+的插件会有冲突（如cordova-plugin-file-opener2和cordova-plugin-camera），造成选择图片时会造成应用闪退。

解决：

降级为2.3.3版本：ionic cordova plugin add cordova-plugin-telerik-imagepicker@2.3.3

开启AndroidX模式，在config.xml添加

有些机型还需要添加AndroidX适配器插件：ionic cordova plugin add cordova-plugin-androidx-adapter

2.3. cordova-plugin-filepath插件

最新发行版本：1.6.0

说明：ordova-plugin-filepath是一个文件路径转换插件，通常配合一些文件选择相关的插件使用。

问题：对Android API 29及以上和部分华为荣耀手机会有兼容问题。

解决：

无解，只能修改插件源码，以下为本人修改的插件代码，文件路径为：ode_modules/cordova-plugin-filepath/src/android/FilePath.java，

  //第345行开始

 // DownloadsProvider

            else if (isDownloadsDocument(uri)) {

                // thanks to https://github.com/hiddentao/cordova-plugin-filepath/issues/34#issuecomment-430129959

                Cursor cursor = null;

                //by ming 这里有个BUG，如果取Download目录第三方应用目录里的文件，如果在Download目录下有相同文件名的文件，会获取到Download上录下的文件，解决此问题可屏蔽以下try里的代码，不过会产生临时文件

                try {

                    cursor = context.getContentResolver().query(uri, new String[]{MediaStore.MediaColumns.DISPLAY_NAME}, null, null, null);

                    if (cursor != null && cursor.moveToFirst()) {

                        String fileName = cursor.getString(0);

                        String path = Environment.getExternalStorageDirectory().toString() + "/Download/" + fileName;

                        if (fileExists(path)) {

                            return path;

                        }

                    }

                } finally {

                    if (cursor != null)

                        cursor.close();

                }

                //

                final String id = DocumentsContract.getDocumentId(uri);

                

                //by ming 华为和荣耀手机特殊处理

                if (id.startsWith("raw:")) {

                    return id.replaceFirst("raw:", "");

                }

                //by ming end




                String[] contentUriPrefixesToTry = new String[]{

                        "content://downloads/public_downloads",

                        "content://downloads/my_downloads",

                        "content://downloads/all_downloads" //add by ming

                };




                for (String contentUriPrefix : contentUriPrefixesToTry) {

                    //Uri contentUri = ContentUris.withAppendedId(Uri.parse(contentUriPrefix), Long.valueOf(id)); //delete by ming

                    try {

                        Uri contentUri = ContentUris.withAppendedId(Uri.parse(contentUriPrefix), Long.valueOf(id)); //add by ming

                        String path = getDataColumn(context, contentUri, null, null);

                        if (path != null) {

                            return path;

                        }

                    } catch (Exception e) {

                    }

                }




                try {

                    return getDriveFilePath(uri, context);

                } catch (Exception e) {

                    return uri.getPath();

                }




            }

三、 结语

以上就是本人在开发Ionic时所用到的一些插件遇到的问题和解决的方法，而这些插件在开发中还是挺常使用到的，希望本人的经验对大家有所帮助。