为了实现一个满足你需求的像素格子画布插件，你可以使用uni-app的canvas功能。以下是一个基本的实现思路，包括自定义画布大小、画布个数、格子填充颜色以及支持GIF生成多个画布帧数的代码示例。

1. 创建uni-app项目

首先，确保你已经安装了HBuilderX并创建了一个uni-app项目。

2. 创建组件

在项目的components目录下创建一个新的组件，比如PixelCanvas.vue。

3. 编写组件代码

<template>
  <view class="container">
    <canvas
      v-for="(frame, index) in frames"
      :key="index"
      :canvas-id="'canvas_' + index"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
  </view>
</template>

<script>
export default {
  props: {
    canvasWidth: {
      type: Number,
      default: 16 * 16, // 16x16 grid
    },
    canvasHeight: {
      type: Number,
      default: 16 * 16, // 16x16 grid
    },
    numCanvases: {
      type: Number,
      default: 1,
    },
    framesData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      frames: [],
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      this.frames = Array.from({ length: this.numCanvases }, (_, i) => {
        const ctx = uni.createCanvasContext(`canvas_${i}`, this);
        this.drawCanvas(ctx, this.framesData[i] || Array(256).fill(0)); // Default fill with black
        return ctx;
      });
    },
    drawCanvas(ctx, frameData) {
      const gridSize = 16;
      frameData.forEach((color, index) => {
        const x = (index % 16) * gridSize;
        const y = Math.floor(index / 16) * gridSize;
        ctx.setFillStyle(this.getColor(color));
        ctx.fillRect(x, y, gridSize, gridSize);
      });
      ctx.draw();
    },
    getColor(colorIndex) {
      // Simple color mapping, adjust as needed
      const colors = ['#000000', '#FFFFFF']; // Black and white
      return colors[colorIndex % colors.length];
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
</style>

4. 使用组件

在你的页面中引入并使用这个组件，传入相应的props数据。

<template>
  <view>
    <PixelCanvas :canvasWidth="256" :canvasHeight="256" :numCanvases="10" :framesData="framesData" />
  </view>
</template>

<script>
import PixelCanvas from '@/components/PixelCanvas.vue';

export default {
  components: {
    PixelCanvas,
  },
  data() {
    return {
      framesData: [
        // Example frame data, each array represents a frame, each number represents a color index
        Array(256).fill(1), // White frame
        Array(256).fill(0), // Black frame
        // Add more frames as needed
      ],
    };
  },
};
</script>

这个示例只是一个基础实现，你可以根据需要进一步扩展，比如增加颜色选择、用户交互、GIF生成等功能。