大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



身为编程小白，过去的我一直觉得制作网页和小程序遥不可及。直到发现了 cursor，它操作便捷、功能强大，瞬间拉近了我与编程的距离，让这些曾经的奢望有了实现的可能。

在这篇文章中，我将详细记录自己如何借助 cursor 一步步完成网页与小程序制作的全过程。如果你也和曾经的我一样，渴望入门编程却不知从何下手，不妨跟着我的经历一起探索，看看 cursor 能为我们开启怎样一扇通往编程新世界的大门。

我将使用cursor制作的网页、小程序等各种文件放在网盘中，大家可以自行下载查看：

百度网盘：

https://pan.baidu.com/s/1HQNek09E8JzjYSIDE24t?pwd=tqaq 提取码: tqaq

夸克网盘：

https://pan.quark.cn/s/bb0f8c

迅雷云盘：

https://pan.xunlei.com/s/VOLiiTsMeNBkXDEIxqGZzO-9A1?pwd=ck86#

1. cursor下载地址：https://www.cursor.com/

2. 下载完成后，单击下载的安装包即可自动完成安装。

3. 安装完成后，打开cursor会来到初始页面，Language for AI栏填写中文。

• 回到cursor官网，注册账号，填写一个未注册的邮箱，cursor会给邮箱发送一个验证码，填写验证码即可成功注册，使用新邮箱注册的账号有14天的试用期

1. 1. 对于一个新安装的cursor，界面应该是全英文的，可以安装汉化插件。首先点击下图左上角的按钮即可打开右侧栏，点击扩展图标，可以在该搜索框内搜索我们需要用到的扩展。（由于图中软件已安装汉化插件，所以左上角的文字是中文形式，刚安装的cursor应该都是英文）。
   

1. 2. 在扩展框中搜索chinese，即可搜索到汉化插件，点击该插件，选择安装，安装后重启cursor，再次打开就可以看到界面是汉化后的形式了。
   

值得注意的是，我们每新建一个项目都需要在一个新的文件夹内，这样方便cursor识别，点击中间的Open a folder按钮或者打开文件夹都可以打开要建项目的文件夹

对于不同的项目要打开不同的文件夹，为了独立每个不同的项目，我们可以点击新建窗口，即可打开一个新的窗口，在另一个新窗口中可以选择打开另一个项目的文件夹。

1. 1. 打开左侧侧栏，可以看到文件夹及文件夹下的子文件，以及Git、扩展等。
   

1. 2. 打开下边栏，显示代码运行过程中的输出，以及调试、运行报错等都在这个窗口显示。
   

1. 3. 打开右边栏，就是我们的聊天对话框了，chat模式主要是和cursor进行交流，它可以反馈解决方案；编程生成多个文件主要使用中间的composer。在composer对话框中可以和cursor交流对项目的想法，以及代码报错时可以直接讲报错粘贴到聊天框中告诉cursor来解决。
   

1. 1. 当composer给出对应的代码文件后，可以使用Accept all一键接受所有代码，不需要对单个文件复制粘贴。Reject all则代表拒绝给出的代码。这里只讲解一些最常使用的按钮，其他的按钮可以自己再去探索学习。
   

1. 2. 当接受了这次代码，但发现效果不如上一次或者之前某一次代码时，我们就需要将代码回退到之前的版本，最好的办法是使用Git定时的提交版本，Git的学习可以参考廖雪峰的教程：
   
2. https://liaoxuefeng.com/books/git/introduction/index.html。
   
3. 对于一些大的版本上的迭代我们可以使用git，而对一些小的更改，我们想使代码回退到之前的版本，可以找到某一个版本代码之后的对话框，选择右上角的向上箭头按钮，即可回退到上一版本，并可以修改对话框内容重新生成新的代码。
   

有了上述一些基础的认知，我们就可以开始我们的编程了，小试牛刀，我想编写一个网页，可以在这个网页上浏览一些重大节日的倒计时，同时可以自定义时间，计算目前距离自定义时间的倒计时。

为了实现我们的目标，我们首先要为这个项目新建一个文件夹，这里命名为daojishi-main，在文件夹中，我们首先要写一个说明文档，让cursor理解编写代码的一些基础规则，我们新建一个.cursorrules文件，在文件内写入我们的提示词（提示词可以找AI生成），cursor运行时即可自动理解。

完成上一步后就可以在composer中和cursor对话，首先简要的告诉他你的设计想法，此时功能可以不需要太全面，后续再补充即可，我会告诉cursor基础的网站功能，让他尽量详细的告诉我们怎么做，同时将.cursorrules文件作为cursor变成的基本规则。

例如我想制作一个距离重大节假日倒计时网页，因此我告诉cursor：

请帮我开发一个“倒计时”网站，这个网站的功能是：

1、用户打开页面后可以选择制定的日期和具体时间

2、点击开始倒计时，展示目前时间距离用户指定时间的时长并开始进行实时的倒计时展示

你是个非常出色的工程师和设计师，请在完成功能设计的基础上帮我实现出色的有苹果风格视觉设计。

可以看到cursor在快速的回答我们的问题并生成代码，点击Accept all接受所有代码建议。

当cursor给出每一版代码时，我们可以去项目文件夹查看已经生成的网页，以我要制作的倒计时网页为例，cursor已经告诉我们了主页面是index.html，我们在项目文件夹内找到这个文件，就可以看到现在网页的生成效果。

观察到页面效果后，如果有需要调整或者新增的功能，就可以按照自己的思路和cursor进行沟通了，生成的代码可以使用Git提交，一些小的改动也可以回到想要修改的位置，选择回退到某一版本。例如我要设计的倒计时网页，最初的需求只是想要实现选择某一时间开始倒计时功能，最上方一列是在cursor交流过程中新增的需求，我希望添加几个重大节假日的倒计时按钮，点击相应按钮可以跳转到对应的界面，因此我告诉cursor：

就这样在一次次和cursor的交流中，我实现了我想要的倒计时网页效果：主页包含几个重大节假日倒计时按钮，点击即可跳转到对应页面展示距离该节假日的倒计时；主页还可以自定义时间，点击开始倒计时，下方开始倒计时，展示倒计时间。

在使用cursor进行完页面设计后，我们从项目文件夹内点击.html文件就可以看到实现的效果，但现在这个页面文件实在自己的本地电脑上，如果想要在网络上被看到，就需要进行部署，这就需要购买域名和服务器，这一步也设计很多操作，尤其是一些涉及到后台数据的网页更加复杂，因此这里选择在之后单开文章进行讲解，这里为了简单展示一下设计的页面可以通过网络访问，我将项目文件夹上传到了我的github仓库，并将选择发布在一个国外的网站托管平台Vercel，该网站为我的项目创建了一个可以网络访问的链接，但由于在国外平台，需要科学上网才能访问，所以这里录制了一个简单的视频展示。

https://www.zhihu.com/video/1887628931865236092

下面放上我的github仓库地址，Vercel平台的地址以及该网页的访问地址，有条件的朋友可以去看一看。

Github：

https://github.com/Shuyiee/daojishi.git

Vercel平台：

https://vercel.com/home

成果展示网址：

https://daojishi-34zsw0uxp-shuyiees-projects.vercel.app/

前一节已经讲了怎么利用cursor制作一个简单的倒计时网页，这节来讲述怎么使用cursor制作一个微信小程序，这里还是以制作一个可以进行倒计时功能的小程序为例。

第一步肯定是要注册一个微信小程序，首先到微信公众平台（https://mp.weixin..com/cgi-bin/loginpage?t=wxm2-login&lang=en_US）注册一个小程序，来到注册好的页面后，在左侧导航栏选择管理–开发管理，复制小程序的ID。

http://mp.weixin..com/mp/scanlogin?action=index&qrticket=320ab1b41bcd87f8786ed09c76c2ad3e&scanscene=0#wechat_redirect (二维码自动识别)

第二步，下载微信小程序的开发者工具，打开下载地址（https://developers.weixin..com/miniprogram/dev/devtools/download.html），选择自己电脑对应的型号下载，这里我选择Windows 64，下载并安装该开发者工具。

微信开发者工具安装完成后，打开该软件，使用注册小程序账号的微信扫码登录，选择创建小程序，在创建小程序页面，为该项目起一个名字，目录行填写该项目文件的放置位置；AppID粘贴第一步复制的小程序ID；后端服务选择不使用云服务；模板选择不使用模板，最后点击右下角创建按钮即可创建一个小程序。

1. 1. 打开cursor，点击右上角文件–新建窗口–Open a folder–选择刚刚在创建小程序时选择的项目文件夹
   

1. 2. 在左侧菜单栏新建一个readme.md文档，主要用来添加对该项目的说明，步骤是：鼠标右键–新建文件–输入readme.md–按回车创建文件。在该文件中添加对项目的说明内容并保存。
   

1. 3. 打开右侧边栏和下侧边栏，选择composer，在对话框中输入内容：按照readme.md来编程，cursor则可以给出回应生成代码，点击Accept all，接受所有代码。
   

1. 4. 回到微信开发者工具界面，点击编译，就可以在左侧看到cursor帮我们写的代码的编译效果。
   

这里和网页设计一样，初次设计的功能可能不那么完善，或者页面设计不是很满意，在此回到cursor，和cursor继续交流想法来完善代码，遇到不错的版本可以先提交Git保存。

当然，在编程过程中难免遇到不知道怎么操作的、报错的，这些都可以直接丢给cursor让他自己检查修复。

1. 1. 小程序编写完成后，就要准备发布和上线了。在发布前，现在微信开发者工具页面点击预览进行最后的检查，这里使用微信扫码即可在手机上预览到即将发布的页面。
   

https://mp.weixin..com/a/~~3atklz0MZDw~c5zW1hOc82eoY744_2pFVQ~~ (二维码自动识别)

1. 2. 检查没有问题后，点击左上角的上传，填写信息并添加项目备注，例如如果是第一次提交这个小程序，可以备注first version。由于我这里在之前已经上传过版本1.0.0，这里选择了修补补丁，版本号为1.0.1，完成后点击上传。
   

1. 3. 上传完成后，回到微信公众平台的小程序后台，选择管理下的版本管理，下拉页面到最后，可以看到开发版本显示了我们最新提交的版本，点击提交审核，简单描述后等待审核通过，审核通过后选择发布上线即可完成全部流程。
   

小程序发布上线后，用户就可以通过搜索或者扫描小程序发看到实际效果了，由于我的小程序没有进行认证，这里只能通过扫描小程序码查看实际效果，感兴趣的朋友可以扫码查看。