安裝核心依賴

npm install lottie-miniprogram @tarojs/plugin-html --save

修改 Taro 配置 (config/index.js)

const config = {plugins: ['@tarojs/plugin-html',// 其他插件...],mini: {canvas: true,webpackChain(chain) {chain.merge({module: {rule: {'lottie-loader': {test: /\.json$/,use: {loader: 'lottie-miniprogram/webpack-loader',options: {limit: 10240 // 10KB以下文件直接內聯}}}}}})}}
}

app.config.js里添加配置

export default defineAppConfig({// 其他代碼...requiredBackgroundModes: ['canvas'],// 其他代碼...})

封裝組件commonLottie

import React, { useEffect, useRef, useState } from 'react'
import Taro, { createSelectorQuery } from '@tarojs/taro'
import { View, Canvas } from '@tarojs/components'const CommonLottie = React.forwardRef(({animationData,width = 24,height = 24,loop = false,autoplay = true,canvasId = 'lottie-canvas' // 新增動態 ID 支持},ref) => {const canvasRef = useRef(null)const lottieInstance = useRef(null)const animationDuration = useRef(1500) // 固定1秒時長// 暴露方法給父組件React.useImperativeHandle(ref, () => ({play: () => {if (lottieInstance.current) {// 先重置再播放lottieInstance.current.goToAndStop(0, true)lottieInstance.current.play()}},pause: () => lottieInstance.current?.pause()}))const calculateSizes = () => {//   const systemInfo = Taro.getSystemInfoSync()const dpr = 1// 邏輯尺寸 → 物理像素尺寸const physicalWidth = width * dprconst physicalHeight = height * dpr// Lottie 內部使用邏輯單位，需要反向縮放const lottieWidth = width / dprconst lottieHeight = height / dprreturn {physicalWidth,physicalHeight,lottieWidth,lottieHeight,dpr}}// 使用重構后的尺寸配置const { physicalWidth, physicalHeight, lottieWidth, lottieHeight, dpr } =calculateSizes()// 微信小程序專屬初始化邏輯const initWechatCanvas = async () => {try {// 使用 Taro.nextTick 確保 DOM 更新完成await new Promise((resolve) => Taro.nextTick(resolve))// 增加重試次數和間隔let retryCount = 0const MAX_RETRY = 5const getNode = () =>new Promise((resolve, reject) => {createSelectorQuery().select(`#${canvasId}`).fields({ node: true, size: true }).exec((res) => {if (res[0]?.node) resolve(res[0].node)else if (retryCount < MAX_RETRY) {retryCount++setTimeout(() => getNode().then(resolve).catch(reject),200 * retryCount)} else {reject(new Error(`Canvas 節點未找到 (ID: ${canvasId})`))}})})const node = await getNode()//動態加載 Lottieconst Lottie = await import('lottie-miniprogram')// 計算播放速度const originalDuration =((animationData.op - animationData.ip) / animationData.fr) * 1000const playSpeed = originalDuration / animationDuration.current//創建動畫實例lottieInstance.current = Lottie.loadAnimation({canvas: node,renderer: 'canvas',animationData,loop,autoplay,rendererSettings: {context: node.getContext('2d'),dpr: 1,scaleMode: 2, // 1: 按比例填充容器，2: 完全填充preserveAspectRatio: 'xMidYMid meet' // 保持寬高比}})// 新增適配邏輯const animation = lottieInstance.currentanimation.resize(lottieWidth, lottieHeight) // 強制刷新尺寸animation.setSubframe(false) // 關閉子幀優化// 設置播放速度animation.setSpeed(playSpeed)// 自動銷毀// animation.addEventListener('complete', () => {//   animation.destroy()// })} catch (err) {console.error('初始化失敗:', err)}}useEffect(() => {if (process.env.TARO_ENV !== 'weapp') returnif (!animationData) returnconst timer = setTimeout(() => {initWechatCanvas()}, 300) // 增加初始化延遲return () => {clearTimeout(timer)lottieInstance.current?.destroy()}}, [animationData])return (<Viewstyle={{width: `${width}px`,height: `${height}px`,overflow: 'visible',// 修復定位問題position: 'relative'}}><Canvasid={canvasId}canvasId={canvasId} // 必須同時設置 id 和 canvasIdtype="2d"style={{width: `${physicalWidth}px`,height: `${physicalHeight}px`,transform: `translateZ(0)`, // 強制啟用 GPU 加速transformOrigin: '0 0',imageSmoothingQuality: 'high' // 高清渲染}}ref={canvasRef}/></View>)}
)export default CommonLottie

頁面中使用

import { View, Button, Image, Text, WebView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect, useRef } from 'react'
import './index.module.less'
import styles from './index.module.less'
import animationData from '@/assets/doc/tab_2_on.json'
import CommonLottie from '@/components/commonLottie'definePageConfig({navigationStyle: 'custom',backgroundColor: '#191919'
})export default function ExperiencePage() {const lottieRef = useRef(null)const play = () => {lottieRef.current.play()console.log(' lottieRef.current', lottieRef.current)}return (<View className={styles['experience-wrap']}><Button onClick={play}>按鈕</Button><CommonLottieref={lottieRef}canvasId={'lottie-canvas-test'}animationData={animationData}width={36}height={24}/></View>)
}