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/

相关文章
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
653 1
|
15天前
|
小程序 机器人 开发者
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
30 2
|
28天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
51 2
|
1月前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
50 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
207 1
|
1月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
1月前
|
小程序 Java
小程序访问java后台失败解决方案
小程序访问java后台失败解决方案
44 2
|
1月前
|
机器学习/深度学习 人工智能 小程序
做AI运动小程序有哪些解决方案,如何进行选型?
随着深度学习技术的发展,AI运动应用如“天天跳绳”和“百分运动”变得流行。本文探讨了将AI运动功能引入微信小程序的可行性,并介绍了几种解决方案。实现AI运动计数的关键技术包括视频抽帧、人体检测、姿态识别等。文中详细描述了离线方案(全离线和半离线)和原生方案(自研AI引擎和成熟插件)的不同实现方式,并对各种方案进行了对比,建议优先选择成本低、体验佳的AI运动识别插件方案。
|
1月前
|
JSON 小程序 前端开发
微信小程序-人脸核身解决方案
微信小程序-人脸核身解决方案
182 0
|
1月前
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
41 0
下一篇
无影云桌面