微信小程序开发入门 2026：零基础 7 天上手完整教程

最后更新：2026 年 9 月 · 阅读时长：约 10 分钟 · 适用：零基础、产品经理、前端、想转行开发者

📌 这篇教程解决什么问题？

2026 年，微信小程序依然是国内最重要的前端生态之一。如果你想：

• 💼 转行做开发 — 小程序是入门最快的栈
• 🚀 创业做 MVP — 1 周就能上线第一款产品
• 📱 给现有业务加个小程序 — 公众号 / 电商 / 工具类
• 💰 接私活赚钱 — 小程序外包需求量大
• 🎓 学生竞赛 / 毕业设计 — 7 天就能做完

一个浏览器 + 一周时间，你也能做出自己的小程序。

🚀 7 天学习路线

🛠 必备工具

1. 微信开发者工具

下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• ✅ Windows / macOS / Linux 全平台
• ✅ 模拟器 + 真机调试 + 性能分析
• ✅ 免费

2. 注册小程序 AppID

地址：https://mp.weixin.qq.com/

• 个人主体：免费
• 企业主体：需要营业执照

3. VS Code

推荐用 VS Code 写代码（不只是开发者工具的编辑器）。

💻 Day 1：第一个 Hello World

步骤

1. 打开微信开发者工具
2. 「小程序」→「+」→ 选目录
3. 填 AppID（没 AppID 选「测试号」）
4. 点「确定」
5. 看默认 demo → 点「编译」→ 看模拟器

最小目录结构

miniprogram/
├── app.js          # 小程序逻辑
├── app.json        # 全局配置
├── app.wxss        # 全局样式
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── sitemap.json    # 搜索引擎收录

Hello World 代码

// index.js
Page({
  data: { msg: 'Hello 小程序' },
  onLoad() {
    console.log('页面加载')
  }
})


{{ msg }}

💻 Day 2-3：基础语法（30 分钟）

WXML（类似 HTML）

  {{ message }}
  
  点击

WXSS（类似 CSS）

.container {
  padding: 20rpx;
  text-align: center;
}

button {
  background: #07c160;
  color: white;
  border-radius: 8rpx;
}

💡 rpx 单位：750rpx = 屏幕宽度，自适应

数据绑定 + 事件

// JS
Page({
  data: {
    count: 0,
    name: '简盒'
  },
  onTap() {
    this.setData({ count: this.data.count + 1 })
  }
})

💻 Day 4：云开发（数据库 + 云函数）

微信云开发 = 后端 + 数据库 + 云函数，不用买服务器。

5 步启用云开发

1. 开发者工具 → 点「云开发」
2. 「开通」
3. 创建环境（test / prod 各一个）
4. 等 2 分钟初始化
5. 获得 envId

云数据库示例

// 1. 初始化
wx.cloud.init({ env: 'test-xxxxx' })

// 2. 取数据
const db = wx.cloud.database()
db.collection('todos').where({
  _openid: '{openid}'
}).get().then(res => {
  console.log(res.data)
})

💻 Day 5：5 个实战项目

每个项目 1-2 小时，做完就有 5 个作品，足够面试。

💻 Day 6：API + 登录 + 支付

登录（2 行代码）

wx.login({
  success: res => {
    console.log(res.code)  // 发给后端换 session
  }
})

调用 API

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: res => console.log(res.data)
})

支付（需要企业主体）

个人主体不能开通支付。找有营业执照的同事帮忙。

💻 Day 7：发布上线

1. 开发者工具 → 「上传」
2. 填版本号（如 1.0.0）
3. 登录 mp.weixin.qq.com
4. 「版本管理」→ 找到刚才上传的版本
5. 「提交审核」
6. 等 1-3 天通过
7. 「发布」→ 上线

⚠️ 常见问题

Q1：没 AppID 能不能开发？

答：能。选「测试号」，但不能上线。

Q2：个人能上线小程序吗？

答：能，但不能带支付 / 商业功能。工具类、资讯类没问题。

Q3：发布需要资质吗？

答：

• 个人：身份证 + 微信认证（免费）
• 企业：营业执照 + 对公账户认证（300 元/年）

Q4：用什么 IDE？

答：

• 官方：微信开发者工具（必备）
• 第三方：VS Code + 插件（推荐）

Q5：多久能学会？

答：

• 有 JS 基础：3-5 天
• 零基础：7-14 天
• 做出第一个完整小程序：7 天

Q6：可以接私活吗？

答：可以。简单小程序 1000-5000 元，复杂 1-5 万元。

🚀 学习资源

💡 给初学者的建议

1. ✅ 先抄后改 — 抄 5 个 demo，自己改改
2. ✅ 边做边学 — 不要先学完再动手
3. ✅ 看官方文档 — 别的教程可能过时
4. ✅ 加入社区 — 微信开放社区提问
5. ✅ 做作品集 — 面试需要 demo