Skip to content

微信小程序云开发

Gemini+Trae助力ai coding

修改时间:251214、251215、

项目配置

新建项目

  • 重中之重,先在“微信开发者工具”中新建项目,再将这个项目导入trae进行ai coding

第一步:搭骨架(在微信开发者工具)

打开 微信开发者工具,点击 + 号(新建项目),填入 AppID(不要用测试号,用你注册的那个),后端服务选:微信云开发,模板选:JavaScript - 基础模板,点击创建

此时,你的电脑上有了一个文件夹,里面有一套能完美运行的空项目。

第二步:移交指挥权(在 Trae)

打开 Trae。点击 Open Folder(打开文件夹)。选择刚才微信工具生成的那个项目文件夹。现在,你可以把微信开发者工具最小化(别关,留着看效果),剩下的工作全在 Trae 里做。

AppID

AppID是小程序的“身份证号”。微信服务器通过这个号码,识别你是谁。

最重要的是:对于云开发,微信通过 AppID 来分配免费的云数据库和云函数额度。没有这个身份证,微信不知道把数据存在谁的名下。既要知道某一条数据是谁家数据库的,也要对涉及安全性的操作(例如扫码)进行“验明正身”。

破除误区:如果你要同时上线运营卖鞋子的小程序、卖水果的小程序、社团小程序,那你确实需要注册 3 个账号。但是! 现在是**“开发学习”**阶段:你只需要用那一个 AppID,就可以在微信开发者工具里新建 100 个项目。

有何影响:没有任何影响,除了云环境是共享的。比如你在项目 A 里建了个 user 表,在项目 B 里也能读到这个表。所以对于数据表,可以加个前缀xyz_user来区分不同项目

找AppID途径

登录 微信公众平台。左侧菜单 -> 开发 -> 开发管理 -> 开发设置。复制那个 wx 开头的字符串。

env

env参数是就是云环境的“身份证号码”。微信云开发的机制是:**云环境是严格绑定在 AppID 下的。**所以你的AppID对应的项目中,使用到的云环境(对应env参数绑定)也应该是你的AppID对应账户的云环境。只有别人授权给你云环境,叫 **“跨账号环境共享”**的时候,才能在你的AppID对应的项目中,用到别人的env参数。

找env途径

点击微信开发者工具左上角的 “云开发” 按钮(那个云朵图标)。面板打开后,在右上角(或者概览页)能看到一串字符,通常是 cloud1-xxxxxx 或者 你的自定义名-xxxx复制这一串字符。回到 miniprogram/app.js。找到 env: '...' 那一行,把你的 ID 粘贴进去。

项目结构(了解)

新建一个小程序后,默认导入微信云开发的快速启动模版,配置目录与文件如下:

image-20251213171215768

它里面的内容是这样的:父目录是当前project的位置,里面包括↑内容

d:\Project\CampusActivity/
├── cloudfunctions/          # 云函数目录(后端代码)
├── miniprogram/             # 小程序前端代码目录
├── README.md                # 项目说明文档
├── project.config.json      # 项目全局配置文件
├── project.private.config.json  # 项目私有配置(包含敏感信息)
└── uploadCloudFunction.sh   # 云函数上传脚本(Linux/Mac)
  1. cloudfunctions云函数目录:存放微信云开发的后端代码,运行在云端服务器上。

    cloudfunctions/
    └── quickstartFunctions/     # 快速启动示例云函数
        ├── config.json          # 云函数配置文件
        ├── index.js             # 云函数入口代码
        └── package.json         # 云函数依赖管理
  2. miniprogram小程序前端目录:存放小程序的前端代码,运行在用户手机端。

    ①核心文件:

    miniprogram/
    ├── app.js                   # 小程序入口文件
    ├── app.json                 # 小程序全局配置(页面路径、窗口样式等)
    ├── app.wxss                 # 小程序全局样式
    ├── envList.js               # 云开发环境列表配置
    └── sitemap.json             # 小程序索引配置

    ②pages页面目录:

    每个页面通常包含4个文件:
    - .wxml - 页面结构(类似HTML)
    - .wxss - 页面样式(类似CSS)
    - .js - 页面逻辑
    - .json - 页面配置
    
    pages/
    ├── index/                   # 首页
    │   ├── index.js
    │   ├── index.json
    │   ├── index.wxml
    │   └── index.wxss
    └── example/                 # 示例页
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss

    ③components组件目录:

    存放可复用的自定义组件,同样包含4个文件。
    
    components/
    └── cloudTipModal/           # 云开发提示模态框组件
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss

    ④images图片资源目录:

    存放小程序中使用的所有图片资源。
    
    images/
    ├── icons/                   # 图标资源
    ├── ai_example1.png          # 示例图片
    ├── avatar.png               # 头像图片
    └── ...                      # 其他图片资源
  3. 关键文件功能

    • project.config.json

      项目的全局配置文件,主要功能:定义小程序根目录 miniprogram/;定义云函数根目录 cloudfunctions/;设置开发工具的编译选项(ES6转换、代码压缩等);配置项目的AppID和名称

    • app.json

      小程序的全局配置文件,主要功能:声明所有页面路径(pages数组);配置窗口样式(导航栏、背景色等);设置tabBar(底部导航栏);配置网络超时时间;启用/禁用某些功能

    • app.js

      小程序的入口文件,主要功能:;初始化App实例;配置全局数据;处理小程序生命周期(onLaunch、onShow、onHide等);初始化云开发环境

    • app.wxss

      小程序的全局样式文件,主要功能:定义全局CSS样式;设置统一样式变量(如颜色主题);控制全局布局

将这个快速模版中的不用内容删除,即可得到纯净的模版:

d:\Project\CampusActivity/
├── cloudfunctions/          # 空的云函数目录,用于存放你的云函数
├── miniprogram/
│   ├── pages/
│   │   └── index/          # 你的首页
│   │       ├── index.js
│   │       ├── index.json
│   │       ├── index.wxml
│   │       └── index.wxss
│   ├── images/
│   │   └── icons/          # 保留的图标(可选)
│   ├── app.js              # 修改后的入口文件
│   ├── app.json            # 修改后的全局配置
│   ├── app.wxss            # 全局样式
│   └── sitemap.json        # 索引配置
├── project.config.json      # 项目配置
└── project.private.config.json  # 私有配置

Prompt Programming

云函数路由模式

cloudfunctions目录管理建议

我的提问:创建云函数之后,每一次都要把若干云函数依次上传,太麻烦了,我之前看到一种写法,在cloudfunctions目录下,只需要有一个子文件夹进行代码的管理,以后都只上传那一个文件夹就行了,这是什么方法?推荐吗?

AI回答:你说得对!这种方法在业界非常流行,我们称之为 “云函数路由模式” (Cloud Function Routing) 或者 “单体云函数” (Monolithic Cloud Function)

简单来说,就是把本来分散的 login, register, addActivity, getQRCode 等等几十个云函数,全部塞进一个quickstartFunctions(或者 api)的文件夹里

这样的好处:

  1. 上传更新方便:每次更新云函数都只要重新上传一个目录到云端
  2. 代码复用方便:比如“权限校验”这种公共代码,写在这个文件夹里,所有接口都直接用,不用复制粘贴几十遍
  3. 节省资源:云函数有冷启动时间,如果分散成几十个,每个都要冷启动。合并成一个后,因为它经常被调用,会一直保持“热”状态,响应更快

Prompt生成

核心逻辑:用ai教ai办事

为了做这个“校园活动”小程序,我把主要的任务说明(from 任务书)发给哈基米3,它依次为我生成了若干个prompt,叫我按顺序发给trae进行项目构建。

。。。

然后就是一直问ai,把哈基米3当脑子来指导行动方向,然后把trae当力工接收哈基米3复制过去的指令。然后这个项目就慢慢起来了。。。我真不知道这部分笔记该记啥

基于 VitePress 搭建 | 记录生活与代码