我用 AI 零代码撸了一个微信小程序：Dino Kids

设计、素材、组件全部由 AI 完成，免费模型 + 生图模型真香

个人开发者 + 免费 AI 模型 + Gemini 生图 = 高效产出高质量小程序
附 · Dino Kids 真实产品截图 & 核心组件代码

最近我利用业余时间开发了一款少儿英语启蒙的微信小程序 Dino Kids。
整个开发过程——从页面设计、素材背景图，到复杂的动效组件——几乎都由 AI 完成。
特别要提的是，所有图片素材（背景、彩带、按钮装饰等）均使用 Google 最新生图模型 gemini-3-pro-image-preview-2k 生成，风格统一、分辨率高，而且完全免费。

今天就把我的完整实践过程分享出来，带大家看看一个“AI 全包”的小程序长什么样。

一、产品长什么样？真实截图一览

先来看几张核心界面，感受一下 UI 和功能布局。

单词学习页绘本馆游戏中心绘画/创作页单词学习页：以动物主题分类（cat、bird、dog、pig……），卡片式设计，点击即发音。
绘本馆：2200+ 绘本，支持蓝思值 BR-70L、新课标等级筛选，还有“上次阅读”续读功能。
游戏中心：包含 Word King、Pic-Word Match、Flip Fun 等互动小游戏。

以上所有页面中的背景纹理、动物图标、彩带素材、按钮装饰，基本使用 gemini-3-pro-image-preview-2k 逐张生成或批量生成的。下文会细说。

体验入口

二、我用到的 AI 模型全家桶

2.1 聊天/代码生成模型（免费主力）

我主要使用 arena.ai 平台，右侧选择模型直接对话：

• Gemini 3 Flash（免费，响应快）
• GLM 5.1（免费，中文理解好）
• GPT-5.2（免费，逻辑严谨）

这些模型帮我生成了 90% 的前端代码，包括两个核心动效组件（Lottie 和礼花粒子系统）。

2.2 图片生成模型（素材全靠它）

gemini-3-pro-image-preview-2k
这是 Google 目前最强的图像生成模型，支持 2K 分辨率，提示词遵循度极高。
我用它生成了：

• 单词卡片上的动物形象（保持一致的扁平可爱风格）
• 绘本馆的装饰 banner 和 2200+ 绘本的封面占位图（批量生成）
• 礼花组件里的 30 张彩带 PNG 序列帧
• 底部导航的纯图标（ABC / word / book / game / create）

生成示例提示词：

“Generate a cute cartoon bee, simple flat style, isolated on transparent background, 2K resolution, suitable for a kids’ language learning app.”

输出直接是带透明通道的 PNG，省去了抠图的麻烦。

2.3 国内调用国外模型 API（可选需付费）

如果你需要批量生成代码（比如生成所有列表页的骨架），可以使用 api.bananan.cn/pricing
价格约 0.02 元/次调用，支持 GPT-5.2、Gemini 等。

三、AI 帮我写的三个个“高颜值”组件（附完整代码）

3.1 Lottie 动画组件（支持 JSON 动效，自动管理生命周期）

微信小程序原生集成 Lottie 比较麻烦，需要处理 canvas 2d 上下文、页面隐藏/显示、内存释放。我把需求扔给 AI，它直接生成了一套完整的组件。

<!-- 组件名：GlLottie -->
<template>
<viewclass="gl-lottie">
<canvas:id="canvasId"type="2d"class="gl-lottie-canvas" @click="handleCanvasClick"></canvas>
</view>
</template>

<scriptsetup>
import { nextTick, onUnmounted, getCurrentInstance, watch, markRaw } from'vue'
import { onPageShow, onPageHide } from'@dcloudio/uni-app';
import { getNodeEL } from'@/utils/index.js';
import lottie from"lottie-miniprogram";

const instance = getCurrentInstance();
const emit = defineEmits(['load', 'click']);
const props = defineProps({
url: { type: String, required: true },
options: { type: Object, default: {} },
data: { type: Object, default: {} }
});

const canvasId = `lottie-${instance.uid}-${Math.floor(Math.random() * 1000)}`;
let control = null, isDestroyed = false, indexId = 0;

watch(() => props.url, (newUrl) => {
  destroy();
if (newUrl) nextTick(() => init());
}, { immediate: true });

asyncfunctioninit() {
if (!props.url) return;
const initId = ++indexId;
  isDestroyed = false;

let animationData = null;
if (props.url.toLowerCase().includes('http')) {
const res = await uni.request({ url: props.url });
if (res.statusCode === 200 && res.data) animationData = JSON.parse(JSON.stringify(res.data));
  }
if (isDestroyed || initId !== indexId) return;

let canvasEl = await getNodeEL(`#${canvasId}`, instance);
if (!canvasEl) return;
const canvas = canvasEl.node;
const context = canvas.getContext('2d');
const dpr = wx.getWindowInfo().pixelRatio;
  canvas.width = canvasEl.width * dpr;
  canvas.height = canvasEl.height * dpr;
  context.scale(dpr, dpr);

const config = {
renderer: 'canvas',
rendererSettings: { clearCanvas: true, context, canvas, scale: 1 },
loop: props.options.loop ?? true,
autoplay: props.options.autoplay ?? true,
  };
if (animationData) config.animationData = markRaw(animationData);
else config.url = props.url;

if (isDestroyed || initId !== indexId) return;
  lottie.setup(canvas);
  control = lottie.loadAnimation(config);
  control.setSubframe(false);
  emit('load', canvasEl, { control: markRaw(control), url: props.url, data: props.data });
}

functiondestroy() {
  isDestroyed = true;
if (control) {
    control.stop();
    control.destroy();
    control = null;
  }
}

onPageHide(() => control && control.pause());
onPageShow(() => control && props.options.autoplay !== false && control.play());
onUnmounted(() => destroy());
</script>

<stylescoped>
.gl-lottie { width: 100%; height: 100%; position: relative; }
.gl-lottie-canvas { width: 100%; height: 100%; will-change: transform; transform: translateZ(0); }
</style>

3.2 Svga 加载组件

<template>
<viewclass="gu-svga">
<canvas:id="canvasId"type="2d"class="gu-svga-canvas" @click="handleCanvasClick" ></canvas>
</view>
</template>

<scriptsetup>
defineOptions({
name: "GuSvga"
})
import { nextTick, onUnmounted, getCurrentInstance, watch, markRaw} from'vue'
import { getNodeEL } from'@/utils/index.js';
import {Parser,Player} from'svgaplayer-weapp'
const instance = getCurrentInstance(); // 获取当前组件实例

const emit = defineEmits(['load', 'click', 'finished']);

const props = defineProps({
// svga网络地址/相对地址(只能是svg)
url: {
type: String,
default: '',
required: true
  },
options: {
type: Object,
default: {}
 },
// 数据对象
data: {
type: Object,
default: {}
  }
});

// 生成唯一ID防止组件冲突
const canvasId = `svga-${instance.uid}-${Math.floor(Math.random() * 1000)}`;

let canvas = null// canvas容器
let player = null// 动画控制对象
let parser = null// 加载器
let video = null// 媒体数据
let isDestroyed = false// 标志位
let indexId = 0
watch(
() => props.url,
 (newUrl, oldUrl) => {
// 先销毁旧动画（避免内存泄漏）
  destroy();
// 确保 url 有效（非空）再初始化
if (newUrl) {
// 延迟初始化，确保 DOM 已更新
   nextTick(() => {
    init()
   });
  }
 },
 {
immediate: true, // 初始加载时立即执行一次（关键）
deep: false// url 是字符串，无需深度监听
 }
);

asyncfunctioninit() {
if (!props.url) {
console.error('未设置url！');
return;
  }

const initId = ++indexId // 记录当前初始化的版本
 isDestroyed = false// 每次初始化重置状态

// 同步获取-canvas节点设置对应属性
let canvasEl = await getNodeEL(`#${canvasId}`, instance)
if (!canvasEl) {
console.error('canvas 元素未找到！');
return;
  }
 canvas = canvasEl.node

// 如果组件销毁则不继续执行
if(isDestroyed || initId !== indexId) return

// 动画配置
const config = {
loop: props.options.loop || true, // 默认循环播放
autoplay: props.options.autoplay || true, // 默认自动播放
path: props.url, // svga地址
clearsAfterStop: props.options.clearsAfterStop || false, // 默认值为false，动画结束时，是否清空画布。
fillMode: props.options.fillMode || 'Forward', // 默认值为 Forward，当clearsAfterStop为 false 时，Forward 表示动画会在结束后停留在最后一帧，Backward 则会在动画结束后停留在第一帧。
contentMode: props.options.contentMode || 'AspectFit',
  }

// 初始化加载器Parser
 parser = new Parser()
try {
const data = await parser.load(config.path)

// 如果组件销毁则不继续执行
if(isDestroyed || initId !== indexId) return

  video = markRaw(data)
 } catch (e) {
console.error('SVGA加载失败', e)
return
 }

// 初始化播放器player
  player = new Player()
await player.setCanvas(`#${canvasId}`, instance)
  player.loops = config.loop ? 0 : 1// 默认循环播放
  player.clearsAfterStop = config.clearsAfterStop // 播放完成是否清空
  player.fillMode = config.fillMode // 默认值为 Forward，当clearsAfterStop为 false 时，Forward 表示动画会在结束后停留在最后一帧，Backward 则会在动画结束后停留在第一帧
  player.setContentMode(config.contentMode)

// 如果组件销毁则不继续执行
if(isDestroyed || initId !== indexId) {
  player.clear()
return
 }

await player.setVideoItem(video);

// 如果组件销毁则不继续执行
if(isDestroyed || initId !== indexId) {
  player.clear()
return
 }

if (config.autoplay) {
    player.startAnimation()
  }
  player.onFinished(() => { //只有在loop不为0时候触发
    emit('finished')
  })
  emit('load', canvasEl, {player: markRaw(player), url: props.url, data: props.data})
}

functionhandleCanvasClick(e){
 emit('click', e); // 将事件参数传递出去
}

// 辅助函数，用于安全地清理对象属性
functionsafeClearObjectProperties(obj) {
if (!obj || typeof obj !== 'object') return;
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 确保是对象自身的属性
// 避免删除原型链上的属性
if (typeof obj[key] === 'object' && obj[key] !== null) {
// 如果是数组，清空它
if (Array.isArray(obj[key])) {
     obj[key].length = 0;
    } else {
// 如果是普通对象，递归清理或直接置空
     obj[key] = null;
    }
   } else {
    obj[key] = null; // 直接置空
   }
  }
 }
}

functiondestroy(){
 isDestroyed = true// 标记销毁
if (player) {
  player.stopAnimation();
// 1. 彻底清空所有回调，防止闭包锁死
  player.onFinished(() => {});
  player.onFrame(() => {});
  player.onPercentage(() => {});
// 2. 尝试手动断开播放器对数据源的引用（私有属性清理）
if (player._videoItem) player._videoItem = null
if (player._canvas) player._canvas = null
if (player.images) player.images = null
  player.clear();
  player = null;
 }
 parser = null
// 手动清理 VideoItem 里的图片
if (video) {
if(video.decodedImages){
   safeClearObjectProperties(video.decodedImages)
   video.decodedImages = {}
  }
if(video.spec && video.spec.images){
   safeClearObjectProperties(video.spec.images)
   video.spec.images = {}
  }
if(video.spec && video.spec.sprites){
   video.spec.sprites.length = 0
  }
if(video.sprites){
   video.sprites.length = 0
  }
  video = null;
 }
if(canvas){
  canvas.width = 0
  canvas.height = 0
  canvas = null
 }
}

onUnmounted(()=>{
 destroy()
})
</script>

<stylescopedlang="scss">
.gu-svga{
 width: 100%;
 height: 100%;
 position: relative; /* 关键：确保在文档流中，随滚动移动 */
 .gu-svga-canvas{
  width: 100%;
  height: 100%;
  will-change: transform; /* 提示浏览器优化渲染 */
  transform: translateZ(0); /* 触发 GPU 加速 */
 }
}
</style>

3.3 礼花/飘落特效组件（三种粒子模式）

完成学习任务后，需要强烈的正向反馈。AI 为我生成了一个粒子系统组件，支持三种模式：

• fan-explosion（扇形喷射） – 默认底部中心向四周炸开
• volcano-eruption（火山喷发） – 底部左中右三点持续 3 秒喷射彩带
• slow-falling-rain（缓慢飘落） – 羽毛般从上往下飘，适合做氛围