如何在 VSCode 中使用 CodeGeeX 快速生成微信小程序页面的逻辑代码

说到微信小程序的开发，手动敲写setData、wx.request和生命周期函数确实繁琐，但CodeGeeX能直接根据中文描述生成可运行的代码片段。不过，想让它好好干活，得按特定方式来。先说几个核心判断：它能自动生成JS逻辑代码，但触发方式、校验步骤和手动补全都不能少。

安装并启用 CodeGeeX 插件

打开VSCode，点击左侧扩展图标，搜索“CodeGeeX”，安装后别忘了点“重新加载”按钮。这一步如果漏掉了，后面所有快捷键都会没反应。确保右下角状态栏出现

图标并且显示“Ready”，否则插件根本没激活，按Ctrl+I也不会弹出输入框。

在 .js 文件中调用 AI 生成逻辑代码

新建或打开一个小程序页面对应的.js文件（比如pages/index/index.js），把光标定位到Page({})内部空白处。按下Ctrl+I（Windows/Linux）或Cmd+I（Mac），顶部会出现一个带“/”符号的输入框。

输入明确的指令，比如：“生成一个获取用户openid的onShow函数，调用wx.login → wx.request获取openid，成功后调用this.setData更新userInfo.openid，并用console.log输出结果”。注意别写“请”“麻烦”这类礼貌词，CodeGeeX对祈使句的反应最准。

回车确认后，AI会在光标位置插入完整函数体，通常包含try-catch、wx.login成功回调嵌套和错误提示逻辑。如果生成的内容里出现了wx.getUserInfo这类已废弃的API，那说明提示词没限定基础库版本——得补一句“适配微信基础库2.28.0+，不使用getUserInfo”再重试。

校验生成代码是否符合小程序规范

生成代码不能直接用，得检查几件事：
第一步，检查是否含有非法全局变量。如果出现let globalData = {}或直接调用fetch()，必须手动删除——小程序环境不支持fetch，也不允许在Page外声明全局可变的变量。
其次，验证生命周期钩子的命名。确认函数名是onShow/onLoad/onPullDownRefresh，而不是componentDidMount或useEffect——后者是React语法，贴进去就报错。
最后，检查setData的调用方式。正确写法是this.setData({ key: value })；如果生成的是this.data.key = value或state = {...}，

，否则视图不会更新。

一键补全页面跳转与参数传递逻辑

把光标放在Page对象内任意方法下方（比如紧接在onShow后面），再次按Ctrl+I。输入：“添加一个bindTap事件处理函数na vigateToDetail，跳转到pages/detail/detail页面，携带id和title参数，id来自this.data.item.id，title来自this.data.item.title”。

AI通常生成这样的结构：
na vigateToDetail() {
wx.na vigateTo({
url: `/pages/detail/detail?id=${this.data.item.id}&title=${encodeURIComponent(this.data.item.title)}`
});
}

但要注意：生成的url中如果没对title做encodeURIComponent处理，含空格或&符号的标题会导致跳转失败——

，这是小程序URL参数编码的硬性要求。