小程序端接入指南

SDK 的接入和使用请遵守 PAG SDK 个人信息保护规则

libpag-lite-miniprogram 是 libpag 在微信小程序平台的简化版 SDK

当前为 alpha 版本，欢迎使用与反馈🎉

后续有计划在小程序上推出完整功能版本敬请期待

特性

  • 基于 Javascript + WebGL，不使用 WebAssembly
  • 仅支持播放包含单独一个「BMP 预合成」的 PAG 动效文件
  • 包体minify只有 57KB，GZip之后只有 15KB，比完整版 libpag 小很多
  • 具有更好的兼容性

关于 BMP 预合成

导出单一 BMP 预合成的 PAG 文件

可参考 https://pag.art/docs/pag-export.html

点击菜单“文件” -> “导出” -> “PAG File(Panel)...”，选择需要导出的合成，点击设置按钮，在根节点勾选BMP，导出全「BMP 预合成」的PAG文件。

查看 PAG 文件是否为单一 BMP 预合成

可以下载 PAGViewer 打开 PAG 文件，点击"视图"->"显示 编辑面板"，在编辑面板中我们能看到 Video 的数量，当 Video数量为 1 时，即为单一 「BMP 预合成」。

快速开始

  1. npm 依赖
$ npm install libpag-lite-miniprogram

点击「微信开发者工具」- 「工具」- 「构建npm」，进行小程序 npm 依赖构建

  1. 绘制
<!-- index.wxml -->
<canvas type="webgl" id="pag" style="width: 300px; height:300px;"></canvas>

// index.js
import { PAGView } from 'libpag-lite-miniprogram';

Page({
  onReady() {
    wx.createSelectorQuery().select('#pag').node().exec(async(res) => {
      const canvas = res.node
      wx.request({
        url: 'https://pag.art/file/frames.pag',
        method: 'GET',
        responseType: 'arraybuffer',
        success(res) {
          const pagView = PAGView.init(res.data, canvas);
          pagView.play();
        },
        });
    })
  }
})

使用指南

缓存

因为 PAG 解码的时候用到了 VideoDecoder，而 VideoDecoder 的解码并不支持 blobURL，所以会把 BMP 预合成的视频数据缓存在本地。

为避免PAG的缓存把用户缓存目录内存占用过高，建议在不需要使用PAG的时候，调用 clearCache() 方法进行缓存清理。

More

代码片段：https://developers.weixin.qq.com/s/Osw1vSmu78BL

API：https://github.com/Tencent/libpag/tree/main/web/lite/wechat

← Web端接入指南平台特性 →