目录
4.6 Cursor显示Please upgrade to Pro to continue.
一、引言
一直怀揣着开发专属 APP 的梦想，想用它连接 MQTT 服务器操控小项目、获取实时信息，可完整的 APP 开发流程对我来说还是一片未知领域。虽然学过前端，但后端对接的复杂程度让我望而却步。直到我在 B 站 “挖宝” 时，偶然刷到一个 APP 开发教程视频。抱着试试看的心态，我决定先从构思已久的个人收藏 APP 入手，以此验证自己是否真的有能力实现心中那个连接项目与移动端的目标，开启这场充满挑战的开发之旅，我将在这篇文章里分享自己的开发经验，还有在开发时遇到的问题并且如何去解决的，以及个人的一些心得体会。
二、参考教程
这是b站名字叫三分钟实验室的up主的开发教程，我就是参考这个教程来开发自己的收藏APP，还是比较详细的。
一口气学会 小程序｜APP｜网页开发 ｜uniapp教程｜cursor｜devbox_哔哩哔哩_bilibili
三、准备工作
3.1 Node.js
下载链接：Node.js — Download Node.js®，推荐选择双数版本的，也就是LTS版本，中文就是长期支持版本，点击下面的Windows安装程序下载安装程序包，然后点击程序包就可以安装node.js了。
一般来说，安装完成之后，环境变量是会自动配置好的，可以自己去检查一下环境变量里面的系统变量的Path里是否配置好，没有的话可以自己配置一下，因为我是直接安装在D盘里面，所以这里的路径就是这样的。
接下来就是检查是否安装成功，我这里是Windows操作系统，按Win+r输入cmd打开终端，然后分别输入以下两个命令
node -v //查看node版本，验证是否安装成功npm -v //查看npm版本，验证是否安装成功我这里显示的就是这样子的版本
以上都没有问题的话，接下来要做的就是更换镜像源，因为如果不更换的话，后续要下载一些东西可能就会很慢，所以要更换成国内的镜像源，输入以下命令更换
npm config set registry https://registry.npmmirror.com然后输入以下命令验证是否更换成功
npm config get registry更换成功的话就会显示这样子的结果，到这里node.js就没问题了。
3.2 Cursor
下载链接：Cursor - The AI Code Editor，首先注册一个账户，然后点击下载Windows就可以了。
3.3 HbuilderX
下载链接：HBuilderX-高效极客技巧，直接点击Download for Windows就可以了。
四、问题和解决方法
4.1 运行npm i报错
这个问题就出在终端上，因为默认的终端是powershell，但是我们这个命令应该运行在cmd，所以只要我们换个终端就可以了，点击＋旁边的箭头选到Command Prompt就可以了。
打开这个终端之后，你可以输入一开始验证node和npm版本的命令，正常是会输出跟一开始看到的一样的版本，这样就可以在这里输入npm i命令了。
4.2 dev:h5点击运行脚本报错
同样也是终端的问题，看到它运行的命令了吗，没错，就是下面这条命令，把这条命令复制，同样还是打开cmd的终端窗口，然后粘贴回车就可以正常运行了。
npm run dev:h5
4.3 Sealos点击cursor打开后端失败
如果是第一次打开的话，cursor会自动提示你要安装什么扩展，都点击安装就可以了，目前安装的扩展比较重要的应该就是这几个，尤其是SSH，这个是用于远程连接的。
这些安装完成之后，cursor的后端页面应该是正常显示的，如果报错的话，这个我没遇到，可以尝试关闭后端页面，再次从sealos点击cursor打开，如果还是报错的话，那就只能在sealos点击工单描述自己遇到的问题并提交了。
4.4 打开devbox公网调试地址页面报错
如果你点击链接打开之后，标签显示error，页面内容显示Cannot GET /，那么估计就是后端有问题，但是不用着急，把这个错误抛给Claude，相信它会给出答案。
经过它的回答之后，点击接受，再打开页面应该就会正常了，但是也有可能显示的不是up主显示的404页面，也有可能会显示其它内容，比如我这里显示的是这样的。
显示的这些内容，已经能够看出来是可以正常访问的，但是如果你不放心，你也可以把这个内容复制去问Claude，毕竟每个人想做的APP不同，返回的信息肯定也是不一样的。
4.5 创建uni-app运行命令报错
解决办法也很容易解决，说白了就是GitHub访问不了或者超时了，那咱们就去国内的gitee下载，对的没错，点击那个访问gitee下载，下载的压缩包，下载完解压出来跟运行命令的文件目录是一模一样的，丝毫不用担心。
4.6 Cursor显示Please upgrade to Pro to continue.
遇到这个问题，首先要去查看自己的配额是否用完又或者去查看试用期是否到期了，经过查看都没问题，不过我用到50就出现这个问题了，估计是不给用快速请求了。
那么这时候该怎么办呢，不用着急，我当时的想法是这样的，既然快速请求不给用，那我就不用快速请求，慢一点的也没事，于是我尝试对着回车键不断点击，终于，出现了以下这一行字，什么意思呢，这句话就是慢速请求，让你切换到自动模式以使用更快的响应又或者升级，不过有时候要按回车键好多次，还是挺考验耐心的，个人建议还是挑没什么人的时间段使用比较好。
4.7HbuildeX打包成安卓APP后下载使用有问题
比如我打包好之后发送到手机安装使用之后发现报错，点击登录和注册提示formdata is not defined，遇到这种问题的话首先也不要着急，先把错误抛给deepseek或者其它AI，询问是前端还是后端问题，再去对Claude的前端和后端进行提问，比如我这个错误可能就是因为前端的FormData可能未定义或无法正确识别，于是去前端询问Claude解决方法，全部接受之后再次打包，再次安装成功登录和注册，问题解决。遇到这种问题的话，首先是要定位是前端问题还是后端问题，然后再把问题详细的说给Claude，Claude应该就可以解决。
五、APP展示
5.1 图片展示
登录和注册页面
首页
第一张照片就是做的草图，然后在这个草图的基础上添加了筛选和搜索功能
添加页面
添加页面的话呢，因为我不知道怎么设计UI了，于是我只做成了这个草图，然后抛给Claude让它自己帮我设计，于是它就设计成这个样子的，我觉得还是不错的
详情页面
详情页面展示了收藏品的详情信息，还可以编辑信息，其中名称，价格和类别必填，其它选填，没有填的不显示，填了才会显示，但是唯独不能编辑图片，因为图片的url处理太难了，光是让添加页面添加图片，首页展示图片以及详情页展示图片这三个功能，就花了我很长的时间，最后这个编辑图片的功能实在是修改不出来了，于是就不添加编辑图片的功能了，想着大不了删掉再重新添加就好了，主打的就是技术不够，人力来凑。
5.2 视频展示
Cursor零基础开发个人收藏APP_哔哩哔哩_bilibili
六、个人体会及总结
开发一款真正的 APP，是一场充满挑战与惊喜的探索之旅。在实践过程中，需要掌握繁多的知识，也面临诸多待解的难题。就像我在开发中，因忽视手机顶部状态栏的适配，导致 APP 整体视觉效果大打折扣；总金额的显示功能，也因未能精准呈现小数位，影响了使用体验。只有亲身投入其中，反复调试优化，才能真切体会到开发背后的艰辛。虽然每一步都可能遭遇阻碍，但攻克困难的过程，也让我积累了宝贵经验。无论最终成果如何，这段经历都让我收获满满，为后续的开发之路奠定了坚实基础。所有看似波澜不惊的日复一日，都在等待厚积薄发的那一刻。只要步履不停，每一步深耕都会在时光里沉淀为向上的力量。不必焦虑终点的远近，只管怀揣热爱奔赴山海，岁月自会在恰当的节点，为所有坚持写下注脚。
扫一扫
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
