微信小程序

欢迎来到微信小程序开发知识库！

📱 微信小程序简介

微信小程序是运行在微信内的轻量级应用，无需下载安装即可使用。基于微信庞大的用户基础（12亿+ MAU），小程序已成为移动互联网的重要入口，适合快速验证产品、提供服务、电商交易等场景。

🎯 适用场景

✅ 非常适合

• 高频低需求 - 不需要经常使用的功能
• 即用即走 - 快速获取服务
• 营销活动 - 裂变传播、促销活动
• O2O 服务 - 点餐、预约、支付
• 电商 - 微信生态内的电商
• 工具类 - 简单实用的工具

⚠️ 不太适合

• 高频刚需应用（建议开发 App）
• 复杂游戏（性能受限）
• 需要后台长时间运行
• 复杂的原生功能

🎯 学习路线

第一阶段：基础入门 (1-2周)

1. 小程序基础

   • 账号注册
   • 开发工具使用
   • 项目结构

2. WXML & WXSS

   • 模板语法
   • 样式系统
   • Flex 布局

3. JavaScript

   • 页面生命周期
   • 数据绑定
   • 事件处理

第二阶段：进阶学习 (2-3周)

1. 组件开发

   • 内置组件使用
   • 自定义组件
   • 组件通信

2. API 调用

   • 网络请求
   • 数据存储
   • 支付接口
   • 分享接口

3. 云开发

   • 云函数
   • 云数据库
   • 云存储

第三阶段：实战项目 (1-2个月)

1. 完整项目

   • 电商小程序
   • 点餐小程序
   • 工具小程序

2. 性能优化

   • 分包加载
   • 首屏优化
   • 体验优化

3. 发布运营

   • 审核发布
   • 数据分析
   • 版本管理

✨ 微信小程序特点

✅ 核心优势

• 用户基础大 - 微信 12亿+ 用户
• 入口丰富 - 扫码、搜索、分享、公众号等
• 即用即走 - 无需下载安装
• 开发简单 - 类 Vue 语法，易上手
• 生态完善 - 组件库、云开发、支付等
• 营销能力强 - 分享裂变、模板消息

⚠️ 注意事项

• 包大小限制（主包 2MB，总大小 20MB）
• 功能受限（无法后台运行）
• 性能略低于原生
• 审核较严格
• 依赖微信生态

📊 小程序 vs App vs H5

特性	小程序	App	H5
下载安装	无需	需要	无需
开发成本	🟢 低	🔴 高	🟢 低
性能	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
功能	⚠️ 受限	✅ 完整	⚠️ 受限
推广	✅ 易传播	🔴 难	✅ 易传播
留存	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐

🏗️ 项目结构

mini-program/
├── pages/                  # 页面
│   ├── index/
│   │   ├── index.js       # 页面逻辑
│   │   ├── index.json     # 页面配置
│   │   ├── index.wxml     # 页面结构
│   │   └── index.wxss     # 页面样式
│   ├── mine/
│   └── detail/
├── components/            # 组件
│   ├── custom-button/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── nav-bar/
├── utils/                 # 工具函数
│   ├── util.js
│   └── request.js
├── images/               # 图片资源
├── app.js                # 应用逻辑
├── app.json              # 应用配置
├── app.wxss              # 全局样式
└── project.config.json   # 项目配置

📖 学习资源

官方资源

• 微信小程序官方文档
• 小程序组件库
• 小程序 API
• 微信开发者社区

推荐课程

• 微信官方视频教程
• 慕课网小程序课程

中文资源

• 掘金微信小程序专栏
• 微信小程序社区

常用库

• Vant Weapp - UI 组件库
• WeUI - 微信官方 UI 库
• wxParse - 富文本解析

🎯 开始学习

选择一个方向开始深入学习：

• 👉 基础 - 掌握小程序基础概念
• 👉 组件 - 学习内置组件
• 👉 API - 调用小程序能力
• 👉 云开发 - 使用云开发快速构建

💡 学习建议

1. 注册账号 - 先注册小程序账号体验
2. 使用开发工具 - 微信开发者工具功能强大
3. 阅读官方文档 - 文档非常详细
4. 做实际项目 - 从简单项目开始
5. 了解审核规则 - 避免被拒
6. 关注更新 - 微信小程序功能持续更新

🚀 第一个微信小程序

创建项目

1. 下载微信开发者工具
2. 使用微信扫码登录
3. 新建小程序项目
4. 填写 AppID（测试可选"测试号"）

Hello World 示例

<!-- pages/index/index.wxml -->
<view class="container">
  <text class="title">你好，微信小程序！</text>
  
  <text class="counter">计数：{{count}}</text>
  
  <button type="primary" bindtap="increment">
    点击 +1
  </button>
  
  <text class="info">当前用户：{{userInfo.nickName}}</text>
</view>

// pages/index/index.js
Page({
  data: {
    count: 0,
    userInfo: {}
  },

  onLoad() {
    // 页面加载时执行
    console.log('页面加载')
    this.getUserInfo()
  },

  increment() {
    this.setData({
      count: this.data.count + 1
    })
  },

  getUserInfo() {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  }
})

/* pages/index/index.wxss */
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
}

.counter {
  font-size: 36rpx;
  margin-bottom: 40rpx;
}

button {
  margin: 20rpx 0;
}

.info {
  margin-top: 60rpx;
  color: #666;
  font-size: 28rpx;
}

// pages/index/index.json
{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": false
}

应用配置

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#1AAD19",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

点击"编译"，你的第一个微信小程序就运行起来了！🎉

---

准备好了吗？让我们开启微信小程序开发之旅！