微信开发者

从用上到爱用,AI 代码助手经验分享

微信开发者工具开放集成的代码助手,除了能支持小程序项目开发之外,还支持公众号、多端应用等项目的开发。

开发者 A:“让不会编程的我,也能一分钟成为开发者”

开发者 B:“接手的项目代码像天书,扔给代码助手帮忙理解,屎山变金山,我也能看懂了”

开发者 C:“全程扮演产品同学和测试同学,一行代码没写做了个小程序。(手动狗头/打字太累了,推荐出个语音交互哇)”

上线后,我们收到许多开发者的支持和体验反馈,并从中摘选了几个高赞的内容,和大家一起分享使用经验。看看为什么越来越多开发者从用上 AI 代码助手,到爱用代码助手。

高赞经验

项目迭代场景

「代码助手」在已有项目的迭代场景中使用更加频繁,开发者常常用「代码助手」来实现新功能、修复缺陷、性能优化等工作。

虽然代码助手会在项目中分析项目代码,但是还是有一些背景知识是代码中无法获得的(比如约定的数据格式、服务通信方式),因此在使用「代码助手」时,需要将你的想法清晰的表达出来,并尽可能的补充你的要求,代码助手会更容易理解并在你要求的范围内工作。

开发者 小黎 分享了一个范式:

  1. 告诉代码助手你想使用的技术栈 [ 技术 | 语言 | 框架 | 插件 ] ,并且按需指定版本

  2. 描述你的功能

  3. 告诉 AI 引用哪些 [ 文件 | 代码片段 | 开发文档 | 插件依赖 | 三方库 | API ]

  4. 你的约束条件 [ 性能 | 风格 | 输出格式 | 边界与异常处理 | 排除法 ] 等

开发者 RUM 则直接给出了例子:

  1. 在使用代码助手时,尽量描述功能需求时保持简洁明了。例如,不要写「我想要做一个界面」,而是直接描述「我想要做一个用户信息展示页面,显示头像、昵称和签名」

  2. 如果你想生成一个界面,尝试使用类似「展示」、「创建」之类的关键词,这样代码助手能更清楚地理解你的需求。

  3. 当描述复杂功能时,可以分开逐步描述。例如,先生成一个布局,再逐步添加交互功能。

新建项目场景

如果你使用「代码助手」做一个新的项目,根据项目的复杂程度,可能会有不同的经验。

简单的项目,比如「计算器」、「单位转换」,这种单一功能性的项目,如果你对界面风格、产品交互上没有特殊要求,只注重功能的实现,你可以直接用一句话讲清楚。「代码助手」会根据业界常见的理解来新建项目。

开发者 游戏人生 就用一句话写了一个功能完整的页面组件,他则在后续借鉴用于自己已有的项目开发中:

一行提示词搞定表单校验,省了半小时手写逻辑。使用 CodeBuddy 时,我输入的提示是「实现一个小程序手机号输入框校验,格式错误就提示」。它直接帮我生成了完整的代码片段,逻辑清晰、体验友好,5 秒钟生成,不仅能直接用,还自动考虑到正则和提示逻辑,真的很省力。

<view class="form-item">
<input placeholder="请输入手机号"bindinput="onPhoneInput"/>
<text wx:if="{{phoneError}}"class="error-text">手机号格式错误</text>
</view>
Page({
data: { phone:'', phoneError:false },
onPhoneInput(e) {
const value = e.detail.value
const valid =/^1[3-9]\d{9}$/.test(value)
this.setData({ phone: value, phoneError:!valid })
    }
// ... more code
})

同时,对大家写提示词 prompt 的要求更高了。比如提示词:「我要做一个小程序顶部吸顶导航栏,页面滚动超过 100 时固定在顶部」,生成的代码结构几乎不用修改。


如果是较为复杂的项目,涉及到大量的页面和交互设计,这就不是「一句话」能搞定的。建议给「代码助手」提供完整的需求文档(如果有自己设计页面,推荐输出 json 格式的设计描述)

开发者 启年 为大家分享了一个完整的项目例子:

✅ 完全由微信开发者工具 CodeBuddy 代码助手生成的小项目已经上线了,叫“倒数时光”,有兴趣的朋友可以搜索看一看。

以下是我使用的提示词,生成的第一个版本就很符合我的预期,全程没有大的修改,每完成一次任务,CodeBuddy 都会进行总结,并且给出下一步的建议和优化方向。按照它的建议我又进行了两次修改,并且让它自主修复了 BUG。开发过程总计历时约 40 分钟。

Image

 开发者 小黎直接分享了一个小游戏项目代码片段,大家可以试玩一下:

代码片段:和 AI 大战 300 回合写的 Hextris 小游戏

(需在电脑端打开链接)

https://developers.weixin.qq.com/s/UlELGWmL8f0N

Image

开发新体验

目前,开发团队正在不断努力,将在不久后提供「微信开发者工具」和「代码助手」的体验升级。

  1. 「代码助手」的生产能力、交互体验做更智能的增强

  2. 「开发者工具」中集成接入配置平台、后端平台、数据平台,实现能力联动

  3. 提供专门用于 AI 理解和输出的结构化知识内容

  4. ...

我们希望开发者可以在「微信开发者工具」中完成项目的全过程工作,并提供更智能工具和服务,帮助开发者提升项目开发效率,缩短学习曲线,减少重复劳动,专注于自身的产品迭代与创新。

目前微信开放社区话题持续开放中,很多爱用 AI 代码助手的开发者已经分享了更多优质案例与经验。如果你也想分享「代码助手」的使用体验,欢迎参与话题回答,我们为优质回答准备了精美礼品~