教学计划总览 · 48 课时 · 16 次课
《小程序开发》课程教学计划
1
课程定位与技术选型
小程序的四大特性
无需安装 — 用户不必下载安装包，打开即用，省掉了转化漏斗里最陡的一环
触手可及 — 扫一扫、搜一搜、聊天分享、公众号菜单，入口全在用户已有的使用路径上
用完即走 — 服务完成即退出，不占桌面、不驻内存，适合低频场景
无需卸载 — 不存在卸载概念，用户没有"装太多应用"的心理负担
小程序 vs 原生 App vs H5
| 对比维度 | 微信小程序 | 原生 App | H5 网页 |
|---|---|---|---|
| 开发成本 | 中等（一套代码，微信端） | 高（iOS/Android 双端各写一套） | 低（一套代码，浏览器通用） |
| 用户体验 | 接近原生，滑动与转场流畅 | 最佳，可用全部系统能力 | 一般，长列表与动画易掉帧 |
| 获取方式 | 扫码/搜索/分享即用，无需安装 | 需应用商店下载安装 | 打开链接即用 |
| 运行环境 | 微信客户端（双线程 + WebView） | 操作系统原生运行时 | 浏览器 |
| 系统权限 | 受限，需按 scope 授权申请 | 完整（相机、蓝牙、后台等） | 极度受限 |
| 包体积限制 | 主包 2MB，分包合计 20MB | 无硬性限制 | 无限制（受加载速度约束） |
| 推广成本 | 低，可借微信社交链传播 | 高，需买量与商店优化 | 中等 |
| 离线能力 | 支持（缓存 + 本地存储） | 支持 | 基本不支持 |
| 更新方式 | 后台发布，用户无感知 | 需用户手动更新 | 刷新即最新 |
| 适合场景 | 低频轻量、依赖社交传播、线下扫码 | 高频重度、需硬件能力、强性能 | 营销活动页、跨平台内容展示 |
技术优势
- 开发效率高 — WXML/WXSS/JS 三件套上手快，官方 IDE 集成模拟器与调试器，无需配置原生工具链
- 获客成本低 — 依托微信 13 亿月活，扫码、搜索、公众号跳转、分享卡片都是入口
- 发布迭代快 — 后台提交审核通过即全量生效，不必等应用商店，也不必等用户升级
- 双线程架构保障流畅 — 逻辑层（JSCore）与渲染层（WebView）分离，避免 JS 长任务阻塞渲染
技术局限
- 能力边界受平台约束 — 无法操作文件系统、无法常驻后台、蓝牙/NFC 等能力按需申请且有限制
- 包体积约束严格 — 主包 2MB 上限，图片与第三方库需上 CDN 或分包
- 生态封闭 — 只能运行在微信内，跨端需借 uni-app / Taro 等框架二次编译
- DOM 操作受限 — 没有 window/document，第三方 Web 库大多不能直接用
典型适用场景（与本课程案例的对应关系）
- 线下场景数字化 — 扫码点餐、扫码借还、门店导购（本课程第 13-14 次课的点餐系统即属此类）
- 轻量工具类 — 查询、预约、报名、问卷（第 8 次课调查问卷案例）
- 社交传播型 — 邀请函、投票、拼团、测评（第 5 次课婚礼邀请函案例）
- 内容与服务入口 — 资讯列表、附近的店、在线客服（第 7、12 次课案例）
选型结论：需要完整硬件能力、长时间后台运行或极致性能的产品应选原生 App；纯展示型营销页用 H5 最省；介于两者之间、依赖微信生态获客的服务型产品，小程序是成本与体验的最优折中。本课程即围绕第三类展开。
2
理论与实践课时分配
总体构成（48 学时）
小程序开发是典型的实操型课程，学生必须在开发者工具里反复调试才能形成能力，因此实践占比接近三分之二。
分配依据
- 第 1-2 次课偏理论（2 / 1.5 学时）— 概念、运行机制与技术选型必须讲清楚，学生才知道"为什么用小程序"；环境搭建与项目结构在课堂末段动手完成即可。
- 第 3-12 次课讲练结合（理论 1 / 实践 2）— 每次课对应教材 1-2 个案例，语法与 API 讲解压缩在 1 学时内，其余 2 学时全部用于上机复现案例。
- 第 13-14 次课以实战为主（1 / 2 与 0.5 / 2.5）— 综合项目重在整合而非新知识，第 14 次课仅用 0.5 学时讲订单流程要点。
- 第 15 次课（1 / 2）— 组件库与 uni-app 属拓展视野，讲解后立即做跨平台改造对比。
- 第 16 次课为期末考试（理论卷 40 分 + 实操 60 分），实操占比与平时课时结构一致。
3
16 次课教学计划总表
| 课次 | 教材章节 | 课程主题 | 教学目标 | 教学重点 | 教学难点 | 理论 | 实践 |
|---|---|---|---|---|---|---|---|
| 1 | 第1章 | 微信小程序概述与开发环境搭建 |
|
小程序定位与特点、开发环境搭建 | 小程序运行机制、与原生App/H5对比 | 2 | 1 |
| 2 | 第1章 | 小程序项目结构与全局配置 |
|
项目目录结构、app.json配置、页面生命周期 | 生命周期函数执行时机 | 1.5 | 1.5 |
| 3 | 第2章 | WXML模板语法与数据绑定 案例：案例2-1 个人信息 |
|
WXML语法、数据绑定、列表渲染、条件渲染 | 列表渲染key的作用、条件渲染与列表渲染组合 | 1 | 2 |
| 4 | 第2章 | WXSS样式与Flex布局 案例：案例2-2 本地生活 |
|
WXSS语法、rpx单位、Flex布局、样式导入 | Flex布局的轴方向与对齐方式 | 1 | 2 |
| 5 | 第2章 | 多页面导航与tabBar配置 案例：案例2-3 婚礼邀请函 |
|
页面导航、tabBar配置、页面传参 | 页面栈管理、传参编码解码 | 1 | 2 |
| 6 | 第3章 | 事件绑定与页面交互 案例：案例3-1 比较数字大小、案例3-2 计算器 |
|
事件绑定、事件对象、setData更新视图 | 事件冒泡与捕获、input双向绑定 | 1 | 2 |
| 7 | 第3章 | 网络请求与分页加载 案例：案例3-3 美食列表 |
|
wx.request、Promise封装、分页加载、下拉刷新 | 异步请求处理、分页逻辑 | 1 | 2 |
| 8 | 第3章 | 表单组件与数据提交 案例：案例3-4 调查问卷 |
|
表单组件、表单验证、数据提交 | 表单验证逻辑、数据格式处理 | 1 | 2 |
| 9 | 第4章 | 音频与媒体API 案例：案例4-1 音乐播放器、案例4-2 录音机 |
|
音频播放、背景音频、图片操作、录音 | 音频状态管理、后台播放 | 1 | 2 |
| 10 | 第4章 | 文件操作与Canvas绘图 案例：案例4-3 头像上传下载、案例4-4 模拟时钟 |
|
文件上传下载、Canvas绑定、绘图API | Canvas坐标系、绘图状态管理 | 1 | 2 |
| 11 | 第5章 | 动画与用户登录 案例：案例5-1 罗盘动画、案例5-2 用户登录 |
|
CSS动画、wx.createAnimation、微信登录流程 | Animation API关键帧、登录态维护 | 1 | 2 |
| 12 | 第5章 | 地图定位与网络通信 案例：案例5-3 查看附近的美食餐厅、案例5-4 在线聊天 |
|
地图组件、定位API、WebSocket实时通信 | 地图标记与交互、WebSocket连接管理 | 1 | 2 |
| 13 | 第6章 | 综合项目——点餐系统（上） 案例：案例6 点餐系统(上) |
|
项目架构设计、首页与菜单页开发 | 项目架构规划、组件拆分 | 1 | 2 |
| 14 | 第6章 | 综合项目——点餐系统（下） 案例：案例6 点餐系统(下) |
|
购物车、订单、个人中心开发 | 购物车状态管理、订单流程 | 0.5 | 2.5 |
| 15 | 第7-8章 | 小程序进阶与uni-app开发 案例：案例7-1 自定义标签栏、案例7-2 电影列表、案例7-3 待办事项、案例8 uni-app 短视频 |
|
Vant Weapp、自定义组件、uni-app跨平台 | 自定义组件通信、uni-app与小程序差异 | 1 | 2 |
| 16 | 综合考核 | 期末考试 |
|
理论(40分)+实操(60分) | 综合运用全部知识点 | 1.2 | 1.8 |
| 合计 | 17.2 | 30.8 | |||||
4
考核方式
| 考核项 | 占比 | 说明 |
|---|---|---|
| 课后实践作业 | 30% | 第 1-15 次课各含基础/进阶/挑战三档任务，按完成度与代码规范评分 |
| 教材案例复现 | 20% | 20 个教材案例的上机完成情况，重点看能否独立跑通并解释关键代码 |
| 综合项目（点餐系统） | 20% | 第 13-14 次课项目成果，考核架构组织、功能完整性与联调能力 |
| 期末考试 | 30% | 理论卷 40 分 + 上机实操 60 分，详见 第 16 次课 |