更新记录

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 渲染采用树形结构。
  • 🚀 跨平台支持:一次编码,多端运行,兼容多种前端平台。
  • 🔌 纯原生构建:支持 htmlvue2vue3jstsangular 等技术栈。
  • 🎨 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
    })
});

支持对齐方式包括:centerleftright 等。


4. 更多玩法:下载 Demo 体验未来布局方案

📥 下载 Demo

  • 内含完整示例与组件用法
  • 请参考 Demo 中的 必看.md 文件获取安装与使用细节
  • ⚠️ 本库为 JS SDK,不是 uni_modules 模块

🎯 结语

GenPoster 是一个自由、灵活、极具未来感的布局框架。 与其说是一个海报工具,不如说它是 “在画布上写 UI 的引擎”。 告别繁琐 JSON,拥抱代码构建!


如需帮助或平台适配,请联系作者。


🆘 需要帮助


QQ交流群:811955833


隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问