微信小程序开发完整指南（2024 最新）

🎯 从零基础到上线发布，涵盖注册、开发、调试、部署、审核全流程，适合前端初学者与全栈开发者。

---

一、前期准备：账号与工具

✅ 1. 注册微信小程序账号

1. 访问官网：mp.weixin.qq.com
2. 点击「立即注册」→ 选择「小程序」
3. 填写邮箱、密码、验证码
4. 邮箱激活 → 选择主体类型（个人 / 企业）
5. 完成实名认证（必须！ ）

📌 注意：

• 一个邮箱只能注册一个小程序
• 个人类型可以上线，但部分接口受限（如支付需企业资质）
• 获取 AppID（后续开发必备）

---

✅ 2. 下载并安装开发者工具

• 官网下载地址：developers.weixin.qq.com/miniprogram…
• 支持系统：Windows / macOS
• 安装后使用微信扫码登录

🔧 推荐设置：

• 编辑器主题：深色模式 + 字体大小 16px
• 启用 ESLint 检查代码规范
• 开启 npm 构建支持（用于引入第三方库）

---

二、创建第一个小程序项目

1. 新建项目

打开开发者工具 → 点击「+」新建项目
填写以下信息：

字段	示例值	说明
项目名称	my-first-app	自定义
目录	本地空文件夹	如 D:\projects\miniprogram
AppID	wxa123456789abcde	登录账号后自动填充或手动输入
模板	选择「不使用云服务」的基础模板	初学推荐

✅ 勾选「语言选择」为 JavaScript 或 TypeScript（推荐 TS）

点击「确定」生成项目结构。

---

三、项目目录结构详解

my-first-app/
├── pages/                # 页面目录
│   ├── index/            # 首页
│   │   ├── index.wxml    # 结构（类似 HTML）
│   │   ├── index.wxss    # 样式（类似 CSS）
│   │   ├── index.js      # 逻辑
│   │   └── index.json    # 配置
│   └── logs/             # 日志页（示例）
├── utils/                # 工具函数
├── app.js                # 全局逻辑
├── app.json              # 全局配置
├── app.wxss              # 全局样式
├── project.config.json   # 项目配置（如开发者工具设置）
└── sitemap.json          # 搜索引擎爬虫规则（SEO）

---

四、核心文件解析

1. app.json —— 全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",  // 使用新版样式
  "sitemapLocation": "sitemap.json"
}

📌 常用字段说明：

• pages: 所有页面路径列表，第一个为首页
• window: 导航栏、背景等全局视觉配置
• tabBar: 底部标签栏（多页面切换）
• networkTimeout: 网络请求超时时间
• permission: 权限声明（如定位、摄像头）

---

2. WXML：页面结构语言

<!-- pages/index/index.wxml -->
<view class="container">
  <text>{{ message }}</text>
  <button bindtap="handleClick">点我弹窗</button>
</view>

💡 特性：

• 类似 HTML，但标签不同（如 <view> 替代 <div>）
• 支持数据绑定 {{ }}
• 支持事件绑定：bindtap, bindinput 等
• 支持条件渲染 wx:if 和列表渲染 wx:for

<!-- 条件渲染 -->
<view wx:if="{{ show }}">显示内容</view>
<!-- 列表循环 -->
<view wx:for="{{ list }}" wx:key="id">
  {{ item.name }}
</view>

---

3. WXSS：样式语言

/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx; /* rpx 是响应式单位 */
}

text {
  font-size: 32rpx;
  color: #333;
}

📌 注意：

• 支持大部分 CSS 特性
• 单位推荐使用 rpx（responsive px）：屏幕宽度 750rpx，自动适配不同设备
• 不支持 @import 外链字体，建议内联或 base64

---

4. JavaScript：页面逻辑

// pages/index/index.js
Page({
  data: {
    message: 'Hello 小程序',
    show: true,
    list: [{ id: 1, name: '苹果' }, { id: 2, name: '香蕉' }]
  },

  handleClick() {
    wx.showToast({
      title: '按钮被点击',
      icon: 'success'
    });
  }
});

📌 关键 API：

• Page({}) 定义页面对象
• data 存储页面数据
• 方法通过 this.setData() 更新视图
• 调用微信原生能力：wx.request, wx.navigateTo, wx.getLocation 等

---

五、常用功能实现

✅ 1. 页面跳转

// 跳转到 logs 页面
wx.navigateTo({
  url: '/pages/logs/logs'
});

// 返回上一页
wx.navigateBack();

// 重定向（关闭当前页）
wx.redirectTo({ url: '/pages/new-page' });

---

✅ 2. 发起网络请求（调用后端 API）

// 示例：获取用户信息
wx.request({
  url: 'https://your-api.com/user/info',
  method: 'GET',
  header: {
    'content-type': 'application/json',
    'Authorization': 'Bearer xxx'
  },
  success: (res) => {
    if (res.statusCode === 200) {
      this.setData({ userInfo: res.data });
    }
  },
  fail: (err) => {
    console.error('请求失败', err);
  }
});

⚠️ 注意事项：

• 域名必须在【开发管理】→【开发设置】中添加到 request 合法域名列表
• 不支持 cookie，需自行管理 token
• 推荐封装 request 工具类（带拦截、loading、错误处理）

---

✅ 3. 获取用户信息（头像、昵称等）

方式一：button 获取（推荐）

<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">
  获取用户信息
</button>

onGetUserInfo(e) {
  if (e.detail.userInfo) {
    const { nickName, avatarUrl } = e.detail.userInfo;
    this.setData({ nickName, avatarUrl });
  } else {
    wx.showToast({ title: '授权失败', icon: 'none' });
  }
}

⚠️ 注意：自 2023 年起，wx.getUserInfo() 已废弃，需使用 button + open-type="getUserInfo" 或升级为 <button open-type="nickname"> 组件。

方式二：使用 <openid-binding> 组件（获取 OpenID）

需要配合后端解密获取完整信息。

---

✅ 4. 使用本地缓存

// 存储
wx.setStorageSync('token', 'abc123');

// 读取
const token = wx.getStorageSync('token');

// 删除
wx.removeStorageSync('token');

适用场景：保存登录态、用户偏好设置等。

---

六、UI 组件库推荐（提升开发效率）

名称	特点	地址
WeUI for 小程序	官方设计风格组件	github.com/Tencent/weu…
Vant Weapp	轻量级 UI 库，支持 npm 引入	vant-contrib.gitee.io/vant-weapp
Taro UI	多端统一组件库（Taro 框架专用）	taro-ui.jd.com

👉 安装 Vant 示例：

npm i vant-weapp -S --production

在开发者工具中点击「构建 npm」即可使用。

---

七、调试与预览

1. 开发者工具调试功能

• 实时预览（模拟器）
• Console 控制台输出日志
• Network 查看请求
• Storage 查看缓存数据
• WXML 面板查看节点结构

2. 真机预览

• 点击工具栏「预览」按钮
• 生成二维码 → 使用微信扫码在手机上运行
• 可测试实际性能和交互体验

---

八、发布上线流程

步骤 1：版本管理

• 在开发者工具中点击「上传」
• 填写版本号（如 1.0.0）和项目备注
• 上传成功后可在「开发管理」看到“开发版本”

步骤 2：提交审核

进入微信公众平台 → 「开发」→ 「开发管理」→ 提交审核

• 填写类目（如电商、工具）
• 提供测试账号（如有登录）
• 描述功能及截图
• 等待 1~7 天审核通过

步骤 3：发布上线

审核通过后 → 点击「发布」按钮 → 全网可见

---

九、进阶技巧与最佳实践

✅ 1. 使用分包加载（优化首屏速度）

// app.json
{
  "pages": ["pages/index/index"],
  "subPackages": [
    {
      "root": "packageA",
      "pages": ["pages/list/list", "pages/detail/detail"]
    }
  ]
}

好处：主包小，启动快；按需加载子包。

---

✅ 2. 使用 Behavior 实现代码复用

// behaviors/mixin.js
module.exports = Behavior({
  data: { sharedValue: '共享数据' },
  methods: {
    commonMethod() {
      console.log('通用方法');
    }
  }
});

在页面中引用：

const mixin = require('../behaviors/mixin');
Page({
  behaviors: [mixin]
});

---

✅ 3. 错误监控上报

// app.js
App({
  onLaunch() {
    // 监听脚本错误
    wx.onError((msg) => {
      wx.request({
        url: 'https://your-monitor.com/report',
        method: 'POST',
        data: { error: msg, time: Date.now() }
      });
    });
  }
});

推荐接入 Sentry、Bugly 等监控平台。

---

十、常见问题 FAQ

问题	解决方案
❌ 请求 domain not in the list	登录后台添加 request 域名白名单
❌ 按钮无法触发 getUserInfo	使用 open-type="getUserInfo" 的 button
❌ 真机不显示图片	检查路径是否正确，网络图片需 HTTPS
❌ 分包加载失败	检查 subPackages 配置路径是否正确
❌ 支付功能不能用	需企业认证 + 商户号 + 签约微信支付

---

十一、扩展学习资源

类型	推荐链接
官方文档	developers.weixin.qq.com/miniprogram…
视频课程	B站搜索 “微信小程序入门”
GitHub 开源项目	搜索 weapp-todo, wechat-shop-miniprogram
社区论坛	CSDN、掘金、思否（SegmentFault）

---

十二、结语：从小白到上线只需 7 步

1. ✅ 注册账号 & 获取 AppID
2. ✅ 安装开发者工具
3. ✅ 创建项目 & 熟悉结构
4. ✅ 编写页面（WXML/WXSS/JS）
5. ✅ 调试功能 & 真机预览
6. ✅ 提交审核
7. ✅ 发布上线 🚀

💬 Tips：第一个项目建议做一个「记事本」或「天气查询」类应用，练手后再做复杂项目。

---

🎯 下一步建议：

• 学习 云开发（CloudBase） 快速搭建后端
• 接入 微信支付
• 使用 Taro / UniApp 实现多端统一开发

如果你告诉我你的项目方向（如商城、预约、社区），我可以提供定制化模板和架构建议！

---

📥 附：快速启动命令模板

# 初始化项目（可选 CLI）
npm install -g @cloudbase/cli
tcb init --template miniprogram

# 构建 npm 包（Vant 等）
npm install vant-weapp -S --production
# 然后在开发者工具中点击【工具】->【构建 npm】