LimePag

• 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('onAnimationStart', () => {
		console.log('开始')
	})
	pagView.addListener('onAnimationEnd', () => {
		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('onAnimationStart', () => {
		console.log('开始')
	})
	pagView!.addListener('onAnimationEnd', () => {
		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就能读取

打赏

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

源代码

组件源码