54 - 微信小程序开发教程

适用人群：想在微信生态做产品

难度：中等

预计学习时间：30-40小时

为什么学小程序开发？

学习路线

第1阶段：基础入门（1周）
├── 微信开发者工具安装
├── 项目结构理解
├── WXML模板语法
├── WXSS样式
├── JS逻辑处理
└── 页面生命周期

第2阶段：组件与API（2周）
├── 常用组件（view/text/image/button/input）
├── 列表渲染（wx:for）
├── 条件渲染（wx:if）
├── 事件处理（bindtap等）
├── 网络请求（wx.request）
└── 本地存储（wx.setStorage）

第3阶段：进阶功能（2周）
├── 自定义组件
├── 分包加载
├── 云开发（云函数/云数据库/云存储）
├── 用户登录与授权
├── 微信支付
└── 消息订阅

第4阶段：实战项目（2周）
├── 电商小程序
├── 社区论坛
├── 工具类应用
└── 预约系统

项目结构

miniprogram/
├── app.js              # 小程序入口
├── app.json            # 全局配置
├── app.wxss            # 全局样式
├── pages/
│   ├── index/          # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── user/           # 用户页
│       ├── user.js
│       ├── user.json
│       ├── user.wxml
│       └── user.wxss
├── components/         # 自定义组件
├── utils/              # 工具函数
└── cloud/              # 云函数

核心代码示例

// app.json - 全局配置
{
  "pages": [
    "pages/index/index",
    "pages/user/user"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#07c160"
  },
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "首页", "iconPath": "..." },
      { "pagePath": "pages/user/user", "text": "我的", "iconPath": "..." }
    ]
  }
}

<!-- pages/index/index.wxml -->
<view class="container">
  <input placeholder="输入待办事项" bindinput="onInput" value="{{inputValue}}" />
  <button bindtap="addTodo" type="primary">添加</button>
  
  <view wx:for="{{todos}}" wx:key="id" class="todo-item">
    <text class="{{item.done ? 'done' : ''}}">{{item.text}}</text>
    <button size="mini" bindtap="toggleTodo" data-id="{{item.id}}">
      {{item.done ? '撤销' : '完成'}}
    </button>
    <button size="mini" type="warn" bindtap="deleteTodo" data-id="{{item.id}}">删除</button>
  </view>
</view>

// pages/index/index.js
Page({
  data: {
    todos: [],
    inputValue: ''
  },
  
  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },
  
  addTodo() {
    const text = this.data.inputValue.trim();
    if (!text) return;
    
    const todo = {
      id: Date.now(),
      text,
      done: false
    };
    
    this.setData({
      todos: [...this.data.todos, todo],
      inputValue: ''
    });
  },
  
  toggleTodo(e) {
    const id = e.currentTarget.dataset.id;
    const todos = this.data.todos.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    );
    this.setData({ todos });
  },
  
  deleteTodo(e) {
    const id = e.currentTarget.dataset.id;
    this.setData({
      todos: this.data.todos.filter(t => t.id !== id)
    });
  }
});

// 云开发示例
// 云函数
const cloud = require('wx-server-sdk');
cloud.init();
const db = cloud.database();

exports.main = async (event) => {
  const { action, data } = event;
  
  switch(action) {
    case 'add':
      return await db.collection('todos').add({ data });
    case 'list':
      return await db.collection('todos').get();
    case 'delete':
      return await db.collection('todos').doc(data.id).remove();
  }
};

推荐资源

实战项目建议

1. Todo清单：学习基础CRUD
2. 天气查询：学习网络请求和API调用
3. 记账本：学习本地存储和数据可视化
4. 电商商城：综合实战项目