vue+cordova混合开发APP中向手机本地存储/读取文件

这篇具有很好参考价值的文章主要介绍了vue+cordova混合开发APP中向手机本地存储/读取文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

采用 vue + cordova 开发的App, 项目首屏为 three.js 编写的3D场景


问题描述

3D模型的数据是首屏启动后前端调用接口获取的json数据,数据大小30M.

用户在首页与其他页面切换时,调用该接口时间过长,并消耗大量流量

解决思路:

  1. 首页页面不销毁,做缓存. (可行,但three.js的页面内存占用量极大,不做特殊处理的话会导致其他页面卡顿,并造成app崩溃闪退)
  2. 将3D模型数据一并打入app,从项目资源中读取(缺点:3D模型更新时需要重新发版App.不能及时获取到最新的3D模型)
  3. 首次调用接口后,将3D模型数据缓存到手机文件中,之后再次获取时,从手机文件中读取.(缺点:根据手机性能,读取也存在卡顿问题,部分手机读取大文件会闪退,可以将数据切片处理解决该问题)

实现步骤:

这里主要记录 如何利用 cordova  cordova-plugin-file 插件 向手机存储/读取文件,其他逻辑省略

在cordova项目根目录下 安装 cordova-plugin-file 插件

cordova plugin add cordova-plugin-file 

 安装之后,在cordova项目下, plugins文件下, 会有该插件

vue+cordova混合开发APP中向手机本地存储/读取文件

编写 写入文件方法

// 写入文件
    writeFileLast(dataObj, name) { //dataObj为你要存入为文件,//name是我自己用,根据自己情况使用
      return new Promise((resolve, reject) => { //因为是异步 我加了promise 方便同步代码
        window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory,
          (dir) => { 
            //dir大概是你存文件的那个文件夹 调用getFile根据参数获取文件夹下的文件
            console.log("文件路径: " + cordova.file.externalDataDirectory);
            dir.getFile(`${name}.txt`, { create: true }, 
              //第一个参数是你想获取的文件名字
              //第二个参数 为true的时候 意味着如果在此文件夹下没有读取到对应名字的文件,文件夹下 
              创建一个以第一个参数为名字的空白文件
              (fileEntry) => {
                  //fileEntry是上一个步骤获取的文件
                  fileEntry.createWriter(function (fileWriter) {
                  //写入成功的回调
                  fileWriter.onwriteend = function () {
                    console.log("Successful file write...");
                    resolve()
                  };
                  //写入失败的回调
                  fileWriter.onerror = function (e) {
                    console.log("Failed file write: " + e.toString());
                    reject("Failed file write: " + e.toString())
                  };
                  // 如果dataObj是null,则创建一个新的文件
                  if (!dataObj) {
                    dataObj = new Blob(['我是一个测试文件'], { type: 'text/plain' });
                  }
                  // 写入内容
                  fileWriter.write(dataObj);
                })

              },
              (err) => { console.log('getFile错误', err) }
            );
          }, (err) => { console.log('resolveLocalFileSystemURL错误', err); });
      })
    },

 编写 读取文件方法

// 读取文件
    readFileLast(name) { //name 要读取的文件名字
      //let _this = this
      return new Promise((resolve, reject) => {
        window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory,
          // 成功回调
          (dir) => {  //和读取参数大同小异 以下不在赘述
            console.log("文件存储路径: " + cordova.file.externalDataDirectory);
            //在该目录下获取 一个基础变量 所有文件操作基于此变量
            dir.getFile(`${name}.txt`, { create: false },
              // 成功回调
              (fileEntry) => {
                console.log("指定目录下获取到相关文件 --基础文件信息", fileEntry);
                fileEntry.file(function (file) {
                  let reader = new FileReader(); //创建一个读取器
                  reader.onloadend = (e) => {
                    console.log('文件信息:' + fileEntry)
                    console.log('文件信息:' + file)
                    // console.log('内容', reader.result);
                    //_this.isLoad = true;
                    resolve(reader.result) //将结果送出去
                  }
                  reader.readAsText(file);           //读取文本类型文件使用
                  // reader.readAsArrayBuffer(file); //读取二进制文件 (大概吧,我忘记了~)

                })
              },
              // 失败回调
              (err) => {
                console.log('getFile错误', err)
                //this.isLoad = false;
                // 失败 但保证要继续运行
                resolve(false)
              }
            );
          },
          // 失败回调
          (err) => { console.log('resolveLocalFileSystemURL错误', err); });
      })
    },

最后,还有一点就是,性能差的手机,读取10M以上的数据,都可能会有闪退现象,建议存文件的时候,先进行切片处理. 分享一下我的切片思路

// 包体拆分
    splitFile(obj) { //obj是我要存的文件 数据格式是JSON 
      let data = JSON.stringify(obj);   //先序列化成json字符串
      if (data.length > 10000 * 1000) { //大概大于10M 
        let num = Math.ceil(data.length / (10000 * 1000)); //拆分份数
        let arr = [];
        for (let i = 0; i < num; i++) {
          let str = data.slice(i * 10000 * 1000, (i + 1) * 10000 * 1000);
          arr.push(str);
        }
        console.log('json数据拆分后的字符串数组', arr);
        this.config.num = arr.length //这个config 是一个记录配置信息 记录了文件切割了多少份 以 
        及文件的名字,到时候从本地读取的时候 要根据config里文件名字 + 份数索引  循环从本地读取
        arr.forEach((item, index) => {
          //给每份切割包 一个文件名字
          let fileName = this.config.upFileName.replace('.json', '') + index
          this.writeFileLast(item, fileName);
        })

      } else { //小于10M 直接存  不拆分
        let fileName = this.config.upFileName.replace('.json', '') + 0
        this.writeFileLast(data, fileName);
      }
      // 配置文件  这个文件一并存入手机
      let fileName = this.config.upFileName.replace('.json', '')
      let file = JSON.stringify(this.config)
      console.log('存配置文件 json', file);
      this.writeFileLast(file, fileName);
    },

    //读取的时候 先读取手机的config配置文件  从里面获取 文件名字 还有份数
    //循环读取 文件名字+索引  读取出每个分包
    //之后将分包 通过js合并 最后在序列化 JSON.parse()转换回来

    // 循环读取文件
    loadFile() {
      let fileList = []
      // 读取所有分包文件
      for (let i = 0; i < this.config.num; i++) {
        let fileName = this.config.upFileName.replace('.json', '') + i
        let fileItem = this.readFileLast(fileName)
        fileList.push(fileItem)
      }
      // 全部读取完毕 且没有异常
      Promise.all(fileList).then(async res => {
        console.log('全部读取完毕');
        // 把分包拼成总包
         let result = {
          data: JSON.parse(res.join(''))
        }
        console.log('拼接后的总包', result);
        if (this.isLoad) {//保证全部读取成功
          this.create3D(result)
        } else {
          console.log('有文件读取失败');
        }
      })
    }
    

成功存入后,进入你的手机文件 Andriod->Data->你的包名(com.开头的,参考我的下图)->files文件夹下,就是我们刚才存入的文件了

vue+cordova混合开发APP中向手机本地存储/读取文件

 文章来源地址https://www.toymoban.com/news/detail-485395.html

到了这里,关于vue+cordova混合开发APP中向手机本地存储/读取文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(90)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(69)
  • Flutter 生成运行小程序的混合App开发实践

    微信小程序发展的越来越快,目前小程序甚至取代了大部分 App 的生态位,公司的坑位不增反降,只能让原生应用开发兼顾或换岗进行小程序的开发。 以我的实际情况来讲,公司应用采用的 Flutter 框架,同样的功能不可避免的就会存在 Flutter 应用开发和微信小程序开发兼顾的

    2024年02月14日
    浏览(44)
  • web + Cordova 的支持离线应用 APP 的实现方案

    由于我司的业务特性,需要 APP 能够支持即时在无网络的场景下,也能够正常使用 APP 的功能 那么,为了让一个用 web 前端实现的 APP 能够在无网络的场景下,也能够正常运行程序,这其中的离线方案就需要实现几个关键点: 代码的离线、更新 数据的下载、上传、更新 本篇就

    2024年02月05日
    浏览(43)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(69)
  • 使用cordova 打包的app 如何让视频横屏播放 video

    Cordova插件“cordova-plugin-screen-orientation”设置移动端横屏播放video视频 cordova官网可显示详细的介绍

    2024年02月12日
    浏览(35)
  • uni-app本地存储

    大家好,今天和大家分享一下uni-app中的本地存储,其中分为同步和异步,有些朋友可能也在这两个概念中迷惑过,下面我们就来讲讲这个本地存储。 1.uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。 OBJECT参数 参

    2024年02月05日
    浏览(45)
  • 前端开发:JS中向对象中添加对象的方法

    在JS中向对象中添加对象的操作方法大概有三种:直接添加、使用扩展运算符…、 Object.assign()方法。 1、直接添加 直接在对象A中添加需要的键值对内容,具体示例如下所示: 2、使用扩展运算符… 使用扩展运算符…实现对象中添加对象是比较常用的方式,具体示例如下所示:

    2024年02月11日
    浏览(54)
  • uni.app小程序登录页持久化存储和退出后清除本地缓存

    持久化存储 在store里面的user.js(自己创建的)中 获取数据后在App.vue中触发他 退出后清除本地缓存  在api中login.js创建一个请求 因为接口数据有header头,所有看看request.js请求中是否加入了header 在user.js中加入清除缓存后的数据 在登录后我的那个页面中 引入文件地址

    2024年02月13日
    浏览(36)
  • Vue本地存储及用法

    目录 1.本地存储是什么? 2.本地存储的应用场景 3.存储的使用 4. 练习用法 1.本地存储是什么?         以文件的方式存储在本地,通过把数据存在浏览器中,用户不必每次都向服务器请求 获取同一个信息。在你离线时,使用本地存储的数据而不是向远端服务器上请求 数

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包