HaaS UI小程序解决方案基础教学之五: JSAPI文件管理

简介: File JSAPI是HaaS UI提供的一个轻量级文件接口,特别适用于存储小程序运行所需的文件,如文本、图片、视频等资源文件,这些文件都可以通过File JSAPI来存取。

名词解释

AliOS Things: 阿里云智能IoT团队自研的物联网操作系统

HaaS:全称是Hardware as a Service,阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务

HaaS UI:全称是Hardware as a Service User Interface,是源自AliOS Things操作系统上的一套应用&图形解决方案,支持C/C++和 JS两种开发语言

1、 File JSAPI简介

File JSAPI是HaaS UI提供的一个轻量级文件接口,特别适用于存储小程序运行所需的文件,如文本、图片、视频等资源文件,这些文件都可以通过File JSAPI来存取。

File JSAPI的作用域为当前小程序应用,包含的接口如下:

接口宿主 JSAPI 调用方法 接口功能
file saveFile $falcon.jsapi.file.saveFile({apFilePath: 'xxx'}) 文件管理
getSavedFileInfo $falcon.jsapi.file.getSavedFileInfo({apFilePath: 'xxx'})
getFileInfo $falcon.jsapi.file.getFileInfo({apFilePath: 'xxx'})
getSavedFileList $falcon.jsapi.file.getSavedFileList({})
removeSavedFile $falcon.jsapi.file.removeSavedFile({apFilePath: 'xxx'})

1.1、 file.saveFile

file.saveFile是保存文件到本地(本地文件大小总容量限制:10 MB)的 API。

调用 my.saveFile 成功后,可在"MINIAPP_DATAROOT file/appid/"路径下查看保存的文件,其中appid是小程序的id。

入参

Object 类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.saveFile({
  apFilePath: 'd:\\demo.jpg',
}, result => {console.log(result)});

success 回调函数

属性 类型 描述
apFilePath String 文件保存路径。

1.2、 file.getSavedFileInfo

file.getSavedFileInfo 是获取"MINIAPP_DATAROOT file/appid/"路径下保存的所有文件信息的 API,其中appid是小程序的id。

入参

入参为Object类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.saveFile({
  apFilePath: 'd:\\demo.jpg',
}, result => {
  result && !result.error && file.getSavedFileInfo({
    apFilePath: result["apFilePath"],
  }, result => {console.log(result)});
});

1.3、file.getFileInfo

getFileInfo 是获取文件信息的 API。

入参

入参为Object类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.getFileInfo({
  apFilePath: "/data/mini_app/file/0000000000000001/demo.jpg",
}, result => {console.log(result)});

success 回调函数

入参为Object类型,属性如下

名称 类型 描述
size Number 文件大小。
digest String 摘要结果。

1.4、 file.getSavedFileList

file.getSavedFileList 是获取保存的所有文件信息的 API。

入参

Object 类型,属性如下:

属性 类型 必填 描述
appId String 小程序的 appId。
callback Function 回调函数,包含result参数。

示例代码

file.getSavedFileList({
}, result => {
  result && !result.error && console.log(result);
});

success 回调函数

属性 类型 描述
fileList List 文件列表。
column1 column2 column3
column1 column2 column3

File 对象属性

属性 类型 描述
size Number 文件大小。
createTime Number 创建时间。
apFilePath String 文件路径。

1.5、 file.removeSavedFile

file.removeSavedFile 是删除某个保存的文件的 API。

入参

Object 类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。

示例代码

file.getSavedFileList({
}, result => {
  result && !result.error && file.removeSavedFile({
    apFilePath: result.fileList[0].apFilePath,
  }, result => {console.log(result)});
});

success 回调函数

属性 类型 描述
apFilePath String 被删除文件的路径。

2、File JSAPI使用教程

2.1、 file对象获取

在使用File JSAPI前,需要先获取$falcon.jsapi的file对象,所有的接口都是通过file对象进行调用的。

const storage = $falcon.jsapi.file;

2.2、 文件存储

文件存储操作需要通过步骤1获取的file对象来进行,具体可通过file.saveFile来实现键值对参数的存储,可存储的文件类型有txt、png、jpg、zip等常见类型。

文件类型/文件操作 写入操作
txt 支持
png 支持
jpg 支持
zip 支持
... 支持

在进行文件存储时,有两种方式,一种是同步存储,另一种是异步存储。同步存储直接返回存储结果,异步存储需要在async函数中操作,通过await返回存储结果。

接口名/参数列表 入参1 入参2
saveFile apFilePath : 'xxx' (result) => { console.log(result); }

同步存储方式:

const file = $falcon.jsapi.file;
file.saveFile(
  {
    apFilePath: "d:\\demo.jpg",
  },
  (result) => {
    console.log(result);
  }
);

异步存储方式:

const file = $falcon.jsapi.file;
let result = await storage.setStorage({
  key: 'key',               // key
  data: 'storage content',  // value
});
console.log(result);

2.3、 其他文件操作

其他文件操作也需要通过步骤1获取的file对象来进行,包含getSavedFileInfo、getFileInfo、getSavedFileList和removeSavedFile,也支持同步和异步两种操作。

3、 File JSAPI调用示例

本节将以保存一张图片为示例,介绍如何去调用File JSAPI,具体包含保存文件、获取保存的文件信息、获取文件信息、获取保存的文件列表和删除文件。调用saveFile(),就可将文件存储到当前小程序的私有文件路径下,以供小程序使用。文件使用完毕后,调用removeSavedFile(),就可将之删除。

3.1、 保存文件

从给定apFilePath中获取要保存的文件路径,并调用saveFile()将之保存到小程序的私有文件路径下:

  const file = $falcon.jsapi.file;
  file.saveFile(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      console.log(result);
    }
  );
}

5b56beec2352e4b2f392f792f2225669.gif

3.2、 获取保存的文件信息

要获取某个已保存的文件的信息,可通过调用getSavedFileInfo()实现:

getSavedFileInfo() {
  const file = $falcon.jsapi.file;
  file.saveFile(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      result &&
        !result.error &&
        file.getSavedFileInfo(
          {
            apFilePath: result["apFilePath"],
          },
          (result) => {
            console.log(result);
          }
        );
    }
  );
}

2.gif

3.3、 获取文件信息

要获取某个文件的信息,可通过调用getFileInfo()实现:

  const file = $falcon.jsapi.file;
  file.getFileInfo(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      console.log(result);
    }
  );
}

3.gif

3.4、 获取保存的文件列表

要获取已保存的文件的列表,可通过调用getSavedFileList()实现:

  const file = $falcon.jsapi.file;
  file.getSavedFileList({}, (result) => {
    result && !result.error && console.log(result);
  });
}

4.gif

3.5、 删除文件

删除通过saveFile()保存的文件,可以调用removeSavedFile()实现:

  const file = $falcon.jsapi.file;
  file.getSavedFileList({}, (result) => {
    result &&
      !result.error &&
      file.removeSavedFile(
        {
          apFilePath: result.fileList[0].apFilePath,
        },
        (result) => {
          console.log(result);
        }
      );
  });
}

5.gif

4、开发者技术支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号

image.png

更多技术与解决方案介绍,请访问阿里云AIoT首页https://iot.aliyun.com/

相关文章
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
1282 0
|
编解码 前端开发 图形学
【技术深度解析】多平台适配下的UI适配难题:U3D游戏UI错乱的终极解决方案
【7月更文第12天】随着移动设备市场的多元化,Unity游戏开发者面临的一大挑战是如何在不同分辨率和屏幕尺寸的设备上保持UI的一致性和美观性。游戏在高分辨率平板与低分辨率手机上呈现出的UI布局混乱、按钮错位等问题,严重影响玩家体验。本文旨在探讨Unity UI(UGUI)在多平台适配中的最佳实践,通过优化Canvas Scaler设置、灵活运用RectTransform和Anchor Points,以及高效利用设计工具,确保UI的完美适配。
2227 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
96 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
165 0
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
492 0
|
12月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
386 15
|
12月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
406 11
|
8月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
546 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
11月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
357 56
|
11月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
522 55