微信小程序开发 学习笔记

小白入门向的复习笔记：从开发者工具起步，到云开发（云数据库/云函数），再到借助 AI 快速做简单功能，三步走。

1. 微信开发者工具的使用

• 核心概念：小程序 = 全局三件套（app.js、app.json、app.wxss）+ 页面（每个页面是 .js + .wxml + .wxss + .json 四件套）；project.config.json 存项目配置。
• 关键操作：新建项目需填 AppID（个人练习可先不填或选测试号，云开发必须用正式 AppID）；日常靠「模拟器 + 调试器」本地预览，发布前在工具里「上传」代码。
• 易错点：新建页面必须登记进 app.json 的 pages 数组，否则编译报错或无法跳转；修改保存后自动编译。

// app.json —— 新增页面必须在这里注册
{
  "pages": ["pages/index/index", "pages/list/list"],
  "window": {
    "navigationBarTitleText": "我的小程序"
  }
}

// app.js —— 全局入口，onLaunch 在小程序启动时执行一次
App({
  onLaunch() {
    console.log('小程序启动');
  }
});

2. 云数据库、云函数的使用

• 核心概念：云开发提供云数据库（JSON 文档）、云存储、云函数（跑在 Node.js 的云端代码）。云数据库可在前端直接读写，云函数适合放需要权限或路数的逻辑。
• 关键操作：先 wx.cloud.init 指定环境 ID；云函数目录要右键「创建并部署：云端安装依赖」，改完需重新部署才生效。
• 常用 API：数据库 collection().add / get / doc().update / remove；云函数入口固定写成 exports.main = async (event, context) => {}。
• 易错点：数据库默认权限只允许自己读写；云函数里要用 wx-server-sdk 且返回 Promise；前端调用记得 await。

// app.js —— 初始化云开发环境（env 换成你自己的环境 ID）
wx.cloud.init({
  env: 'your-env-id',
  traceUser: true
});

// pages/index/index.js —— 前端直接读云数据库
async function loadTodos() {
  const db = wx.cloud.database();
  const res = await db.collection('todos').orderBy('time', 'desc').get();
  console.log(res.data);
}

// cloudfunctions/addTodo/index.js —— 云函数：云端写入
const cloud = require('wx-server-sdk');
cloud.init();
const db = cloud.database();

exports.main = async (event) => {
  return db.collection('todos').add({
    data: { content: event.content, done: false }
  });
};

3. 借助 AI 的简单开发

• 核心概念：把「需求描述 → 让 AI 生成页面/功能骨架 → 人工粘贴核对」当主流程；AI 擅长生成 WXML/WXSS 和样板代码，但最终解释权在自己。
• 关键操作：描述需求时附上技术栈关键词（小程序 + 云开发）、贴报错信息让 AI 修；生成代码分别放到 pages/**/ 对应文件，再在模拟器和真机预览验证。
• 易错点：AI 给的 data 字段名必须和 WXML 绑定一致，否则渲染空白；AI 可能用到过新的基础库 API，先在模拟器里看是否报错；渲染列表记得 wx:key。

// AI 生成后需人工核对：data 字段与 WXML 绑定名一致
Page({
  data: { todos: [] },
  async onLoad() {
    const db = wx.cloud.database();
    const res = await db.collection('todos').get();
    this.setData({ todos: res.data });
  }
});

<!-- AI 生成的 WXML：{{todos}}、{{item.content}} 必须与 data 字段对得上 -->
<view wx:for="{{todos}}" wx:key="id">
  <text>{{item.content}}</text>
</view>