更新记录

0.1.2（2025-05-17） 下载此版本

• feat: 兼容uniappx 小程序、H5、IOS、安卓

0.1.1（2025-04-01） 下载此版本

• feat: 更新示例

0.1.0（2025-04-01） 下载此版本

• feat: 去掉app-vue的实现

平台兼容性

uni-app

uni-app x

lime-pag

• pag 使用示意插件，官方文档
• 腾讯高性能动画渲染库，兼容uniapp（微信小程序、H5）/uniappx（微信小程序、H5、安卓、IOS）
• uniappx app端依赖了lime-pag-x这个原生插件

文档

pag

安装

插件市场导入，小程序和H5安装pag依赖，APP端需要导入lime-pag-x

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

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

代码演示

uniapp

<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();
}

UniappX

uniappx app端依赖了lime-pag-x这个原生插件，需要你手动导入，因为它是一个收费的插件。
非APP端同uniapp一样的安装

<l-pag style="height: 450px;" ref="pagRef" @init="init"></l-pag>

import type { LPAG, LPAGView } from '@/uni_modules/lime-pag'

let pagView:LPAGView|null = null
const pag = `https://pag.art/file/like.pag`
const init = async (PAG: LPAG) => {
    const pagFile = await PAG.PAGFile.load(pag);
    pagView = await PAG.PAGView.init(pagFile);
    // 动画重复次数，默认是1，0为无限次 
    pagView!.setRepeatCount(5);
    pagView!.play();
    pagView!.addListener('', () => {
        console.log('开始')
    })
    pagView!.addListener('', () => {
        console.log('结束')
    })
}
const play = () => {
    if(pagView == null) return
    pagView?.play();
}
const pause = () => {
    if(pagView == null) 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)

常见问题

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

打赏

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