【Code With SOLO】用 SOLO WEB端半小时搓一个非常实用的水印打卡相机小程序!!!

摘要

新版Solo出来这么久了,还没有用它写过小程序。这次用WEB端的全新SOLO从0-1写了一个水印打卡相机小程序,带时间、天气和地点水印的打卡小程序。不仅实现了真机实时取景和 Canvas 高清照片合成,还顺手做了一个类似 iOS 原生的半透明毛玻璃 UI。作为好久没碰小程序的“野生开发者”,这次靠着网页版的 SOLO 在半小时内一口气填平了,体验了一把用自然语言开发的快乐。

背景

其实我已经好久没有写过微信小程序了,平时的工作更多是偏向运营、做做简单的数据分析或者写点静态页面。说实话,市面上的水印相机 App 体验真的让人一言难尽,要么一打开全是各种满屏的开屏广告,要么水印的样式丑得没法看,字体排版永远透着一股上个世纪的乡土气息。

我就一直琢磨着,能不能自己搞一个简约一点的,没有任何乱七八糟功能的水印相机?刚好最近社区里在办 SOLO 挑战赛,我就决定借着这个机会,用新的网页版SOLO加上微信开发工具手搓一个,直接在网页端用自然语言带着我重新杀回小程序开发,虽然WEB每次写好都要下载出来调试,没想到这次才迭代了三四个版本就写完了,效率非常高。

实践过程

第一次迭代:

我先让它帮我搭个基础的骨架。我给 SOLO 下了一个很直白的指令:

“帮我建一个微信小程序,主页是全屏相机,画面上要带上当前时间和天气的水印,而且我还需要一个设置面板可以随时隐藏这些水印。

SOLO 的响应速度极快,差不多一两分钟就把 app.json、页面路由和基础的 camera 组件架子搭好了,甚至连获取时间的工具函数都一并写好了。我只需要把代码贴进开发者工具里就能直接跑。

第一部分solo出来的结果和效果图

第二次迭代:

架子有了,第二迭代开始调 UI。初始版本的按钮丑爆了,居然还带 emoji。我赶紧对 SOLO 吐槽:“把 emoji 全删了,按钮给我换成毛玻璃(Glassmorphism)风格,还有,页面一划就上下跑,把滚动给我禁了。”SOLO 很快改了样式,用了 backdrop-filter ,按钮瞬间变得很通透。json 里加个 disableScroll ,沉浸感立马就有了。而且反转屏幕的按钮被小程序原生的按钮挡住了 我让他把反转按钮改到左边了。

中间踩了个经典的坑:原生 camera 组件的 z-index 是无敌的,导致我点开设置弹窗的时候,水印文字死活压在弹窗上面。我把这 bug 喂给 SOLO,它给的解法简单粗暴:用 wx:if,弹窗出来的一瞬间把水印层干掉,关弹窗再显示出来。虽然有点 trick,但完美绕开了原生层级的坑。

第二部分solo出来的结果和效果图

第三次迭代:

最后就是定位了。我怎么点击都无法获得相机的定位,我想了既然他定位不了我让它接入腾讯位置服务 API 做了逆地址解析。它还挺细心,把没给定位权限的异常处理也写了:用户拒绝过定位的话,点顶部胶囊会自动弹窗引导去设置页重新授权。

最后效果展示

总结一下

最后做出来的成品效果还不错,界面简洁,全屏拍照体验很干净。顶部有定位胶囊,左上角可以切换镜头,底部半透明弹窗里能开关水印,也能调整水印到四个角落,导出的图片清晰度不错,水印还带了一点阴影效果非常不错!很难相信这是三四十分钟搓出来的。

这次用是SOLO国际版的WEB端开发的效率挺高的,虽然WEB端每次写完都要下载出来然后用微信小程序再打开调试,期待Windows版本的SOLO。要是以前自己啃小程序文档、处理 Canvas 和各种权限,大概率要花很长时间才能搞定,这次从构思到真机跑通拍照保存,只用了半个多小时。这次新版的SOLO用起来很顺手包括上一个作品用它搓了一个多平台发布的浏览器插件,这次又搓了一个水印相机小程序,它更像一个能快速响应的开发帮手,简单说下需求就能调整代码。之后再碰到不熟悉的技术栈,不用死磕文档,先用它快速出一个 Demo,再在此基础上修改完善,效率会高很多。

最后我把这次搓出来的水印相机小程序的项目上传到Github上分享出来!!!欢迎大家在评论区提取意见

发布后迭代的版本:

v1.1.0 (2026.4.11)

-新增相机水印,现已支持自定义文字设置。

1 个赞

高产似汤圆!

1 个赞

是SOLO太牛了

1 个赞

太全面了,圆哥这是搞小程序矩阵?

啊哈哈哈哈哈哈哈哈

1 个赞

v1.1.0 (2026.4.11)

-新增相机水印,现已支持自定义文字设置。

1 个赞