uni-app 微信小程序画布node方法不支持2d类型获取节点 无法用于lottie-miniprogram的动画绘制问题

uni-app 微信小程序画布node方法不支持2d类型获取节点 无法用于lottie-miniprogram的动画绘制问题

开发环境 版本号 项目创建方式
Windows 20H2 CLI 
产品分类：uniapp/小程序/微信

第三方开发者工具版本号：1.05

基础库版本号：2.7.0

CLI版本号：4.5.9

示例代码：
``` html
<canvas id="canvas" canvas-id="canvas" type="2d"></canvas>

onReady() {
    const canavsItem = wx.createSelectorQuery().select("#canvas");

    canavsItem  
        .node((res) => {  
            console.log(3333333333, res);  
            const canvas = res.node;  
            lottie.setup(canvas);  
            lottie.loadAnimation({  
                loop: true,  
                autoplay: true,  
                // animationData: require('../../json/redbao.js'),  
                path: `${IMG_URL}/static/lottie/queren.json`,  
                rendererSettings: {  
                    context: context,  
                },  
            });  
        })  
        .exec();  
},

操作步骤： 2d类型画布调用node方法无法进回调

预期结果： 希望能兼容这个功能

实际结果： node回调进不去

bug描述： 无法获取2d类型的画布的node节点 只能获取webgl了 希望了获取2d模式的用于lottie动画绘制


更多关于uni-app 微信小程序画布node方法不支持2d类型获取节点 无法用于lottie-miniprogram的动画绘制问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序画布node方法不支持2d类型获取节点 无法用于lottie-miniprogram的动画绘制问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，微信小程序的 2D 画布与 WebGL 上下文处理方式不同，导致 wx.createSelectorQuery().node() 方法无法正确返回 2D 类型的节点。目前该 API 主要支持 WebGL 上下文，这是微信小程序基础库的限制。

针对 lottie-miniprogram 的使用，可以改用微信原生 API 获取 2D 上下文：

onReady() {
  const query = wx.createSelectorQuery();
  query.select('#canvas')
    .fields({ node: true, size: true })
    .exec((res) => {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      
      // 适配 lottie
      lottie.setup(canvas);
      lottie.loadAnimation({
        loop: true,
        autoplay: true,
        path: `${IMG_URL}/static/lottie/queren.json`,
        rendererSettings: {
          context: ctx,
        },
      });
    });
}

注意确保 canvas 组件声明正确：

<canvas id="canvas" type="2d" style="width: 300px; height: 300px"></canvas>
回到顶部