gen-poster-f
v0.0.8
Published
---
Maintainers
Readme
📦 更新日志
- 2025/05/27:新增
PromiseBuilder组件 - 2025/06/2:
- 🐛 修复Text组件参数声明问题
- 2025/06/3:
- ➕ 新增
useStateHook - ➕ 新增
StateBuilder配套组件,搭配useState使用。 - 🐛 修复图片再次刷新时不切换图片bug
🧩 关于插件:GenPoster
万物皆组件,未来海报构建新方案
GenPoster 是一款基于 Canvas 的跨平台海报生成框架,具备以下特点:
- 🚫 非 DOM 构建:完全抛弃 HTML 布局,真正做到“在画布上写代码”。
- 💡 组件化设计:借鉴 Flutter 的构建思想,UI 渲染采用树形结构。
- 🚀 跨平台支持:一次编码,多端运行,兼容多种前端平台。
- 🔌 纯原生构建:支持
html、vue2、vue3、js、ts、angular等技术栈。 - 🎨 Canvas 自绘方式:完美规避平台内生图兼容性问题。
- ❌ 拒绝 JSON 配置式布局:坚持代码式构建,体验更丝滑。
- 📞 平台适配中:如果未支持你的平台,请联系作者添加支持。
🛠️ 使用方法
先安装库
npm i gen-poster-f1. 构建组件:就像 Flutter 一样
一个简单的橙色盒子:
Container({
width: 100,
height: 100,
color: Colors.orange
})是不是很直观?
2. 布局嵌套:容器中的容器
横向排列三个间隔为 10 的橙色方块:
const box = Container({
width: 100,
height: 100,
color: Colors.orange
});
Row({
spacing: 10,
children: [box, box, box]
});💡 你可以试试把
Row改成Column看看效果!
3. 对齐方式:让内容井然有序
通过 alignment 控制子组件对齐方式:
Container({
width: 300,
height: 300,
color: Colors.grey200,
alignment: Alignment.center,
child: Container({
width: 100,
height: 100,
color: Colors.blue
})
});支持对齐方式包括:center、left、right 等。
4. 更多玩法:下载 Demo 体验未来布局方案
- 内含完整示例与组件用法
- 请参考 Demo 中的
必看.md文件获取安装与使用细节 - ⚠️ 本库为 JS SDK,不是
uni_modules模块
🎯 结语
GenPoster 是一个自由、灵活、极具未来感的布局框架。 与其说是一个海报工具,不如说它是 “在画布上写 UI 的引擎”。 告别繁琐 JSON,拥抱代码构建!
如需帮助或平台适配,请联系作者。
🆘 需要帮助
QQ交流群:811955833
