1. npm install lottie-miniprogram

<template>
    <view class="lottie-view">

         <canvas id="lottie" type="2d" class="lottie" canvas-id="lottie" /> 
        
    </view>
</template>

<script lang="ts" setup>
    
    import lottie from "lottie-miniprogram";
    import { onMounted, ref, getCurrentInstance, onUnmounted } from "vue";

    const lottieUrl = 'xxxxxxxxxxxxxxxxxxxxxx/data.json' //在線json地址
    const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync()
    const init = async () => {
        wx.createSelectorQuery().select('#lottie').node(async res => {
            const canvas = res.node
            const context = canvas.getContext('2d')
            //解決lottie模糊問題
            canvas.width = windowWidth * pixelRatio
            canvas.height = windowHeight * pixelRatio

            context.scale(pixelRatio, pixelRatio)
            lottie.setup(canvas)//要執(zhí)行動(dòng)畫，必須調(diào)用setup,傳入canvas對(duì)象

            lottie.loadAnimation({//lottie給的接口
                loop: true,//是否循環(huán)播放（選填）
                autoplay: true,//是否自動(dòng)播放（選填）
                // animationData: require('../../static/data.js'),
                path: lottieUrl,//lottie json包的網(wǎng)絡(luò)鏈接，可以防止小程序的體積過大，要注意請(qǐng)求域名要添加到小程序的合法域名中
                rendererSettings: {
                    context//es6語法：等同于context:context（必填）
                }
            })
        }).exec()
    };


    onMounted(() => {
        init();
    });
    
</script>

<style>
    .lottie-view {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        background-image: url('xxxxxxxxxxxxxxxxxxxlottie.png');
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    .lottie {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
    }
</style>