更新记录

0.0.8（2023-07-18）

• fix: 修复watch

0.0.7（2023-06-25）

• feat: 修复因加载不同pag文件导致canvas无限放大的问题

0.0.6（2023-06-21）

• feat: 修复vue2 小程序加载慢的问题

平台兼容性

lime-pag

• pag 使用示意插件，官方文档
• 只支持h5和小程序

安装

• 第一步、导入插件
• 第二步、安装pag

// 小程序
npm install libpag-miniprogram --save
// h5
npm install libpag --save

注意 如果小程序控制台报错提示未加载wasm，请把node_modules/libpag-miniprogram/lib/libpag.wasm.br复制到uni_modules/lime-pag/static/这目录下

使用

<l-pag ref="pagRef" @init="init"></l-pag>

const pagRef = ref(null);
let pagView = null
const init = async (PAG) => {
    // 小程序无法加载 pag 本地资源，但把pag后缀改成png就能读取，故不使用本地资源作演示
    // h5有跨域的问题哦
    const pagFile = await PAG.PAGFile.load('https://pag.art/file/like.pag');
    pagView = await PAG.PAGView.init(pagFile);
    pagView.play();
    pagView.addListener('', () => {
        console.log('开始')
    })
    pagView.addListener('', () => {
        console.log('结束')
    })
}
const play = () => {
    if(!pagView) return
    pagView.play();
}
const pause = () => {
    if(!pagView) return
    pagView.pause();
}

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-pag/compoents/lime-pag -->
<lime-pag />

插件标签

• 默认 l-pag 为 component
• 默认 lime-pag 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or - 
npm install typescript -D

常见问题

• 微信小程序无法读取pag的本地资源，但把pag后缀改成png就能读取

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。