1. 零前端经验也能跑通Cursor 写微信小程序到底靠不靠谱先说结论Cursor 写微信小程序对零前端经验的产品和运营同学来说是当前门槛最低的一条路。它不是一个帮你写代码的玩具而是一个能读懂你项目目录、能改多个文件、能自己跑命令的编程助手。你只要把需求说清楚它就能把pages/index/index.wxml、index.js、index.wxss这些文件一次性生成出来。微信小程序本身的结构其实很固定一个app.json管全局页面注册一个app.js管生命周期每个页面由四个文件组成——结构wxml、样式wxss、逻辑js、配置json。这套东西对程序员来说是常识但对没写过前端的人来说光记住这四个后缀就够头疼的。Cursor 的价值就在于你不需要记这些你只需要描述我要一个能选日期、显示今日宜忌的页面它会把四个文件都补齐。我这次做的 Demo 是一个程序员老黄历小程序打开后显示今天的日期下面列出宜写代码忌改需求这类条目还能点按钮切换日期查看不同结果。整个流程从建项目到真机预览跑通实测 15 分钟左右。这里面唯一需要你动手配置的是 AI 能力的接入——因为 Cursor 内置的对话模型和你要在小程序里调用的模型是两回事。小程序里如果要生成今日宜忌这种动态内容需要一个稳定的 API 入口我用的是 TaoToken 的统一 Key一个 Base URL 加一个 Key 就能切换不同模型省得在小程序里到处改配置。这篇文章会给你三样能直接抄的东西一份 Cursor 项目规则文件、一套小程序目录结构模板、一段 TaoToken 的 Base URL 配置片段。目标很明确——15 分钟内你能在自己电脑上跑出一个能点、能切日期、能调接口的小程序 Demo。适合谁看做过产品文档、写过运营活动页、但没碰过前端工程的同学。你不需要懂 JavaScript 的闭包也不需要懂小程序的双线程架构跟着步骤走就行。踩过的坑我会在第 5 节列出来包括 401、local proxy failed 这些真实报错怎么处理。2. 前置准备Cursor 项目规则文件与 TaoToken 统一 Key 配置这一节解决两个问题让 Cursor 知道这是个微信小程序项目别乱写以及让小程序有一个能调用的模型入口。先说 Cursor 这边。Cursor 默认不知道你在写小程序它可能给你生成 React 或者 Vue 的代码。解决办法是在项目根目录放一个规则文件。Cursor 支持.cursorrules文件也支持在设置里配 Project Rules。我习惯用.cursorrules因为跟着项目走换电脑也不会丢。内容如下直接复制到项目根目录# 项目类型微信小程序原生非 uni-app / taro # 技术约束 - 所有页面必须使用原生小程序语法wxml / wxss / js / json - 禁止使用 React、Vue、TypeScript、npm 包 - 页面逻辑写在 Page({}) 中组件写在 Component({}) 中 - 网络请求统一使用 wx.request禁止使用 fetch / axios - 样式单位使用 rpx设计稿按 750px 宽度换算 # 目录约定 - 页面放在 pages/ 下每个页面一个文件夹 - 公共逻辑放在 utils/ 下 - 全局配置写在 app.json # 输出要求 - 每次修改后把改动说明追加到 readme.md 的「开发日志」章节 - 生成代码时给出完整文件内容不要用省略号代替这个文件的作用是给 Cursor 划边界。没有它你让它加个按钮它可能给你写个button onClick{}那是 React 语法小程序根本不认。再说 TaoToken。小程序里要生成今日宜忌这种内容需要一个模型接口。TaoToken 的定位是统一 Key 接入层你注册后拿到一个 Key配一个 Base URL就能调用它支持的多个模型不用为每个模型单独申请账号、单独改代码。对小程序这种要频繁切换模型试效果的项目来说这点很省事。配置片段如下放在utils/config.js里// utils/config.js // TaoToken 统一 Key 配置 // 官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content // API 地址https://taotoken.net/api const TAOTOKEN_CONFIG { baseUrl: https://taotoken.net/api, apiKey: sk-你的Key填这里, // 在控制台创建https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite model: claude-sonnet-4-5, // 可换成其他模型 ID timeout: 30000 }; module.exports TAOTOKEN_CONFIG;这里三个字段要记牢Base URL、Key、Model ID。后面不管你是用 Cursor 内置对话、还是在小程序里发请求都是这三件套。Key 的创建入口在控制台的 API Keys 页面文档在接入文档里两个链接我都放在第 6 节。有一点要注意小程序的wx.request对域名有白名单要求。开发阶段你可以在微信开发者工具里勾选不校验合法域名但真机预览和上线必须把https://taotoken.net加到小程序后台的 request 合法域名里。这一步不做真机上请求会直接失败报错是request:fail url not in domain list。3. 可复制配置小程序目录结构模板与 Cursor Composer 提示词这一节给你两样能直接用的东西目录结构模板和一段能让 Cursor 一次性生成页面的提示词。先建项目。打开微信开发者工具新建项目填名称、选目录、开发模式选小程序模板选不使用模板或者JavaScript-基础模板都行。创建完之后目录大概是这样miniprogram-demo/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json ├── pages/ │ └── index/ │ ├── index.wxml │ ├── index.wxss │ ├── index.js │ └── index.json └── utils/ └── config.js然后把这个目录用 Cursor 打开。在根目录新建.cursorrules内容用上一节的再新建readme.md把需求写进去。需求文档我建议按这个结构写Cursor 读起来最顺# 程序员老黄历小程序 ## 功能概述 - 首页显示当前日期 - 显示今日「宜」和「忌」各三条 - 提供日期选择器切换日期后重新生成内容 - 内容由 AI 接口生成接口配置见 utils/config.js ## 内容示例 宜写单元测试、重构旧代码、提交 PR 忌改需求、上线、开会 ## UI 需求 - 顶部大号显示日期 - 中间卡片显示宜忌宜用绿色忌用红色 - 底部一个「换一天」按钮 - 整体居中留白充足字体不小于 28rpx ## 开发日志 每次修改后在此追加写完保存按CtrlIMac 是CmdI调出 Composer输入根据 readme.md 中的需求帮我实现这个微信小程序。 要求 1. 使用原生小程序语法不要用任何框架 2. 网络请求写在 utils/request.js 里统一从 utils/config.js 读配置 3. 接口调用失败时要有兜底文案不能白屏 4. 完成后把改动追加到 readme.md 的开发日志Composer 会开始生成文件。它一般会先建utils/request.js再改pages/index/下的四个文件最后更新app.json注册页面。生成过程中你能看到它逐个文件写入不用你手动复制粘贴。这里有个细节值得说为什么要把请求单独抽到utils/request.js因为小程序里wx.request是回调式的写多了容易乱。抽出来之后页面里只调request({...})返回 Promise逻辑清爽。Cursor 默认可能把请求直接写在页面里你在提示词里明确要求抽出来它就会照做。配置片段再贴一次这次是utils/request.js的核心部分// utils/request.js const config require(./config); function request(messages) { return new Promise((resolve, reject) { wx.request({ url: ${config.baseUrl}/v1/messages, method: POST, timeout: config.timeout, header: { Content-Type: application/json, x-api-key: config.apiKey, anthropic-version: 2023-06-01 }, data: { model: config.model, max_tokens: 512, messages: messages }, success: (res) { if (res.statusCode 200) { resolve(res.data); } else { reject(new Error(HTTP ${res.statusCode}: ${JSON.stringify(res.data)})); } }, fail: (err) reject(err) }); }); } module.exports request;注意 header 里的x-api-key和anthropic-version这是调用 Claude 系列模型时的标准写法。如果你换成别的模型header 可能要调整具体看接入文档。Model ID 也要和 header 匹配用claude-sonnet-4-5就配 Anthropic 格式用别的模型就换对应的字段名。4. 验证请求真机预览与接口连通性检查代码生成完先别急着高兴得验证两件事页面能不能正常渲染接口能不能通。第一步在微信开发者工具里点编译。如果app.json里页面路径注册对了模拟器里应该能看到首页。这时候大概率会看到内容区域是空的或者显示兜底文案因为接口还没通。这是正常的说明页面逻辑跑起来了只是数据没回来。第二步验证接口。在开发者工具的调试器里切到 Console手动跑一段const request require(./utils/request); request([{ role: user, content: 生成今日宜忌各三条用 JSON 返回 }]) .then(res console.log(成功, res)) .catch(err console.error(失败, err));如果返回 200 并且res.content里有内容说明 Base URL、Key、Model ID 三件套都对。如果报 401看第 5 节。如果报url not in domain list去开发者工具右上角详情→本地设置里勾上不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书。第三步把接口返回的内容接到页面上。这一步 Cursor 一般已经写好了你只需要确认pages/index/index.js里的onLoad和按钮点击事件都调了request。如果它把返回结果直接setData了但页面没更新检查一下setData的字段名和 wxml 里绑定的名字是否一致——这是新手最容易踩的坑{{yiji}}和{{yiJi}}大小写不一样页面就是不动。第四步真机预览。点开发者工具上的预览用微信扫码。真机上要注意两点一是合法域名必须配好二是手机和电脑要在同一个网络环境下调试如果你用了本地代理。真机跑通后你会看到日期、宜忌卡片、按钮都能正常交互点换一天会重新请求接口并刷新内容。实测下来从建项目到真机跑通15 分钟是够的前提是 Key 和域名配置一次到位。如果卡在接口上多半是域名白名单或者 header 格式的问题不是代码逻辑的问题。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节列四个真实会遇到的报错以及怎么处理。401 Unauthorized。这个最常见意思是 Key 不对或者没带上。检查三处utils/config.js里的apiKey是不是完整复制了有没有多余空格header 里的字段名是不是x-api-key有些模型用Authorization: Bearer别混Key 是不是在控制台被删了或者过期了。如果三处都对还是 401去控制台重新创建一个 Key 试试。local proxy failed。这个报错通常出现在你本地开了代理工具的时候。小程序开发者工具的网络请求走的是系统代理如果代理配置有问题请求会直接失败。处理办法关掉本地代理工具或者在开发者工具设置里把代理模式改成不使用任何代理。注意这里说的是本地开发工具的代理设置不是让你去搞什么网络工具纯粹是开发者工具的一个配置项。reading choices。这个报错说明你调用的接口返回格式和代码里解析的格式不匹配。比如你按 OpenAI 的格式解析res.data.choices[0]但实际返回的是 Anthropic 格式res.data.content[0].text。解决办法先在 Console 里console.log(res.data)看真实结构再改解析代码。Model ID 和返回格式是绑定的换模型要同步改解析逻辑。OAuth 相关报错。如果你在 Cursor 里登录账号时遇到 OAuth 失败先检查网络是否正常再检查 Cursor 版本是不是太旧。这类问题多半和账号登录态有关退出重新登录一般能解决。如果是在小程序里调接口遇到 OAuth 字样那说明你调的那个接口需要额外的鉴权流程不是简单的 Key 能搞定的换一个不需要 OAuth 的模型 ID 即可。排查顺序建议先看 HTTP 状态码再看返回体最后看代码解析。状态码 401 是鉴权问题404 是路径问题500 是服务端问题。返回体里通常有error.message直接读那句话比猜有用。另外提醒一句不要把 Key 硬编码在小程序前端代码里然后上传发布。开发阶段本地调试没问题但上线前一定要把 Key 放到你自己的后端服务里小程序只调你的后端由后端去调模型接口。前端代码是可以被反编译的Key 暴露了别人就能拿去用。6. 后续怎么用从 Demo 到可用小程序的路径Demo 跑通之后你手里其实已经有了一套可复用的骨架目录结构、请求封装、配置管理、Cursor 规则文件。接下来要做的是把老黄历换成你真正想做的功能。如果你要继续用 Cursor 开发建议把.cursorrules和readme.md当成项目资产维护。每加一个功能先在 readme 里写清楚需求和验收标准再让 Composer 动手。这样 Cursor 的产出会稳定很多不会东一榔头西一棒子。如果你要长期做编码类项目或者想让 AI 帮你处理更复杂的 Agent 任务可以了解一下 Coding Plan它比按次调用更适合高频使用的场景。如果只是想先验证模型效果、试试不同模型的输出差异直接用模型对话页面最方便不用写代码就能对比。接入过程中遇到配置问题优先看接入文档里面把 Base URL、Key、Model ID 的对应关系写得很清楚。Key 的管理和创建在 API Keys 页面建议给不同项目建不同的 Key方便排查和停用。最后说一个实用技巧小程序开发阶段把utils/config.js里的model字段做成可切换的配合 Cursor 的对话能力你可以快速对比不同模型生成今日宜忌的效果。哪个模型输出的内容更有趣、更符合你的产品调性就用哪个。这个对比过程不需要改任何页面代码只改一个字符串。真机预览通过之后上传代码的入口在开发者工具右上角上传按钮。填版本号和备注提交后在微信公众平台的版本管理里可以看到。如果只是自己玩提交体验版就够了不用走完整审核流程。