乐于分享
好东西不私藏

从0到上线:手把手教你开发PDF加水印小程序

从0到上线:手把手教你开发PDF加水印小程序

前言

上篇文章介绍了《小程序开发的全流程》,本篇直接上手一个实用案例:做一个「PDF添加水印」小程序。

不知道你有没有遇到过这种情况——工作中要给外部人员发资料,公司规定必须转成 PDF 并加上水印。

去网上找工具吧,免费的要么带广告 logo,好用的又需要付费。更烦的是,敏感文件上传到第三方平台,心里总不踏实。

既然如此,干脆自己造一个:零成本、零基础、零代码、无限制、数据留在自己手里

这篇教程会带你完整走一遍。

步骤

开发微信小程序,「微信开发者工具」是必须装的。

但除此之外,你不用再下载任何 AI 工具,也不用买什么 token。

你要是第一次接触小程序开发,建议先看看上一篇文章。

准备好了?开干。

创建小程序

  1. 项目名称:起个名字,比如"水印"
  2. 目录:选一个文件夹
  3. AppId:填你自己的小程序 AppID
  4. 后端服务:微信云开发
  5. 开发模式:选"小程序"
  6. 模板选择:直接默认就行(最干净,没有多余东西)
  7. 创建,搞定!

注意:记得这里选择微信云开发,对新手友好。以后进阶可以自己购买服务器部署。

提需求

项目建好后,你会看到一个基础代码结构。别慌,你不需要读懂它。

直接打开 CodeBuddy 窗口(微信开发者工具里的 AI 插件),选Ask 模式,模型用 Deepseek-V4-Pro 或 GLM-5.2 都行。

然后,像跟朋友聊天一样,告诉它你的想法:

"我想做一个给 PDF 文件添加水印的小程序,你有什么好的想法吗?"

AI 会分析你的项目,然后给你一套方案。它会告诉你:小程序没有原生 PDF 能力,所以需要用到微信云开发。

你觉得哪里不满意,就跟它来回沟通。改到满意为止。

确认方案没问题后,切换到 Craft 模式,说一句"开始执行",AI 就会自动写代码。

不到 10 分钟,代码就写好了。AI 还会贴心地告诉你:接下来还需要手动完成 3 步。

没问题就点击「保留」,下面按说明操作那1、2、3步。

创建云开发环境

在开发者工具顶部点"云开发"按钮,创建你的云环境,记下那个环境ID

可以看到当前套餐是免费的。

填入云环境ID

打开 AI 指定好的文件,把环境ID 填进去。

创建数据库集合

进入云开发控制台,点击左侧数据库,然后点击集合管理下的+号创建数据集合pdf_history ——用来记录你的操作历史。

上传云函数

切回资源管理器,找到cloudfunctions/pdfTools,右键选择「上传并部署:云端安装依赖」(不上传node_modules),稍等一会就成功了。

编译运行

一切就绪,点刷新按钮编译运行,你就能在模拟器里看到小程序的样子了。

修复错误

直接在模拟器点击PDF加水印,测试能否完成。

报错了...别担心,遇到错误很正常,看不懂也没关系。

你只需要把调试器里的错误信息全部复制,原封不动发给 AI,说"帮我看看这是什么问题"。

AI 分析原因并给出了解决方案。我按照它的指示重新上传了云函数,然后重新编译。

去云开发控制台,查看云函数的日志。

如果还有错误,继续复制错误信息给 AI。

AI返回了解决方案。

AI 让我去云开发控制台把云函数的内存改成 512M、超时时间改成 20 秒。

几次来回之后,问题就能解决。

重新编译,运行,添加水印,预览文件,成功了!

手机预览

在开发者工具中测试成功了,但如何在手机上测试呢?

可以选择顶部菜单的预览或者真机调试,以预览为例。 点击顶部菜单栏的预览按钮,在手机上测试。

首页

设置水印内容、样式,实时预览效果,一切正常。

水印添加成功

添加成功后的文件可以直接在手机上打开查看。

到这一步,你自己做的「PDF添加水印」小程序已经能正常跑了。

上线

功能全部开发完成后,点击顶部菜单栏的上传按钮,可以在小程序后台版本管理看到,最下面的开发版本中有个体验版二维码。

点击提交审核,就会出现在审核版本,成功后会出现在线上版本,就发布成功了,可以在微信上搜索到你的小程序。

因为这个「PDF添加水印」小程序我只是为了讲解开发流程,并没有真的上线。 为了方便颜色,上面截图来自「那些年时光」小程序。

后记

回顾一下,我其实只做了三件事

用自然语言描述需求 → 让 AI 写核心代码 → 自己完成几步体力活

开发的门槛,其实已经降到很低了。

这个小程序目前只有加水印的功能,但只要你愿意,PDF 拆分、合并、图片转 PDF……通通可以丢给 AI 去实现。

微信云开发的免费额度对个人使用完全够用,真到了需要商用的阶段,再考虑自己买服务器也不迟。

如果你在操作过程中遇到问题,欢迎在评论区交流。下篇见。

系列文章

  1. 微信小程序注册全流程
  2. 零基础教程:手把手教你开发自己的微信小程序