我全程没手写一行代码，只用 Trae + 下面这套现成提示词，就做出了功能完整的全屏滚动字幕小程序。不用懂前端、不用懂 Canvas、不用调样式，复制粘贴就能生成全套代码，直接上架微信。
首页：5 种预设样式一键切换（滚动字幕、动感摇滚、表白神器、舞台荧光、寻人牌）
展示页：全屏竖排文字滚动，支持荧光 / 闪烁 / 故障风等特效
可自定义：文字、颜色、字号、字体、滚动速度
底部控制面板 + 右侧滑出设置栏
常用语、历史记录、用户配置自动保存
微信开发者工具直接运行，零修改、零报错
1. 一键生成完整小程序
创建一个"大字君"类型的微信小程序项目，功能要求如下：
页面结构
- 首页（pages/index）- 模板选择页面
- 5个预设样式按钮：滚动字幕、动感摇滚、表白神器、舞台荧光、寻人牌
- 输入框可自定义文字
- 展示页（pages/display）- 文字展示页面
- 全屏 Canvas 竖排显示滚动文字
- 底部悬浮控制面板
- 右侧滑出设置侧边栏
核心功能
Canvas 文字滚动
- 文字竖排显示（旋转90度）
- 滚动速度可调：0(停止)/0.5x/1x/2x
- 字体大小可选：100/150/200/260
- 支持的字体：渔阳、金榜、黑体、方圆、大楷、刀隶
文字效果
- 无效果（none）
- 闪烁（blink）- 文字交替显示/隐藏
- 荧光（glow）- 文字发光效果 shadowBlur=30
- 故障风（glitch）- RGB分离偏移效果
- 描边（stroke）- 文字边缘描边
- 阴影（shadow）- 文字阴影效果
预设样式配置
BUTTON_STYLES = {
‘滚动字幕’: { textColor: ‘#ecf0f1’, bgColor: ‘#2c3e50’, textEffect: ‘none’ },
‘动感摇滚’: { textColor: ‘#000000’, bgColor: ‘#f5576c’, textEffect: ‘glitch’ },
‘表白神器’: { textColor: ‘#ffffff’, bgColor: ‘#ff6b9d’, textEffect: ‘glow’ },
‘舞台荧光’: { textColor: ‘#0ff’, bgColor: ‘#1a1a2e’, textEffect: ‘glow’ },
‘寻人牌’: { textColor: ‘#8b4513’, bgColor: ‘#fff8e7’, textEffect: ‘none’ }
}
控制面板
- 主页/设置按钮
- 文字输入框（实时输入确认）
- 常用语横向滚动列表
- 添加常用语按钮
- 背景使用 rgba(0, 0, 0, 0.6) 半透明黑色，顶部圆角 24rpx
设置面板（侧边栏）
- 字体颜色选择器（8种颜色）
- 字体大小选择（4种）
- 字体选择（6种字体）
- 播放速度选择（4档）
- 文字效果选择（6种）
- 背景颜色选择器（8种颜色）
数据存储
- 用户配置：wx.getStorageSync(‘user_config’)
- 保存：fontSize, speed, textColor, textEffect, bgColor, fontFamily, phrases, lastText
- 历史记录：wx.getStorageSync(‘history_texts’)
- 最多保存50条，带时间戳
- 去重处理（相同文字移到顶部）
- 生成新页面（需要加页面时用）
创建一个微信小程序页面，包含 wxml、wxss、js、json 四个文件，使用数据驱动、规范命名、事件绑定，逻辑清晰可直接运行。 - 实现 Canvas 竖排滚动动画
在微信小程序中实现 Canvas 竖排文字滚动动画，支持闪烁、荧光、故障风、描边、阴影等效果，使用标准动画循环与竖排渲染方式，代码稳定不卡顿。 - 实现用户配置存储
在微信小程序中实现用户配置保存功能，自动存储字号、速度、颜色、效果、字体等设置，页面隐藏时自动保存，打开时自动读取。 - 实现历史记录管理
实现文字历史记录功能，最多保存 50 条，自动去重，新记录置顶，带时间戳，本地持久化存储。 - 实现右侧设置面板
创建设置侧边栏，支持字体颜色、字号、速度、文字效果、背景颜色选择，界面美观、操作简单。 - 实现常用语功能
实现常用语添加、删除、展示功能，支持弹窗编辑，数据本地保存。 - 实现预设样式按钮
创建 5 种预设样式按钮，一键切换文字颜色、背景色与特效，适配大字君项目使用
按照顺序将提示词发给 Trae，大体功能基本就出来了，最后只用根据自己的喜好写点页面和交互的提示词微调就可以了。
微信小程序开发规范
项目初始化
app.json 包含 pages、window、style、sitemapLocation
每个页面必须：wxml + wxss + js + json
Canvas 规范
- 使用 type=“2d” canvas
- initCanvas 在 onReady 执行
- 动画变量挂 this，不进 data
- 用 requestAnimationFrame 循环
数据存储
- 用户配置：user_config
- 历史记录：history_texts
- onHide 自动保存
文字效果
blink：显隐切换
glow：shadowBlur=30
glitch：RGB分层偏移
stroke：描边
shadow：阴影
附小程序体验码：
1 个帖子 - 1 位参与者