手把手:把这条链接发到 TA 手机上

跟着做,大约 10 分钟。全程免费,不用买服务器,不用备案。

1先在电脑上看效果

打开「终端 / PowerShell」,进到项目目录,然后跑一行命令:

cd "C:\Users\lenovo\AppData\Roaming\Microsoft\Windows\Start Menu\starheart"
node scripts/server.mjs --lan

看到这样的输出就成功了:

  ✦  星心 · StarHeart  本地服务已启动
  ────────────────────────────────────────────
  本机打开 :  http://127.0.0.1:8080/
  贺卡效果 :  http://127.0.0.1:8080/c/?to=小美&msg=生日快乐
  定制页面 :  http://127.0.0.1:8080/customize.html
  出单后台 :  http://127.0.0.1:8080/admin/
  部署教程 :  http://127.0.0.1:8080/guide.html
  手机访问 :  http://192.168.x.x:8080/

在浏览器里打开 http://127.0.0.1:8080/ 就能看到了。不要直接双击 html 文件打开 —— 双击走的是 file:// 协议,浏览器的安全策略会拦住 ES 模块和 fetch,页面会白屏。必须用上面这个命令起服务。

你们这台电脑自动选中的端口是 ,上面那些地址请以实际输出为准。

换端口

node scripts/server.mjs --port 3000

2让手机也能打开(这一步很重要)

贺卡是发给手机看的,所以一定要先在真实手机上过一遍。

  1. 确认电脑和手机连的是同一个 WiFi
  2. 用刚才 --lan 的输出:终端里会直接打印一个二维码,手机相机扫一下就打开了。
  3. 如果扫不出来,就手动在手机浏览器里输入那一行 http://192.168.x.x:8080/
打不开怎么办?
· Windows 防火墙弹窗要点「允许访问」(专用网络)。
· 公司/学校 WiFi 常会隔离设备,换成手机热点让电脑连上,再试一次。
· 检查 IP 有没有写对:终端里那串 192.168 开头的地址就是。

手机上重点看三件事:① 爱心是不是立体的、完整的;② 名字和祝福语位置对不对;③ 点「点亮这片星空」有没有音乐。

2.5三十秒拿到一条公网链接(不注册任何账号)

如果你想现在马上把链接发给别人看,而不想先去注册 Cloudflare,用这一招:

cd "C:\Users\lenovo\AppData\Roaming\Microsoft\Windows\Start Menu\starheart"
node scripts/share.mjs

它会一次性做两件事:起本地服务 + 建一条公网隧道。大约 10 秒后你会看到:

  ══════════════════════════════════════════════════════════
   ✦  可以打开了
  ══════════════════════════════════════════════════════════

   公网链接(发给谁都能开): https://xxxx-xxxx-xxxx.trycloudflare.com
   本机链接                : http://127.0.0.1:8080/
   手机同 WiFi 链接        : http://192.168.x.x:8080/

   贺卡效果 :  https://xxxx.trycloudflare.com/c/?to=小美&msg=生日快乐

那条 https://....trycloudflare.com 就是真链接,任何人有网就能打开, 不需要密码、不需要登录。

⚠️ 必须知道的三个限制:
· 关掉窗口就失效。它是把你电脑上的服务临时捅到公网,电脑关机或按 Ctrl+C,链接立刻打不开。
· 没有可用性保证。这是 Cloudflare 的免费试用通道,域名是随机的,随时可能断开,速度也一般。
· 你电脑睡了别人就打不开。所以它只适合「给朋友看效果 / 手机测真机 / 临时发一单」。

什么时候该用哪个:

目的用哪个链接长什么样
自己看效果node scripts/server.mjs --lanhttp://127.0.0.1:8080/
手机测真机node scripts/server.mjs --lan + 扫终端二维码http://192.168.x.x:8080/
临时发给别人看node scripts/share.mjshttps://xxx.trycloudflare.com
正式卖东西下面的方案 A(Cloudflare Pages)https://你的域名.pages.dev

如果提示找不到 cloudflared,先跑一次 node scripts/download-cloudflared.mjs 把它下载下来(约 50MB)。

3正式上线:部署到公网拿永久链接

上面那条临时链接只适合试水。要真的开始卖,必须走这一步 —— 得到的链接永久有效、不依赖你的电脑开着、还能绑自己的域名。

准备工作(30 秒):先跑一次打包,把站点压成一个 zip(用不到也没关系,方案 0 直接读 site 目录)。
cd "C:\Users\lenovo\AppData\Roaming\Microsoft\Windows\Start Menu\starheart"
node scripts/build.mjs
跑完会生成 starheart\dist\starheart.zip

方案 0:一条命令部署(最快,30 秒)(推荐)

不用点后台、不用拖文件,直接调 Cloudflare 官方接口。你只需要一个 API Token:

  1. 注册/登录 dash.cloudflare.com(免费,不用绑卡)。
  2. 右上角头像 → My ProfileAPI TokensCreate Token
  3. 用模板 Edit Cloudflare Workers,或自定义并勾上 Account → Cloudflare Pages → Edit
  4. 创建后把 token 复制下来(只显示一次)。
  5. 在项目目录里跑:
    cd "C:\Users\lenovo\AppData\Roaming\Microsoft\Windows\Start Menu\starheart"
    set CF_API_TOKEN=你刚才复制的token
    node scripts/deploy-cloudflare.mjs --project starheart

跑完会直接打印你的永久链接,例如 https://starheart.pages.dev

这个脚本每次跑都是更新同一个链接,所以以后改了文案、换了收款码,重跑一次就行,不用去后台点。 想先看看会传哪些文件而不真的上传:加 --dry-run

为什么不是我随手上传一下就完事? 因为 Cloudflare 的接口有个坑:每个文件的资源键是 blake3(base64(内容) + 扩展名)[:32],不是普通的 SHA-256。 算错了不会报错 —— 上传成功、部署成功、文件数也对,但线上每个文件都 404。 所以脚本里自带了一个 BLAKE3 实现,并且用官方 35 组测试向量逐条验证过 (node scripts/test-blake3.mjs)。

方案 A:Cloudflare Pages 后台拖拽上传 (不用命令行)

优点:免费、不限制流量、自带 HTTPS、国内访问相对稳。不需要 git,不需要命令行

  1. 浏览器打开 dash.cloudflare.com/sign-up,用邮箱注册(免费,不用绑卡)。
  2. 登录后,左侧菜单点 Workers & Pages(有的界面叫 Compute (Workers))。
  3. Create → 选 Pages 标签页 → 点 Upload assets(上传资源)。
  4. 项目名随便起,比如 starheart,这个会变成你的网址前缀。
  5. starheart 文件夹里的 site 文件夹整个拖进去(或者把 dist\starheart.zip 解压后拖里面的内容)。
    注意:拖进去的应该是 index.htmlcassetsdata 这些的上一层目录里的内容,不要多套一层文件夹。
  6. Deploy site,等 10~30 秒。
  7. 它会给你一条 https://starheart-xxx.pages.dev 的地址 —— 这就是你的真链接

验证:打开 https://你的域名/c/?to=小美&msg=生日快乐,手机上能看能听,就成了。

方案 B:Netlify Drop 拖拽部署 (最简单,2 分钟)

优点:真的只要拖一下,连注册都可以后补。缺点:国内访问速度不如 Cloudflare。

  1. 打开 app.netlify.com/drop
  2. site 文件夹直接拖到页面中间的虚线框里。
  3. 等它上传完,页面上会出现一条 https://random-name-123.netlify.app 的链接。
  4. 想改名字:注册/登录后进 Site configuration → Change site name

方案 C:GitHub Pages (适合想长期维护的人)

优点:完全免费、可以版本管理。缺点:国内访问偶尔慢,需要注册 GitHub。

  1. 注册/登录 github.com
  2. 右上角 +New repository,名字比如 starheart,选 Public,点 Create
  3. 进入仓库后点 uploading an existing file,把 site 文件夹里的所有内容拖进去,点 Commit changes
  4. 仓库 Settings → 左侧 Pages → Source 选 Deploy from a branch,Branch 选 main + / (root),点 Save
  5. 等 1~2 分钟,页面顶部会出现你的网址:https://你的用户名.github.io/starheart/
注意:GitHub Pages 是放在子目录下的(/starheart/)。项目里所有路径都写成相对路径了,所以能正常工作; 但如果你以后自己改了某个路径写成 /assets/...(前面带斜杠),在 GitHub Pages 上就会 404。

方案 D:绑定自己的域名 (想显得专业再做)

  1. 买个域名(阿里云/腾讯云/Namecheap 都行,.top 域名一年十几块)。
  2. Cloudflare Pages 项目里 → Custom domainsSet up a custom domain → 输入你的域名。
  3. 按提示去域名商那边把 DNS 改成 Cloudflare 给的记录。
  4. 等几分钟到几小时生效,之后就能用 https://love.你的域名.com/c/?... 这种链接了。

链接太长怎么办

祝福语一长,链接就会很长(二维码也可能放不下)。三个办法:

4换成你自己的收款码

项目里已经放了两张占位图(故意画成不能扫的样子),你要把它们换成真的:

  1. 打开微信 → 我 → 服务 → 收付款 → 二维码收款 → 保存收款码,会得到一张图片。
  2. 把它重命名成 wechat-pay.png
  3. 打开支付宝 → 收钱 → 保存收款码,重命名成 alipay-pay.png
  4. 把这两张图覆盖starheart\site\assets\pay\ 目录里。
  5. 重新部署一次(方案 A/B 都是重新拖一遍,Cloudflare 会保留同一个网址)。

然后打开 定制页,滑到第 ④ 步,就能看到你自己的收款码了。

只放微信一个也行。data/config.json 里的 payment.local_qr.alipay 随便改成一个不存在的文件名, 支付宝那一栏就会显示提示文字,不影响使用。

想改价格、改佣金比例

全都在 site/data/config.json 这一个文件里:

"pricing": {
  "plans": {
    "basic": { "label": "亲手定制", "price": 1.99, ... },
    "ai":    { "label": "AI 代写 + 定制", "price": 9.99, ... }
  }
},
"affiliate": {
  "enabled": true,
  "defaultRate": 0.3,               ← 默认佣金 30%
  "rateByPlan": { "basic": 0.3, "ai": 0.4 },
  "settle": "每月 1 号结算上月佣金"   ← 这句话会显示在定制页上
}

改完保存,刷新页面就生效(免费托管不需要重新部署也能生效,因为文件是实时读的;但如果已经部署到公网,记得重新上传一次)。

5开始接单:收款与内容是怎么分开的

这是整个项目的设计核心,先看一张流程图:

客户在定制页填名字/祝福语
        │
        ├──► 【内容侧】把内容打包成一条链接(不进任何服务器)
        │
        └──► 【收款侧】只产生一个「订单号 SH20250614-8231」
                     │
   客户扫码付 1.99 元(备注写订单号)
                     │
   你在【出单后台】填内容 → 点生成 → 得到一张「卡密」
                     │
   把带卡密的链接发给客户 ──► 客户点开就是做好的星空爱心

为什么这样设计:

日常出单流程(一单约 20 秒)

  1. 客户付款并备注订单号,把名字和祝福语发给你。
  2. 打开 https://你的域名/admin/
  3. 填进去,点 生成卡密
  4. 复制话术,整段发给客户 —— 里面已经写好了链接和说明。
  5. 保存这一单(记录只存在你自己这台电脑的浏览器里,不会上传)。

推广佣金怎么算

任何人只要在链接后面加 ?ref=他的名字,这一单就会记在他头上。出单后台右侧会自动汇总每个人该拿多少,月底点 导出 CSV 就能用 Excel 对账。

建议给推广者的话术:

把这个链接发给别人,别人通过它下单,你就能拿 30%:
https://你的域名/customize.html?ref=你的名字
(名字随便起,别和别人重名就行)

想全自动(付款后系统自动发卡密)

docs/PAYMENT-AUTOMATION.md(就在项目 docs 目录里)。简单说分三步:

  1. 注册一个免费的 Cloudflare 账号,按文档部署一个 Worker(约 5 分钟,复制粘贴)。
  2. Worker 里配置你的收款渠道密钥(需要用支持「支付回调」的渠道,例如虎皮椒、PayJS、易支付这类)。
  3. config.json 里把 payment.channel 改成 "auto" 并填上 Worker 地址。

这一步不急。先用「收款码 + 出单后台」跑通前 10 单,摸清楚客户到底想要什么,再去搞自动化 —— 否则很容易把时间花在代码上,而不是花在卖东西上。

本地完整测试一遍(不用真收钱)

本地服务器自带接口,可以模拟「付款成功 → 自动发卡密」:

# 起服务
node scripts/server.mjs --port 8099

# 另开一个终端,模拟下单
curl -X POST http://127.0.0.1:8099/api/order ^
  -H "Content-Type: application/json" ^
  -d "{\"amount\":1.99,\"ref\":\"小明\",\"card\":{\"to\":\"小美\",\"msg\":\"生日快乐\",\"plan\":\"basic\"}}"

# 会返回一串卡密,把它贴到定制页第 ④ 步的输入框里,就能生成正式链接

6做成微信小程序,可行吗?

直接给结论:技术上完全可行,但「个人主体 + 直接收钱」这条路基本走不通。 下面是逐条拆解,完整版在 docs/WECHAT-MINIPROGRAM.md

技术侧:能做,但要重写渲染层

工作量估算:3~7 天(有现成的 3D 数学和着色器打底),主要时间花在适配层和真机调试上。

资质侧:这才是真正的门槛

门槛个人主体企业主体
注册小程序可以(免费)可以(需营业执照)
开通微信支付不能可以(需对公账户)
虚拟内容 / 数字礼品类目基本不批需资质,审核严
引导用户加微信 / 外部收款违规,会被封违规
诱导分享("发给3个好友解锁")违规违规
含 AI 生成内容需说明需算法备案

结论:小程序这条路,个人做「付费贺卡」几乎必然卡在支付和类目审核上; 企业主体可以走通,但要在微信生态内收钱,就必须接微信支付,而微信支付要求商户资质 + 结算账户。

所以更现实的路线是什么

  1. 现在这套 H5 就够了 —— 微信里点开链接就能看,和在小程序里体验差别没有想象中大,而且能直接收钱(收款码)、能分享、零审核。
  2. 想在小程序里放,就做「纯展示版」:小程序只负责展示爱心和播放音乐,不放价格、不放收款码、不放联系方式,导流到公众号或客服消息里完成交易。这样过审概率高很多。
  3. 真要做付费闭环:注册个体工商户(几百块,线上可办)→ 开微信支付商户号 → 小程序接微信支付。这时你已经是"做生意"而不是"玩票"了,建议先确认真的有人愿意付钱再投入。
一句话建议:先把 H5 版跑起来,收到第一笔 1.99 元,再考虑小程序。 先验证「有人愿意为这个付钱」,比先解决「用什么壳装它」重要得多。

如果确实要做,这里有一份对照表

现在(H5)小程序里对应改成
<canvas> + Three.js<canvas type="webgl"> + three-platformize
Web Audio 实时合成配乐InnerAudioContext + 真实 mp3
URL 参数传内容页面参数 / 云数据库
卡密 + 收款码微信支付 + 订单表(需后端或云开发)
DOM 文字层canvas fillText<cover-view>
DOM 按钮<view> + bindtap

常见问题

打开是白屏?

九成是没有用 HTTP 服务打开,而是双击了 html 文件。看第 ① 步起服务。 如果已经起了服务还是白屏,页面底部会出现一个红条写着具体错误,把那张图发出来就能定位。

爱心看不到 / 黑屏?

在链接后面加 ?q=low 强制降画质试试:.../c/?q=low。 如果好了,说明设备 GPU 性能不足,可以把 config.json 里的默认画质调低(在 data/config.json 里加一个 "quality": "medium")。 另外 ?planets=0&fountain=0 可以关掉次要动画主体来省性能。

没有声音?

微信和 iOS 规定:必须用户主动点一下才能放声音。所以页面正中间有个「点亮这片星空」的按钮,点它才有音乐,这是正常的,不是 bug。

链接发出去对方看到的是旧内容?

微信会缓存分享卡片。让 TA 在微信里点右上角 → 刷新,或者把链接后面随便加个 &t=1 变成新链接。

记录会不会丢?

出单后台的数据存在你这台电脑的浏览器里。换电脑、清浏览器数据都会没。 所以:每收一笔就导出一次 CSV,别偷懒。

能不能多人一起用?

现在这个版本是「一个人的生意」。如果要做成平台让很多人卖,就需要真的后端 + 账号系统 + 分账,那是另一个项目了。 建议先一个人跑通,再考虑放大。