微信小程序使用PAG动画

uniapp开发微信小程序播放PAG动画

准备工作

• pag动画文件网络地址
• uni插件市场搜索pag(腾讯pag)

安装

1. 导入插件到项目中
2. 安装插件中的依赖

npm install libpag-miniprogram --save

注意事项：

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

使用

示例组件

<!-- // 代码位于 uni_modules/lime-pag/compoents/lime-pag -->
<lime-pag /> 
<!-- // 不要随便删除文件 -->

组件vue3

以下是vue3的用法

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

const pagRef = ref(null);
let pagView = null
const init = async (PAG) => {
    const pagFile = await PAG.PAGFile.load('你的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();
}

组件vue2

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

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

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

async init(PAG) => {
    const pagFile = await PAG.PAGFile.load('你的pag文件地址');
    pagView = await PAG.PAGView.init(pagFile);
    pagView.play();
    pagView.addListener('', () => {
        console.log('开始')
    })
    pagView.addListener('', () => {
        console.log('结束')
    })
};
play(){
    if(!pagView) return
    pagView.play();
};
pause(){
    if(!pagView) return
    pagView.pause();
}