更新记录
1.0.1(2025-05-27) 下载此版本
新增 PromiseBuilder 异步请求组件
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | × | × | √ | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | √ | √ | √ |
📦 更新日志
- 2025/05/27:新增
PromiseBuilder
组件
🧩 关于插件:GenPoster
万物皆组件,未来海报构建新方案
GenPoster 是一款基于 Canvas 的跨平台海报生成框架,具备以下特点:
- 🚫 非 DOM 构建:完全抛弃 HTML 布局,真正做到“在画布上写代码”。
- 💡 组件化设计:借鉴 Flutter 的构建思想,UI 渲染采用树形结构。
- 🚀 跨平台支持:一次编码,多端运行,兼容多种前端平台。
- 🔌 纯原生构建:支持
html
、vue2
、vue3
、js
、ts
、angular
等技术栈。 - 🎨 Canvas 自绘方式:完美规避平台内生图兼容性问题。
- ❌ 拒绝 JSON 配置式布局:坚持代码式构建,体验更丝滑。
- 📞 平台适配中:如果未支持你的平台,请联系作者添加支持。
🛠️ 使用方法
先安装库
npm i gen-poster-f
1. 构建组件:就像 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