使用 cordova-plugin-file 保存图片

前言

由于app的项目比较老，简单来说就是 h5 套个cordova 的壳，然后进行打包发布。

结果最近新增了一个需求，需要把图片，网址和文本信息分享到企业微信。网上找了找也没有找到插件，只能自己封装一个 cordova 插件进行分享。

在文本和网址分享时，都进行得挺顺利，在分享图片时则遇到了问题。因为分享图片时候填的 filePath 不能为base64 或者 url 的图片地址，只能是内部储存地址。

遂看了看同为分享的微信分享中的代码，希望能借鉴一下，发现都是通过安卓原生转的 url，看不懂，只能自己手撸了。

开始

首先，下载插件

cordova plugin add cordova-plugin-file

然后把在 config.xml 把权限加一加，至于读取权限，我这边是打包时候自动加上了，如果没有的话，也得加一加。

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />

然后，就经典看文档了。

保存图片，简单来说，就是先找到个文件夹，然后创建个文件，把图片的 blob 写进去，就结束了。

首先，插件提供了多个访问地址，可以根据自己的需要来选择爆粗你的位置。

选择一个保存的位置,这里就默认写到保存到相册了。

const persistent = `${cordova.file.externalRootDirectory}`;

// img的blob文件
const blob = ****

// 读取系统位置，并创建文件
window.resolveLocalFileSystemURL(
  persistent,
  dirEntry => {
      createDirectory(dirEntry, 'Pictures')
  }，
  err => {
      console.log('err', err)
  }
)

// 安卓访问相册的目录 Pictures
function createDirectory(rootDirEntry, name) {
    rootDirEntry.getDirectory(name, { create: true }, function (dirEntry) {
        // 创建图片文件
        createFile(dirEntry, 'img_date.jpg')
    }, onErrorGetDir);
}

// 创建文件
function createFile(dirEntry, fileName) {
    // Creates a new file or returns the file if it already exists.
    dirEntry.getFile(fileName, {create: true, exclusive: false}, function(fileEntry) {
        // 写入文件
        writeFile(fileEntry, blob);

    }, onErrorCreateFile);

}

// 写入文件
function writeFile(fileEntry, dataObj) {
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function() {
            console.log("Successful file write...");
            // 写入完成，可以进行结尾操作
            // some code
        };

        fileWriter.onerror = function (e) {
            console.log("Failed file write: " + e.toString());
        };

        // If data object is not passed in,
        // create a new Blob instead.
        if (!dataObj) {
            dataObj = new Blob(['some file data'], { type: 'text/plain' });
        }

        fileWriter.write(dataObj);
    });
}

结语

其实内容没多少，主要是因为之前在和原生的交互上上总是抱着一种畏惧的心态。

没错，就是畏惧，觉得自己可能不大行。但是经过这一次封装原生企业微信的插件，虽然磕磕绊绊封装了很久，再加上这个 cordova-plugin-file 的使用，不能说完全克服，至少能觉得，原生或者其他未知的，我所不擅长的领域，也并不是无法攻克和完成。信心就是这样一步一步建立起来的哇。