编程入门指南 · 从零到第一个小程序 & 小游戏

Learning Tracks

六大编程专区

选择你感兴趣的方向，从入门到实战，每个专区都有精选视频教程和学习路线。

🔵

C 语言

编程世界的基石。学嵌入式、操作系统的必备基础，理解计算机底层原理。

进入专区 →

🟢

Python

最友好的语言。AI/数据分析/爬虫/自动化全能，学完立刻能干活的瑞士军刀。

进入专区 →

🟠

Java

国内岗位最多的语言。后端开发、Android、大数据的工业标准，就业首选。

进入专区 →

🔷

嵌入式开发

软硬结合的未来。智能家居、汽车电子、工业控制，让硬件「活」起来。

进入专区 →

🟣

机器人编程

ROS+AI+硬件。用代码赋予机器智慧，零成本在仿真环境中学机器人。

进入专区 →

🟡

金融量化

用代码做投资。策略回测、程序化交易，Python+金融的完美结合。

进入专区 →

Online Playground

在线编程实验室

不需要安装任何工具，直接在浏览器里写代码、看效果。选择模板或从零开始。

实时预览

💡 切换模板开始尝试，编辑代码后点击「运行」查看效果。所有模板都可以自由修改！

Roadmap

10 周从入门到上线

每周只需投入 3-5 小时，暑假结束前拥有两个能上线的作品。

第 1-2 周

HTML + CSS 基础

掌握页面结构和样式，做出漂亮的个人主页、产品展示页

第 3-4 周

JavaScript 核心

变量、函数、事件、DOM操作、localStorage。完成待办清单、每日一句等小工具

第 5 周

Canvas 游戏编程

学习 Canvas 绘图、游戏循环、碰撞检测。做出贪吃蛇/打砖块

第 6-7 周

微信小程序入门

注册账号、安装开发者工具、理解 WXML/WXSS/JS 框架。完成日记本小程序

第 8 周

小程序进阶

云开发（数据库+存储+云函数）、地图、支付、分享。完成宿舍账本小程序

第 9 周

微信小游戏开发

将 Canvas 游戏迁移到小游戏框架，接入排行榜、分享、广告

第 10 周

审核与发布

代码审核提交、版本管理、体验版测试、正式上线。朋友扫码就能用！

Mini Program

微信小程序开发全流程

小程序 = WXML(结构) + WXSS(样式) + JS(逻辑)，和网页 HTML+CSS+JS 高度相似。

🧩 第一步：注册与工具

🆔

注册小程序账号

访问 mp.weixin.qq.com，选择「小程序」，用邮箱注册。个人主体免费，无需营业执照。

🛠️

安装开发者工具

从 developers.weixin.qq.com 下载微信开发者工具，支持 Windows/Mac。

📝

获取 AppID

登录 mp 后台 → 开发管理 → 开发设置，复制 AppID。开发时填入工具即可。

☁️

开通云开发（可选）

在开发者工具中点击「云开发」开通，获得免费数据库+存储+云函数额度。

🔤 网页 vs 小程序对照表

概念	网页	小程序	说明
结构	`<div>` `<span>`	`<view>` `<text>`	标签名不同，用法一致
样式	CSS	WXSS	语法完全相同
逻辑	JS + DOM API	JS + Page/Component API	小程序用 setData 更新视图
数据绑定	手动操作 DOM	数据驱动 `{{变量}}`	类似 Vue 的模板语法
文件结构	一个 .html 文件	.wxml + .wxss + .js + .json	四件套，每个页面一个文件夹
API 能力	有限（摄像头/蓝牙等需权限）	丰富（相机/地图/支付/蓝牙）	小程序可直接调用系统能力

📱 小程序项目结构

一个标准小程序项目的文件结构如下：

# 项目根目录

├── app.js          # 小程序入口逻辑

├── app.json        # 全局配置（页面路径/窗口样式/tabBar）

├── app.wxss        # 全局样式

├── pages/          # 页面文件夹

│   ├── index/      # 首页

│   │   ├── index.wxml

│   │   ├── index.wxss

│   │   ├── index.js

│   │   └── index.json

│   └── diary/      # 日记页

│       ├── diary.wxml

│       ├── diary.wxss

│       ├── diary.js

│       └── diary.json

└── cloudfunctions/  # 云函数（可选）

💻 第一段小程序代码

下面是一个「日记本」小程序的核心代码，包含了数据绑定、列表渲染、事件处理：

<!-- diary.wxml -->

<view class="container">

  <input placeholder="今天想写点什么？✍️" bindinput="onInput" value="{{inputText}}"/>

  <button bindtap="addDiary">📝 记录</button>

  <view wx:for="{{diaries}}" wx:key="id" class="diary-item">

    <text>{{item.time}}</text>

    <text>{{item.text}}</text>

  </view>

</view>

// diary.js

Page({

  data: { inputText: '', diaries: [] },

  onInput(e) { this.setData({ inputText: e.detail.value }); },

  addDiary() {

    let d = { id: Date.now(), text: this.data.inputText, time: new Date().toLocaleString() };

    this.setData({ diaries: [d, ...this.data.diaries], inputText: '' });

  }

})

☁️ 云开发：不用写后端也能存数据

微信云开发提供免费的后端能力：数据库（存用户数据）、云存储（存图片/文件）、云函数（运行服务端代码）。调用方式极简：

// 初始化云开发（app.js 中调用一次）

wx.cloud.init({ env: 'your-env-id' });

// 存一条日记到云端

const db = wx.cloud.database();

db.collection('diaries').add({ data: { text: '今天好开心！', time: new Date() } });

// 查询所有日记

db.collection('diaries').get().then(res => { console.log(res.data); });

Mini Game

从 Canvas 到微信小游戏

网页 Canvas 游戏和微信小游戏用的是同一套 API，先在浏览器里做出游戏，再迁移到小游戏框架。

🎮 Canvas 游戏核心概念

🎨

Canvas 画布

HTML5 的绘图 API。相当于一块可以编程控制的画板，逐帧绘制游戏画面。

🔄

游戏循环

用 requestAnimationFrame 每秒跑 60 帧，每帧做三件事：更新状态 → 检测碰撞 → 重绘画面。

💥

碰撞检测

判断两个物体是否接触。矩形碰撞最简单：两个矩形的边界有没有重叠。

⌨️

键盘/触控输入

监听 keydown/keyup 事件控制方向，或用触摸事件适配手机。

🐍 贪吃蛇 — 不到 100 行代码的小游戏

在上方的「在线编程实验室」中选择 「贪吃蛇游戏」模板，你可以直接看到完整的贪吃蛇代码并在线修改！核心逻辑拆解如下：

// 1. 初始化

const canvas = document.querySelector('canvas');

const ctx = canvas.getContext('2d');

let snake = [{x:10,y:10}];

let food = {x:15,y:15};

let direction = {x:0,y:0};

let score = 0;

// 2. 游戏循环

function loop() {

  update(); // 移动蛇

  draw();   // 画蛇和食物

  requestAnimationFrame(loop);

}

// 3. 吃食物变长

if (head.x === food.x && head.y === food.y) {

  score++; food = randomFood();

} else { snake.pop(); }

📱 迁移到微信小游戏

微信小游戏本质也是一个 Canvas，只需改动入口代码：

// 网页版入口

window.onload = () => { const canvas = document.getElementById('game'); startGame(canvas); };

// 微信小游戏入口 (game.js)

const canvas = wx.createCanvas();

startGame(canvas);

// 其他 Canvas API 完全一样！不用改任何一行。

🏆

接入排行榜

wx.getFriendCloudStorage() 获取好友成绩，用 Canvas 绘制排行榜界面，社交裂变。

📢

接入广告

wx.createRewardedVideoAd() 创建激励视频广告，玩家看广告复活/得奖励，你获得收入。

📤

分享卡片

wx.shareAppMessage() 自定义分享标题和图片，让朋友从聊天框直接进入你的游戏。

🔄

实时对战

腾讯云联机对战引擎 MGOBE，接入 WebSocket 实现多人在线实时对战。

Publish

从开发完成到正式上线

很多人卡在最后一步。其实发布流程很简单，跟着做就行。

1

完善信息

登录 mp.weixin.qq.com → 设置 → 基本设置：填写小程序名称（2-30字）、简介（4-120字）、上传图标（144×144px）。选择一个合适的类目。

2

上传代码

在微信开发者工具中点击右上角「上传」，填写版本号（如 1.0.0）和备注。代码会传到微信后台。

3

设为体验版

在 mp 后台 → 管理 → 版本管理，将上传的版本设为「体验版」，添加体验成员（最多 15 人）。让朋友先扫码测试。

4

提交审核

确认无误后，在版本管理页点击「提交审核」。填写功能页面截图、测试账号（如需要登录）。审核一般 1-7 个工作日。

5

发布上线

审核通过后，你会收到微信通知。在版本管理页点击「发布」，设置分阶段发布（如先 5% 用户灰度测试），确认无问题后全量发布。

⚠️ 常见审核被拒原因

❌ 功能不完整或有明显 Bug

❌ 类目选择与实际功能不符

❌ 小程序名称含敏感词/侵权

❌ 需要登录但没有提供测试账号

❌ 含有诱导分享/强制关注

❌ 收集用户信息未说明用途

🎉 小游戏额外步骤

小游戏审核更宽松，但需要额外完成：版号备案（个人作品可用「测试用」类目无需版号）、内容介绍视频（30秒以上）、游戏截图（至少3张）。首次提审建议选「休闲游戏」类目。

Video Courses

避坑指南 & 学习建议

每个过来人都踩过的坑，提前知道能少走 80% 的弯路。

🔴

报错不是坏事

红色报错信息是程序在告诉你哪里出了问题。仔细读报错信息，80% 的问题都能自己定位。

⏰

30分钟原则

一个问题超过 30 分钟没解决，立刻求助：ChatGPT > B站 > 小红书 > 微信开放社区。

🏃

先跑通再优化

完美主义是初学者的头号杀手。功能先运行起来，风格再慢慢打磨。能跑 > 好看。

📅

每天写一点

每天 15 分钟比周末突击 4 小时有效得多。编程是肌肉记忆，需要持续练习。

👥

找学习搭子

小红书、B站有很多女生编程社群。一起学、互相 debug、彼此激励，效率翻倍。

📋

Git 是刚需

尽早学会 Git 基础命令（add/commit/push）。代码丢了没有后悔药，GitHub 免费仓库是救命稻草。

📚 免费学习资源

📖

MDN Web Docs

最权威的前端技术文档。developer.mozilla.org

🟢

微信官方文档

小程序 & 小游戏 API 大全。developers.weixin.qq.com

📕

B站 / 小红书

搜「小程序入门教程」看视频手把手教。搜「前端面试」了解行业标准。

🤖

AI 编程助手

ChatGPT / Kimi / 豆包，24h 在线编程助教。把报错贴给它，让它帮你改代码。

🎨

Figma / 墨刀

设计界面原型，免费。先画原型再写代码，事半功倍。

🐙

GitHub

托管代码 + 看别人的项目。搜「wechat-mini-program」能找到大量开源项目参考。

现在就开始写你的第一行代码

编程不是天赋，是技能。任何智商正常的大学生都能学会。差别只在于：有人开始做了，有人还在犹豫。

🖥️ 在线编程实验室 📋 回到路线图

从零到小程序 & 小游戏开发者

六大编程专区

C 语言

Python

Java

嵌入式开发

机器人编程

金融量化

在线编程实验室

10 周从入门到上线

HTML + CSS 基础

JavaScript 核心

Canvas 游戏编程

微信小程序入门

小程序进阶

微信小游戏开发

审核与发布

微信小程序开发全流程

🧩 第一步：注册与工具

注册小程序账号

安装开发者工具

获取 AppID

开通云开发（可选）

🔤 网页 vs 小程序对照表

📱 小程序项目结构

💻 第一段小程序代码

☁️ 云开发：不用写后端也能存数据

从 Canvas 到微信小游戏

🎮 Canvas 游戏核心概念

Canvas 画布

游戏循环

碰撞检测

键盘/触控输入

🐍 贪吃蛇 — 不到 100 行代码的小游戏

📱 迁移到微信小游戏

接入排行榜

接入广告

分享卡片

实时对战

从开发完成到正式上线

完善信息

上传代码

设为体验版

提交审核

发布上线

⚠️ 常见审核被拒原因

🎉 小游戏额外步骤

热门视频教程精选

🎨 HTML + CSS 入门

前端开发入门教程：HTML5 + CSS3 + 前端项目

Html5 + Css3 + 移动Web 前端入门教程

⚡ JavaScript 入门

JavaScript 零基础入门教程

JavaScript 2小时快速入门

📱 微信小程序开发

微信小程序开发教程：零基础到项目发布全流程

微信小程序开发 + uni-app 网易严选项目

微信小程序零基础到企业级收费项目

🎮 Canvas 游戏开发

Canvas 绘图完整版教程

微信小程序：贪吃蛇游戏开发

📺 想找更多教程？

避坑指南 & 学习建议

报错不是坏事

30分钟原则

先跑通再优化

每天写一点

找学习搭子

Git 是刚需

📚 免费学习资源

MDN Web Docs

微信官方文档

B站 / 小红书

AI 编程助手

Figma / 墨刀

GitHub

现在就开始写你的第一行代码