前言

时光飞逝，一晃就到2024的年底了，按照我近年来的传统，我要复盘一下今年做过的关于探索收入多样性的事件。包括这一年的工作进展，收获的事项，遇到的各种问题，以及来年计划等，希望能对你有所参考意义。

事件

1. Cocos小游戏《忍者疾风转》开发，并上架到微信和抖音平台。

2. 微信小程序《有用工具盒》开发并上架。

3. 视频号《一曲小北》，主打编曲和吉他，首次开通广告分成计划。

4. QQ小程序《实用工具箱》上架，暂未开通广告分成。

5. 微信公众号《ZERO开发》发布推文23篇，首次小绿书1篇，爆文5篇。

6. 三个QQ短视频账号注册孵化，均已开通广告共享计划。

7. 鸿蒙Next应用开发，暂未上架，发布相关教程3篇，视频1个。

8. 全网粉丝数达20000人，含抖音账号《小北玩游戏》。

9. 微信问一问《ZERO开发》，累计回答40个，推流3w+，粉丝132人。

10. 重新搭建个人博客，加入独立博客联盟，友链，每日UV稳定破零。

收获

技能

1. 工作上的开发语言学习，新增Go语言和鸿蒙Next的ArkTs。

2. 单机游戏的Mod简单制作，游戏解包与封包。

3. Adobe Audition混音制作，用于视频号《一曲小北》更新。

收入

1. 公众号《ZERO开发》广告收益，付费文章1篇支付3人，账号打赏4人。

2. 视频号《北桥苏》、《一曲小北》原创视频，每日广告收益。

3. 微信小游戏、抖音小游戏《忍者疾风转》每日激励广告收益。

4. 微信小程序《有用工具盒》每日开屏广告、信息流广告收益。

5. 其他内容创作平台收益，哔哩哔哩，知乎，今日头条，QQ短视频，大鱼号。

社交

1. 加入副业交流群3个，小游戏、小程序开发交流群2个。

2. 个人运营程序员技术交流群1个，小程序交流QQ群1个。

3. 线下交友活动较缺失，2024年属于非常独来独往的一年。

投资

年初我就关闭了自2019年末以来购买的所有基金，也错过了今年10月前后的一次A股大涨时机。转而放到了余额宝和微信零钱通，每天固定几块钱的收益。为什么要这样做，因为关于金融产品的收入方向，我现在并不了解所以持保守态度，以后再慢慢学，重资产投资我没有尝试就不赘述了。

问题

1. 个人产品自然流量普遍偏低

因为以前技术崇拜，而不看重产品本身，导致入局独立开发比较晚，产品思维也跟不上，进一步影响我做出来的小程序，只能算是小应用而非产品。所以我现在才开始学习调研，需求分析，推广营销等等，毕竟独立产品开发是程序员晚期收入很重要的布局之一。

2. 视频创作方向不明确

不管是我的短视频还是中视频账号风格还没定调，因为过去都是用来学习新东西后的记录视频，没有真人出镜和真人发声。平台既不给流量，在观感上也显得不真诚，给人种营销号的感觉，这个只能慢慢摸索方向，之后再尝试出镜和口播。

计划

1. 2025年每周都写日志复盘，博客新增周刊栏目。

2. 注册个人微信服务号，探索新方向，持续内容输出。

3. 直播弹幕小游戏，直播插件开发并上架。

4. 用Unity3D引擎独立开发一个偏大型的单机游戏。

5. Blender、3D Max建模改模学习，Mod制作升级。

6. 持续探索AI大模型个人项目变现，AI应用开发。

7. 加大小红书内容更新力度，完成商单权限开通。

8. 个人资源（代码，创作源文件）变现，网盘拉新。

总结

2024年的我的复盘结论就是 “持续尝试”，告别技术崇拜，但依然相信技术改变世界。二者不矛盾，因为技术服务于业务，建立在价值产出之上，任何优秀的代码结构终将会成为 “屎山”（有点俗）。

好的技术架构值得骄傲与推崇，但也只能延缓逐渐臃肿的进程，世界总是向熵增的方向演进，总是向混乱的方向发展，唯一不变的就是变，多方向尝试，多次推倒重来，就算是草台班子也能找到个方向，最后我也希望2025年的复盘主题是 “持续深耕”。

前言

前段时间，我在微信问一问里回答了一个关于 “一天赚几十块钱副业有哪些？”的问题。主要推荐的是直播小玩法的副业，截至目前收获了官方1万的推流和超5千人的围观。由此我认为，当前开发直播小玩法还是比较小众，竞争小，个人开发者入局应该能躺赚一笔，真的很适合参考以前的回合制游戏。

简介

直播小玩法是抖音里的一种统称，其他平台有叫直播弹幕小游戏，而抖音里的直播小玩法包括两种，弹幕小游戏和互动插件。个人主体开发者申请软著后，符合平台规范都能上架。上架后，只要有主播用了你的开播，就能享受直播间的礼物分成，分成比例见下图。

比例看着确实比较低，但他也有一个很符合被动收益的优势：一经开发，多端部署，多人开播，无需直接面向观众。就是我们开发后，其实是可以发布到多个平台的，已知对个人开发者开发弹幕游戏上架的平台有：

1. 抖音

2. 哔哩哔哩

3. 虎牙

同一平台可以让多个主播同时开播，看似一场直播分百分之八，但如果一天有100个主播，就可以从100个直播间分走百分点的收入。

现状

上架直播小玩法虽然是小众行业，但也同样有二八效应，据业内人士说，弹幕游戏有榜单，如果上架后能冲进前30，那每月被动收入十几W很常见。比如2023年的两款，《兵临城下》这款游戏全平台月流水超过6000万，《星辰无双》日均流水突破150万元。

这些头部爆款多数是开发团队完成的，个人开发者前期不试水，上架后可能就是主播一日游，然后还要承担服务器的费用。当然前面的优势和收益也是很可观的，这里只是在入局前给个预期中和一下，防止后期沉默成本过高。

开发

根据官方开发文档介绍，互动插件和弹幕小游戏都支持单价版开发，也就是无需购买服务器，通过客户端接收推送完成交互。互动插件这里就不详细介绍了，类似直播里的点歌，点击屏幕上一个按钮，下拉出一些歌曲列表，选中后可以发送到直播间，这种的交互性更似小程序，可专门为开课，舞蹈博客定制相应的业务型互动插件。

而弹幕小游戏的开发，主要的是通过接收直播间的弹幕、礼物数据后，在游戏中显示对应的增益效果，比如送出仙女棒触发什么，阵营能提升什么。大部分是大同小异，更多的是主题和效果的设计，哪些更能迎合主播和观众，下面就用服务器+文档API，介绍一下大致的开发过程。

流程

1. 用直播伴侣打开后获取Token请求服务器接口

2. 服务端根据Token获取房间ID并返回到小玩法

3. 服务端将监听的房间数据通过长链接推送到小玩法

4. 小玩法根据礼物、弹幕等数据展示buff效果

5. 时间结束后根据业务数值判断阵营输赢并排名

服务端接口

下面就从官方文档里列出一些服务端业务中需要用的请求接口，详细可见开放平台的小玩法文档的服务端API介绍。

接口调用凭证

access_token 是服务端接口的全局唯一调用凭据，如下面直播信息里的 “X-Token”，任务启动的 “access-token”传递的请求头参数用的都是这个。access_token 的有效期为 2 个小时，需要定时刷新 access_token。

直播信息

主播使用直播伴侣或移动端云启动玩法后，直播伴侣/移动端云启动会传入 token 到玩法中，当玩法获取 token 后，传递给玩法的服务端。玩法服务端通过该接口，使用 token 获取直播间信息，在返回到客户端前，服务端还需要调用 “任务启动”、“礼物置顶”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "data": {
    "ack_cfg": [ // 预留信息，sdk接入使用，开发者不用感知
    ],
    "linker_info": { // 连屏数据预留信息，开发者目前不用感知
        "linker_id": 0,
        "linker_status": 0,
        "master_status": 0
    }，
    "info": {
        "room_id": 7214015683695250235,
        "anchor_open_id": "_000oJIu6APhomK7KIBGqSYm5XYPxCJB_xxx",
        "avatar_url": "https://p11.douyinpic.com/aweme/720x720/aweme-avatar/tos-cn-avt-0015_973c31e8055f78a41d3f7de3def9821d.jpeg?from=3067671334",
        "nick_name": "xxx"
    }
  }
}

任务启动

调用任务启动后，直播间数据才会同步推送给开发者服务器，注意：不同类型的数据需要启动不同的任务单独监听，比如礼物数据单独启动一个，评论数据单独启动一个，见文档的数据开发。

礼物置顶

为什么还要调这个接口，因为置顶的礼物被送出，才会有礼物数据推送（后期会废用不需要这一步），实现时可以在获取房间ID后异步调用。然后直播挂载小玩法后，开发者根据玩法场景自主控制当前场景需要置顶的礼物，前提是置顶的礼物在玩法维度礼物配置中。调用置顶礼物接口的条件：

• 已开通“获取礼物互动数据能力”。
• 置顶的礼物数量不能超过6个，且必须为礼物配置列表中已勾选的礼物。

分页查询推送失败数据

可以用定时任务对已经开播的RoomId请求 api 分页查询推送失败的数据，返回空代表全部推送成功，否则可以根据业务需求记录失败的数据和重新推送到小玩法客户端。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{ 
  "err_no": 0,
  "err_msg": "ok",
  "logid": "20220927122238291",
  "data": {
    "page_num": 1,
    "total_count": 100,
    "data_list": [
      // 当页的数据列表
      {
        "roomid": "12345", // string类型，消息的房间id
        "msg_type": "live_gift", // string类型，表示消息类型
        "payload": "[...]" // string类型， 对应推送协议中的payload字符串，需要unmarshal
      }
    ]
  }
}

其他接口

弹幕数据上报、用户战绩与排行榜看自身业务使用，而小玩法客户端主要就和服务端保持长链接，接收直播间互动数据，以及三个Http业务接口。

• 开启，获取roomId
• 结算，传递比赛结果
• 获取排行榜单

写在后面

上面的是官方玩法，其实还有第三方，而且抖音推出抖音小玩法可能也是打不过就加入的策略。因为以前盛行一时的无人直播，像修狗云蹦迪、挤地铁、马保国格斗等，都是别人用技术手段实现弹幕礼物接收实现的小游戏。

因为没有人出境和抓取数据等原因，开播的房间经常被封，虽然被封，但收益不错也屡禁不止，所以抖音干脆开放小玩法模块（个人猜想），更大程度实现主播、开发者、观众双收。我已知第三方平台有：咩播、阿比整蛊、青播，有机会我再聊聊关于这些平台软件的内部概况。

个人主体的 QQ 小程序，到底是哪些人开通了流量主在玩啊？

从微信端移植并修改了一个工具类的 QQ 小程序，然后备案审核上架后，自然流量没有一点，你说尴不尴尬！

还有一点呢，QQ 小程序开通流量主的条件还是很高的，相比微信小程序。

要求连续 7 天内，每天的访问 UV 都不能低于 100，也就是在一个连续周期内要完成 700UV。

于是，我就去某宝找找有没有做流量主开通的，我先是输入 “QQ 小程序流量主开通”，根本就没有。

然后就只搜小程序流量主开通，清一色微信小程序的，没辙，随便找几家问问有没有能做 QQ 小程序的。

结果就是，根本没人做这玩意的流量主开通业务，不过也意外地知道了他们做一个微信小程序地普遍报价 150 上下，同样也是刷访问，10 天完成 500UV。

最后我就找群找论坛，QQ 小程序互助，也没有，不知道有没有和我一样的，有的话，我建了一个扣扣群，或加我 QQ：2652364582，互帮互助。

磁盘清理工具虽然有很多，但是对于一些开发工具，或较为隐蔽的缓存还是无法有效清理。

眼看着C盘的“垃圾”越积越多，电脑使用起来越来越卡，我们只有两种方法：

1. 将较大的软件转移到其他磁盘（直接移动 or 软链接）
2. 一条路走到底，对 “垃圾” 大清理。

下面我就简单介绍一下软链接和两种指令清理的方法。

一、软链接

mklink /J 目标文件/文件夹 源文件/文件夹

1

mklink /J D:\target-dir E:\src-dir

二、清理临时文件

通过下面命令进入到临时文件的默认位置，然后再点击删除，也可以将这个默认位置指定到其他磁盘。

只需要在环境变量种创建变量名TEMP，值为上面显示的默认位置。

1

cmd 输入 %temp%

三、指令清理

管理员身份运行命令行 C盘瘦身

1
2

1、  DISM.exe /Online /Cleanup-Image /StartComponentCleanup
2、  powercfg hibernate off

前言

2024年6月26号，我申请的小游戏软著通过了。由于等待时间太长，所以就总结了一下整个申请过程踩过的坑。帮助未了解或即将申请个人软著的同学绕过下面三点，可以节省至少三分之一的时间（小游戏类目）。

当然，这里也会围绕大家关心的几个问题展开，比如：软著申请的费用、软著申请到底要多久以及整个申请的流程。最后再给大家两份我自己的申请模板，软件源程序文档和软件说明书文档。

费用

2024年申请软著不用钱，如果说一分钱不用也说不过去，因为在申请时的签章页要打印签字，所以整个过程的花费就是一张纸的打印钱。要是你找的第三方代办收取高费用，并且说要打印这打印那的就自己弄吧。因为现在关于软著的登记都是采用电子版形式了。之前既要打印源码文档和软件说明书，还要寄过去，然后才能收到纸张版软著。

时间

我从申请到通过一共是三个月时间，但是在过程中有三次补正，也就是提交的信息和资料不符和要求。而每次补正再审核大概在8-15天（个人观察），错三次也就要多一个月时间，按正常填写一遍过的话应该两个月以内就能获取。

流程

注册与开始申请

进入“国家版权保护中心官网”，选择个人身份，填写手机邮箱等信息后注册成功后登陆。然后回到官网首页导航栏选择 “版权登记” -> “软件登记” -> ”计算机软件著作权登记申请（R11）“, 然后进入到办理身份，是自己就选 ”我是申请人“。

软件申请信息

这是第一步要填写的表单，其中权利取得方式、软件全称、版本号、权利范围为必填，权利取得方式按默认原始取得，权利范围按默认全部权利，其他的可以参考我下面截图。而 ”软件全称“ 一定要注意，因为我其中一项补正就是软件全称和后面的软件说明、源码文档里的页眉软件名称不一致。

软件开发信息

软件开发信息都为必填，软件分类选择 ”应用软件“，软件说明 ”原创“，开发方式 ”单独开发“，开发完成日期自己选择，发表状态 ”未发表“。

软件功能与特点

鉴别材料

鉴别材料有两份，分别是程序鉴别材料和文档鉴别材料，两个都选择一般交存。其中程序鉴别材料是代码清除空行注释整理后转PDF提交，前后各连续30页可以按开发时间排序，也可以按功能主次等自定义排序，每页不少于50行，若源程序整体不到60页，应提交全部源程序。

而文档鉴别材料是用来描述程序的内容、组成、设计、功能、开发情况、测试结果及使用方法的文字资料和图表，如程序设计说明书、流程图、用户手册等，同样文档要求是连续的前30页和后30页，每页不少于30行，如果整个文档不到60页，就提交整个说明文档，这个我会在下面列出我的那两个模板。

确认信息

填完上面的信息后，提交身份证正反面，最后就会列出提交材料的清单确认信息。

签章页提交

签章页其实也是材料清单确认书，下载打印后签字拍照完再上传。软著的状态就会由 “待提交” 转 “待受理” 了，接着就等待审核发放了。

模板参考

以下两份就是我的程序鉴别材料和文档鉴别材料模板，这里要注意一点的是，游戏类的文档说明一定要加上 “游戏健康忠告” 页面的介绍。（可以扫描下面公众号二维码找到文章或留言）

写在后面

软著下来后就准备上架到小游戏或快游戏平台了，可能是近年来的净网相关政策，有些平台对于小游戏或快游戏对个人身份的提交通道已经关闭了。不光如此，我最近做了一个工具类的小程序也卡在提交，因为我是要改名称和类目，现在还需要备案和认证，就不知道到时候我上架的时候，以前积累的UV会不会被清掉。

前言

本着将成本降到最低，我目前做的应用或小程序都是单机的，也就是不用请求接口，只要一上架就没有任何支出。但是写死的数据毕竟有限，应用的内容单一无法紧跟时事热点，每次打开一个样，自然就没有留存。遇到有错字啥还要更新版本，那有没有方法既能丰富应用内容，又不用增加成本呢？

既要又要，当然也有，找网上提供的免费 API 接上去。但是这种有请求数限制，而且还和自己应用的业务不相关，那就只能自己弄接口了。

既然可以在 GitHub 上搭静态博客，那整一个静态 API (json 文件)，时不时地更新或提交新的 json 文件上去，在 C 端应用上不也看起来像是动态的了。所以下面就实践一下如何在 GitHub 上搭建 API 服务，以及如何自动化更新数据（部署爬虫）？

API 服务搭建

方法和之前在 GitHub 上搭建 Hexo 类似，就是给仓库开启 GitHub Pages，可以自行绑定域名，也可以用之前主仓设置的域名后面带当前仓库名访问。当前域名要备案过了，然后用访问资源的方式能访问到 json 文件 (xml、csv 等) 就可以了。

定时爬虫部署

要实现自动化更新数据，那就要定时手动上传和直接爬虫爬取，可以通过 GitHub Actions 工作流的方式实现，下面第一次使用的方式演示如何创建并运行 workflow。

创建推送 TOKEN

因为生成了 json 文件需要自动推送到仓库，为了不用输入账号密码并使用 PAT，这个和之前 Hexo 搭建时获取的一样。settings->developer settings->github apps->personal access tokens->tokens (classic)，然后选择 “Generate new token (classic)”。

TOKEN 权限设置

设置名称，有效时间，勾选权限，主要的把 repo、workflow、user、write:discussion 以及 admin 开头的全勾上，如果不想选都选上也可以。最后创建后就会显示 token 值，记得把那个 ghp 开头的字符串复制下来，不然后面就看不到了。这里再说一下 PAT 下的 Fine-grained tokens 和 Tokens (classic) 的区别，上面比 Tokens (classic) 权限控制更精细，安全性更高，而且无法设置不能失效的 Token。

测试 TOKEN

是否可用用 git 命令运行，换成自己的 token 和仓库报错了则说明该 TOKEN 无效

1

git push https://x-access-token:换成你的TOKEN@github.com/z11r00/你的仓库.git HEAD

创建工作流

打开仓库后，点击 Actions，然后点击 New workflow，set up a workflow yourself 后提交。git 拉取后会在项目中生成一个.github 文件夹，依次点进去是刚才创建的工作流 yml 文件。

Yml 配置说明

1
2
3
4
5
6

name：工作流名称，展示在用于表示工作流。
on：触发事件，schedule 定时 | push 推送 | pull_request pr 请求，定时任务下有一个 cron 的五个 * 分别是分 时 日 月 星期（, 分割字段多值 - 定义范围 / 指定间隔频率）。
workflow_dispatch： 是否允许在 github actions 操作选项卡中手动操作，默认是可以。
jobs：任务执行的定义。
runs-on： 用于任务执行的运行器，可以说是操作系统，其他的还有 windows 等，具体参考文档，下面会贴出。
steps： 步骤，工作流依次执行的步骤，每个都有一个名字和具体的运行指令，可以使用 actions 包 (github 提供的集成程序，比如用于检出仓库代码的，python 环境的等等)。

爬虫工作流

以下定义一个每天八点十分（不一定准时），先是用 TOKEN 检出仓库中的所有代码，然后设置 python 环境后安装指定依赖，运行 script 目录下的 ArticleSpider.py 脚本，最后将脚本里生成的 json 文件提交并推送到仓库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 工作流名称
name: article_spider
# 事件：schedule 定时 | push 推送 | pull_request pr请求
on:
  schedule:
    # 分 时 日 月 星期 (*每次都 ,分割字段多值 -定义范围 /指定间隔频率)
    - cron: '10 0 * * *' # 每日8:10，时间点执行任务，注意时区(UTC, 0+8)

  # 是否可在github操作选项卡手动运行
  workflow_dispatch:

# 定义任务
jobs:
  build:
    # 任务运行器（切换可参考文档）
    runs-on: ubuntu-latest

    # 步骤
    steps:
      # 使用到的actions包(用于克隆当前仓库的所有代码)
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          ref: main
          token: ${{ secrets.PUSH_TOKEN }}  # 自定义的个人推送TOKEN
      - name: Set up Python
        uses: actions/setup-python@v2
        with:
          python-version: '3.x'
      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install requests
          pip install lxml
      - name: execute py script
        env:
          FM_USERNAME: ${{ secrets.USERNAME }}
        run: |
          python script/ArticleSpider.py
      - name: 列出所有文件
        run: |
          ls -l
      - name: Commit changes
        run: |
          git config --local user.email "2652364582@qq.com"
          git config --local user.name "bqs"
          git add .
          git commit -m "Add changes" || echo "No changes to commit"
          git push origin main

ArticleSpider.py

脚本因为对方站点是一个前后端分离的项目，页面的列表和详情都是用异步请求的方式。所以这种抓取就比较好办，写一个 while 循环，页码不断累加的请求接口，判断有超过某时间点的文章则跳出循环。在循环中将数据保存到指定的目录下的 json 文件中，当然也可以自己调整数据，如果要分页就按固定条数分文件。

运行效果

虽然是定时的，但也可以去 GitHub 控制台手动运行。打开 Actions，选择工作流名字进去，最后 Run workflow 就等待执行了。详细也可以看到脚本里打印出的日志，执行完毕再回到仓库查看是否有 json 文件生成。

写在后面

以上只是演示，如果真要弄自己的 API 还是得对爬取的数据做一下处理，拓展一下是不是还可以用这种方式，实现一个带后台管理的资源 “动态网站”。但是应用也不光只有展示，还有提交部分，所以要想零成本实现将用户数据存储下来就要用到另一些方法了，最后 GitHub Actions 用法也远不止于此……

安利

QQ小程序：**实用工具箱**

前言

前面也说了，通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示，但是要零成本得完成将用户信息存储下来，并实现数据交互呢？

我开始是想用云文档，种种原因，我还是希望有个自己能二次修改的后台，于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法，但都是 2024 年以前的文章，有些平台最新的修改，和自己踩到的坑而别人没提到的细节，我还是想记录一下。

坑点

1. 域名已经解析成功了，但是一直无法访问 Vercel 上的页面。
2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突，和一些配置问题。
3. 代码提交推送后，Vercel 没有完成自动部署等等。

准备

• Vercel： 略过详细介绍，暂且把他理解成云服务器，入门配置免费，需要注册登陆。
• Railway： 同样略过详细介绍，暂且把他理解成云数据库，几乎免费，需要注册登陆。
• GitHub： 先创建存放程序的仓库，也几乎完全免费，需要注册登陆。
• Typecho： 博客程序 ，其他语言的像 Flask 也行，开源免费，下载或自行编写。

Vercel 配置

进入 vercel 官网，推荐使用 GitHub 账号登陆，配置主要完成仓库的代码导入，域名解析绑定，项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”，然后选择仓库安装并设置权限，接着是 Configure Project，Congratulations 都可以直接下一步进入到 Production Deployment，可参考下图。

域名解析绑定

进入到 “Production Deployment” 时，我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息，还能看到 Domains 分配的域名，但是该域名被墙无法访问。

点击上面的 “Domains” 按钮（在 Visit 左边），输入即将要解析过来的域名，系统会展示需要用 CNAM 类型被解析的域名，复制该 value 去到自己的域名服务商控制台，添加一条 CNAME 解析记录。

如果说服务商那边解析成功了，并且 Vercel 平台也显示域名验证成功，也就是前面提到的坑点一。这种一般是 DNS 缓存原因，可以换一台电脑或用手机访问测试，如果能就等待一下，直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书，所以后面只需要留意日期就可以，下图我暂时放了一个 index.html 页面，动态程序演示要放到 Railway 后。

Railway 配置

进入 Railway 官网，同样推荐 GitHub 账号登陆，进来后选择 “MySQL” 类型，直接按默认后进入到 production，最主要的是我们需要分配给他的 Host，账号和密码，数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额，需要提前备份数据库。超过限额后没有备份的数据就没了，需要删掉账户重新注册才可以。

打开 Data，选择 “Connect” -> “Public Network”，Connection URL 就是该产品对外的连接 Host，用户密码，端口等信息。只需要复制下来，用于在程序中连接配置，Navicat for MySQL 图形化工具连接失败，我试过了。

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world，和有数据库连接的博客程序，第一步是后端入口文件都不能放在项目的根目录下，放在新建文件夹的 api 中，并添加 vercel.json（用于配置路由和分配内存等信息）。

Python 的 Hello World

新建 vercel.json 文件，和用于打印的 py 文件，最后访问自定义的域名。

1
2
3
4
5

{
    "rewrites": [
        { "source": "/(.*)", "destination": "/api/index" }
    ]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php，而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x，我下面演示的是 vercel-php@0.6.0，所以再部署前需要先将 Node 版本切换为 18.x，如下图。（以下有两种情况的报错都要 node 和 vercel-php 版本相关）

1
2
3
4
5

部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

Typecho 安装

从官网下载源码后，找到 config.inc.php 文件，将数据库的参数修改为 Railway 复制过来的配置。

然后通过 Git 提交代码到仓库，如果发现没有部署成功，可以进入 vercel 平台的 Deployments 查看部署记录，有报错的根据信息修改。

提交并成功部署后，输入自定义域名，并带上 install.php 进行安装，然后用 pdo 方式安装数据库，上面的 railway 参数就再输入一遍。

安装成功后，可以到 Railway 查看到新增的表格，这就表示全部都能正常使用了。

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API，也能搭一些国外工具的镜像，像 npm 之类的。

还有一种是，比如国外有一些很好用还免费的 API，你想用在小程序进行调用，但是在小程序后台填写这些 API 访问域名时无法添加，没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转，小程序请求自己的域名，而部署的程序请求别人的地址，更多玩法待后续更新了……

前言

上次简单分享了一下通过 Github Pages 方式搭建图床，但是国内对 github 资源的加载普遍不太稳定，多数情况下很慢甚至打不开。而这次我要推荐两个解决方法，一种是助力方案，使用 CDN 加速；另一种是代替方案，换成真正的图床或其他托管服务（先卖个关子）。

方案一

方案一提供助力，github 上的仓库和资源保持不变，只需要对其进行 CDN 加速就可以了。那么，好用的 jsDelivr 就上场了，这是一个免费、开源的加速 CDN 公共服务，托管了许多大大小小的项目，可加速访问托管的项目目录或图片资源。

并且他同时对 github、npm、wordpress 提供支持，无需安装或搭建什么就能使用，下面就简单介绍一下使用方法。前提是比如你已经创建了 github 仓库，这次无需开启 github pages，只要是一个 public 的仓库就可以。

访问 github

1

https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录

访问 npm

1

https://cdn.jsdelivr.net/npm/包名@版本号/目录

访问 wordpress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 加载任何插件从WordPress.org插件SVN repo

https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file

// 加载精确版本

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js


// 加载最新版本

// 你不应该在生产中使用这个

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js


// 从WordPress.org的主题SVN repo加载任何主题

https://cdn.jsdelivr.net/wp/themes/project/version/file


// 加载精确版本

https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js

方案二

方案二是替代方法，就是找其他免费的做图床服务的网站或平台。但是以我自己体验过的几个做图床的平台，个人感觉还是很不好。比如他们可能是出于监管或业务原因，对图片内容做了识别，稍微有点敏感的或者是有二维码的都无法上传，而且有的对单位时间内上传个数做了限制等等。

毕竟是人家免费提供的图床服务，每天的流量消耗也很大，都要生存，所以限制之类的也很正常。那用付费的图床服务不就行了吗，这当然也是很不错的，但是我这里写的是零成本，所以就把目光转移到了其他提供托管服务的平台。

没错就用国内的 Gitee，图片和视频放上去绝对比在 Github 上访问要稳定，而且使用方法也是一样。创建一个 public 仓库，通过 git 工具提交后，参考我下面的访问链接就能使用了。

1

https://gitee.com/gaoxingqufuhchao/bqs-toolsbox-uniapp/raw/master/static/images/componentBg.png

写在后面

关于零成本可能要做成一个系列了，因为作为独立开发者，在自己的产品还没有经过市场检验，降低成本绝对是首选。尽管开发方面不用支出，但是面向 C 端至少要有个云服务器和数据库吧，需要数据炼丹总得要部署个爬虫吧，现在都进入 AI 时代了，给产品加上 AI 功能也得要吧。

这些其实都可以通过 Github 和零零散散的小众平台来实现零成本，比如用某云文档做数据库，Github 来定时跑爬虫，某平台的 GPTs 也提供了带有限制的 API 服务。别看人家平台的 api 每天就 1000 次的调用限制，要知道很多情况下，自己刚做的小程序和什么应用每天有几百的访问就很不错了，所以能用一些免费 api 来给自己应用增加有用性就先用着，量起来了可以选择付费或自研。

那么，后面我再慢慢分享怎么零成本玩上面我提到的几个东西吧。

前言

图床服务器是一种用于存储和管理图片的服务器，可以给我们提供将图片上传后能外部访问浏览的服务。这样我们在写文章时插入的说明图片，就可以集中放到图床里，既方便多平台文章发布，又能统一管理和备份。

当然下面通过在GitHub上搭建的图床，不光不用成本，而且还能上传视频或音乐。操作方法和以前在GitHub上搭建静态博客类似，但是中间会多一些一些工具介绍和技巧。

流程

• 创建仓库

• 设置仓库

• 连接仓库

• 应用Typora

创建仓库

创建仓库和平时的代码托管一样，添加一个public权限仓库，用默认的main分支。当然也可以提前创建一个目录，但是根目录最好有一个index.html。

设置仓库

设置仓库主要是添加提交Token，和配置GitHub Pages参数。而这两小步的设置，在前面文章 “Hexo博客搭建” 有比较详细介绍，所以这里就稍微文字带过了。

Token生成

登陆GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens(classic)，然后点击 “Generate new token”，填写备注和过期时间，权限主要勾选 “repo”、“workflow”、“user”。最后生成 “ghp_” 前缀的字符串就是Token了，复制并保存下来。

GitHub Pages配置

进入仓库页 -> Settings -> Pages，设置Branch，指定仓库的分支和分支根目录，Source选择 “Deploy from a branch”，最后刷新或者重新进入，把访问链接地址复制保存下来。

连接仓库

连接可以除了API方式，也可以用第三方的工具，比如 “PicGo”。工具位置自行搜索哈，下面以他为例，演示工具的连接配置、文件上传和访问测试。

连接配置

找到 “图床设置” -> “GitHub”，下面主要填写仓库名（需带上账户名），分支名（默认main即可），Token（上面生成保存下来的），存储路径（后带斜杠）可以填写已存在，如果不存在则在仓库根目录下新建。

文件上传

文件格式除了下面指定的如Markdown、HTML、URL外，还能上传图片音乐视频等（亲测有效）。点击 “上传区”，将文件直接拖动到该窗口，提示上传成功后，进入GitHub仓库下查看是否存在。

访问测试

访问就是能将仓库里的图片或视频以外链的方式展示，就像将文件放在云平台的存储桶一样。将前面GitHub Pages开启的链接复制下来，然后拼接存储路径和文件名就可以访问了。

应用Typora

Typora通过PicGo软件自动上传图片到GitHub仓库中。打开Typora的文件 ->偏好设置 -> 图像 -> 上传图片 -> 配置PicGo路径，然后指定一下PicGo的安装位置。

开始使用

可以点击 “验证图片上传选项”，验证成功就代表已经将Typora的图标上传到仓库，也可以直接将图片复制到当前md文档位置。

1

![image-20240608145607117](https://raw.githubusercontent.com/z11r00/zd_image_bed/main/img/image-20240608145607117.png)

上传成功后会将返回一个如上面的远程链接，并且无法打开和显示，这是就要在PicGo工具的图床设置中。将自己GitHUb上的域名设定为自定义域名，格式 “域名/仓库名”, 在Typora上传图片后重启就可展示了。

名称：BlogFinder
地址：https://bf.zzxworld.com
描述：一个聚合了优秀的个人博客，同样免注册登陆就能发布。可以根据话题：读书、旅行、好物、极客等筛选网站或文章。

名称：ZERO开发
地址：https://www.zerofc.cn
描述：一个持续探索副业的独立开发人博客，网站不仅有实战类的技术文章，也有多款在线工具包和小游戏，同时提供友链服务。

名称：博客录
地址：https://boke.lu
描述：一个不用登陆就能发布个人网站的博客圈子，如果是站长，适合做友链，其他时候也可以用来摸鱼，博客间串门。

名称：Blogwe
地址：https://blogwe.com
描述：是较早的个人博客导航网站，为纯公益性网站，网站宗旨是通过博客导航串联博客圈子，增强互动交流，认识更多朋友。

名称：博客志
地址：https://www.jetli.com.cn
描述：博客志-优秀个人独立博客导航，建站于2006年，专注于收藏有价值的有效更新的优秀个人独立博客。

名称：博友圈
地址：https://www.boyouquan.com
描述：那些记忆中有趣的博客还在更新吗？博友圈是博客人的专属朋友圈，连接还在写博的博友，让那属于文字的时代延续光辉！

名称：kaiber
地址：https://kaiber.ai/
描述：kaiber 图片转换为视频

名称：wonder studio
地址：https://wonderdynamics.com/
描述：Wonder Studio 替换视频中人物

名称：runway
地址：https://runwayml.com/research/gen-2/
描述：Runway GEN2 文字生成视频

名称：reddit
地址：https://www.reddit.com/r/StableDiffusion/
描述：Stable Diff+ControlNet+EBsynth reddit教程

名称：3D模型动作生成
地址：https://www.zhengyiluo.com/PHC-Site/
描述：PHC AI生成动作作为SD输入

名称：3D场景生成
地址：https://twitter.com/LumaLabsAl
描述：Luma Al NeRF生成3D场景

名称：CG、AE素材
地址：https://www.newcger.com/
描述：新cg宠儿CG、AE为主

名称：pexels素材
地址：https://www.pexels.com/zh-cn/
描述：pexels 无需注册登录即下载4K

名称：4K视频素材
地址：https://pixabay.com/videos/
描述：pixabay 矢量图、系列4K视频

名称：videezy素材
地址：https://www.videezy.com/
描述：videezy分类明确，个别收费

名称：mazwai素材
地址：https://mazwai.com/
描述：mazwai 高质量电影风格

名称：ignitemotion
地址：https://www.ignitemotion.com/
描述：ignitemotion 低画质CG科普视频

名称：4K123论坛
地址：https://www.4k123.com/
描述：4k123远古论坛形式资源

名称：picjumbo
地址：https:/picjumbo.com/
描述：picjumbo高清静物风景图

名称：foodiesfeed
地址：https://www.foodiesfeed.com/
描述：foodiesfeed免费食物类图片

名称：gratisography
地址：https://gratisography.com/
描述：gratisography 免费下载10张

名称：cupcake
地址：https://cupcake.nilssonlee.se/
描述：cupcake 唯美冷艳个人摄影作品

名称：magdeleine
地址：https://magdeleine.co/
描述：magdeleine 精致的文艺图

名称：textures
地址：https://www.textures.com/
描述：designerspics 文艺清新图免费

名称：stockvault
地址：https://www.stockvault.net/
描述：designerspics 文艺清新图免费

名称：cacher
地址：https://www.cacher.io/
描述：cacher代码块组织管理和标记

名称：FTPS工具
地址：https://filezilla-project.org/
描述：FTP,SFTPFTPS客户端

名称：API文档工具
地址：https://velocity.silverlakesoftware.com/
描述：velocity-离线API文档工具

名称：winscp工具
地址：https://winscp.net/eng/docs/lang:chs/
描述：winscp-免费开源的FTP工具

名称：网络抓包工具
地址：https://www.wireshark.org/
描述：wireshark-网络抓包分析工具

名称：命令行shell
地址：https://www.zsh.org/
描述：zsh-命令行shell

名称：gitextensions
地址：https://gitextensions.github.io
描述：gitextension-git UI

名称：meldmerge
地址：https://meldmerge.org/
描述：meldmerge-可视化差异和合并

名称：中华中华珍宝馆
地址：https://g2.ltfc.net/home
描述：中华珍宝馆-超清中华古玩字画淡——扬无咎的梅花精宝

名称：随机少女
地址：https://thisanimedoesnotexist.ai
描述：随机少女-随机生成二次元少女

名称：濒临灭绝动物拼图
地址：http://species-in-pieces.com/
描述：频临灭绝的动物拼图碎片

名称：中国妖怪百集
地址：https://www.czhiyao.com/
描述：知妖中国妖怪百集

名称：大量冷知识
地址：https:/jandan.net/
描述：煎蛋网收录了大量冷知识

名称：蠕虫蹦迪
地址：http://www.staggeringbeauty.com
描述：蠕虫随着鼠标摆动蹦迪

名称：33台词
地址：https://33.agilestudio.cn
描述：一个好用的电影字幕搜索引擎，轻松搜索台词出现的影片和时间点，是视频创作者的必备工具，是帮助英语学习的利器。

名称：dialogue
地址：https://dialogue.moe
描述：根据输入的台词，按照权重自动匹配网上所有的动漫，适合动漫混剪的短视频博主。

名称：牛片网
地址：https://peiyin.6pian.cn
描述：牛片网为影视公司和工作室免费提供文字转录音服务，语音在线配音合成器完全免费，可选择配音模板，多用于专题片配音、宣传片的配音生成。

名称：七味
地址：https://www.pkmp4.xyz
描述：七味网，最新电影，最新电视剧，大片，在线电影，在线观看，电影下载，迅雷下载，磁力下载，网盘下载，离线下载。

名称：音范丝
地址：https://www.yinfans.me
描述：音范丝是一个搜集、高品质电影资源网站，精选4K蓝光原盘下载，顶级收藏，最适合对画质有极度要求的博主了。

名称：预告片世界
地址：https://www.6huo.com
描述：网站专注于提供高清电影预告片资源，电影视频，预告片，正片片段，制作花絮，更适合做影视混剪、知识分享博主的素材了。

名称：找台词
地址：https://zhaotaici.cn
描述：这是一个收录丰富的找台词网站，主要提供电影、电视剧台词搜索，可按片名、导演等筛选并查看具体台词。

名称：真不卡影院
地址：https://zhenbuka.net
描述：一个在线观看电影、美剧、韩剧、动漫真不卡网站，值得每一个影迷朋友收藏，看片我真不卡，可观看、可下载、找剪辑素材！

名称：soundraw
地址：https://soundraw.io/
描述：soundraw Al生成和修改音乐

名称：mubert
地址：https://mubert.com/
描述：mubert Al生成音乐

名称：endel
地址：https://endel.io/
描述：endel 个性化背景音乐

名称：papercup
地址：https://www.papercup.com/
描述：papercup AI配乐和视频翻译

名称：lalal
地址：https://www.lalal.ai/
描述：lalal 从任意音频中提取人声伴奏

名称：voicemod
地址：https://www.voicemod.net/zh
描述：voicemod 实时变声器

名称：brain
地址：https://www.brain.fm/
描述：brain.fm生成冥想、睡眠、专注

名称：riffusion
地址：https://www.riffusion.com/
描述：riffusion 提示词生成音乐

名称：murf
地址：https://murf.ai/
描述：murf声音克隆转换、文本转音频

名称：runway
地址：https:/runwayml.com/
描述：runwayml 图片、视频编辑、生成

名称：cascadeur
地址：https://cascadeur.com/
描述：cascadeur 基于物理的角色动画

名称：synthesia
地址：https://www.synthesia.io/
描述：synthesia 15分钟内生成专业视频

名称：zubtitle
地址：https://zubtitle.com/
描述：zubtitle自动视频加字幕

名称：getmunch
地址：https:/www.getmunch.com/
描述：getmunch Al提取视频最佳内容

名称：fliki
地址：https:/fliki.ai/
描述：fliki 文本转有声音的视频

名称：peech
地址：https:/www.peech-ai.com/
描述：peech-ai自动视频编辑管理平台

名称：dreamfaceapp
地址：https://dreamfaceapp.com/
描述：dreamfaceapp 用AI驱动人脸动画

名称：33台词
地址：https://33.agilestudio.cn
描述：一个好用的电影字幕搜索引擎，轻松搜索台词出现的影片和时间点，是视频创作者的必备工具，是帮助英语学习的利器。

名称：dialogue
地址：https://dialogue.moe
描述：根据输入的台词，按照权重自动匹配网上所有的动漫，适合动漫混剪的短视频博主。

名称：牛片网
地址：https://peiyin.6pian.cn
描述：牛片网为影视公司和工作室免费提供文字转录音服务，语音在线配音合成器完全免费，可选择配音模板，多用于专题片配音、宣传片的配音生成。

名称：七味
地址：https://www.pkmp4.xyz
描述：七味网，最新电影，最新电视剧，大片，在线电影，在线观看，电影下载，迅雷下载，磁力下载，网盘下载，离线下载。

名称：音范丝
地址：https://www.yinfans.me
描述：音范丝是一个搜集、高品质电影资源网站，精选4K蓝光原盘下载，顶级收藏，最适合对画质有极度要求的博主了。

名称：预告片世界
地址：https://www.6huo.com
描述：网站专注于提供高清电影预告片资源，电影视频，预告片，正片片段，制作花絮，更适合做影视混剪、知识分享博主的素材了。

名称：找台词
地址：https://zhaotaici.cn
描述：这是一个收录丰富的找台词网站，主要提供电影、电视剧台词搜索，可按片名、导演等筛选并查看具体台词。

名称：真不卡影院
地址：https://zhenbuka.net
描述：一个在线观看电影、美剧、韩剧、动漫真不卡网站，值得每一个影迷朋友收藏，看片我真不卡，可观看、可下载、找剪辑素材！

名称：soundraw
地址：https://soundraw.io/
描述：soundraw Al生成和修改音乐

名称：mubert
地址：https://mubert.com/
描述：mubert Al生成音乐

名称：endel
地址：https://endel.io/
描述：endel 个性化背景音乐

名称：papercup
地址：https://www.papercup.com/
描述：papercup AI配乐和视频翻译

名称：lalal
地址：https://www.lalal.ai/
描述：lalal 从任意音频中提取人声伴奏

名称：voicemod
地址：https://www.voicemod.net/zh
描述：voicemod 实时变声器

名称：brain
地址：https://www.brain.fm/
描述：brain.fm生成冥想、睡眠、专注

名称：riffusion
地址：https://www.riffusion.com/
描述：riffusion 提示词生成音乐

名称：murf
地址：https://murf.ai/
描述：murf声音克隆转换、文本转音频

前言

时光飞逝，一晃就到2024的年底了，按照我近年来的传统，我要复盘一下今年做过的关于探索收入多样性的事件。包括这一年的工作进展，收获的事项，遇到的各种问题，以及来年计划等，希望能对你有所参考意义。

事件

1. Cocos小游戏《忍者疾风转》开发，并上架到微信和抖音平台。

2. 微信小程序《有用工具盒》开发并上架。

3. 视频号《一曲小北》，主打编曲和吉他，首次开通广告分成计划。

4. QQ小程序《实用工具箱》上架，暂未开通广告分成。

5. 微信公众号《ZERO开发》发布推文23篇，首次小绿书1篇，爆文5篇。

6. 三个QQ短视频账号注册孵化，均已开通广告共享计划。

7. 鸿蒙Next应用开发，暂未上架，发布相关教程3篇，视频1个。

8. 全网粉丝数达20000人，含抖音账号《小北玩游戏》。

9. 微信问一问《ZERO开发》，累计回答40个，推流3w+，粉丝132人。

10. 重新搭建个人博客，加入独立博客联盟，友链，每日UV稳定破零。

收获

技能

1. 工作上的开发语言学习，新增Go语言和鸿蒙Next的ArkTs。

2. 单机游戏的Mod简单制作，游戏解包与封包。

3. Adobe Audition混音制作，用于视频号《一曲小北》更新。

收入

1. 公众号《ZERO开发》广告收益，付费文章1篇支付3人，账号打赏4人。

2. 视频号《北桥苏》、《一曲小北》原创视频，每日广告收益。

3. 微信小游戏、抖音小游戏《忍者疾风转》每日激励广告收益。

4. 微信小程序《有用工具盒》每日开屏广告、信息流广告收益。

5. 其他内容创作平台收益，哔哩哔哩，知乎，今日头条，QQ短视频，大鱼号。

社交

1. 加入副业交流群3个，小游戏、小程序开发交流群2个。

2. 个人运营程序员技术交流群1个，小程序交流QQ群1个。

3. 线下交友活动较缺失，2024年属于非常独来独往的一年。

投资

年初我就关闭了自2019年末以来购买的所有基金，也错过了今年10月前后的一次A股大涨时机。转而放到了余额宝和微信零钱通，每天固定几块钱的收益。为什么要这样做，因为关于金融产品的收入方向，我现在并不了解所以持保守态度，以后再慢慢学，重资产投资我没有尝试就不赘述了。

问题

1. 个人产品自然流量普遍偏低

因为以前技术崇拜，而不看重产品本身，导致入局独立开发比较晚，产品思维也跟不上，进一步影响我做出来的小程序，只能算是小应用而非产品。所以我现在才开始学习调研，需求分析，推广营销等等，毕竟独立产品开发是程序员晚期收入很重要的布局之一。

2. 视频创作方向不明确

不管是我的短视频还是中视频账号风格还没定调，因为过去都是用来学习新东西后的记录视频，没有真人出镜和真人发声。平台既不给流量，在观感上也显得不真诚，给人种营销号的感觉，这个只能慢慢摸索方向，之后再尝试出镜和口播。

计划

1. 2025年每周都写日志复盘，博客新增周刊栏目。

2. 注册个人微信服务号，探索新方向，持续内容输出。

3. 直播弹幕小游戏，直播插件开发并上架。

4. 用Unity3D引擎独立开发一个偏大型的单机游戏。

5. Blender、3D Max建模改模学习，Mod制作升级。

6. 持续探索AI大模型个人项目变现，AI应用开发。

7. 加大小红书内容更新力度，完成商单权限开通。

8. 个人资源（代码，创作源文件）变现，网盘拉新。

总结

2024年的我的复盘结论就是 “持续尝试”，告别技术崇拜，但依然相信技术改变世界。二者不矛盾，因为技术服务于业务，建立在价值产出之上，任何优秀的代码结构终将会成为 “屎山”（有点俗）。

好的技术架构值得骄傲与推崇，但也只能延缓逐渐臃肿的进程，世界总是向熵增的方向演进，总是向混乱的方向发展，唯一不变的就是变，多方向尝试，多次推倒重来，就算是草台班子也能找到个方向，最后我也希望2025年的复盘主题是 “持续深耕”。

前言

前段时间，我在微信问一问里回答了一个关于 “一天赚几十块钱副业有哪些？”的问题。主要推荐的是直播小玩法的副业，截至目前收获了官方1万的推流和超5千人的围观。由此我认为，当前开发直播小玩法还是比较小众，竞争小，个人开发者入局应该能躺赚一笔，真的很适合参考以前的回合制游戏。

简介

直播小玩法是抖音里的一种统称，其他平台有叫直播弹幕小游戏，而抖音里的直播小玩法包括两种，弹幕小游戏和互动插件。个人主体开发者申请软著后，符合平台规范都能上架。上架后，只要有主播用了你的开播，就能享受直播间的礼物分成，分成比例见下图。

比例看着确实比较低，但他也有一个很符合被动收益的优势：一经开发，多端部署，多人开播，无需直接面向观众。就是我们开发后，其实是可以发布到多个平台的，已知对个人开发者开发弹幕游戏上架的平台有：

1. 抖音

2. 哔哩哔哩

3. 虎牙

同一平台可以让多个主播同时开播，看似一场直播分百分之八，但如果一天有100个主播，就可以从100个直播间分走百分点的收入。

现状

上架直播小玩法虽然是小众行业，但也同样有二八效应，据业内人士说，弹幕游戏有榜单，如果上架后能冲进前30，那每月被动收入十几W很常见。比如2023年的两款，《兵临城下》这款游戏全平台月流水超过6000万，《星辰无双》日均流水突破150万元。

这些头部爆款多数是开发团队完成的，个人开发者前期不试水，上架后可能就是主播一日游，然后还要承担服务器的费用。当然前面的优势和收益也是很可观的，这里只是在入局前给个预期中和一下，防止后期沉默成本过高。

开发

根据官方开发文档介绍，互动插件和弹幕小游戏都支持单价版开发，也就是无需购买服务器，通过客户端接收推送完成交互。互动插件这里就不详细介绍了，类似直播里的点歌，点击屏幕上一个按钮，下拉出一些歌曲列表，选中后可以发送到直播间，这种的交互性更似小程序，可专门为开课，舞蹈博客定制相应的业务型互动插件。

而弹幕小游戏的开发，主要的是通过接收直播间的弹幕、礼物数据后，在游戏中显示对应的增益效果，比如送出仙女棒触发什么，阵营能提升什么。大部分是大同小异，更多的是主题和效果的设计，哪些更能迎合主播和观众，下面就用服务器+文档API，介绍一下大致的开发过程。

流程

1. 用直播伴侣打开后获取Token请求服务器接口

2. 服务端根据Token获取房间ID并返回到小玩法

3. 服务端将监听的房间数据通过长链接推送到小玩法

4. 小玩法根据礼物、弹幕等数据展示buff效果

5. 时间结束后根据业务数值判断阵营输赢并排名

服务端接口

下面就从官方文档里列出一些服务端业务中需要用的请求接口，详细可见开放平台的小玩法文档的服务端API介绍。

接口调用凭证

access_token 是服务端接口的全局唯一调用凭据，如下面直播信息里的 “X-Token”，任务启动的 “access-token”传递的请求头参数用的都是这个。access_token 的有效期为 2 个小时，需要定时刷新 access_token。

直播信息

主播使用直播伴侣或移动端云启动玩法后，直播伴侣/移动端云启动会传入 token 到玩法中，当玩法获取 token 后，传递给玩法的服务端。玩法服务端通过该接口，使用 token 获取直播间信息，在返回到客户端前，服务端还需要调用 “任务启动”、“礼物置顶”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "data": {
    "ack_cfg": [ // 预留信息，sdk接入使用，开发者不用感知
    ],
    "linker_info": { // 连屏数据预留信息，开发者目前不用感知
        "linker_id": 0,
        "linker_status": 0,
        "master_status": 0
    }，
    "info": {
        "room_id": 7214015683695250235,
        "anchor_open_id": "_000oJIu6APhomK7KIBGqSYm5XYPxCJB_xxx",
        "avatar_url": "https://p11.douyinpic.com/aweme/720x720/aweme-avatar/tos-cn-avt-0015_973c31e8055f78a41d3f7de3def9821d.jpeg?from=3067671334",
        "nick_name": "xxx"
    }
  }
}

任务启动

调用任务启动后，直播间数据才会同步推送给开发者服务器，注意：不同类型的数据需要启动不同的任务单独监听，比如礼物数据单独启动一个，评论数据单独启动一个，见文档的数据开发。

礼物置顶

为什么还要调这个接口，因为置顶的礼物被送出，才会有礼物数据推送（后期会废用不需要这一步），实现时可以在获取房间ID后异步调用。然后直播挂载小玩法后，开发者根据玩法场景自主控制当前场景需要置顶的礼物，前提是置顶的礼物在玩法维度礼物配置中。调用置顶礼物接口的条件：

• 已开通“获取礼物互动数据能力”。
• 置顶的礼物数量不能超过6个，且必须为礼物配置列表中已勾选的礼物。

分页查询推送失败数据

可以用定时任务对已经开播的RoomId请求 api 分页查询推送失败的数据，返回空代表全部推送成功，否则可以根据业务需求记录失败的数据和重新推送到小玩法客户端。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{ 
  "err_no": 0,
  "err_msg": "ok",
  "logid": "20220927122238291",
  "data": {
    "page_num": 1,
    "total_count": 100,
    "data_list": [
      // 当页的数据列表
      {
        "roomid": "12345", // string类型，消息的房间id
        "msg_type": "live_gift", // string类型，表示消息类型
        "payload": "[...]" // string类型， 对应推送协议中的payload字符串，需要unmarshal
      }
    ]
  }
}

其他接口

弹幕数据上报、用户战绩与排行榜看自身业务使用，而小玩法客户端主要就和服务端保持长链接，接收直播间互动数据，以及三个Http业务接口。

• 开启，获取roomId
• 结算，传递比赛结果
• 获取排行榜单

写在后面

上面的是官方玩法，其实还有第三方，而且抖音推出抖音小玩法可能也是打不过就加入的策略。因为以前盛行一时的无人直播，像修狗云蹦迪、挤地铁、马保国格斗等，都是别人用技术手段实现弹幕礼物接收实现的小游戏。

因为没有人出境和抓取数据等原因，开播的房间经常被封，虽然被封，但收益不错也屡禁不止，所以抖音干脆开放小玩法模块（个人猜想），更大程度实现主播、开发者、观众双收。我已知第三方平台有：咩播、阿比整蛊、青播，有机会我再聊聊关于这些平台软件的内部概况。

前言

我的QQ小程序在2024年8月就已经审核通过，上架后却一直无法被搜索到。打开后，再在QQ上下拉查看 “最近使用”，发现他出现一下又马上消失。

上线是按正常流程走的，开发、备案、审核，也没有任何违规，后台也没收到说被封或异常的信息。

排查

难道是我名字（实用工具箱）问题，当我要去后台修改名字时，提示要重新备案。不过也让我想起之前我搜索的时候，别人也有用这名字，所以根本不是这个原因。

会不会是后台哪里设置了，第一次玩QQ小程序后台，搞不好一开始的时候我乱点了什么。最后找啊找，终于在 “关联设置” 中找到了问题所在。

解决

在QQ后台的设置下的 “关联设置” 里 “QQ频道” 有一个 “仅允许在机器人服务中使用”，这一项给出的解释是 “打开后，QQ小程序推荐页将不会展示此小程序”，没错，我勾选了。

尴不尴尬，去掉后什么无法被搜索，什么在最近使用框里马上消失的问题，全部解决。所以我之前刚上架时没有自然流量也是因为这个，那我才放开小程序推荐，官方会不会就给推了啊，这个只能看后面几天的情况才能知道，但现在的我还是急需流量。

找流量

为什么着急找流量？因为QQ小程序的流量主开通不同于微信小程序，他的要求更高，必须连续7天内，每天的UV不能低于100。

虽然700UV也不多，但他不是累积的，过了7天没达量，前面的UV总数作废。在不清楚明天有没有自然流量的情况，我决定找人友链，就是我们在自己的小程序里互相跳转。

友链之路

小程序友链，也就是小程序跳小程序，由于我的没有做后台管理，界面展示是写死的，加这个要改两个地方，一个是配置，一个是添加点击跳转事件。

配置，只需在app.json中添加

1
2
3

"navigateToMiniProgramAppIdList": [
    "appId"
  ]

添加点击跳转事件

1
2
3
4
5

qq.navigateToMiniProgram({
    appId: '1112309851',
    success(res) {
        // 跳转成功
    }

写在后面

其实平台刚上线时，好像是19年还是18年，个人开发者只要一上架自己的小程序就能开通流量主。现在我的心态，借张伟名言：机会像雨点般打来, 而我却一一闪过。

不过QQ小程序的应用场景还是很多元化的，群和频道，机器人里都能绑定，外加互助一下其实也很快，所以，大家要和我一起吗？我建了一个扣扣群，或加我 QQ：2652364582，互帮互助。

个人主体的 QQ 小程序，到底是哪些人开通了流量主在玩啊？

从微信端移植并修改了一个工具类的 QQ 小程序，然后备案审核上架后，自然流量没有一点，你说尴不尴尬！

还有一点呢，QQ 小程序开通流量主的条件还是很高的，相比微信小程序。

要求连续 7 天内，每天的访问 UV 都不能低于 100，也就是在一个连续周期内要完成 700UV。

于是，我就去某宝找找有没有做流量主开通的，我先是输入 “QQ 小程序流量主开通”，根本就没有。

然后就只搜小程序流量主开通，清一色微信小程序的，没辙，随便找几家问问有没有能做 QQ 小程序的。

结果就是，根本没人做这玩意的流量主开通业务，不过也意外地知道了他们做一个微信小程序地普遍报价 150 上下，同样也是刷访问，10 天完成 500UV。

最后我就找群找论坛，QQ 小程序互助，也没有，不知道有没有和我一样的，有的话，我建了一个扣扣群，或加我 QQ：2652364582，互帮互助。

前言

最近我们一个二手应用的即时通讯模块马上就用不了了，因为当时对接的是腾讯的IM服务，现在组织里说不想再续费了，功能还得保留。

那就能手写聊天模块了，所有都写得差不多的时候，在聊天记录表格里却整了一出尬尴的事儿。建表时根据消息推送方式，只存储了接收者ID，发送者ID却放在消息包的json中。

但是后面很多时候的查询需要两个ID字段联合，也就是要从json的多层路径中找到发送者ID，并作为条件。于是就有了下面通过虚拟字段解决的方法了。

知识点

1. 多层json路径标量读取
2. 虚拟字段的创建
3. 聊天消息的查询优化

原表结构

1
2
3
4
5
6
7
8
9
10

CREATE TABLE `bqs_chat_message` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT '0' COMMENT '用户ID',
  `data` json DEFAULT NULL,
  `is_get` tinyint(1) DEFAULT '0',
  `delete_time` int(11) DEFAULT '0',
  `create_time` int(11) DEFAULT '0',
  PRIMARY KEY (`id`),
  KEY `user_id` (`user_id`) USING BTREE,
) ENGINE=InnoDB AUTO_INCREMENT=39 DEFAULT CHARSET=utf8mb4;

data字段(Json)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
"type":"message",
"commit_id": 16,
"message":"SUCCESS",
"data":{
"type":"receive",
"id":"1111",
"sender_id":1110,
"self":true,
"time":"2020年06月01日 14:34",
"message":{
"type":"text",     
"content":"好"
},
"group_id":0,
"cache_key":"U1111",
"timestamp":1590993240,
"receiver_id":"1111"
}
}

多层json路径标量读取

JSON_EXTRACT()函数可以使用JSON路径表达式来提取JSON数据中的值，比如下面的查询将返回data字段中data.sender_id路径下的值，也就是发送者ID

1
2

SELECT JSON_EXTRACT(data, '$.data.sender_id') AS sneder_id
FROM bqs_chat_message

虚拟字段创建

1

ALTER TABLE bqs_chat_message ADD COLUMN sender_id INT(11) AS (cast(json_extract(`data`,'$.data.sender_id') as signed),0) VIRTUAL COMMENT '发送者ID';

查询优化

虽然上面的方法已经实现了虚拟字段创建，但如果data字段的json路径下不存在sender_id时。数据库里显示和查询的结果出来都是null，为了让虚拟字段的类型统一为int，我们需要对不规则的json数据做处理。

也就是如果json中没有sender_id，我们就以0为默认值，这里我们可以通过IFNULL和IF等SQL函数处理，但我这里推荐coalesce函数。

COALESCE() 函数允许我们从一系列提供的参数中返回第一个非空（非NULL）的值，这个函数可以接受两个或更多的参数，并逐一检查它们，直到找到一个非空值为止，然后立即返回该值。如果所有的参数都是NULL，那么COALESCE() 函数也会返回NULL。

1

ALTER TABLE bqs_chat_message ADD COLUMN sender_id INT(11) AS (coalesce(cast(json_extract(`data`,'$.data.sender_id') as signed),0)) VIRTUAL COMMENT '发送者ID';

写在后面

以上的三个操作已经完全解决了建表上的缺陷，但是要想让查询变得更快，我们还可以将虚拟字段添加为索引，在查询上就不会圈表检索了。

前言

通过上一篇文章可以看出，要在鸿蒙应用中实现特别炫的特效还是比较复杂。动画固然重要，但如果在赶工期的情况下，大家都会优先业务，那有没有简单快速的方法呢？

有的，也用像 Android 和 iOS 里 WebView 的方式，h5 的特效现在是应有尽有，把他嵌入鸿蒙 Next 应用里就可以，那如何在鸿蒙 Next 中使用 WebView 来实现电子烟花？

实现要点

1. 组件拆解
2. 资源引入
3. 页面路由
4. WebView

开始实践

因为前面的木鱼和现在的烟花都是同一个小工具应用，公用组件的拆分、页面跳转和资源的引入全有涉及，所以就连同 WebView 一起总结一下。

组件拆解

在 ArkUI 中，UI 显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。这里我们将所有页面的导航拆分成一个公用组件，并定义为 HdNav.ets。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

import { router } from '@kit.ArkUI'

@Component
export struct HdNav {
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  title: string = 'hello world'
  @Prop
  hasBorder: boolean = false
  @Prop
  leftIcon: ResourceStr = $r('app.media.ic_common_back')
  @Prop
  rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
  @Prop
  showRightIcon: boolean = true
  @Prop
  iconColor: ResourceStr = $r('app.color.black')
  @Prop
  titleColor: string = '#131313'
  @BuilderParam
  menuBuilder: () => void = this.defaultMenu

  @Builder
  defaultMenu() {

  }

  build() {
    Row({ space: 16 }) {
      Image(this.leftIcon)
        .size({ width: 24, height: 24 })
        .onClick(() => router.back())
        .fillColor(this.iconColor)
      Row() {
        if (this.title) {
          Text(this.title)
            .fontWeight(600)
            .fontColor(this.titleColor)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(18)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
      }
      .height(56)
      .layoutWeight(1)

      if (this.showRightIcon) {
        Image(this.rightIcon)
          .size({ width: 24, height: 24 })
          .objectFit(ImageFit.Contain)
          .bindMenu(this.menuBuilder)
      } else {
        Blank()
          .width(24)
      }
    }

    .padding({ left: 16, right: 16, top: this.topHeight })
    .height(56 + this.topHeight)
    .width('100%')
    .border({
      width: { bottom: this.hasBorder ? $r('app.float.common_border_width') : 0 },
      color: $r('app.color.common_gray_bg')
    })
  }
}

资源引入

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

• 应用资源：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。
• 系统资源：开发者直接使用系统预置的资源定义。

1
2
3
4
5
6
7
8

# 引入resouces/base/media下的home_selected的图片
$r('app.media.home_selected')

# 导入resources/rawfile下的index.html文件
$rawfile("index.html")

# 获取resources/rawfile下的audio.mp3音频
await getContext(this).resourceManager.getRawFd("audio.mp3")

页面路由

页面路由 router 根据页面的 uri 找到目标页面，从而实现跳转。以最基础的两个页面之间的跳转为例，具体实现步骤如下：

1. 在 “Project“窗口，打开 src> main >ets，右键点击 pages 文件夹，创建一个页面。
2. 在 resources/base/profile 下的 main_pages.json，新建一个 pages 中创建页面的文件名（注意大小写）。
3. 调用 router.push () 路由到指定页面。
4. 调用 router.back () 回到首页。

WebView

页面加载是 Web 组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载 HTML 格式的富文本数据。

页面加载过程中，若涉及网络资源获取，需要配置 ohos.permission.INTERNET 网络访问权限，下面以本地静态文件的方法举例。

• 将资源文件放置在应用的 resources/rawfile 目录下。

• 鸿蒙 Next 应用代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import web_webview from '@ohos.web.webview';
import { HdNav } from '@mygames/basic';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      HdNav({ title: '看烟花秀', showRightIcon: false, iconColor: $r('app.color.black') })

      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadUrl($rawfile("index.html"));

          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }

        })
      // 组件创建时，加载www.example.com
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

• 烟花代码

写在后面

到这里鸿蒙 Next 应用实战暂告一段落了。但是鸿蒙系统提供了开箱即用的原生 AI 能力，更方便了我们开发者实现应用的快速智能化，所以，鸿蒙 Next 智能应用实战，待续～

前言

正所谓：Hello Word 是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈，那如何让学习鸿蒙 Next 更有成就感呢？下面就演示一下从零开发一个鸿蒙 Next 版的电子木鱼，主打就是一个抽象！

实现要点

1. 页面布局
2. 木鱼点击
3. 木鱼音效
4. 动画特效
5. 自定义弹窗

开始实践

页面布局

ArkTS 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力，配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成 UI 开发的主体。我们下面要完成的主要是一个木鱼和设置按钮、自动按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

build() {

Column() {
  HdNav({ title: '电子木鱼', showRightIcon: false, iconColor: $r('app.color.white'), titleColor: '#ffffff' })

  Row() {
Text(this.woodenType[this.type] + '：'+ this.score).fontSize(22).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)
  }.width("100%").height("8%")

  Row() {
Image($r('app.media.setting')).width(25).height(25).margin(16).onClick(() => {
  if (this.dialogController != null) {
this.dialogController.open()
  }
})
  }.width('100%')

  Row() {
Image($r('app.media.foreground')).width(40).height(40).margin({left:8,top:5})
  }.width('100%')
  .onClick(() => {
this.handlePopup = !this.handlePopup
  })
  .bindPopup(this.handlePopup, {
message: '数据统计功能，正在完善中~',
  })

  Row() {
if (this.isPresent) {
  Text(this.woodenType[this.type] + ': ' + this.woodenFishNum).fontSize(16).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)
.transition(this.effect)
}
  }.width('100%').height('25%')
  .alignItems(VerticalAlign.Top)

  Row() {
Image($r('app.media.muyu'))
  .width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1)
  .height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)
  }
  .width('100%')
  .height('25%')
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.Center)

  Row() {
Toggle({ type: ToggleType.Switch })
  .onChange((isOn: boolean) => {
if(isOn) {
  promptAction.showToast({ message: 'auto is on.' })
} else {
  promptAction.showToast({ message: 'auto is off.' })
}
  })

Text('自动' + this.woodenType[this.type]).fontSize(18).fontColor('#ffffff').height(40).margin({left: 10})

  }.width('100%').height('10%').justifyContent(FlexAlign.Center)

}
.height("100%")
.backgroundColor('rgba(0, 0, 0, 1.00)')

}

木鱼点击

木鱼是一张图片，也就是给该图绑定一个点击事件，点击一次有三个动作需要执行：

• 木鱼有放大的效果
• 有类似功德文字的飘动
• 功德数值的累加

而点击的时候要看到实时的效果，所以可以声明三个状态，通过 State 的修改，从而驱动 UI 更新，以下的 animateTo 是给域名的放大添加的一个平滑效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 积分
@State score: number = 0
// 积分文字
@State isPresent: boolean = false
// 木鱼是否放大
@State isZoomed: boolean = false


// 木鱼UI
Image($r('app.media.muyu'))
.width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1)
.height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)
.onClick((event) => {
animateTo({ curve: curves.springMotion() }, () => {
  this.isZoomed = !this.isZoomed;

  if (this.isZoomed == true) {
this.isPresent = true;
this.score += this.woodenFishNum;
this.onClickPlay();
  }
})

// 定时缩小/定时文字消失
setTimeout(() => {this.isZoomed = false;}, 50);
setTimeout(() => {this.isPresent = false}, 600);
})

木鱼音效

木鱼音效是点击时的咚咚的声音，这里就要使用到 HarmonyOS Next 的音频服务。这里需要注意一点，项目运行预览无法播放，一定要模拟器或真机才可以调试音频的播放效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 销毁音效工具
  onClickDestroy= ()=>{
    AudioMgr.Ins().destroy();
    console.log('audio', 'destroy');
  }

  // 初始化音效工具
  onClickInit = ()=>{
    AudioMgr.Ins().init();
    console.log('audio', 'init');
  }

  // 播放指定音效
  onClickPlay = ()=>{
    AudioMgr.Ins().play();
    console.log('audio', 'playing');
  }

动画特效

这里的动画效果主要是点击木鱼，从下网上飘出一个文字然后消失的特效。在鸿蒙中可以通过 TransitionEffect 方法添加效果，首先创建特效，然后再文字上挂载。

1
2
3
4
5
6
7
8
9

// 上移入场特效
  private effect: object =
    TransitionEffect.OPACITY
      // 初始正常大小// 假设动画持续时间为500ms
      .combine(TransitionEffect.scale({ x: 1, y: 1 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 0 }))
       // 向上平移150单位// 与上一步同时开始
      .combine(TransitionEffect.translate({ x: 0, y: 400 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 10000, delay: 50 }))
       // 淡出至完全透明// 在平移结束后开始淡出
      .combine(TransitionEffect.opacity(0).animation({ curve: curves.springMotion(0.6, 1.2), duration: 1000, delay: 0 }));

自定义弹窗

经过前面布局，事件绑定，音效播放，一个简单的电子木鱼其实已经完成了。但是为了增添趣味和后期扩展，这里再加一个设置功能，通过按钮打开配置项弹窗，设置包括：

• 类型选项 (功德、财运、桃花运等)
• 音效选项 (各种解压的音效素材)
• 皮肤管理 (木鱼的 UI 界面设置)
• 数值修改 (对展示的累加数值做任意修改)
• 其他 (是否关闭音效，是否自动点击等)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

// 弹窗层(UI开发-组件-自定义弹窗)
@CustomDialog
struct SettingDialog {
  controller?: CustomDialogController

  // 父子组件双向同步，文档见 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5
  @Link woodenFishType: number

  // 木鱼敲击的数值
  @Link woodenFishNum: number

  build() {
    Column() {

      Row() {
        Text('愿望：').fontSize(17).fontWeight(600)
        Radio({ value: '功德', group: 'word' }).checked(true).onChange((isChecked: boolean) => {
          if(isChecked) {
            this.woodenFishType = 0
          }
        })
        Text('功德').fontSize(15)
        Radio({ value: '财富', group: 'word' }).onChange((isChecked: boolean) => {
          if(isChecked) {
            this.woodenFishType = 1
          }
        })
        Text('财富').fontSize(15)
        Radio({ value: '桃花运', group: 'word' }).onChange((isChecked: boolean) => {
          if(isChecked) {
            this.woodenFishType = 2
          }
        })
        Text('桃花运').fontSize(15)
      }
      .width('100%')
      .margin({bottom: 12})
      .justifyContent(FlexAlign.Start)

      Row() {
        Text('数值：').fontSize(16).fontWeight(600)
        TextInput({text:'1'}).type(InputType.Number).width(180).onChange((value: string) => {
          this.woodenFishNum = parseInt(value)
        })
      }
      .width('100%')
      .margin({bottom: 12})
      .justifyContent(FlexAlign.Start)

      Row() {
        Text('音效：').fontSize(16).fontWeight(600)
        Toggle({ type: ToggleType.Switch })
      }
      .width('100%')
      .margin({bottom: 12})
      .justifyContent(FlexAlign.Start)

      Row() {
        Text('皮肤：').fontSize(16).fontWeight(600)
        Radio({ value: '默认', group: 'skin' }).checked(true)
        Text('木鱼').fontSize(15)
        Radio({ value: '悟空', group: 'skin' })
        Text('黑悟空').fontSize(15)
        Radio({ value: '典韦', group: 'skin' })
        Text('典韦').fontSize(15)
      }
      .width('100%')
      .margin({bottom: 12})
      .justifyContent(FlexAlign.Start)

    }.padding({top: 28, left: 15})

  }
}

这里需要注意的是：父子组件的数据传递。因为自定义弹窗和木鱼是两个不同的组件，而点击弹窗中的比如类型切换或修改的数值，全部要更新到木鱼组件的展示当中。

当然鸿蒙也提供了 @Link 装饰器，用于与其父组件中的数据源共享相同的值，可以结合上面代码和下方截图参考其用法。

写在后面

到这里，一个通用型的鸿蒙 Next 版电子木鱼就完成了。不管是组件交互还是布局都还好，唯一让我觉得不适应的是动画特效。

如果用这种方式实现电子烟花肯定不行，所以下次将换一种方法快速实现烟花秀，以及页面间的跳转，待更新～

前言

作为独立开发者，如果我们错过了传统移动 App，和后起小程序的红利，那万物互联 + AI 的应用开发就得抓住了。

虽然个人上架应用平台难易都差不多，但是鸿蒙生态当前正需要广大开发者参与，一旦上架，相比其他平台，流量扶持力度更大，变现能力也更容易。

所以，我们可以先开发一些应用占个位置，后面再逐渐迭代完善；那么，第一步就先从搭建开发环境开始吧。

鸿蒙 Next 简介

鸿蒙 Next，英文 HarmoneyOS Next，又叫纯血版鸿蒙，2023 年 8 月 4 日开发者预览版，2024 年 6 月正式对外公布。鸿蒙 NEXT 采用了全鸿蒙内核，完成了对 Linux 内核的全面替换，并去掉了安卓开放源代码项目（AOSP）等代码，实现了真正的自主可控，他能支持华为及合作厂商的多种智能终端设备，包括手机、平板、智慧屏等等。

运行环境要求

针对开发 HarmonyOS 应用及元服务，华为基于 IntelliJ IDEA Community 开源版本打造了一个集成开发环境（IDE）——DevEco Studio，能将开发的应用和服务同时运行在 HarmonyOS 和 OpenHarmony 系统上，为保证 DevEco Studio 正常运行，建议您的电脑配置满足如下要求：

• 操作系统：Windows10 64 位，内部版号大于 18363
• 内存：8GB 及以上
• 硬盘：100GB 及以上
• 分辨率：1280*800 像素及以上
• 其他： 开启了 Hyper-V 虚拟化

DevEco Studio

下载

进入 huawei 开发者平台下载，最好找 5.0 以上又不是最新版本就行。还有 DevEco Studio 支持 Windows 和 macOS 系统，但我本人用的是 Windows，所以就以 win 系统演示。

安装

下载完成后，双击下载的 “deveco-studio-xxxx.exe”，进入 DevEco Studio 安装向导。因为 DevEco Studio 提供开箱即用的开发体验，将 HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，几乎无需额外下载配置就能马上跑项目，但是要运行模拟器需要一点配置，比如 Windows 版本要大于 18363。

模拟器设置

DevEco Studio 提供预览、模拟器、真机三种方式查看项目的运行效果，但是给予的测试权限不一。最高的真机，目前需要搭载了鸿蒙 Next 的手机才行，且鸿蒙无法自己升级到 Next，所以折中的方法就是用模拟器。官方现在要求使用模拟器需申请，而且本地电脑开始了虚拟化技术 Hyper-V。

项目运行

DevEco Studio 安装完成后，可以通过运行 Hello World 工程来验证环境设置是否正确。接下来以创建一个支持 Phone 设备的工程为例进行介绍。

项目结构

可能当时为了适应主流开发语言，加上自己新出的 ArkTS 有三种工程类型可供选择，而我就是为 ArkTS 而来，所以以下和后面要做的应用也都是 ArkTS。

• ArkTS 工程目录结构（Stage 模型）
• C++ 工程目录结构（Stage 模型）
• JS 工程目录结构（FA 模型）

项目创建后，结构就是上图，而关于每个目录或文件的用法，就要去官方文档查看 “工程目录结构”，这里就略过进入到简单例子的演示。

第一个 Hello World

创建页面

在 “Project” 窗口，点击 “entry > src > main > ets > pages”，打开 “Index.ets” 文件，进行页面的编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

预览效果

在编辑窗口右上角的侧边工具栏，点击 Previewer，打开预览器。

写在后面

如果你有应用端相关的开发经验，上手鸿蒙应用还是比较容易的。而如果你像我一样是做后端的，或很少接触前端，那也可以跟着我一起代码实战，简单实现一个鸿蒙 Next 的电子木鱼和电子烟花秀，文章待更新～

前言

前面也说了，通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示，但是要零成本得完成将用户信息存储下来，并实现数据交互呢？

我开始是想用云文档，种种原因，我还是希望有个自己能二次修改的后台，于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法，但都是 2024 年以前的文章，有些平台最新的修改，和自己踩到的坑而别人没提到的细节，我还是想记录一下。

坑点

1. 域名已经解析成功了，但是一直无法访问 Vercel 上的页面。
2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突，和一些配置问题。
3. 代码提交推送后，Vercel 没有完成自动部署等等。

准备

• Vercel： 略过详细介绍，暂且把他理解成云服务器，入门配置免费，需要注册登陆。
• Railway： 同样略过详细介绍，暂且把他理解成云数据库，几乎免费，需要注册登陆。
• GitHub： 先创建存放程序的仓库，也几乎完全免费，需要注册登陆。
• Typecho： 博客程序 ，其他语言的像 Flask 也行，开源免费，下载或自行编写。

Vercel 配置

进入 vercel 官网，推荐使用 GitHub 账号登陆，配置主要完成仓库的代码导入，域名解析绑定，项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”，然后选择仓库安装并设置权限，接着是 Configure Project，Congratulations 都可以直接下一步进入到 Production Deployment，可参考下图。

域名解析绑定

进入到 “Production Deployment” 时，我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息，还能看到 Domains 分配的域名，但是该域名被墙无法访问。

点击上面的 “Domains” 按钮（在 Visit 左边），输入即将要解析过来的域名，系统会展示需要用 CNAM 类型被解析的域名，复制该 value 去到自己的域名服务商控制台，添加一条 CNAME 解析记录。

如果说服务商那边解析成功了，并且 Vercel 平台也显示域名验证成功，也就是前面提到的坑点一。这种一般是 DNS 缓存原因，可以换一台电脑或用手机访问测试，如果能就等待一下，直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书，所以后面只需要留意日期就可以，下图我暂时放了一个 index.html 页面，动态程序演示要放到 Railway 后。

Railway 配置

进入 Railway 官网，同样推荐 GitHub 账号登陆，进来后选择 “MySQL” 类型，直接按默认后进入到 production，最主要的是我们需要分配给他的 Host，账号和密码，数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额，需要提前备份数据库。超过限额后没有备份的数据就没了，需要删掉账户重新注册才可以。

打开 Data，选择 “Connect” -> “Public Network”，Connection URL 就是该产品对外的连接 Host，用户密码，端口等信息。只需要复制下来，用于在程序中连接配置，Navicat for MySQL 图形化工具连接失败，我试过了。

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world，和有数据库连接的博客程序，第一步是后端入口文件都不能放在项目的根目录下，放在新建文件夹的 api 中，并添加 vercel.json（用于配置路由和分配内存等信息）。

Python 的 Hello World

新建 vercel.json 文件，和用于打印的 py 文件，最后访问自定义的域名。

1
2
3
4
5

{
    "rewrites": [
        { "source": "/(.*)", "destination": "/api/index" }
    ]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php，而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x，我下面演示的是 vercel-php@0.6.0，所以再部署前需要先将 Node 版本切换为 18.x，如下图。（以下有两种情况的报错都要 node 和 vercel-php 版本相关）

1
2
3
4
5

部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

Typecho 安装

从官网下载源码后，找到 config.inc.php 文件，将数据库的参数修改为 Railway 复制过来的配置。

然后通过 Git 提交代码到仓库，如果发现没有部署成功，可以进入 vercel 平台的 Deployments 查看部署记录，有报错的根据信息修改。

提交并成功部署后，输入自定义域名，并带上 install.php 进行安装，然后用 pdo 方式安装数据库，上面的 railway 参数就再输入一遍。

安装成功后，可以到 Railway 查看到新增的表格，这就表示全部都能正常使用了。

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API，也能搭一些国外工具的镜像，像 npm 之类的。

还有一种是，比如国外有一些很好用还免费的 API，你想用在小程序进行调用，但是在小程序后台填写这些 API 访问域名时无法添加，没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转，小程序请求自己的域名，而部署的程序请求别人的地址，更多玩法待后续更新了……