uniapp开发微信小程序使用pag动效

<template>
  <view>
    {{ vue }}
    <u-popup v-model="showBox" mode="center" :zIndex="10075">
      <view class="bg-transparent">
        <canvas id="pag" canvas-id="pag" type="webgl" class="bg-transparent" style="width: 300px; height:300px;"></canvas>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { PAGInit } from 'libpag-miniprogram'

export default {
  components: {},
  props: {},
  data() {
    return {
      vue: 'hello world',
      showBox: true,
    }
  },
  computed: {},
  watch: {},
  onLoad(options) {},
  async onReady() {
    const PAG = await PAGInit({locateFile: (file) => '/static/' + file })

    uni.createSelectorQuery()
      .select('#pag')
      .fields({node: true, size: true})
      .exec(async (res) => {
        const canvas = res[0].node
       const buffer = await this.loadFileByRequest('https://pag.art/file/test.pag')

        const pagFile = await PAG.PAGFile.load(buffer)

        const pagView = await PAG.PAGView.init(pagFile, canvas)
        pagView.setRepeatCount() // 循环动画
        await pagView.play()
      })
  },
  methods: {
    // 画布图片地址   arraybuffer  处理
    loadFileByRequest(url) {
      return new Promise((resolve) => {
        wx.request({
          url,
          method: 'GET',
          responseType: 'arraybuffer',
          success(res) {
            if (res.statusCode !== 200) {
              resolve(null)
            }
            resolve(res.data)
          },
          fail() {
            resolve(null)
          },
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>