支付宝小程序动画、相机、录像、缓存

1,089 阅读4分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第25天,点击查看活动详情

lottie动画

my.createLottieContext:my.createLottieContext 是传入 lottie id,返回一个 lottieContext 上下文的 API。lottie id 为开发者在对应 lottie 标签中自由命名的 ID 属性

相机

my.createCameraContext

创建 [camera]上下文 [CameraContext]对象。

image.png

image.png

返回值

[CameraContext]camera 上下文。

CameraContext 概览

image.png

CameraContext.takePhoto

CameraContext.takePhoto 拍摄照片。

image.png

image.png
示例代码: image.png image.png

CameraContext.startRecord

CameraContext.startRecord 开始录像。

image.png

image.png
实例代码:

image.png image.png

image.png 2. CameraContext.stopRecord:CameraContext.stopRecord 结束录像。

image.png

image.png 3. CameraContext.setZoom:CameraContext.setZoom 设置缩放级别。

image.png

image.png

image.png 4. CameraContext.onCameraFrame:CameraContext.onCameraFrame 获取 Camera 实时帧数据。

image.png

image.png

返回值

[CameraFrameListener]

CameraFrameListener 概览

[CameraContext.onCameraFrame]返回的监听器。

image.png

  1. CameraFrameListener.start:开始监听帧数据。

image.png

image.png 2. # CameraFrameListener.stop:停止监听帧数据。

image.png

image.png

缓存

开启本地缓存数据,进行存储、获取和删除等控制。

单个小程序的缓存总上限为 10MB。

同步方法会阻塞当前任务,直到同步方法处理返回。异步方法不会阻塞当前任务。

image.png

  1. my.setStorage:my.setStorage 将数据存储在本地缓存中指定的 key 中。该 key 原来对应的内容会被覆盖。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 200KB,所有数据存储上限为 10MB。
    相关接口
  • 本地缓存数据使用 my.setStorage 按 key 存储,使用 my.getStorage 按 key 读取;
  • 可使用 my.getStorageInfo 获取已存储的所有 key 以及总体空间占用情况;
  • 可使用 my.removeStorage 删除指定 key 对应数据,使用 my.clearStorage 删除所有缓存数据;
  • 本地缓存数据相关的 API 均提供带 Sync 后缀的同步版本,但通常推荐使用异步版本,以免影响页面加载和交互响应速度。

image.png
缓存的实例代码:

image.png

image.png 2. # my.setStorageSync(同步):my.setStorageSync 是将数据存储在指定的 key 的本地缓存中的同步接口,会覆盖掉原来该 key 对应的数据,存储成功时返回值与 my.setStorage 的 success 回调参数相同,失败时返回值与 my.setStorage 的 fail 回调参数相同。

缓存本地数据时会自动加密存储,通过 API 读取时会自动解密返回。
小程序缓存默认具有支付宝账号和小程序 ID 两级隔离。
内嵌 webview 的存储与小程序存储相互隔离,即内嵌 webview 中指定 key 存储数据不会覆盖小程序自身相同 key 对应的数据。

image.png

image.png 3. # my.getStorage:my.getStorage 从本地缓存中异步获取指定 key 的内容。

image.png

image.png

image.png 4. # my.getStorageSync(同步):my.getStorageSync 是获取本地缓存数据的同步接口。
同步方法会阻塞当前任务,直到同步方法处理返回。异步方法 [my.getStorage] 不会阻塞当前任务。

小程序缓存默认具有支付宝账号和小程序 ID 两级隔离。
支持内嵌 webview 内缓与小程序缓存隔离,获取内嵌 webview 指定 key 的缓存不会同时返回小程序相同 key 下的缓存数据。

image.png

image.png 5. # my.getStorageInfo:my.getStorageInfo 是获取当前 storage 的相关信息的异步接口。

在内嵌 webview 内获取当前 storage 的相关信息,但不会获取到当前小程序 storage 的相关信息

image.png

image.png 6. # my.getStorageInfoSync:my.getStorageInfoSync 是获取当前 storage 相关信息的同步接口。

image.png 7. # my.removeStorage:my.removeStorage 是从本地缓存中移除指定 key 的异步接口。

image.png 8. # my.removeStorageSync:my.removeStorageSync 是从本地缓存中移除指定 key 的同步接口。

image.png 9. # my.clearStorage:my.clearStorage 是清除本地数据缓存的异步接口。 10. # my.clearStorageSync:my.clearStorageSync 是清除本地数据缓存的同步接口。

周期性更新

  • 数据预拉取(预加载):预拉取能够在小程序冷启动的时候客户端向第三方服务器拉取业务数据,当页面打开时来获取数据可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 。

image.png

image.png
根目录下创建preload.json文件,进行配置

image.png

  • 地理位置预拉取:定位类的小程序首次调用 [my.getLocation] 获取用户定位的耗时在 200ms 以上,开发者可通过提前调用 my.getLocation 从而直接获取定位信息不需要等待,加速首屏渲染时间和减少用户体感耗时。
    在小程序 IDE 根目录创建 preload.json 文件,该文件中填写预加载配置。
    注意: preload.json 最多支持配置 2048 个字节,超过大小 IDE 会提示超限。

数据预加载 fetchType:pre

  • params  解析配置的请求:
    • url:请求地址。
    • method:httpmetood。
    • data:请求的参数,如果是get,会将参数做成 query 拼接在 URL 后。
    • headers:自定义请求头。
    • dataType:期望返回的数据格式,默认 JSON,支持 JSON、text、base64、arraybuffer。

JSAPI 预拉取 fetchType:jsapiPre

  • params 参数说明:
    • jsapi:API 名称。
    • data:API 参数,与 JSAPI 入参一致。

image.png

获取数据

通过调用 JSAPI [getBackgroundFetchData] 获取预加载的数据。

image.png

image.png

image.png

image.png

文件

  1. my.openDocument:my.openDocument 是预览文件的 API。除支持预览 PDF 文件,客户端 10.2.80 开始也支持预览 doc、docx、xls、xlsx、ppt、pptx 文件。

image.png

image.png