用 WorkBuddy 一句话生成教育触摸屏网页,并一键部署公网 Demo

学校、培训机构、少年宫,门口总想放一块触摸屏展示屏:轮播校园风采、点开看宣传视频、查课程和通知。传统做法要拉设计、搭前端、买服务器、配域名,没两周下不来。

这回我只用 WorkBuddy 一句话就把这件事跑通了:先做一个单文件的触摸屏首页 Demo,再一键部署成公网可访问的链接。重点是------它不需要你会前端、不用配服务器,这类展示网页 WorkBuddy 都能照着需求直接生成。下面把做法、踩的坑,以及你最关心的"还能部署到哪、当前链接到底在哪"一次说清。

想自己动手试一把?WorkBuddy 邀请链接:https://www.workbuddy.cn/events/invite?inviteCode=9nep0vg7p9cpjmlv

一、这个 Demo 做了什么

一个自包含的 index.html,专为大屏触摸场景设计(1920×1080 墙面屏 / 电子班牌),零依赖、断网也能跑:

  • 顶部轮播 banner:4 张教育主题大图,每 5 秒自动切换,支持左右箭头、圆点、手势滑动、键盘方向键;
  • 6 个栏目导航:课程中心 / 校园直播 / 通知公告 / 图书借阅 / 校园地图 / 关于我们,点一下弹出内容卡片;
  • 视频区:卡片点击直接全屏弹出 HTML5 播放器;
  • 底部通知滚动条 + 实时时钟,适合校门大厅长期展示。

下面这些是它实际跑起来的样子(1920×1080 全屏):

点一下轮播右箭头,banner 就切到下一屏:

点栏目(比如"课程中心")会弹出内容卡片------这就是"点文字"的交互:

为什么用"单文件 HTML":墙面屏本质就是个全屏浏览器。把所有结构、样式、脚本塞进一个文件,拷贝到任何一台机器、任何静态服务器都能直接打开,没有构建、没有依赖地狱,运维成本趋近于零。

二、一个容易踩的坑:视频要本地化

第一版视频我用了 Google 公共示例 MP4 占位。结果国内网络访问不到,点开"只有播放器、没有画面",整个 Demo 像在模拟播放。

修法是把视频本地化:用 ffmpeg(imageio-ffmpeg 自带)本地生成 6 段真实的 1280×720 示例视频,打包进站点 videos/ 目录。这样一来,断外网也能播,墙上的屏最稳。上线时把这几个文件换成真实课程录像即可。

修好之后点开视频卡,是这样------全屏播放器,画面是真的在播:

经验:凡是给国内墙面屏用的 Demo,外部资源(视频、字体、图片)能本地化的尽量本地化。外链慢一秒,观感就掉一档。

三、一键部署成公网链接

写完页面,用 WorkBuddy 的"发布为应用"能力(底层 workbuddy_sites_deploy)把目录部署出去,直接拿到一个 https://*.app.workbuddy.link 的公网 HTTPS 链接,零配置。验证返回 HTTP 200,任意手机、任意网络打开即看。

这版 Demo 是公开可访问的,你现在就能点开体验(鼠标点一下,效果跟墙上触摸屏一模一样):

线上 Demo:点击直接体验 →

四、还能部署到哪些地方

这个 Demo 是纯静态,几乎可以丢到任何静态托管。按"国内访问稳不稳、要不要花钱、灵不灵活"给你排个序:

部署方式 适合场景 费用 备注
GitHub Pages / Vercel / Netlify / Cloudflare Pages 纯静态、有海外或自有域名 免费额度够用 拖一个 HTML 即可;Cloudflare Pages 国内也还凑合
阿里云 OSS + CDN / 腾讯云 COS + CDN 国内访问稳、要快 按量,几元/月 配自定义域名 + HTTPS 最稳,企业首选
七牛云 / 又拍云 国内静态托管 有免费额度 自带图片处理,适合图文多
自有服务器 Nginx / Docker 完全可控、要后端/数据库 服务器成本 最灵活,可做密码、日志、统计
屏本身(树莓派 / 工控机) 纯展示、连内网都行 一次硬件 本机起个静态服务,断网也播
WorkBuddy 分享链接(当前) 最快出 Demo、临时演示 看套餐 一键部署,随时取消发布

一句话:要快就用 WorkBuddy 分享链接;要长期稳定且在国内部署,上云厂商 OSS/COS + CDN;要完全可控,自己服务器或屏本机。

五、当前这个分享链接,到底部署在哪

几个你问到的关键点,直接给结论:

部署在哪里

在当前使用的是 WorkBuddy 内置的分享托管,域名是 *.app.workbuddy.link,由 WorkBuddy 托管静态/应用服务。子域名是随机串,不会被搜索引擎收录------属于"知道链接就能看",但不是"需要授权才能看"。

是否支持后端服务

支持。 这个部署能力不只是静态托管,它还支持 Node / Python / Go 的"单端口 HTTP 服务"。也就是说,如果这面屏后面需要接口(报名表单、访客登记、实时数据),把项目改成一个监听 PORT 的小服务重新部署即可,用的还是同一个分享链接。纯静态只是它的"免构建"模式。

是否永久有效

分享链接长期有效,由你在 WorkBuddy 的「设置 --- 数据管理 --- 我发布的应用」里管理,随时可以"取消发布"让它下线。我没有掌握到任何自动过期的设定;它绑定在你的账号 / 应用下,生杀大权在你手里。

六、一点工程师视角

  • 墙面屏 Demo 的"最小可交付":一个 HTML 文件 + 本地化资源(视频、图片),比拉设计、搭前端、买服务器快一个量级。先让屏亮起来,再谈精致。
  • 外链能不用就不用:视频、字体、图片,能打包进站点就打包。国内网络环境复杂,外链慢一秒,Demo 就少一分说服力。
  • 密码门 ≠ 真鉴权:展示屏用前端密码门足够挡"路人随便翻";要把链接发给校外、且内容敏感,得上服务端 Basic Auth(前面说的"支持后端"正好用上)。
  • 还能继续加:无人操作自动回首页(待机)、点击放大招生二维码、后端接报名表单------这些都是在现有骨架上的小增量。

七、结语

做一面会自己轮播、能点视频的校园大屏,现在真的不需要一个团队。一个 HTML 文件打底,本地化资源保稳,一键部署出公网链接,剩下都是锦上添花。

照着本文的路子,把校名、课程视频和栏目换成你自己的,一面能上墙的展示屏就能跑起来了。

相关推荐
Cc琎2 小时前
使用workbuddy制作一个历史气象灾害预警查询工具
天气api·workbuddy·气象灾害预警
一个处女座的程序猿5 天前
Agent之Harness:WorkBuddy的简介、安装和使用方法、案例应用之详细攻略
agent·workbuddy·harness
VIP_CQCRE7 天前
在 WorkBuddy 里一键接入 Claude、GPT、Gemini、DeepSeek:Ace Data Cloud 让 AI 模型调用更简单
ai·大模型·openai·workbuddy·ace data cloud
Lalolander8 天前
WorkBuddy App 怎么发起任务?输入栏与发送全流程
大数据·人工智能·金蝶erp·workbuddy
Lalolander8 天前
WorkBuddy App 可以连接电脑吗?远程操控桌面端怎么用?
运维·电脑·腾讯云ai代码助手·workbuddy
VIP_CQCRE10 天前
用 Ace Data Cloud 给 WorkBuddy 接入多模型:一个 API Token 打通 GPT、Claude、Gemini、DeepSeek
ai·大模型·openai·workbuddy·ace data cloud
枫彩10 天前
WorkBuddy 做A股自动复盘实战:数据校验、工具调用与定时报告
大数据·网络·数据库·a股·mcp·workbuddy
熊猫钓鱼>_>15 天前
从“串数据“焦虑到 Space 自由,我用 Agent Bucket 智能体桶管游戏素材
开发语言·人工智能·游戏·agent·bucket·workbuddy·space
制造数据与AI践行者老蒋18 天前
MES 工时异常检测:WorkBuddy 自动排查,2 小时干完 2 天的活(附完整脚本)
python数据分析·制造业数字化·数据洞察·workbuddy·mes系统 异常检测·工时分析