目录

新手必看Cursor软件编写微信小程序全攻略

新手必看:Cursor软件编写微信小程序全攻略

新手必看:Cursor软件编写微信小程序全攻略

原创 AI大眼萌Yeah AI大眼萌 2024年11月16日 10:01 上海

小程序开发软件

微信官方文档里有

大家好,我是AI大眼萌。在数字化浪潮中, 微信小程序因其便捷性 和实用性而广受欢迎。Cursor软件则为开发者提供了一个高效、便捷的开发平台。接下来,让我们一起深入了解如何使用Cursor软件编写微信小程序吧!

一、下载并安装微信小程序开发软件💻

首先,在电脑上下 载并安装微信小程序开发软件。这款软件不仅提供了丰富 的开发工具,还具备强大的调试功能,助力开发者高效完成小程序的开发。

https://img-blog.csdnimg.cn/img_convert/03d3ba04ceaed110a01ce78dce2e5e0e.jpeg

二、新建小程序模板📝

安装完成后,选择不使用 模板,新建一个小程序模板作为开发的基础框架。你可以根据自己的需求对其进行修改和完善,打造出独一无二的小程序。

https://img-blog.csdnimg.cn/img_convert/66131384046768fc10de62d398f7be21.jpeg

https://img-blog.csdnimg.cn/img_convert/78477bed327793a79cdc470cccfa1e3c.jpeg

三、启动Cursor软件🔧

接下来,在刚刚小程序软件新建的项目中,打开Cursor软件。这款强大的编程辅助工具将助力 你更加便捷地进行代码编写和调试,让开发过程更加轻松愉快。当前目录已完成微信小程序项目的初始化。

https://img-blog.csdnimg.cn/img_convert/a02cca173d8f4c087110e98e03ebda49.jpeg

四、在Cursor软件中编程💡

在Cursor软件中 开始编写小程序代码,丰富的代码库和编程接口任你选择。同时,智能提示和错误检查功能将助你避免常见编程错误,提高开发效率 。

  • control+i调出composer ,将需求输入,选中模型 claude-3.5-sonnet-20241022
1.你是一个经验丰富的微信小程序UI工程师,熟悉微信的UI设计,设计风格简约明朗2.你将负责设计微信小程序的UI3.你现在已经在微信小程序的项目中,不用帮我生成项目目录结构4.我需要设计一个页面:页面有一个输入框,一个按钮5.输入框中输入内容,点击按钮后,会调用coze的api,调用成功后,会返回一个图片的URL,将图片的URL显示在页面上6.所有调整备注更新至readme.md

https://img-blog.csdnimg.cn/img_convert/ae07a37614d040c8884df1f1a4151fee.jpeg

  • Cursor会自动生成页面,点击accept all

https://img-blog.csdnimg.cn/img_convert/7845c74d23096328dcdef7c2aa67b87f.jpeg

五、微信小程序开发软件界面调试🔍

完成代码编写后,在微信小程序开发软件界面进行调试。利用断点调试、性能分析等工具,深入了解小程序运行情况,确保其稳定流畅。

  • 发现debug区域有错误告警

https://img-blog.csdnimg.cn/img_convert/e00d2e8f7353995b995bfd3b580cc8f0.jpeg

  • 将告警黏贴至Cursor中,会自动寻求解决方案

https://img-blog.csdnimg.cn/img_convert/6f7270df30e46f7c644e1ae867fffe66.jpeg

https://img-blog.csdnimg.cn/img_convert/53d62b426dabaa27e226cfc90ec8c0f1.jpeg

  • 根据提示修复后,页面如下

https://img-blog.csdnimg.cn/img_convert/72db2200594258b74856f8305a76286c.jpeg

六、添加COZE API接口

  • 配置小程序CozeApi 接口
参考https://www.coze.cn/docs/developer_guides/workflow_run,配置api接口,api会返回图片URL地址。参考API 文档:curl --location --request POST 'https://api.coze.cn/v1/workflow/run' \--header 'Authorization: Bearer pat_hfwkehfncaf****' \--header 'Content-Type: application/json' \--data-raw '{    "workflow_id": "73664689170551*****",    "parameters": {        "user_id":"12345",        "user_name":"George"    }}'  {    "code": 0,    "cost": "0",    "data": "{\"output\":\"北京的经度为116.4074°E,纬度为39.9042°N。\"}",    "debug_url": "https://www.coze.cn/work_flow?execute_id=741364789030728****&space_id=736142423532160****&workflow_id=738958910358870****",    "msg": "Success",    "token": 98}

https://img-blog.csdnimg.cn/img_convert/3591456d80b5e074a7a5d1dd364c0a34.jpeg

https://img-blog.csdnimg.cn/img_convert/6887d491dcfc27d433423aea1de0feb3.jpeg

  • 按照提示,将 coze的API和工作流id填入程 序中

https://img-blog.csdnimg.cn/img_convert/df55d8f617524f1ec3a8a831a84dd7fe.jpeg

https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FKf2TPJibKHZN56FH6rze362qleKXOXEbnticGJ3PibOFPCYs5WcGfzmSNCoMH8EHLsMtWOfhgVS5kRgYDkTGRSUGw%2F640&pos_id=CzmFTkGn

  • 点击生成图片,即可立即生成图片

七、发布与上线🚀

调试无误后,按照微信平台 要求进行设置和审核,即可将小程序发布至微信平台供用户使用。总之,Cursor软件让微信小 程序开发变得简单高效。💪

https://img-blog.csdnimg.cn/img_convert/2d6004d37c9707e769975961dc0eed1c.jpeg

📝 结语

通过运用Cursor软件,开发者们能够以前所未有的简便与高效进行微信小程序的开发工作。Cursor不仅提供了强大的编程辅助功能,还能通过智能提示和错误检查来优化开发流程,显著提升开发效率。结合微信小程序的便捷性和实用性,Cursor无疑成为了开发者们的得力助手,让每一位开发者都能够轻松打造出独具特色、稳定流畅的小程序,为用户带来更加丰富和优质的体验。