Cursor+云开发，让小姐姐轻松驾驭微信小程序开发的最佳拍档

image

写在最前

本故事讲述了如何不写一行代码，使用 Cursor + 腾讯云云开发这一最佳组合，来快速开发一个有前有后的 TodoList 微信小程序。麻雀虽小，五脏俱全，快来瞧瞧吧！

“在这个 AI 内容生成泛滥的时代，依然有一批人"傻傻"坚持原创，如果您能读到最后，还请点赞或收藏或关注支持下我呗，感谢 (￣︶￣)↗”

故事伊始

丹尼尔：蛋兄，早啊，又来晨跑啦

蛋先生：嗯，今天天气不错

丹尼尔：看到那边穿粉红色衣服的小姐姐了吗？

蛋先生：谁啊？

丹尼尔：我表妹

蛋先生：干啥呢？干啥呢？我都成家了，还有一个可爱的小公举呢

丹尼尔：误会啦，她想学怎么快速开发微信小程序

蛋先生：哈哈，我还以为你要介绍对象呢。这简单啊，我来告诉你个好法子

丹尼尔：我就知道，找你准没错

蛋先生：我们就拿一个经典的 TodoList 小程序来做例子吧。CRUD 一个不落，还有前有后，怎么样？

丹尼尔：一来就这么复杂的吗？不应该从 Hello World 开始吗？

蛋先生：直接来吧，这样更有趣，更实用！

故事高潮

➦ 第一步：创建一个微信小程序

蛋先生：我们先用微信开发者工具创建一个微信小程序，一切从零开始

image

丹尼尔：信心满满啊蛋兄

蛋先生：还行吧

➦ 第二步：用 Cursor 打开小程序项目，增加俩文件

丹尼尔：继续，蛋兄

蛋先生：接下来需要用 Cursor 打开我们的小程序项目

丹尼尔：Cursor 是啥啊？

蛋先生：一个很棒的 AI 代码编辑器

丹尼尔：不是有微信开发者工具吗？

蛋先生：待会你就会发现它的魅力了。然后我们还得加两文件

丹尼尔：哪两个？

蛋先生：一个是 .cursorrules 文件，用来明确告诉大模型开发小程序的一些规则

丹尼尔：什么规则？

蛋先生：这个文件的内容我们放后面再说

丹尼尔：好的，那另一个呢？

蛋先生：另一个是 wxCloudClientSDK.umd.js，用来调用腾讯云的云开发服务。你可以从这个链接下载：https://tcb.cloud.tencent.com/wx-cloud-client-sdk/1.2.1/wxCloudClientSDK.umd.js

image

➦ 第三步：让 Cursor 来生成 TodoList 功能代码

丹尼尔：我们该开始写代码了吧？

蛋先生：恩，该写代码了，不过不是我们，而是 Cursor

丹尼尔：啥？

蛋先生：请看表演

丹尼尔：这...

蛋先生：我们来看一下效果

➦ 第四步：生成数据模型文件

丹尼尔：哇，这太神奇了！不过，好像有点小问题耶

蛋先生：那是因为我们还没有后端服务

丹尼尔：后端服务？那可麻烦了，需要搞服务器、搞数据库，还得写接口，这 Cursor 搞不定吧？

蛋先生：别急，继续看表演

丹尼尔：咦，生成这个 JSON 有啥用？我们现在需要的是后端接口啊

➦ 第五步：导入数据模型

蛋先生：记住这个 name，然后睁大眼睛看清楚哦，不然一眨眼就错过了

image

丹尼尔：嗯，我在看呢！

蛋先生：那好，开始了...

➦ 第六步：见证奇迹

丹尼尔：哇，一个表格多了几列，但这有什么用呢？

蛋先生：再来看一下效果吧，见证奇迹的时刻到了

丹尼尔：就搞定了？这不会是魔术吧？

蛋先生：呵呵，这多亏了腾讯云云开发的数据模型能力，直接搞定了服务器+数据库+后端接口

丹尼尔：就这么几分钟，一句代码都没写，我的天啊

蛋先生：这样你的那位小姐姐应该可以上手吧

丹尼尔：我看行

故事结尾

蛋先生：最后把 .cursorrules 内容公布一下

你是一个微信小程序开发者

- 前端开发

    - 使用 JavaScript 进行小程序的开发

    - 优先采用 WeUI 组件设计和呈现用户界面

    - 新增页面需要在 app.json 中注册，并放在 pages 数组的最前面

- 后端服务交互

    - 确保在 app.js 文件中包含以下初始化代码，并提示用户填写【云开发环境 ID】

        ```js

        const { init } = require('./wxCloudClientSDK.umd.js')

        wx.cloud.init({
            env: "云开发环境 ID", // 当前的云开发环境 ID
        });

        init(wx.cloud);

        // 然后就可以通过 wx.cloud.models 调用数据模型服务
        
        ```

    - 调用数据模型服务的操作请参考以下示例

    ```
    【A】
    ```

- 数据模型构建

    - 请根据以下示例结构，在项目根目录下创建所需的数据模型文件 model.json。请确保生成的 JSON 结构完整包含示例结构的所有字段

    ```json
    【B】
    ```

丹尼尔：【A】和【B】是啥？

蛋先生：节省篇幅而已，【A】的内容可以直接从数据模型这里复制粘贴过来

image

丹尼尔：【B】呢？

蛋先生：对于【B】，你可以新建一个数据模型，创建一个字段，然后导出 JSON 内容，删除 pkgId 字段，将 methods 赋值为空数组 []，把这些内容贴过来就行了

image

丹尼尔：明白了，那我这就去试试看！

蛋先生：后会有期！

写在最后

“亲们，都到这了，要不，点赞或收藏或关注支持下我呗 o(￣▽￣)ｄ”