Tuya Developer Forum

在面板小程序中能引第三方库lottie吗？如果可以的话，如何使用，能否给出一个简单的demo

cabbage 2024年 Mar 19日 09:48

在面板小程序中能引第三方库lottie吗？如果可以的话，如何使用，能否给出一个简单的demo

https://developer.tuya.com/cn/miniapp/d ... 9%E6%B3%95 可参考文档中代码

https://github.com/Tuya-Community/tuya- ... ges/lottie 可以参考这个demo。如果有任何使用方面的问题可以在这个仓库下面找https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master

请问一下，我参考上面的demo代码在面板小程序中使用lottie，并未成功渲染出内容，是不是我的代码哪里写的不对，代码如下
import React from 'react';
import { Text, View, Button } from '@ray-js/ray';
import { createCanvasContext } from '@ray-js/api';
import { usePageEvent } from 'ray';
import lottie from 'lottie-miniapp'
import { lottieData } from './lottie-data.js'
import Styles from './index.module.less';

export const Lottie = () => {

// 页面初始化对数据进行处理
usePageEvent('onReady', () => {
console.log('onReady');
drawInit()
});

const drawInit = () => {
let context = createCanvasContext('canvas');
// let canvasContext = context.getContext('2d')

lottie.loadAnimation({
  renderer: "canvas", // 只支持canvas
  loop: true,
  autoplay: true,
  animationData: lottieData,
  // path: 'https://lottie.host/9f6e448d-ff0a-4b27-8e72-a010ebf30a95/JGz5VdI2ta.json',
  rendererSettings: {
    // 这里需要填 canvas
    // canvas: context,
    // context: canvasContext,
    context: context,
    clearCanvas: true,
  },
})

}
const play = ()=>{
console.log(lottie,'1111');

lottie.play()

}

return (
<View className={Styles.root}>
<Button onClick={play}>开始</Button>
<canvas canvas-id="canvas" id='canvas' type="2d" style={{ width: '300px', height: '250px' }}></canvas>
</View>
);
};

lottie库是这个下载的 npm i -S lottie-miniapp

lottieData数据 是这个网址下的
https://github.com/Tuya-Community/tuya- ... ie-data.js

tdeveloper 2024年 Mar 19日 10:05

https://github.com/Tuya-Community/tuya- ... ges/lottie 可以参考这个demo。如果有任何使用方面的问题可以在这个仓库下面找https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master

你跑一下这个里面的demo呢？

这个demo是智能小程序的，我在面板小程序先试了下直接放进去好像跑不起来，里面的依赖和数据文件我都有下载，没使用智能小程序开发过，还需要做其他处理吗？

有大佬可以看看嘛，如果在面板小程序中用不了，我就重新找别的方法

在ray中也可以用的，使用混合开发的写法引入就可以了，直接引入小程序原生组件
https://developer.tuya.com/cn/miniapp/d ... evelopment

cabbage 2024年 Mar 19日 14:33

请问一下，我参考上面的demo代码在面板小程序中使用lottie，并未成功渲染出内容，是不是我的代码哪里写的不对，代码如下
import React from 'react';
import { Text, View, Button } from '@ray-js/ray';
import { createCanvasContext } from '@ray-js/api';
import { usePageEvent } from 'ray';
import lottie from 'lottie-miniapp'
import { lottieData } from './lottie-data.js'
import Styles from './index.module.less';

export const Lottie = () => {

// 页面初始化对数据进行处理
usePageEvent('onReady', () => {
console.log('onReady');
drawInit()
});

const drawInit = () => {
let context = createCanvasContext('canvas');
// let canvasContext = context.getContext('2d')

Code: Select all

lottie.loadAnimation({
  renderer: "canvas", // 只支持canvas
  loop: true,
  autoplay: true,
  animationData: lottieData,
  // path: 'https://lottie.host/9f6e448d-ff0a-4b27-8e72-a010ebf30a95/JGz5VdI2ta.json',
  rendererSettings: {
    // 这里需要填 canvas
    // canvas: context,
    // context: canvasContext,
    context: context,
    clearCanvas: true,
  },
})

}
const play = ()=>{
console.log(lottie,'1111');

Code: Select all

lottie.play()

}

return (
<View className={Styles.root}>
<Button onClick={play}>开始</Button>
<canvas canvas-id="canvas" id='canvas' type="2d" style={{ width: '300px', height: '250px' }}></canvas>
</View>
);
};

lottie库是这个下载的 npm i -S lottie-miniapp

lottieData数据 是这个网址下的
https://github.com/Tuya-Community/tuya- ... ie-data.js

不要使用这样的写法。直接使用混合开发引用小程序语法的小程序组件

https://github.com/Tuya-Community/tuya- ... ges/lottie，这个是智能小程序中lottie的页面写法，有包含这个的组件库吗？还是说要自己改写成自定义组件来用才行