uni微信小程序使用lottie

  1. 在uni插件市场找到
    lottie-uni
    https://ext.dcloud.net.cn/plugin?id=1044
  2. 按照文档要求安装
  3. HBuilderX 引入
    下载或导入示例获取插件
cpp 复制代码
 import lottie from '@/common/lottie-miniprogram.js'

index.vue

cpp 复制代码
<template>
  <uni-popup
    ref="popup"
    type="center"
    background-color="#fff"
    :mask-click="false"
  >
    <view class="content">
      <view style="text-align: center">
        <canvas
          id="c1"
          type="2d"
          style="display: inline-block; width: 200px; height: 200px"
        ></canvas>
        <button @click="init" style="width: 300px; margin-top: 10px">
          init
        </button>
        <button @click="play" style="width: 300px; margin-top: 10px">
          play
        </button>
        <button @click="pause" style="width: 300px; margin-top: 10px">
          pause
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
// https://app.lottiefiles.com/animation/8606532e-798d-419e-9dc5-8abe1cc7f7d6?panel=download
// https://ext.dcloud.net.cn/plugin?id=1044
// https://github.com/airbnb/lottie-web

import lottie from "./common/lottie-miniprogram.js";
export default {
  data() {
    return {
      title: "Hello",
      _inited: true,
    };
  },
  onLoad() {},
  mounted() {
    this.$refs.popup.open();
    setTimeout(() => {
      this.init();
    }, 2000);
  },
  methods: {
    init() {
      if (this._inited) {
        return;
      }
      // https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
      // https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.fields.html
      // node是否返回节点对应的 Node 实例  size是否返回节点尺寸(width height)
      this.createSelectorQuery()
        .select("#c1")
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext("2d");
          // 设备像素比
          const dpr = wx.getSystemInfoSync().pixelRatio;
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr, dpr);
          lottie.setup(canvas);
          lottie.loadAnimation({
            loop: true,
            autoplay: true,
            animationData: require("./data.json"),
            // path: 'https://www.lottiejs.com/wp-content/uploads/2022/01/83351-taking-the-duggy-out.json',
            rendererSettings: {
              context: ctx,
            },
          });
        });
    },
    play() {
      this.ani.play();
    },
    pause() {
      this.ani.pause();
    },
  },
};
</script>

<style>
</style>

按照官方文档中的示例引入没有问题 但是设计给的json文件对于我这边来讲没有加载出来 所以自己找网站转化成lottie能接受的json文件

  1. 将设计给的json转成lottieFiles
    LottieFiles

  2. 放在对应的文件夹下面

在对应的地方引入该组件即可显示

相关推荐
00后程序员张1 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
游戏开发爱好者82 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
sen_shan3 小时前
《微信小程序》第五章:登录-API封装
微信小程序·小程序
2501_916007477 小时前
Fastlane 结合 开心上架 命令行版本实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张8 小时前
iOS 26 内存占用监控 多工具协同下的性能稳定性分析实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915909069 小时前
iOS 26 性能监控工具有哪些?多工具协同打造全方位性能分析体系
android·macos·ios·小程序·uni-app·cocoa·iphone
simon_934910 小时前
微信小程序(H5)上传文件到阿里云 OSS(使用 STS 临时凭证)
阿里云·微信小程序·小程序·html5
2501_9159184111 小时前
uni-app 上架 iOS 应用全流程 从云打包到开心上架(Appuploader)免 Mac 上传发布指南
android·macos·ios·小程序·uni-app·iphone·webview
老师可可12 小时前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
2501_9159214312 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview