朋友丢过来一个链接，问我能不能写个接口，输入豆包的分享链接就返回无水印的视频直链。
需求很明确：部署在 PHP 环境里，访问 ?url=分享链接 就吐 JSON 结果。
听起来像是抖音去水印那一套，心想应该不难。

第一阶段：抄作业

先去 GitHub 上找了一圈，发现有个浏览器js插件，正好是类似效果的。直接拉到本地看源码，核心流程大概是这样：

1. 请求 thread 页面的 HTML
2. 从 HTML 里提取 fallback_api 这个接口地址
3. 把这个地址里的参数改成 logo_type=unwatermarked, channel=no, codec_type=8
4. 请求修改后的接口，返回的是一段加密数据
5. 用 AES-128-CBC 解密这段数据，得到真正的视频直链

加密这块研究了半天。

数据体前面 4 个字节是 qAAB 标记头（0xA8 0x00 0x01 0x00），跳过这 4 字节后是密文。

解密用的 key 和 iv 是从 URL 参数里的 key_seed 派生出来的：先 SHA-512 哈希一次，再拼接一个固定盐值做第二次 SHA-512，前 16 字节是 key，后 16 字节是 iv。

盐值是个写死的十六进制字符串。

第一版写好测试，发现 thread 类型的链接完美工作，拿到了无水印直链。

第二阶段：碰壁

正当我以为搞定的时候，朋友又丢来一种新链接：/video-sharing?share_id=xxx&video_id=xxx。和 thread 完全不同，这种链接是豆包内生成 AI 视频后分享出来的。

试了一下，页面完全不包含 fallback_api。不管怎么请求都是空的。
对比了一下两种页面的 HTML 大小：thread 页面大概 70KB 而且包含了完整的 SSR 数据（服务端渲染），video-sharing 页面直接飙到 140KB，全是 SPA 壳子，真正的数据得靠 JS 动态加载。

尝试过的路子

chain/single 接口：给 share_id 请求 /aweme/v2/chain/single，返回的是一个 HTML 登录页。这条路不通。

get_play_info 接口：POST /samantha/media/get_play_info，这个能通，返回了视频的分辨率、时长、封面这些元数据。但 fallback_api 字段是空的。

用 share_id 当 thread ID：试试请求 /thread/{share_id}，确实返回了 70KB 的 HTML，里面也有 _ROUTER_DATA，但 fallback_api 依然不存在。而且 SSR 数据里显示的是”会话过期，请重新登录”。

get_video_share_info：POST 请求 /creativity/share/get_video_share_info，这个是后来发现的。能返回视频的 prompt（生成提示词）、用户信息、以及一个带水印的播放链接。

浏览器扩展插件的启示

为了搞清楚别人到底是怎么做的，又去下了一个浏览器扩展的完整源码分析。

它用了 Chrome 的 debugger API，在用户打开豆包聊天页面的时候，拦截 doubao.com/im/chain/single 这个接口的响应。这个接口返回的数据里确实包含了 fallback_api。

但问题在于：

• 这个接口需要 protobuf 编码的请求体
• 需要用户登录后的 Cookie
• 而且请求格式是豆包聊天服务的私有协议

换言之，在服务端 PHP 里根本无法复刻。这条路是浏览器专属的，必须用户已经登录了豆包才行。

第三阶段：认命和取舍

经过一轮轮的测试，基本把豆包视频的解析边界摸清楚了：

最终的结论是：thread 类型的公开分享链接可以做到无水印直链解析；video-sharing 类型在不登录的情况下，只能拿到带水印的视频链接和元数据（或许也能拿到无水印的链接，只是我还没研究透）。

最终的 PHP 实现

整合下来，处理流程分成两条线：

thread 链接：

1. GET 请求页面 HTML
2. 正则提取 video_id 和 fallback_api URL
3. 修改 fallback_api 参数（去水印标识）
4. 请求修改后的接口获取加密数据
5. 提取 key_seed，派生 AES key/iv，解密得到无水印直链

video-sharing 链接：

1. POST 请求 get_video_share_info 获取 share 元数据（prompt、用户名）
2. POST 请求 get_play_info 获取视频详情（分辨率、时长、封面）
3. 返回带水印的直链 + 元数据，附加说明告知需要登录才能去水印

收尾

整个研究过程大概花了一个晚上，大部分时间花在试各种 API 端点上。倒是搞清楚了一件事：豆包对视频分享的权限控制分得很细。thread 是对话分享方式，数据都打在页面里；video-sharing 是直接分享视频，把敏感数据藏到了后面。

如果之后有兴趣搞更完整的方案，但现在暂时不折腾了。

今天下午想捣鼓一下华为的鸿蒙应用，写一个我的“好事录”应用，结果卡在了第一步——DevEco Studio死活登录不上去，太尴尬了- -!!。

遇到的坑

点登录按钮，开发工具自动打开浏览器，输入华为账号密码登录账号后，自动跳转到华为账号授权页，一切正常。我点击同意授权，然后浏览器跳转到：

http://localhost:10101/callback

接着就看到一行大字：“无法访问此网站，localhost的响应时间过长”。

然后，开始检查网络，检查代理，搜索引擎上搜索有没有网友有相关的问题。

结果，方法好像都不太管用，就连官方文档中的常见问题中也没有，心态有点崩。

尝试的过程

第一次尝试：关代理

我平时会开着Clash，想着是不是代理搞的鬼。就去 File > Settings > HTTP Proxy 看了一眼，果然配了代理，但是并未启用。

先把代理改成 No proxy，重启IDE，再试一次——还是不行。

第二次尝试：找端口

上网搜了一下，发现10101这个端口是DevEco Studio用来接收登录回调的。可能是被别的程序占用了。

打开命令行（Win+R输入cmd），敲：

1

netstat -ano | findstr :10101

果然返回了一行，最后有个进程ID（比如3809）。说明端口被占用了。

直接干掉它：

1

taskkill /PID 12345 /F

结果被干掉的是 DevEco Studio IDE 自己，哈哈哈哈哈我差点绷不住了。重启IDE，再登录——还是不行。

第三次尝试：防火墙

想着会不会是防火墙把端口拦了。去Windows Defender防火墙那里，新建了一个入站规则：

• 端口：10101
• 协议：TCP
• 动作：允许连接

重启，再试——终于成了。

总结

如果你也遇到这个问题，按这个顺序排查：

1. 检查代理：Settings > HTTP Proxy，没代理就选No proxy
2. 检查端口占用：netstat -ano | findstr :10101，有结果就杀掉
3. 检查防火墙：新建入站规则，放行10101端口

哪个方法管用了，记得记下来，下次遇到能省不少时间。

么么哒~~

最近搞了个微信小程序，折腾了一个多星期才过审。过程中踩了不少坑，尤其是个人资质这块，简直让人想砸电脑。今天就和大家聊聊我这段经历，希望能给同样在做小程序的个人开发者一点帮助。

问题

1

小程序涉及用户自行生成内容（文字、图片、音／) 的记录、分享，属社交﹣笔记范畴，为个人主体小程序未开放类目。

理想很丰满，现实很骨感

我的小程序功能其实挺简单的，就是一个节日头像制作分享类工具。用户可以自己写点文字、拍张照片、使用小程序预制的贴纸装饰后保存头像图片，在小程序里记录下来，也可以分享给朋友看看或者这只为自己的社交头像。我觉得这就是个很普通的工具，没啥复杂的地方。

提交审核的时候我还挺自信的，觉得这种应用肯定能过。结果第二天收到审核反馈，直接傻眼了。

审核意见写的是：“你的小程序涉及用户自行生成内容（文字、图片、音/视频）的记录、分享，属社交-笔记范畴，为个人主体小程序未开放类目，建议申请企业主体小程序。”

还有一个内容是让接入官方的审核机制，提醒用户的内容敏感违规之类的（这个比较简单对接微信开放平台的api就行了。）

我当时就懵了。我还专门查了个人主体的类目限制，想着这玩意儿不就是个工具吗？怎么就成社交了。

后来我才知道，个人主体的小程序根本做不了社交类功能。微信明确规定，涉及社交、医疗、金融这些类目的，基本不对个人主体开放。尤其是有用户生成内容（也就是UGC）的，审核极其严格。关键是，个人主体你连那个类目都选不了。我这个小程序，用户能自己生成内容，还能分享给别人，确实踩到了红线。

第一次提交，卒。

被拒后的挣扎

收到拒绝后我还不死心，想着把分享功能删掉，单纯让用户自己记录，应该就没问题了吧？毕竟没有分享出去，就不算社交了对吧？

于是我把分享的代码全删了，整个小程序变成了一个纯本地的记录工具，用户写的东西、拍的照片都只保存在自己手机里。重新提交审核的时候我还挺有信心，觉得这下肯定能过了。

结果第二天一看，又被拒了。

这次的理由还是那套说辞，说小程序涉及用户生成内容的记录，属于社交-笔记类，个人主体未开放。

我真的是服了。用户写的文字、拍的照片，这些内容确实是用户自己生成的没错，但记录在自己手机里，不分享不交流，这也能算社交？这跟手机里的备忘录有什么区别？

我去网上搜了一圈，发现我不是一个人。好多个人开发者都遇到过这种问题。有人做了个图片编辑小程序，没有历史作品墙，不能分享编辑结果，结果审核还是被判社交-笔记。还有人做了个感恩日记类的记录工具，审核也说涉及社交-笔记，但开发者急了——说小程序里哪个功能能让别人看到？根本看不到啊。最气人的是，有人前面好几个版本都过了，就改了一点东西再提审就被拒了。还有开发者在社区发帖吐槽，说多次审核，全符合工具类目规范，内容仅本地存储，审核员却机械套模板驳回，从没实际复核过代码。

第二次提交，卒。

快放弃的时候，奇迹发生了

说实话，第二次被拒后我真的很沮丧。本来都想放弃了，准备后面如果有机会再注册个公司搞企业主体或者说挂靠别人的企业算了。但后来想想，做个个人小玩意儿还得去开公司，也太折腾了吧？我就想它完全在本地使用，用户在手机上的所有操作都不会离开这台设备。

我又翻了下微信的审核规则，发现个人主体其实可以做“工具”类目，包括笔记工具、图片处理工具这些。问题在于审核系统看到有用户输入和生成内容的地方，就会自动打上“社交”标签，不管这些内容到底有没有对外公开。

我干脆一不做二不休，把之前所有和“云端”沾边的代码都删了，全面大改造。

总共干了这几件事：

1. 删除了所有远程数据库相关的代码，原本存储笔记内容的云数据库表直接作废。
2. 把所有数据的增删改查全都换成了wx.setStorageSync和wx.getStorageSync，这样一来数据只存在用户自己的手机里，小程序根本没有外传数据的途径[reference:10]。
3. 把分享到朋友圈、分享给好友的API都去掉了，审核的时候再也不怕被查了。
4. 提交审核的时候，在“备注”栏特意写了一句：“本程序为纯本地工具，所有数据仅保存在用户手机本地存储中，无任何内容上传、分享或社交功能。”

提交之后我就不抱太大希望了，想着大不了再被拒就去买服务器、注册企业主体。

然后神奇的事情发生了。就过了一天，站内信提示审核通过，可以发布了。我当时看到消息还以为看错了，仔细看了一遍，确实是【审核通过】。

那一刻，我真的想说一句脏话表达心情。

总结：个人开发者怎么避坑

经过这次折腾，我总结了几点经验，给同样是个人开发者的朋友们参考：

1. 先看类目再开发，别等做完才发现做不了。个人主体能做的类目非常有限，工具、教育、生活服务部分、出行、部分教育内容这些是企业专属之外能选的。开发前一定先去微信官方的开放服务类目列表里查清楚，确认你想做的类目个人主体能不能搞。

2. UGC功能是重灾区。但凡涉及用户生成内容的，比如笔记、评论、帖子，审核都会特别严格。如果非要搞，尽量做成纯本地的，没有上传、没有分享，让审核人员挑不出刺来。不过说实话，纯本地数据也随时可能被抽检出问题，想稳妥还是得往工具类上靠。

3. 被动挨打不如主动出击。提交审核之前，用微信开发者工具里内置的“审核模拟”功能提前走一遍，能发现大部分问题提前改好。

4. 提交备注要写清楚。在提交审核的时候，务必要在“备注”栏里写清楚你的功能边界。像我写的“纯本地、无分享”就很有用，至少给审核人员留了个参考。审核人员也联系不到你，主动说明情况能少很多麻烦。

5. 做好多次提交的准备。小程序审核时间一般是1到7个工作日，个人小程序一年有三次加急审核的机会。一次不过很正常，改完再交就行，心态放平最重要。有时候一次审核过了也别高兴太早，后面更新版本指不定又给你打回来，说变就变。

6. 调整心态。虽然有点玄学，但个人开发者本来就是夹缝中求生存。我这次能过，可能确实有运气的成分在里面。但换个角度想，审核机制确实也有边界模糊的地方[reference:18]。不管怎么说，希望还在审核路上挣扎的朋友们都能尽快通过！

希望这篇文章经历对大家有所帮助，就这样，么么哒~

前几天一个朋友问我，能不能让公众号自动回复用户发的抖音链接，把视频或者图集解析出来。我看了看微信后台的自动回复，只能匹配固定的关键词，搞不定这种动态链接api接口的方式。想了想，干脆自己动手写一个。

考虑到成本，我不想买服务器。Vercel 的免费额度对于这种小场景足够用了，而且域名不用备案，只要自己有域名解析过去就行。整个过程折腾了差不多两天，踩了不少坑，记录下来当个笔记。

整体思路

微信公众号收到用户消息后，会向配置的服务器地址推送一条 XML 格式的请求。我们要做的就是：

1. 验证消息确实来自微信（验证签名）
2. 解析用户消息内容，提取其中的抖音分享链接
3. 调用一个现成的解析接口，拿到视频或图片信息
4. 按照微信要求的 XML 格式回复给用户

听起来不复杂，但细节很多。

第一步：准备 Vercel 项目

注册 Vercel 并登录，用 GitHub 账号授权。新建一个项目，关联一个仓库。我直接在项目根目录下建了 api 文件夹，里面放一个 wx.js 文件。

Vercel 的约定：api/xxx.js 会自动映射成 /api/xxx 路由。后面微信后台填的 URL 就是 https://你的域名/api/wx。

第二步：写处理代码

我从开源项目 aiwechat-vercel 得到启发，但根据自己的需求大幅修改了。核心逻辑是：

• 接收微信 POST 来的 XML
• 提取 Content 字段
• 用正则匹配抖音链接（v.douyin.com 或 iesdouyin.com）
• 请求 http://api.hzv5.cn/dysp.php?url=... 解析
• 把解析结果拼成文本，包装成 XML 回复

踩的第一个坑：Vercel 的 req.body 默认是 Buffer，不是字符串，需要手动转。而且微信的 XML 里用了 CDATA，解析时要注意换行和空格。我一开始用正则死活匹配不到内容，后来写了一个简单的 extractTag 函数，同时支持普通标签和 CDATA。

1
2
3
4
5
6
7
8

function extractTag(xml, tag) {
  const cdataRegex = new RegExp(`<${tag}><\\!\\[CDATA\\[([\\s\\S]*?)\\]\\]></${tag}>`);
  let match = xml.match(cdataRegex);
  if (match) return match[1];
  const textRegex = new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`);
  match = xml.match(textRegex);
  return match ? match[1].trim() : '';
}

第三步：配置环境变量

微信验证需要一个 Token，自己随便设一个字符串。在 Vercel 项目里，进入 Settings -> Environment Variables，添加 WX_TOKEN，值就是你自己定的那个。

注意：不要被那个“Create Pre-production Environment”误导了，那东西不是用来添加环境变量的。我一开始也在那上面浪费了不少时间。

添加完变量后必须 Redeploy，否则不生效。

第四步：配置微信公众号

登录公众平台，进入“设置与开发” -> “基本配置” -> “服务器配置”。

· URL: https://你的域名/api/wx
· Token: 和上面 WX_TOKEN 保持一致
· 消息加解密方式: 选“明文模式”（省事）

提交后如果 Token 匹配且代码没有问题，就会验证通过。

第五步：各种坑

坑一：收不到消息，日志显示“非文本消息”

我发送了好几条 test，Vercel 日志里却显示“非文本消息，忽略”。排查了很久，发现是 extractTag 没有拿到 MsgType，导致代码认为不是文本消息。

后来在代码里加了很多 console.log，把原始 XML 打印出来，才发现微信发的 XML 里 Content 标签前后有换行，正则没考虑到。改了正则就好了。

坑二：解析出来的链接太长，多图回复失败

抖音图文集的图片链接非常长，一个链接就有两百多个字符。如果图集有七八张图，加上作者、标题、点赞数，总长度很容易超过微信的限制（大概是 2048 字节）。结果是用户那边收不到任何回复，或者看到乱七八糟的“查看图片.0”之类的东西。

解决方案：生成回复前计算字节长度，如果超过限制就动态减少图片数量，直到满足要求，并在末尾提示“仅显示前 N 张，共 M 张”。同时把标题截断到 15 个字符，作者、标题、点赞合并成一行，图片显示为“图1”“图2”这种简短的链接文字，点击即可跳转。这样既节省篇幅又不影响使用。

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

function buildFullReply(data) {
  // 构建头部
  const header = `${author} | ${shortenTitle(title)} | ❤️${like}`;
  // 尝试加入所有图片，超长则逐步减少
  while (currentUrls.length > 0) {
    const testText = lines.concat(currentUrls.map((url, idx) => `<a href="${url}">图${idx+1}</a>`)).join('\n');
    if (Buffer.byteLength(testText, 'utf8') <= MAX_BYTES) {
      replyText = testText;
      break;
    }
    currentUrls.pop();
  }
  // 如果图片被截断，追加提示
  if (currentUrls.length < totalNum) {
    replyText += `\n(仅显示前${currentUrls.length}张，共${totalNum}张)`;
  }
  return replyText;
}

坑三：非抖音消息也会回复提示

一开始的逻辑是：如果用户发的消息不包含抖音链接，就回复“请发送抖音分享链接”。后来觉得这样挺烦的，用户随便说句话都要被怼一下。于是改成：没有抖音链接就直接返回 success，不回复任何内容。静默忽略，体验好多了。

坑四：自定义菜单不见了

启用服务器配置之后，公众号后台的自定义菜单和自动回复会被自动停用。这是微信的设计：开发者模式和后端配置互斥。

本来想通过 API 重新创建菜单，但发现个人未认证的订阅号根本没有调用菜单接口的权限。调用就返回 48001 错误。

折腾了一圈发现没戏。最后我选择不搞菜单了，反正核心的解析功能还能用。如果实在想要菜单，要么暂停服务器配置（但解析功能就没了），要么去微信认证（个人号认证门槛不低，而且花钱）。我选择了接受现实。

坑五：创建菜单接口访问失败，报找不到 node-fetch

后来想单独写一个创建菜单的接口放在 Vercel，访问时 500 错误，日志显示缺少 node-fetch 模块。其实 Vercel 的 Node.js 运行时版本是 18+，已经原生支持 fetch，根本不需要这个依赖。删掉 require(‘node-fetch’) 就好了。

再后来调通之后又遇到 IP 白名单问题，加了白名单又遇到 48001…… 最终还是因为权限问题放弃。个人号就是个人号，认了。

最终稳定版代码

我把最终能用的 api/wx.js 完整贴出来。包含了智能长度控制、无抖音链接不回复、支持视频和图文集解析。

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

const crypto = require('crypto');

const TOKEN = process.env.WX_TOKEN;
const API_URL = 'http://api.hzv5.cn/dysp.php';
const MAX_BYTES = 2000;

function getRawBodyFromReq(req) {
  return new Promise((resolve, reject) => {
    let data = '';
    req.on('data', chunk => { data += chunk; });
    req.on('end', () => { resolve(data); });
    req.on('error', reject);
  });
}

function checkSignature(signature, timestamp, nonce) {
  const arr = [TOKEN, timestamp, nonce].sort();
  const sha1 = crypto.createHash('sha1').update(arr.join('')).digest('hex');
  return sha1 === signature;
}

function extractTag(xml, tag) {
  const cdataRegex = new RegExp(`<${tag}><\\!\\[CDATA\\[([\\s\\S]*?)\\]\\]></${tag}>`);
  let match = xml.match(cdataRegex);
  if (match) return match[1];
  const textRegex = new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`);
  match = xml.match(textRegex);
  return match ? match[1].trim() : '';
}

function extractDouyinLink(text) {
  if (!text) return null;
  const regex = /https?:\/\/(v\.douyin\.com|iesdouyin\.com)\/[a-zA-Z0-9_-]+\/?/;
  const match = text.match(regex);
  return match ? match[0] : null;
}

async function parseDouyin(shareUrl) {
  const url = `${API_URL}?url=${encodeURIComponent(shareUrl)}`;
  const res = await fetch(url, { headers: { 'User-Agent': 'Mozilla/5.0' } });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  if (data.code !== 200) throw new Error(data.msg || '解析失败');
  return data.data;
}

function extractImageUrls(urlField) {
  if (!urlField) return [];
  if (Array.isArray(urlField)) return urlField;
  if (typeof urlField === 'object') return Object.values(urlField);
  return [urlField];
}

function shortenTitle(title, maxLen = 15) {
  if (!title) return '无标题';
  if (title.length <= maxLen) return title;
  return title.substring(0, maxLen) + '…';
}

function buildFullReply(data) {
  const type = data.type;
  const author = data.author || '未知';
  const title = shortenTitle(data.title);
  const like = data.like || 0;
  const header = `${author} | ${title} | ❤️${like}`;
  const lines = [header];

  if (type === '视频') {
    lines.push(`<a href="${data.url}">▶ 观看视频</a>`);
    return lines.join('\n');
  }

  if (type !== '图文') {
    lines.push(`未知类型：${JSON.stringify(data).substring(0, 100)}`);
    return lines.join('\n');
  }

  const allUrls = extractImageUrls(data.url);
  const totalNum = data.num || allUrls.length;
  lines.push(`📷 共${totalNum}张图`);

  let currentUrls = [...allUrls];
  let replyText = '';

  while (currentUrls.length > 0) {
    const testLines = [...lines];
    currentUrls.forEach((url, idx) => {
      testLines.push(`<a href="${url}">图${idx+1}</a>`);
    });
    const testText = testLines.join('\n');
    const byteLength = Buffer.byteLength(testText, 'utf8');
    if (byteLength <= MAX_BYTES) {
      replyText = testText;
      break;
    } else {
      if (currentUrls.length === 1) {
        replyText = testText;
        break;
      }
      currentUrls.pop();
    }
  }

  if (replyText && currentUrls.length < allUrls.length) {
    replyText += `\n(仅显示前${currentUrls.length}张，共${totalNum}张)`;
  }
  return replyText || (lines.join('\n') + '\n(无法生成回复)');
}

function buildReply(toUser, fromUser, content) {
  const timestamp = Math.floor(Date.now() / 1000);
  return `<xml>
  <ToUserName><![CDATA[${toUser}]]></ToUserName>
  <FromUserName><![CDATA[${fromUser}]]></FromUserName>
  <CreateTime>${timestamp}</CreateTime>
  <MsgType><![CDATA[text]]></MsgType>
  <Content><![CDATA[${content}]]></Content>
</xml>`;
}

module.exports = async (req, res) => {
  if (req.method === 'GET') {
    const { signature, timestamp, nonce, echostr } = req.query;
    if (checkSignature(signature, timestamp, nonce)) {
      return res.status(200).send(echostr);
    }
    return res.status(401).send('Invalid signature');
  }

  if (req.method === 'POST') {
    try {
      const rawXml = await getRawBodyFromReq(req);
      const fromUser = extractTag(rawXml, 'FromUserName');
      const toUser = extractTag(rawXml, 'ToUserName');
      const content = extractTag(rawXml, 'Content');

      if (!content) return res.status(200).send('success');

      const douyinUrl = extractDouyinLink(content);
      if (!douyinUrl) return res.status(200).send('success');

      const parsed = await parseDouyin(douyinUrl);
      const replyText = buildFullReply(parsed);
      const replyXml = buildReply(fromUser, toUser, replyText);
      res.setHeader('Content-Type', 'application/xml');
      return res.status(200).send(replyXml);
    } catch (err) {
      console.error(err);
      return res.status(200).send('success');
    }
  }

  res.status(405).send('Method Not Allowed');
};

总结

用 Vercel 搭公众号机器人，优点是免费、不用折腾服务器、域名免备案。缺点是 Vercel 函数执行时间只有 10 秒，但解析抖音通常一两秒就够了。

另外，个人订阅号的权限限制是个硬伤。如果你只想做一个简单的消息自动回复，那没问题；但如果你想要自定义菜单、客服消息、网页授权等高级功能，最好老老实实搞个认证的服务号，或者用测试号体验。

这次折腾下来，最深的体会是：别小看微信的 XML 解析，也别高估个人号的权限。先把最简单的跑通，再一点点加功能，遇到问题耐心看日志，总能解决的。

希望这篇文章能帮到也想折腾公众号机器人的朋友。如果你也遇到类似的坑，欢迎交流。

如果你像我一样，经常在手机上写文章，却苦于无法在手机端运行 hexo generate 和 hexo deploy（耗电且容易出错），那么这篇教程正是为你准备的。我们将利用 Termux 在手机上完成 Git 操作，再借助 GitHub Actions 在云端自动构建和部署博客——你只需要专注写作，剩下的交给云端。

最终效果：在手机上写完文章 → git push → 等待 2~5 分钟 → 博客自动更新。全程无需在手机运行 Hexo 或 Node.js。

整体思路

采用双仓库隔离方案：

• 私有源码仓库（例如 hexo-blog-source）：存放 Hexo 的源文件（source/、themes/、_config.yml 等）。
• 公开页面仓库（例如 yourname.github.io）：存放 Hexo 生成的静态网站文件，用于 GitHub Pages 展示。

自动化流程：当你向源码仓库推送代码时，GitHub Actions 会自动拉取、安装依赖、生成静态文件，并将 public/ 文件夹推送到页面仓库，最后通过 GitHub Pages 发布。

一、手机端环境搭建（Termux）

1. 安装 Termux 并更新基础包

从 F-Droid 或 Google Play 下载 Termux，打开后执行：

1
2

pkg update && pkg upgrade -y

建议更换国内软件源：termux-change-repo，选择清华或中科大源，速度更快。

2. 安装 Git、OpenSSH 和 Node.js

1
2

pkg install git openssh nodejs -y

3. 配置 Git 用户信息（可选但推荐）

1
2

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub邮箱"

二、GitHub 端准备工作

1. 创建两个仓库

页面仓库（公开）：名称必须为 <你的GitHub用户名>.github.io，例如 myusername.github.io。初始化时不要添加 README 或 .gitignore，保持完全空白。

源码仓库（私有）：名称随意，如 hexo-blog-source。

2. 生成 Personal Access Token（Classic）

这一步是让 GitHub Actions 有权将构建好的文件写入你的页面仓库。

登录 GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token (classic)。

设置：

Note：填写 HEXO_PAGES_TOKEN

Expiration：选择 No expiration

Scopes：勾选 repo（全选即可）

点击生成，立即复制保存生成的 token（只显示一次）。

3. 将 Token 添加为仓库 Secret

进入你的源码仓库（例如 hexo-blog-source）→ Settings → Secrets and variables → Actions → New repository secret。

Name 填写 PAGES_TOKEN，Secret 粘贴刚才的 token，点击 Add secret。

三、编写 GitHub Actions 工作流

1. 在源码仓库中创建 .github/workflows/deploy.yml

在你本地的 Hexo 博客根目录下创建该文件，内容如下（需要替换仓库名）：

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

yaml
name: Build and Deploy Hexo

on:
  push:
    branches:
      - main  # 监听 main 分支

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install hexo-cli
        run: npm install -g hexo-cli

      - name: Install dependencies
        run: npm install

      - name: Generate static files
        run: hexo clean && hexo generate

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PAGES_TOKEN }}
          external_repository: 你的GitHub用户名/你的页面仓库名   # 例如 myusername/myusername.github.io
          publish_branch: main          # 页面仓库的分支，通常是 main
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
注意：external_repository 请替换为你真实的页面仓库，格式为 用户名/仓库名。

2. 配置 .gitignore

确保你的 Hexo 根目录下的 .gitignore 包含以下内容（避免将无关文件上传到源码仓库）：

gitignore
node_modules/
public/
.deploy_git/
db.json
*.log
.DS_Store

四、本地 Hexo 项目初始化与推送

1. 确认主题中没有 .git 子文件夹

进入 themes/你的主题名/ 目录，检查是否存在 .git 文件夹（隐藏）。如果有，必须删除，否则 GitHub 会把主题当作子模块，导致线上博客空白。

1
2

rm -rf themes/你的主题名/.git

2. 将本地项目关联到源码仓库

1
2
3
4
5

cd 你的Hexo博客根目录
git init
git remote add origin https://github.com/你的GitHub用户名/源码仓库名.git
git branch -M main

3. 添加并推送所有源文件

1
2
3
4

git add .
git commit -m "首次提交 Hexo 源码"
git push -u origin main

如果你的网络环境需要代理，请先配置 Git 代理或改用 SSH 方式（见文末“常见问题”）。

五、验证自动化部署

访问你的源码仓库页面，点击 Actions 标签页，应该能看到一个正在运行的工作流（黄色圆点）。

等待约 2~5 分钟，工作流变为绿色 ✅。

访问你的页面仓库对应的 GitHub Pages 地址：https://你的用户名.github.io，如果博客正常显示，恭喜你成功了！

六、日常写作与更新流程

以后你只需要在手机上（或任何电脑）做以下几步：

拉取最新源码（如果多设备协作）：

1
2

git pull

新建或修改文章：在 source/_posts/ 目录下编辑 .md 文件，可用 Termux 中的 nano、vim 或更友好的 Spck Editor。

提交并推送：

1
2
3
4

git add .
git commit -m "更新文章：xxxx"
git push

等待 GitHub Actions 自动构建部署，几分钟后线上博客即更新。

七、常见问题及解决

Q1: Git push 时报错 Failed to connect to 127.0.0.1 port xxx

原因：你的 VPN 或代理软件开了，但 Git 代理端口不一致。
解决：推荐改用 SSH 方式 推送，彻底绕开 HTTP 代理。

生成 SSH 密钥：ssh-keygen -t ed25519 -C "你的邮箱"

将公钥（~/.ssh/id_ed25519.pub）添加到 GitHub → Settings → SSH and GPG keys

修改远程仓库地址：git remote set-url origin git@github.com:用户名/源码仓库名.git

Q2: Actions 运行失败，报错 Docker build failed

原因：某些第三方 action 年久失修。
解决：使用推荐的 peaceiris/actions-gh-pages，如本文提供的 YAML 所示。

Q3: 部署后博客空白，或者没有主题样式

原因：主题文件夹内残留 .git 子文件夹。
解决：删除 themes/你的主题/.git，然后重新 git push。

Q4: 推送时提示 src refspec main does not match any

原因：本地没有任何 commit。
解决：先执行 git add . → git commit -m "xxx"，再 push。

Q5: 页面仓库需要设置分支吗？

在页面仓库的 Settings → Pages → Build and deployment 中，选择 Deploy from a branch，并选择 main 分支（与工作流中的 publish_branch 一致）。

八、总结

通过 Termux + GitHub Actions 的双仓库方案，我们成功实现了手机端零环境依赖的博客更新流程。

你现在可以：随时随地用手机写文章

利用 GitHub 的免费云服务器完成构建

避免手机耗电、性能不足等问题

希望这篇教程对你有所帮助！如果遇到任何问题，欢迎留言交流。

Happy blogging! 🚀

前两天在群里看到朋友分享了一张小程序截图，下面却赫然列着抖音视频图集去水印、豆包图片去水印、真实体感温度、反应速度测试等一长串功能。

我第一反应是：这该不会是P图吧？一个小程序怎么可能同时塞下这么多实用的工具？

直到我自己搜进去试用了一圈，才确信——这真是一个被名字耽误的万能工具箱。今天就把这款 「豆包去水印+趣味游戏」 小程序（搜索“游戏活动汇总”也能找到）安利给所有人。

功能一：抖音/快手/图集一键去水印（积分永久有效）

这是小程序里最硬核的功能。无论你是自媒体从业者，还是单纯想保存喜欢的视频到相册，最烦的就是平台水印。

进入“去水印”页面，界面异常简洁：

• 支持抖音、快手、小红书等主流平台的视频/图文去水印
• 特别优化了抖音图集（就是那种多张图片合成的视频）也能一键去水印
• 解析速度快：粘贴链接后点击“开始解析”，几秒内就能拿到高清无水印视频

更让人惊喜的是积分系统。截图里显示当前积分高达 987,005 —— 这可不是摆设。每次解析会消耗少量积分，而积分的获取方式非常良心：

• 新用户注册即送大量积分
• 每日签到、观看激励视频都可免费领取
• 分享给好友双方都能获得积分（你看到的高额积分，很可能是早期用户福利或者测试余额，正常使用完全够用）

对比市面上一堆按次收费或者强制看广告的解析工具，这个小程序把去水印做成了一项长期福利。

操作演示：

1. 在抖音/快手找到喜欢的视频 → 点击分享 → 复制链接
2. 打开小程序 → 粘贴链接 → 点击“开始解析”
3. 等待2秒 → 保存无水印视频到相册

功能二：趣味游戏合集（摸鱼神器）

工作间隙需要放松一下？这个“游戏活动汇总”板块里藏着好几款让人上瘾的小游戏：

1. 数字记忆挑战

考验短期记忆力。屏幕会快速闪现一组数字，你需要按顺序复现。从3位数开始，逐步升级到10位数以上 —— 玩几局下来，明显感觉自己的数字记忆力提升了。

2. 反应速度测试

经典的“变脸点击”测试。屏幕红色时等待，变绿瞬间点击。小程序会精确记录你的反应时（毫秒级）。我测了三次，最快一次是287ms，评论区有位大神晒出了174ms的记录。

3. 龙成成语接龙

成语接龙的变种玩法。给出一个成语，你需要接上最后一个字的新成语。内置词库丰富，接不上时可以提示。很适合碎片时间学成语，也适合和朋友PK。

4. 色盲测试

石原氏色盲测试图（那些彩色圆点组成的数字）。如果你看不出某些图案，可能需要留意一下自己的辨色能力。这个小测试可以作为简单的健康自查，尤其适合长时间面对屏幕的上班族。

功能三：真实体感温度 & 日常小工具

天气预报里的“温度”和体感温度往往相差很大。这个功能根据你授权的地理位置，结合当地湿度、风速，给出一个更贴近人体真实感受的温度值。

比如夏天32度，湿度80%，体感温度可能显示39度 —— 这时候你就知道涂防晒、多喝水了。

另外截图里还出现了暖暖时装秀（猜测是换装小游戏或穿搭推荐）和豆包图片去水印（图片去水印专用入口），进一步拓宽了工具箱的边界。

到底怎么找到它？

由于小程序名称有点特殊，我直接给出两个关键词，在微信首页下拉搜索即可：

• 关键词一：逗宝去水印
• 关键词二：时装秀逗宝去水印
• 其他方式：直接扫下方的小程序码进入
  

或者让朋友从聊天窗口分享给你，点一下就能直接打开。

适合哪些人？

• 自媒体运营/短视频剪辑：每天需要大量下载素材，去水印功能节省大量时间
• 摸鱼党/学生党：课间或午休玩两局记忆挑战、反应测试，放松大脑
• 爱好分享美图/视频的普通人：看到喜欢的抖音图集，一键存图不发糊
• 喜欢探索实用工具的数码爱好者：这种集成式工具箱，总有你意想不到的功能

写在最后

说实话，我一开始对这类“全家桶”小程序是抱有偏见的——总觉得功能多就意味着每个都做不精。但实际体验下来，去水印的成功率和速度不输专门的小程序，小游戏的趣味性也足够。

何况它完全免费（积分够用到天荒地老），没有乱七八糟的订阅套路。如果你也觉得原生保存视频带水印很烦，或者平时想找个简单的小游戏打发时间，不妨去微信搜一下它。

说不定哪天你用它的体感温度查了一下，发现体感比预报高5度，果断带上了伞——这就是一个好工具存在的意义。

📌 小提醒：去水印功能仅限个人收藏或合理使用，请勿用于商业盗搬，尊重原创作者版权。

你平时都用哪些小程序工具？欢迎在评论区互相安利～

为了让 Hexo 这个静态博客变得更有“灵气”，我动手搭建了自己的 API 服务 —— api.hzv5.cn。它现在已经集成超过 27 种实用的免费接口[reference:1]，从媒体解析到 AI 工具，让我的博客能实时调用各种动态数据。上一次收集整理和自制的api接口获得很多人的喜爱，那么，今天就把这个自制的“工具箱”第二弹分享出来，并手把手教大家如何把它接入到 Hexo 主题中，或许运用到自己的一些项目中。

API接口：概览与分类

api.hzv5.cn 是一个完全免费、无需注册的接口站，所有接口都可以直接在浏览器或代码中调用。目前提供的接口主要分为以下几类：

1. 智能工具 (AI & Utility)

• 艺名生成器 (https://api.hzv5.cn/artname.php): 根据你的姓名或文本，智能生成 1-5 个中文或英文艺名并附带解释。
• 答案之书 (https://api.hzv5.cn/answer.php): 获取随机经典语录，用于解惑或娱乐。
• 体感温度计算 (https://api.hzv5.cn/feel.php): 基于温湿度等数据，计算体感温度并提供生活建议。
• 随机评论生成 (https://api.hzv5.cn/random_comment.php): 获取预设的随机评论内容，可以当作网站的填充语。
• 敏感词检测与过滤 (https://api.hzv5.cn/mg.php): 支持多种检测模式，可对文本进行脱敏、替换或分类统计。

2. 主流平台解析

• 抖音解析 (https://api.hzv5.cn/dyzb.php):
  • 视频/图文: 输入抖音链接，解析视频、图集或实况内容，提取无水印素材与作者信息。
  • 主页作品: 获取指定用户主页的所有作品列表。
  • 直播: 查询直播间信息与实时流地址。
• 豆包解析 (https://api.hzv5.cn/doubao.php):
  • 视频去水印: 解析豆包视频的分享链接，提取无水印地址。
  • 图片去水印: 解析分享链接，获取对话中的无水印图片。
• 蓝奏云直链解析 (https://api.hzv5.cn/lanzou.php): 将蓝奏云分享链接转为文件直链。

3. 数据查询服务

• IP 归属地查询 (https://api.hzv5.cn/ip_lookup.php): 查询 IPv4 地址的地理位置[reference:13]。
• 百科查询 (https://api.hzv5.cn/bk.php): 获取词条的简要摘要（纯文本）。
• 历史上的今天 (https://api.hzv5.cn/history.php): 获取指定日期发生的大事记。
• 快递查询 (https://api.hzv5.cn/kd_protect.php): 根据单号查询物流信息。
• QQ 信息获取 (https://api.hzv5.cn/qqnote.php): 查询 QQ 号的昵称与头像。
• 实时金价 (https://api.hzv5.cn/gold_price.php): 获取国际现货黄金实时价格。
• 天气查询 (https://api.hzv5.cn/weather.php): 根据城市获取实时天气。

4. 实用小工具

• UA 设备识别 (https://api.hzv5.cn/ua.php): 解析 UA 字符串，返回设备、OS 和浏览器信息。
• 成语接龙 (https://api.hzv5.cn/idiom_jielong.php): 自定义模式和长度进行成语接龙[reference:21]。
• 文本加密 (https://api.hzv5.cn/textencryption.php): 使用专属密钥加密文本。
• 随机数据：颜色(https://api.hzv5.cn/ys.php)[reference:23]、密码(/randomcode.php)。
• 二维码：生成(https://api.hzv5.cn/qr.php)与解析(/qr.php)。
• 折扣凑单计算 (https://api.hzv5.cn/zhekou.php): 根据满减规则计算最优凑单方案。
• Zepp 步数刷步 (https://api.hzv5.cn/zepp.php): 通过 Web 端 API 提交步数。

在 Hexo 主题中集成

嵌入方法很简单，只要找到主题里合适的 .ejs 或 .pug 模板文件，添加 fetch 代码即可。

实用场景示例

1. 在侧边栏显示“答案之书”

在 layout/_partial/sidebar.ejs 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="side-sentence">
    <p id="api-text">加载中…</p>
</div>
<script>
    fetch('https://api.hzv5.cn/answer.php?format=json')
        .then(res => res.json())
        .then(data => {
            document.getElementById('api-text').innerText = data.data;
        })
        .catch(() => {
            document.getElementById('api-text').innerText = '顺其自然';
        });
</script>

2. 在页脚显示一句随机的搞笑评论

在 layout/_partial/footer.ejs 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="random-comment" style="margin-top: 10px; font-size: 12px; text-align: center;">✨ 加载中...</div>
<script>
    fetch('https://api.hzv5.cn/random_comment.php?format=json&count=1')
        .then(res => res.json())
        .then(data => {
            if(data.code === 0) {
                document.getElementById('random-comment').innerHTML = `💬 ${data.data}`;
            }
        })
        .catch(() => {
            document.getElementById('random-comment').innerHTML = '💬 代码如诗，博客如画';
        });
</script>

3. 创建“今日运势”等创意模块

用户访问时通过 answer.php 或 artname.php 获取随机内容，增加互动趣味。

使用须知

免费服务并不意味着可以无节制使用，所有调用都是公开透明的，请合理调用、请勿滥用。建议在请求时设置超时处理，并做好请求失败的容错，以免影响页面整体加载。

功能扩展

除了增强 Hexo 博客，这些接口还能用于：

· 微信机器人：快速接入视频解析等功能。
· 自动化脚本：定期获取金价或天气数据。
· 移动应用：将 api.hzv5.cn 作为小工具的后端。

总结

未来我会根据大家的需求，继续增加更多有趣、实用的接口。

如果在使用中遇到任何问题，或有新的接口需求，欢迎随时交流。

原生小程序导航栏虽然开箱即用，但在实际开发中常常遇到以下痛点：

• 设计风格受限：无法自由定制背景、字体颜色、高度，难以融入品牌设计
• 扩展能力弱：无法在导航栏区域增加搜索框、自定义按钮、动态效果等
• 无法实现沉浸式：标题栏与状态栏分离感强，缺少整体感
• 屏幕适配难：不同机型（刘海屏、挖孔屏、动态岛）的高度表现不一致

因此，自定义导航栏成为许多商业项目和小程序框架的标配。本文将手把手教你实现一套适配所有主流机型、易扩展、性能优良的自定义导航栏组件。

基础配置：开启自定义模式

在 app.json 中将 navigationStyle 设置为 custom：

1
2
3
4
5
6
7
8

{
  "window": {
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black"  // 仅对页面内文本颜色有影响，导航栏已隐藏
  }
}

💡 小贴士：也可以单独为某个页面配置，在页面目录的 .json 文件中设置相同字段即可。

配置完成后，小程序所有页面将不再渲染原生导航栏，状态栏区域完全暴露，需要我们自己实现导航UI和内容区域的避让。

核心技术：动态获取设备信息

实现完美适配的关键在于准确获取两个高度：

1. 状态栏高度 (statusBarHeight)
2. 胶囊按钮位置信息 (menuButtonBoundingClientRect)

获取关键数据

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

// 在 app.js 或页面/组件的 onLoad/attached 中执行
const systemInfo = wx.getSystemInfoSync();
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

const { statusBarHeight } = systemInfo;
const { top, height } = menuButtonInfo;

// 计算导航栏内容区域高度（通常等于 胶囊距顶间距*2 + 胶囊高度 ）
// 间距 = 胶囊顶部 - 状态栏高度
const gap = top - statusBarHeight;
const navContentHeight = gap * 2 + height;

// 导航栏总高度 = 状态栏高度 + 内容高度
const navTotalHeight = statusBarHeight + navContentHeight;

⚠️ 注意：getMenuButtonBoundingClientRect 必须在页面渲染完成后调用才能获取正确值，建议放在 onReady 或组件的 ready 生命周期中。

封装导航栏组件 (NavBar)

为了提高复用性，我们将导航栏封装成自定义组件。

1. 组件代码结构

1
2
3
4
5

components/nav-bar/
├── index.js
├── index.json
├── index.wxml
└── index.wxss

2. index.js 核心逻辑

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

Component({
  properties: {
    title: {            // 页面标题
      type: String,
      value: ''
    },
    showBack: {         // 是否显示返回按钮（根据页面栈自动判断时该属性可省略）
      type: Boolean,
      value: true
    },
    backgroundColor: {  // 导航栏背景色
      type: String,
      value: '#ffffff'
    },
    titleColor: {       // 标题颜色
      type: String,
      value: '#000000'
    },
    backIconColor: {    // 返回图标颜色
      type: String,
      value: '#000000'
    }
  },

  data: {
    statusBarHeight: 20,     // 状态栏高度（默认值，防止未获取前布局抖动）
    navContentHeight: 44,    // 导航内容高度（默认值，同原生导航高度）
    navTotalHeight: 64,      // 总高度
    menuButtonWidth: 87      // 胶囊宽度，用于右边留白避让
  },

  lifetimes: {
    attached() {
      this.initNavInfo();
    }
  },

  pageLifetimes: {
    // 如果组件放在页面中且页面可能被隐藏再显示，可监听show重新获取（某些机型旋转屏幕后可能需要）
    show() {
      this.initNavInfo();
    }
  },

  methods: {
    initNavInfo() {
      try {
        const systemInfo = wx.getSystemInfoSync();
        const menuBtn = wx.getMenuButtonBoundingClientRect();
        
        const { statusBarHeight } = systemInfo;
        const { top, height, width } = menuBtn;
        
        // 计算导航栏内容区域高度（保证胶囊垂直居中）
        const gap = top - statusBarHeight;
        const navContentHeight = gap * 2 + height;
        const navTotalHeight = statusBarHeight + navContentHeight;
        
        this.setData({
          statusBarHeight,
          navContentHeight,
          navTotalHeight,
          menuButtonWidth: width
        });
        
        // 通过事件将总高度传递给父页面，方便页面内容区域设置padding-top（非必须，组件内部已有占位view）
        this.triggerEvent('heightChange', { navTotalHeight });
      } catch (e) {
        console.error('获取导航信息失败', e);
        // 降级方案：使用默认值
        this.setData({
          statusBarHeight: 20,
          navContentHeight: 44,
          navTotalHeight: 64
        });
      }
    },

    // 返回按钮点击事件
    handleBack() {
      const pages = getCurrentPages();
      if (pages.length === 1) {
        // 根页面时返回首页或提示
        wx.switchTab({
          url: '/pages/index/index'  // 根据实际首页路径修改
        });
      } else {
        wx.navigateBack({
          delta: 1,
          fail: () => {
            wx.switchTab({ url: '/pages/index/index' });
          }
        });
      }
    },

    // 预留右侧插槽点击事件
    handleRightTap() {
      this.triggerEvent('rightTap');
    }
  }
});

3. index.wxml 结构

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

<!-- 占位view（防止内容被固定导航栏遮挡） -->
<view style="height: {{navTotalHeight}}px;"></view>

<!-- 固定定位的导航栏 -->
<view class="nav-bar-fixed" style="height: {{navTotalHeight}}px; background-color: {{backgroundColor}}; padding-top: {{statusBarHeight}}px; box-sizing: border-box;">
  <view class="nav-content" style="height: {{navContentHeight}}px;">
    <!-- 左侧返回区域 -->
    <view class="nav-left" bindtap="handleBack" wx:if="{{showBack}}">
      <icon type="default" class="back-icon" style="color: {{backIconColor}};" size="22" />
      <!-- 或者使用自定义图片 -->
    </view>
    <view class="nav-left" wx:else></view>

    <!-- 标题区域 -->
    <view class="nav-title" style="color: {{titleColor}};">{{title}}</view>

    <!-- 右侧自定义插槽（可用于放置更多按钮、分享等） -->
    <view class="nav-right" bindtap="handleRightTap">
      <slot name="right"></slot>
    </view>
  </view>
</view>

4. index.wxss 样式

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

.nav-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  /* 可选毛玻璃效果 */
  /* backdrop-filter: blur(10px); */
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32rpx;
}

.nav-left, .nav-right {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 44rpx;
  height: 44rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  background-size: contain;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20rpx;
}

注意：为了方便演示，这里用SVG DataURI 作为返回箭头。实际项目中推荐使用本地图片或iconfont字体。

5. 注册组件

在 app.json 或页面配置中注册全局组件：

1
2
3
4
5

{
  "usingComponents": {
    "nav-bar": "/components/nav-bar/index"
  }
}

页面中使用导航栏

1. 页面的 WXML

1
2
3
4
5
6
7
8

<!-- 引入导航栏组件 -->
<nav-bar title="个人中心" showBack="{{true}}" bind:heightChange="onNavHeightChange" />

<!-- 页面主要内容，组件内部已做占位，正常布局即可 -->
<view class="page-content">
  <!-- 你的页面内容 -->
  <view class="card">内容卡片</view>
</view>

2. 页面的 JS （可选）

如果需要对页面内容额外调整，可以监听高度变化事件：

1
2
3
4
5
6
7
8
9

Page({
  data: {
    navBarHeight: 0
  },
  onNavHeightChange(e) {
    this.setData({ navBarHeight: e.detail.navTotalHeight });
    // 如果页面顶部有特殊的吸顶元素，可能需要用到这个高度
  }
});

避坑指南与性能优化

✅ 必须避开的坑

问题现象 原因分析 解决方案
部分安卓机型胶囊信息获取为0 getMenuButtonBoundingClientRect 在 onLoad 中调用过早 延迟调用或放在 onReady / 组件的 ready 生命周期
小程序闪动/布局错位 未设置默认高度，初始化时无数据导致视图变化 先在data中预设常见机型的默认高度（如 64/44）
页面内容被导航栏遮挡 忘记留出占位区域 使用组件内占位view，或页面容器设置padding-top为导航总高
右侧胶囊会遮挡自定义返回按钮 没有给导航栏右侧预留足够的空白区域 按照胶囊宽度，在nav-right区域设置margin-right动态值（一般胶囊宽87px，可用系统信息计算后给padding） 改进方案：组件样式保证右上角无交互元素即可，默认胶囊在右侧，自定义导航栏覆盖胶囊区域不会影响点击。但为了不遮挡标题文字，标题区应留有padding-right
横屏/折叠屏适配异常 屏幕旋转后导航高度未重新计算 监听 wx.onWindowResize 重新调用获取方法（需要页面级别处理，组件内部无法直接监听，建议页面监听后更新组件数据）

🚀 性能优化建议

· 避免重复获取：在 app.js 启动时获取一次设备信息并挂载到全局，组件优先使用全局缓存。
· 减少setData频率：初始化一次性设置完整数据，不要在多个生命周期重复设置。
· 动画独立：如果需要滚动渐变效果（导航栏透明变不透明），最好单独建立一个透明导航层，避免频繁setData。

扩展进阶：动态背景与滚动渐变

有时候我们需要导航栏随着页面滚动而改变背景透明度（例如从透明逐渐变为白色）。这时需要：

• 1. 页面监听 onPageScroll 事件
• 1. 将滚动偏移量传递给导航栏组件
• 1. 组件内部动态计算背景色的rgba值

由于篇幅有限，这个高级用法留作课后作业，感兴趣的读者可以尝试实现。

总结

自定义导航栏让小程序的设计和交互更加自由，而通过 wx.getMenuButtonBoundingClientRect 和动态高度计算，我们可以做到一套代码完美适配所有机型。

本文提供的组件已在实际项目中经过多轮测试，兼容以下场景：

· iOS（刘海屏、动态岛、非全面屏）
· Android（挖孔屏、水滴屏、全面屏）
· 折叠屏（展开/折叠状态需单独适配resize事件）
· iPad / 平板（状态栏高度变化）

只需复制代码稍作样式调整，即可集成到你的小程序中。

最近想在手机上跑一个 QQ 机器人，选了个看起来挺灵活的框架 OpenClaw。本以为按文档几分钟就能搞定，结果断断续续折腾了一晚上。这里记一下过程，给同样在 Termux 上折腾的人省点时间。

为什么选 OpenClaw

主要看中它支持多平台（QQ、微信、Telegram 等），还能接各种大模型。我想把智谱的免费模型 glm-4.7-flash 接上 QQ，手机上跑着省电。

第一个坑：插件找不到

装完 OpenClaw 后，配置文件里加了 openclaw-qqbot，结果启动报错：

1

plugins.allow: plugin not found: openclaw-qqbot

官方的安装命令跑了一遍，又说找不到 openclaw/dist/plugins-sdk/index_js/core。搜了一下，大概是版本不匹配——OpenClaw 核心和 QQ 插件各说各话。

第二个坑：Node.js 编译失败

升级 Node.js 到 v24 后，npm install -g openclaw@latest 直接挂掉，卡在 tree-sitter-bash 的编译上：

1

gyp: Undefined variable android_ndk_path in binding.gyp

这是 Termux 环境的老毛病了——Android 的 C 库（Bionic）和很多 npm 原生模块不对付。折腾半天无解，决定换路子。

终极方案：Ubuntu 容器

Termux 里有个 proot-distro 可以跑完整 Linux 发行版。既然原生环境不行，就在容器里装。

1
2
3

pkg install proot-distro
proot-distro install ubuntu
proot-distro login ubuntu

进到 Ubuntu 容器里，先装 Node.js 22（LTS 比较稳）：

1
2
3

apt update && apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt install -y nodejs

然后装 OpenClaw：

1

npm install -g openclaw@latest

这次编译顺利通过。终于有了 openclaw 命令。

配置向导：模型和 QQ 频道

运行 openclaw，按照提示选择：

· QuickStart（推荐）
· 认证提供方：Skip for now
· 默认模式：手动输入，填 zhipu/glm-4.7-flash
· 频道：QQ Bot (Official API)
· 搜索和技能：都跳过

注意这里模型名中间是点号 glm-4.7-flash，不是连字符。后来因为这个连字符又折腾了半天。

新问题：Gateway 不工作

配完启动，出现一个叫 Crestodian 的界面，提示 Gateway: not reachable。查了一下，原来直接运行 openclaw 启动的是一个轻量级客户端，必须先把 Gateway 服务跑起来。

手动开两个终端（或者在 tmux 里分屏）：

1
2
3
4
5

# 终端1
openclaw gateway --port 18791

# 终端2
openclaw

这次代理连上了 Gateway，QQ 也显示 WebSocket 已连接。我在手机 QQ 上给机器人发消息，日志里能收到事件，但机器人不回复。

核心问题：智谱 API Key 没配

模型虽然选对了，但没给 API Key，OpenClaw 不知道去哪调用。

修改配置文件 ~/.openclaw/openclaw.json，在 models 里加上 apiKey：

1
2
3
4
5

"models": {
  "zhipu/glm-4.7-flash": {
    "apiKey": "你的智谱API密钥"
  }
}

智谱的 API Key 去 open.bigmodel.cn 注册就有免费额度。

改完重启 Gateway 和代理，再发消息就能正常回复了。

一键启动的小脚本

每次手动开两个 tmux 窗格有点烦，写了个小脚本 start_openclaw.sh：

1
2
3
4
5
6

#!/bin/bash
proot-distro login ubuntu -- tmux kill-session -t openclaw 2>/dev/null
proot-distro login ubuntu -- tmux new-session -d -s openclaw "openclaw gateway --port 18791"
sleep 2
proot-distro login ubuntu -- tmux split-window -t openclaw -v "openclaw"
proot-distro login ubuntu -- tmux attach -t openclaw

之后要启动就 ./start_openclaw.sh，日志直接看到两个窗格。脱离 tmux 用 Ctrl+B D，完全退出就 proot-distro login ubuntu – tmux kill-session -t openclaw。

几个容易忽略的点

1. 模型名：glm-4.7-flash 中间是点号，不是连字符。配错会报 Invalid input。
2. 端口一致：Gateway 启动时用了 –port 18791，配置文件里的 gateway.port 也要改成一样，否则代理连不上。
3. QQ 凭证：appId 和 clientSecret 填在 channels.qqbot 里，去 QQ 开放平台申请机器人。
4. 不要用 openclaw gateway restart：Android 上不支持 systemd，直接 pkill -f openclaw 再启动就行。

最后的效果

现在手机 Termux 里跑着 Ubuntu 容器，容器里 tmux 挂着 OpenClaw。QQ 上给机器人发消息，它能调用智谱模型回复，速度还行，省电模式也能撑一整天。

如果你也遇到类似的编译问题或 Gateway 连不上，可以考虑直接上容器方案，省心。

在移动互联网时代，直播已经成为一种重要的内容形式。有时我们会希望将喜欢的直播内容保存下来，以便日后回顾或学习。今天为大家介绍一款博主设计并基于uni-app开发的抖音直播录制工具，它不仅支持普通的录制功能，可以进行后台不需要看着直播画面进行录制抖音直播画面，还具备自动检测、后台保活等进阶特性。

核心功能

1. 多样化的链接支持

这款工具支持多种形式的直播链接输入：

• 标准直播间链接
• 短链接
• 分享文本（从抖音APP复制的分享内容）

2. 智能解析与录制

输入链接后，工具会自动解析并显示直播信息：

• 主播昵称
• 直播间标题
• 实时在线人数
• 直播源地址

解析完成后，只需点击”开始录制”即可开始保存直播内容。录制过程中可以实时查看：

• 已录制时长
• 文件大小
• 录制状态

3. 自动检测功能

最实用的功能之一是自动检测系统：

1. 输入直播链接后开启自动检测
2. 系统会定期检查直播状态
3. 检测到开播自动开始录制
4. 直播结束自动停止录制

这个功能特别适合：

• 不定时开播的主播
• 需要完整录制的长直播
• 多场直播的批量录制

4. 后台保活机制

为了确保录制的稳定性，工具实现了完整的后台保活机制：

• 悬浮窗权限
• 电池优化白名单
• 前台服务保活

5. 历史记录管理

工具提供了两种历史记录功能：

1. 录制文件历史

   • 支持视频预览
   • 文件重命名
   • 快速删除

2. 输入链接历史

   • 保存最近使用的链接
   • 记录主播昵称
   • 一键重复录制

使用技巧

基础录制流程

1. 从抖音APP复制直播链接
2. 粘贴到输入框
3. 点击”获取直播源”
4. 确认信息无误后点击”开始录制”
5. 录制完成后点击”结束录制”

自动检测使用方法

1. 输入直播链接
2. 打开自动检测开关
3. 保持应用在后台运行
4. 系统会自动处理录制过程

提升录制稳定性

1. 首次使用时授予所有必要权限
2. 开启悬浮窗和忽略电池优化
3. 将应用加入系统后台白名单
4. 确保设备有足够的存储空间
5. 保持网络连接稳定

注意事项

1. 权限说明

   • 存储权限：用于保存录制文件
   • 悬浮窗权限：提高后台存活率
   • 电池优化：防止系统休眠影响录制

2. 资源消耗

   • 建议在WiFi环境下使用
   • 录制时会持续占用网络带宽
   • 注意监控存储空间使用情况

3. 使用限制

   • 仅支持Android系统
   • 需要Android 7.0及以上版本
   • 部分机型可能需要特殊设置

常见问题解答

1. Q: 为什么录制会自动停止？
   A: 可能的原因有：

   • 直播已结束
   • 网络连接不稳定
   • 存储空间不足
   • 后台进程被清理

2. Q: 如何处理录制失败？
   A: 建议按以下步骤排查：

   • 检查网络连接
   • 验证存储权限
   • 确认保活设置
   • 清理设备存储空间

3. Q: 自动检测不工作？
   A: 请确认：

   • 是否授予了必要权限
   • 链接格式是否正确
   • 后台运行是否正常
   • 检测间隔是否合理

未来展望

未来计划添加的功能：

1. 支持更多直播平台
2. 添加录制视频剪辑功能
3. 优化文件管理系统
4. 提供更多自定义选项
5. 增加云端备份功能

结语

这款抖音直播录制工具虽然功能强大，但使用简单直观。无论是普通用户还是专业用户，都能快速上手使用。希望这篇文章能帮助大家更好地使用这款工具。

免责声明

本工具仅供学习交流使用，请勿用于任何商业用途。使用本工具时，请遵守相关法律法规，尊重直播作者的权益。对于使用本工具所产生的任何问题，本项目概不负责。

在UniApp中使用Canvas绘图时，常常会遇到一些容易忽略的问题和陷阱。本文将总结这些易错点，并提供解决方案，帮助你避免踩坑，提升开发效率。

1. 易错点与踩坑指南

1.1 Canvas上下文未正确获取

• 问题描述：
  • 调用uni.createCanvasContext后，绘图操作未生效。
• 原因：
  • 未正确获取Canvas上下文，或未调用ctx.draw()方法。
• 解决方案：
  1. 确保正确获取Canvas上下文：

     1	const ctx = uni.createCanvasContext('myCanvas');

  2. 在绘图操作后调用ctx.draw()：

     1 2	ctx.fillRect(10, 10, 100, 100); ctx.draw(); // 必须调用draw方法才会生效

1.2 Canvas尺寸设置不当

• 问题描述：
  • Canvas绘图内容显示不全或完全不可见。
• 原因：
  • Canvas的宽度或高度设置不正确，或者未适配屏幕分辨率。
• 解决方案：
  1. 在<canvas>标签中设置正确的宽度和高度：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

  2. 使用uni.getSystemInfoSync获取屏幕宽度并动态设置Canvas尺寸：

     1 2 3

     const systemInfo = uni.getSystemInfoSync(); const canvasWidth = systemInfo.windowWidth; const canvasHeight = systemInfo.windowHeight;

1.3 Canvas层级问题

• 问题描述：
  • Canvas被其他组件遮挡，导致绘图内容不可见。
• 原因：
  • Canvas的层级（z-index）较低，或被其他组件覆盖。
• 解决方案：
  1. 使用position: fixed或position: absolute提升Canvas层级：

     1	<canvas canvas-id="myCanvas" style="position: fixed; top: 0; left: 0;"></canvas>

  2. 避免在Canvas上方放置其他组件。

1.4 Canvas渲染时机问题

• 问题描述：
  • 在页面加载时绘图，但内容未显示。
• 原因：
  • Canvas渲染时机过早，页面尚未完全加载。
• 解决方案：
  1. 在onReady生命周期中执行绘图操作：

     1 2 3 4 5 6 7

     export default { onReady() { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); } };

  2. 使用setTimeout延迟绘图操作：

     1 2 3 4 5

     setTimeout(() => { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); }, 500);

1.5 Canvas绘图性能问题

• 问题描述：
  • 绘图操作卡顿或延迟。
• 原因：
  • 绘图操作过于频繁，或Canvas尺寸过大。
• 解决方案：
  1. 减少不必要的绘图操作。
  2. 使用ctx.draw(true)开启离屏渲染，提升性能。

1.6 Canvas绘图内容模糊

• 问题描述：
  • 绘图内容显示模糊。
• 原因：
  • Canvas的CSS尺寸与画布分辨率不匹配。
• 解决方案：
  1. 使用uni.getSystemInfoSync获取设备像素比（pixelRatio），并设置Canvas的实际分辨率：

     1 2 3 4

     const systemInfo = uni.getSystemInfoSync(); const pixelRatio = systemInfo.pixelRatio; const canvasWidth = 300 * pixelRatio; const canvasHeight = 300 * pixelRatio;

  2. 在CSS中设置Canvas的显示尺寸为逻辑像素：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

2. 示例代码

以下是一个完整的Canvas绘图示例，涵盖了上述问题的解决方案：

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

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const systemInfo = uni.getSystemInfoSync();
      const pixelRatio = systemInfo.pixelRatio;
      const canvasWidth = 300 * pixelRatio;
      const canvasHeight = 300 * pixelRatio;

      const ctx = uni.createCanvasContext('myCanvas');
      ctx.fillRect(10, 10, 100, 100);
      ctx.draw();
    }
  }
};
</script>

<style>
canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

3. 总结

在UniApp中使用Canvas绘图时，常见的易错点包括上下文未正确获取、Canvas尺寸问题、层级问题和渲染时机问题。通过本文提供的解决方案，你可以快速定位并解决这些问题，确保Canvas绘图内容正常显示。

希望这篇博客对你有帮助！如果有其他问题，欢迎随时交流！ 🚀

在开发QQ频道机器人和UniApp应用的过程中，可能会遇到一些常见的错误和坑。本文将总结这些容易出错的地方，并提供解决方案，帮助你更顺利地完成开发。

1. QQ频道机器人开发中的常见问题

1.1 权限问题

• 问题描述：
  • 调用API时返回“权限不足”或“未授权”错误。
• 原因：
  • 未正确申请API权限，或未在请求头中携带正确的Authorization。
• 解决方案：
  1. 在QQ开放平台确认已申请相关API权限。
  2. 确保请求头中包含正确的Authorization，格式为：Bot {BotToken}。

1.2 消息发送失败

• 问题描述：
  • 发送消息时返回“频道不存在”或“消息发送失败”。
• 原因：
  • 频道ID错误，或机器人未加入目标频道。
• 解决方案：
  1. 确认频道ID是否正确。
  2. 确保机器人已加入目标频道。

1.3 Webhook配置问题

• 问题描述：
  • Webhook无法接收消息，或消息格式解析失败。
• 原因：
  • Webhook地址未正确配置，或未处理消息的加密和签名。
• 解决方案：
  1. 在QQ开放平台正确配置Webhook地址。
  2. 参考官方文档处理消息的加密和签名验证。

2. UniApp开发中的常见问题

2.1 跨域问题

• 问题描述：
  • 在H5端调用API时，出现跨域错误。
• 原因：
  • 后端服务未配置CORS（跨域资源共享）。
• 解决方案：
  1. 在后端服务中添加CORS支持：

     1 2 3 4 5 6 7

     const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); });

  2. 在UniApp中使用代理解决跨域问题：

     1 2 3 4 5 6 7 8 9 10 11

     // manifest.json "h5": { "devServer": { "proxy": { "/api": { "target": "https://your-server.com", "changeOrigin": true } } } }

2.2 样式兼容性问题

• 问题描述：
  • 在不同平台上样式显示不一致。
• 原因：
  • 不同平台对CSS的支持存在差异。
• 解决方案：
  1. 使用UniApp提供的条件编译功能，针对不同平台编写样式：

     1 2 3 4 5 6

     /* #ifdef H5 */ .container { padding: 10px; } /* #endif */ /* #ifdef MP-WEIXIN */ .container { padding: 20px; } /* #endif */

  2. 使用Flexbox或Grid布局，避免使用平台特定的样式。

2.3 真机调试问题

• 问题描述：
  • 在真机上运行时，功能异常或无法调试。
• 原因：
  • 真机环境与开发环境存在差异。
• 解决方案：
  1. 使用HBuilderX的真机调试功能，实时查看日志和错误信息。
  2. 确保真机与开发机在同一局域网下，并正确配置网络权限。

3. 结合开发中的常见问题

3.1 数据格式不一致

• 问题描述：
  • QQ频道API返回的数据格式与UniApp前端预期不一致。
• 原因：
  • 未对API返回的数据进行格式化处理。
• 解决方案：
  1. 在后端服务中对API返回的数据进行格式化：

     1 2 3 4 5 6 7

     const formatMessage = (message) => { return { id: message.id, content: message.content, timestamp: new Date(message.timestamp).toLocaleString() }; };

  2. 在UniApp前端使用computed属性对数据进行处理：

     1 2 3 4 5 6 7 8

     computed: { formattedMessages() { return this.messages.map(msg => ({ ...msg, timestamp: new Date(msg.timestamp).toLocaleString() })); } }

3.2 网络请求超时

• 问题描述：
  • 网络请求超时，导致功能异常。
• 原因：
  • 网络环境不稳定，或请求未设置超时时间。
• 解决方案：
  1. 在UniApp中设置请求超时时间：

     1 2 3 4 5

     uni.request({ url: 'https://your-server.com/api', timeout: 5000, // 设置超时时间为5秒 success: (res) => console.log(res.data) });

  2. 在后端服务中优化接口性能，减少响应时间。

4. 总结

在开发QQ频道机器人和UniApp应用时，权限问题、跨域问题、样式兼容性和网络请求是常见的踩坑点。通过本文提供的解决方案，你可以有效避免这些问题，提升开发效率和项目质量。

如果你在开发过程中遇到其他问题，欢迎在评论区留言讨论！ 😊

在UniApp中使用Canvas绘图时，可能会遇到绘图内容不显示的问题。本文将总结这些常见问题的原因，并提供解决方案，帮助你快速定位和解决问题。

1. Canvas绘图不显示的常见原因

1.1 Canvas上下文未正确获取

• 问题描述：
  • 调用uni.createCanvasContext后，绘图操作未生效。
• 原因：
  • 未正确获取Canvas上下文，或未调用ctx.draw()方法。
• 解决方案：
  1. 确保正确获取Canvas上下文：

     1	const ctx = uni.createCanvasContext('myCanvas');

  2. 在绘图操作后调用ctx.draw()：

     1 2	ctx.fillRect(10, 10, 100, 100); ctx.draw(); // 必须调用draw方法才会生效

1.2 Canvas尺寸问题

• 问题描述：
  • Canvas绘图内容显示不全或完全不可见。
• 原因：
  • Canvas的宽度或高度设置不正确，或者未适配屏幕分辨率。
• 解决方案：
  1. 在<canvas>标签中设置正确的宽度和高度：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

  2. 使用uni.getSystemInfoSync获取屏幕宽度并动态设置Canvas尺寸：

     1 2 3

     const systemInfo = uni.getSystemInfoSync(); const canvasWidth = systemInfo.windowWidth; const canvasHeight = systemInfo.windowHeight;

1.3 Canvas层级问题

• 问题描述：
  • Canvas被其他组件遮挡，导致绘图内容不可见。
• 原因：
  • Canvas的层级（z-index）较低，或被其他组件覆盖。
• 解决方案：
  1. 使用position: fixed或position: absolute提升Canvas层级：

     1	<canvas canvas-id="myCanvas" style="position: fixed; top: 0; left: 0;"></canvas>

  2. 避免在Canvas上方放置其他组件。

1.4 Canvas渲染时机问题

• 问题描述：
  • 在页面加载时绘图，但内容未显示。
• 原因：
  • Canvas渲染时机过早，页面尚未完全加载。
• 解决方案：
  1. 在onReady生命周期中执行绘图操作：

     1 2 3 4 5 6 7

     export default { onReady() { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); } };

  2. 使用setTimeout延迟绘图操作：

     1 2 3 4 5

     setTimeout(() => { const ctx = uni.createCanvasContext('myCanvas'); ctx.fillRect(10, 10, 100, 100); ctx.draw(); }, 500);

2. 其他常见问题

2.1 Canvas绘图性能问题

• 问题描述：
  • 绘图操作卡顿或延迟。
• 原因：
  • 绘图操作过于频繁，或Canvas尺寸过大。
• 解决方案：
  1. 减少不必要的绘图操作。
  2. 使用ctx.draw(true)开启离屏渲染，提升性能。

2.2 Canvas绘图内容模糊

• 问题描述：
  • 绘图内容显示模糊。
• 原因：
  • Canvas的CSS尺寸与画布分辨率不匹配。
• 解决方案：
  1. 使用uni.getSystemInfoSync获取设备像素比（pixelRatio），并设置Canvas的实际分辨率：

     1 2 3 4

     const systemInfo = uni.getSystemInfoSync(); const pixelRatio = systemInfo.pixelRatio; const canvasWidth = 300 * pixelRatio; const canvasHeight = 300 * pixelRatio;

  2. 在CSS中设置Canvas的显示尺寸为逻辑像素：

     1	<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>

3. 示例代码

以下是一个完整的Canvas绘图示例，涵盖了上述问题的解决方案：

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

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const systemInfo = uni.getSystemInfoSync();
      const pixelRatio = systemInfo.pixelRatio;
      const canvasWidth = 300 * pixelRatio;
      const canvasHeight = 300 * pixelRatio;

      const ctx = uni.createCanvasContext('myCanvas');
      ctx.fillRect(10, 10, 100, 100);
      ctx.draw();
    }
  }
};
</script>

<style>
canvas {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

4. 总结

在UniApp中使用Canvas绘图时，常见的问题包括上下文未正确获取、Canvas尺寸问题、层级问题和渲染时机问题。通过本文提供的解决方案，你可以快速定位并解决这些问题，确保Canvas绘图内容正常显示。

希望这篇博客对你有帮助！如果有其他问题，欢迎随时交流！ 🚀

想要给博客增加一些趣味性？让读者可以随机浏览你的文章是个不错的选择。本文将详细介绍如何在Hexo博客中实现随机文章功能，就跟本博客的侧栏导航中的【手气】菜单一样的效果。

1. 功能介绍

随机文章功能可以让访问者随机浏览博客中的任意一篇文章,这不仅能增加博客的趣味性,还能提高文章的曝光率,让一些早期的优质文章也有机会被读者发现。

2. 实现步骤

2.1 创建模板文件

首先在主题的layout目录下创建random.ejs文件:

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

<%
// 获取所有文章
const posts = site.posts.data;
// 随机选择一篇文章
const randomPost = posts[Math.floor(Math.random() * posts.length)];
%>

<script>
// 立即重定向到随机文章
window.location.href = '<%- url_for(randomPost.path) %>';
</script>

<noscript>
  <div style="text-align: center; padding: 20px;">
    <p>请点击下方链接访问随机文章：</p>
    <a href="<%- url_for(randomPost.path) %>"><%- randomPost.title %></a>
  </div>
</noscript>

2.2 创建页面文件

在source目录下创建random文件夹,并在其中创建index.md:

1
2
3
4
5
6
7

---
title: 随机文章
date: 2023-12-31 12:00:00
type: random
layout: random
comments: false
---

2.3 添加菜单项

在主题的_config.yml中添加菜单项:

1
2
3
4
5

menu:
  random:
    path: /random
    text: 手气
    icon: fas fa-random

3. 功能说明

3.1 工作原理

1. 当访问者点击”随机文章”菜单时,会访问/random页面
2. 模板会从所有文章中随机选择一篇
3. 通过JavaScript自动跳转到选中的文章
4. 如果浏览器禁用了JavaScript,则显示一个可点击的链接

3.2 优化建议

1. 性能优化: 如果博客文章很多,可以考虑缓存文章列表
2. 用户体验: 可以添加加载动画
3. 功能扩展: 可以按分类或标签随机

4. 常见问题

4.1 页面闪烁

如果出现页面闪烁,可以添加loading效果:

1
2
3
4
5
6
7
8
9
10
11

<style>
.loading {
  text-align: center;
  padding: 20px;
}
.loading:after {
  content: '正在随机选择文章...';
  color: #666;
}
</style>
<div class="loading"></div>

4.2 重复访问

如果想避免连续访问同一篇文章,可以使用sessionStorage记录历史:

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

// 获取历史记录
const history = JSON.parse(sessionStorage.getItem('randomHistory') || '[]');
// 过滤已访问的文章
const availablePosts = posts.filter(post => !history.includes(post.path));
// 如果所有文章都访问过,清空历史
if (availablePosts.length === 0) {
  sessionStorage.removeItem('randomHistory');
  availablePosts = posts;
}
// 随机选择文章
const randomPost = availablePosts[Math.floor(Math.random() * availablePosts.length)];
// 记录到历史
history.push(randomPost.path);
sessionStorage.setItem('randomHistory', JSON.stringify(history));

5. 总结

随机文章功能虽然实现简单,但能大大提升博客的趣味性和用户体验。你还可以基于这个基础功能,添加更多个性化的扩展,比如按照文章热度随机、按照阅读时间随机等。

如果觉得文章对你有帮助,欢迎点赞、评论、分享,你的支持是我继续创作的动力！

一个用于管理和操作QQ频道机器人的Android客户端应用，基于uniapp开发，提供了直观的用户界面和丰富的功能特性。

客户端界面预览

功能特性

1. 账号管理

• App ID和Token登录
• 记住登录状态
• 自动登录选项
• 沙盒/正式环境切换
• 多账号管理
• 账号安全保护

2. 频道管理

• 频道列表显示
  • 分组展示
  • 在线人数显示
  • 频道类型图标
  • 频道状态标识
• 未读消息统计
  • 普通消息计数
  • @消息特别标记
  • 按频道分类统计
• 频道权限管理
  • 自动识别管理员权限
  • 权限值实时计算
  • 权限检查功能

3. 消息功能

• 实时消息接收

  • WebSocket长连接
  • 断线自动重连
  • 心跳保活机制

• 消息发送功能

  • 文本消息支持
  • 消息审核处理
  • 审核状态显示

• 消息管理

  • 消息撤回
  • 历史记录查看
  • 系统消息显示
  • 在线状态更新

• 消息展示

  • 时间戳显示
  • 用户身份标识
  • 消息状态图标
  • 长按菜单操作

4. 插件系统

• 插件管理
  • 启用/禁用控制
  • 本地存储支持
  • 配置项管理
• 插件功能
  • 命令处理
  • 数据持久化
  • 日志记录
  • API调用
• 内置插件
  • 每日签到
  • 百度百科
• 开发支持
  • 完整API文档
  • 示例代码
  • 开发指南

5. 通知系统

• 消息通知
  • 新消息提醒
  • @消息特殊提示
  • 消息合并显示
  • 通知延迟处理
• 通知管理
  • 是否开启通知
  • 是否震动提醒
  • 是否系统通知
  • 免打扰设置
• 通知优化
  • 消息去重
  • 批量处理
  • 智能延迟
  • 性能优化

系统要求

基本要求

• Android 5.0+
• 网络连接
• 存储空间 >= 50MB
• 通知权限(可选)
• 后台运行权限(推荐)

权限说明

1. 必需权限

   • 网络访问
   • 存储读写
   • 后台运行

2. 可选权限

   • 通知显示
   • 开机自启
   • 震动控制

安装说明

1. 下载安装

   • 从Release页面下载最新APK
   • 允许安装未知来源应用
   • 按提示完成安装

2. 首次配置

   • 授予必要权限
   • 登录机器人账号
   • 配置基本设置

使用指南

1. 登录配置

1.1 获取凭据

1. 访问QQ机器人管理平台
2. 创建/选择机器人
3. 获取App ID和Token
4. 确认机器人状态正常

1.2 登录设置

1. 输入App ID和Token
2. 选择环境(沙盒/正式)
3. 设置自动登录(可选)
4. 配置安全选项

2. 频道操作

2.1 查看频道

1. 打开频道列表

   • 点击顶部频道信息展开列表
   • 查看分组和子频道
   • 观察在线人数和状态

2. 频道分类

   • 文字频道(#)
   • 语音频道(🔊)
   • 直播频道(📺)
   • 公告频道(📢)
   • 应用频道(💬)
   • 论坛频道(🎮)

3. 未读消息

   • 红点显示未读数
   • 橙色标记@消息
   • 点击清除未读

2.2 消息管理

1. 发送消息

   • 在输入框输入内容
   • 点击发送按钮
   • 等待发送状态
   • 查看审核结果

2. 消息操作

   • 长按消息显示菜单
   • 选择撤回等操作
   • 查看消息详情

3. 消息状态

   • 正常消息
   • 审核中(灰色)
   • 审核拒绝(红色)
   • 已撤回(灰色斜体)

3. 插件使用

3.1 插件管理

1. 内置插件

   • 每日签到(/签到)
   • 百度百科(/百科)

2. 插件控制

   • 启用/禁用插件
   • 查看插件信息
   • 管理插件数据

3.2 插件命令

1. 命令格式

   • 以/开头
   • 严格匹配命令名
   • 空格分隔参数

2. 使用示例

   1 2	/签到 # 执行签到 /百科 太阳 # 查询百科

4. 通知设置

4.1 通知选项

1. 基本设置

   • 启用通知
   • 震动提醒
   • 系统通知

2. 通知规则

   • 新消息延迟2秒
   • 多条消息合并
   • @消息立即提醒
   • 非当前频道通知

常见问题

1. 连接问题

• 问题: 无法连接或频繁断开
• 解决:
  1. 检查网络连接
  2. 确认Token正确
  3. 查看机器人状态
  4. 等待自动重连

2. 消息问题

• 问题: 消息发送失败
• 解决:
  1. 检查频道权限
  2. 确认消息格式
  3. 等待审核通过
  4. 查看错误提示

3. 插件问题

• 问题: 插件无响应
• 解决:
  1. 检查插件状态
  2. 确认命令格式
  3. 查看错误日志
  4. 重启应用

4. 通知问题

• 问题: 收不到通知
• 解决:
  1. 检查通知权限
  2. 确认通知设置
  3. 关闭省电模式
  4. 允许后台运行

更新日志

v1.1.0 (2024-01-20)

• 优化WebSocket连接
• 改进消息处理逻辑
• 完善插件系统
• 优化通知机制
• 修复已知问题

v1.0.0 (2023-12-25)

• 首次发布
• 基础功能实现
• 插件系统支持
• 通知系统集成

更多待补充

么么哒~~

插件结构

每个插件都是一个标准的 JavaScript 文件，需要导出一个包含以下字段的对象:

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

// 插件对象
const plugin = {
  // 基本信息(必需)
  id: 'plugin-id',          // 插件ID,只能包含小写字母、数字、下划线和横线
  name: '插件名称',         // 插件显示名称
  description: '插件描述',  // 插件功能描述
  command: '/命令',         // 触发命令,必须以/开头
  
  // 基本信息(可选)
  version: '1.0.0',        // 插件版本号
  author: '作者名称',      // 插件作者
  enabled: true,           // 插件是否启用
  
  // 配置项(可选)
  config: {
    // 插件的配置项
    minPoints: 10,         // 示例:最小积分
    maxPoints: 100,        // 示例:最大积分
  },
  
  // 数据存储(可选)
  storage: {
    // 插件的数据存储
    records: new Map()     // 示例:记录存储
  },
  
  // 消息处理函数(必需)
  handler: async (message, channel, context) => {
    // 返回值:
    // - 字符串: 要发送的回复消息
    // - null/undefined: 不发送回复
    // - Promise<string>: 异步返回回复消息
    return '回复消息'
  }
}

// 导出插件
module.exports = plugin

API 说明

1. 消息对象(message)

消息对象包含了消息的完整信息：

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

{
  id: "消息ID",
  channel_id: "频道ID", 
  guild_id: "服务器ID",
  content: "消息内容",
  cleanContent: "去除命令前缀的消息内容", // 新增:清理后的内容
  timestamp: "2023-01-01T00:00:00.000Z",
  status: "normal", // 消息状态: normal-正常, auditing-审核中, rejected-审核拒绝
  author: {
    id: "用户ID",
    username: "用户名",
    bot: false,
    avatar: "头像URL"
  },
  member: {
    roles: ["角色ID1", "角色ID2"],
    joined_at: "加入时间"
  },
  mentions: [
    {
      id: "被@用户ID",
      username: "被@用户名"
    }
  ],
  mention_everyone: false
}

2. 频道对象(channel)

频道对象包含了频道的基本信息：

1
2
3
4
5
6
7
8
9
10

{
  id: "频道ID",
  guild_id: "服务器ID",
  name: "频道名称",
  type: 0, // 频道类型
  position: 1, // 显示位置
  parent_id: "父频道ID",
  owner_id: "创建者ID",
  permissions: "权限值"
}

3. 上下文对象(context)

上下文对象提供了插件运行时的环境和工具：

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

{
  // 存储API - 持久化存储插件数据
  storage: {
    get: (key) => value, // 获取存储的值
    set: (key, value) => void, // 设置存储的值
    delete: (key) => void, // 删除存储的值
    clear: () => void, // 清空存储
    has: (key) => boolean // 检查键是否存在
  },
  
  // 配置API - 管理插件配置
  config: {
    get: (key) => value, // 获取配置项
    set: (key, value) => void, // 设置配置项
  },
  
  // 日志API - 记录插件运行日志
  log: {
    info: (message, details) => void, // 记录信息日志
    success: (message, details) => void, // 记录成功日志
    warning: (message, details) => void, // 记录警告日志
    error: (message, details) => void // 记录错误日志
  },
  
  // 工具API
  api: {
    // 发送消息
    sendMessage: async (channelId, content, options) => {
      // channelId: 频道ID
      // content: 消息内容
      // options: 可选参数
      //   - msg_id: 回复的消息ID
      //   - event_id: 事件ID
      // 返回:
      // - 成功: messageObject
      // - 审核: { code: 304023, data: { message_audit: { audit_id: "xxx" } } }
      return response
    },
    
    // 删除消息
    deleteMessage: async (channelId, messageId) => {
      // channelId: 频道ID
      // messageId: 消息ID
      return boolean
    },
    
    // 获取成员信息
    getMember: async (guildId, userId) => {
      // guildId: 服务器ID
      // userId: 用户ID
      return memberObject
    },
    
    // 获取服务器角色列表
    getGuildRoles: async (guildId) => {
      // guildId: 服务器ID
      return rolesArray
    },
    
    // 检查权限
    hasPermission: (permissions, permission) => {
      // permissions: 权限值
      // permission: 要检查的权限
      return boolean
    }
  }
}

插件功能界面预览

消息处理流程

1. 消息接收

   • 系统接收到新消息时，会检查消息内容是否以配置的命令前缀开始
   • 解析出命令和参数
   • 查找所有匹配的已启用插件

2. 插件执行

   • 对每个匹配的插件：
     • 创建独立的插件上下文对象
     • 调用插件的handler函数
     • 等待处理结果
   • 多个插件可以使用相同的命令
   • 插件按照加载顺序依次执行
   • 某个插件执行失败不会影响其他插件

3. 响应处理

   • 每个插件的handler如果返回字符串，系统会自动发送响应消息
   • 每个响应都是独立的，会分别发送到频道
   • 发送的消息可能进入审核状态(code: 304023)
   • 审核通过或拒绝会触发相应的事件

权限处理

系统会自动计算机器人的权限：

1. 管理员权限

   • 频道主
   • 管理员
   • 超级管理员
   • 子频道管理员
     拥有以上角色时自动获得所有权限(1099511627775)

2. 普通权限

   • 根据角色的permissions值按位计算
   • 多个角色的权限值进行按位或运算
   • 可以使用api.hasPermission检查特定权限

最佳实践

1. 错误处理

   1 2 3 4 5 6 7 8 9 10

   handler: async (message, channel, context) => { try { // 处理逻辑 context.log.info('处理成功', { messageId: message.id }) return '成功消息' } catch (error) { context.log.error('处理失败', { error, messageId: message.id }) return '处理失败，请稍后重试' } }

2. 数据持久化

   1 2 3 4

   // 使用storage API保存数据 const records = context.storage.get('records') || {} records[userId] = { /* 数据 */ } context.storage.set('records', records)

3. 消息审核处理

   1 2 3 4 5 6

   const response = await context.api.sendMessage(channelId, content) if (response.code === 304023) { context.log.info('消息进入审核', { auditId: response.data.message_audit.audit_id }) }

4. 权限检查

   1 2 3

   if (!context.api.hasPermission(channel.permissions, 'MANAGE_MESSAGES')) { return '权限不足，需要管理消息的权限' }

么么扎~~

随着AI技术的快速发展，各种AI编程助手层出不穷。本文将深入对比主流AI编程助手的优缺点，帮助你找到最适合自己的AI编程伙伴。

1. Cursor - 专注高效的AI编程助手

1.1 主要特点

• 基于先进的AI模型
• 完整的IDE功能
• 强大的代码补全和生成能力
• 支持多种编程语言
• 实时代码分析和建议

1.2 优点

1. 代码理解能力强

   • 能准确理解项目上下文
   • 提供精准的代码建议
   • 支持复杂代码重构

2. 交互体验优秀

   • 界面简洁直观
   • 响应速度快
   • 支持自然语言交互

3. 功能完整性

   • 集成Git版本控制
   • 支持代码调试
   • 内置终端功能

1.3 缺点

1. 资源占用较高

   • 运行需要较好的硬件配置
   • 启动速度较慢

2. 收费较高

   • 完整功能需要付费订阅
   • 价格对个人开发者略高

2. CodeGeeX - 国产优秀AI编程助手

2.1 主要特点

• 支持中文交互
• 离线运行能力
• 跨平台支持
• 多种编辑器插件

2.2 优点

1. 本地化优势

   • 完善的中文支持
   • 符合国内开发习惯
   • 响应速度快

2. 性价比高

   • 基础功能免费
   • 企业版价格合理
   • 教育优惠政策

3. 安全性好

   • 支持私有部署
   • 代码不出境
   • 数据安全有保障

2.3 缺点

1. 功能完整度

   • 部分高级功能不如国外产品
   • IDE集成度有待提高

2. 模型能力

   • 在某些专业领域理解不够深入
   • 代码生成质量略低于顶级产品

3. GitHub Copilot - 最受欢迎的AI助手

3.1 主要特点

• 微软和GitHub联合开发
• 基于OpenAI技术
• 支持主流编辑器
• 强大的代码生成能力

3.2 优点

1. 代码质量高

   • 基于海量GitHub代码训练
   • 生成代码可读性好
   • 注释详细准确

2. 集成度高

   • 支持VS Code等主流IDE
   • 操作便捷
   • 学习成本低

3. 更新频繁

   • 持续改进和优化
   • Bug修复及时
   • 新功能不断

3.3 缺点

1. 价格较贵

   • 月付费用较高
   • 没有永久授权选项

2. 网络依赖

   • 需要稳定的网络连接
   • 无法离线使用

4. 国内其他AI编程助手

4.1 MarsCode - 抖音官方AI编程助手

主要特点：

• 字节跳动官方出品
• 基于先进的CodeFuse大模型
• 支持VSCode、JetBrains等主流IDE
• 提供Web版在线使用
• 完全免费使用

优点：

1. 强大的代码生成能力

   • 基于海量字节跳动内部代码训练
   • 支持40+种主流编程语言
   • 代码质量和可用性较高
   • 支持完整函数和类的生成

2. 智能交互体验

   • 支持自然语言对话
   • 提供代码解释和优化建议
   • 实时代码补全
   • 多轮对话上下文理解

3. 便捷的使用方式

   • 完全免费，无需付费
   • 支持Web端直接使用
   • IDE插件集成便捷
   • 快速的响应速度

4. 中文支持优秀

   • 完善的中文交互
   • 准确的中文需求理解
   • 详细的中文注释生成
   • 符合国内开发习惯