# 第1次课 讲稿 > 课程：小程序开发 > 主题：微信小程序概述与开发环境搭建 > 教材：《微信小程序开发实战（第2版）》第1章 > 时长：3学时（理论 2 + 实践 1） > 重点：小程序定位与特点、开发环境搭建 > 难点：小程序运行机制、与原生App/H5对比 --- ## 一、开场（0:00） 同学们好，欢迎来到《小程序开发》这门课。 在正式开始之前，我先问大家一个问题：这周你们用过几个小程序？点外卖、扫码点餐、健康码、查快递——先不用回答，心里数一下。 （停顿，等学生反应） 我猜大部分同学数出来都在五个以上，但如果我再问一句"你为它们装过 App 吗"，答案基本都是没有。这就是小程序最核心的价值：**它把"用一个服务"的成本，从"下载—安装—注册—使用"压缩成了"扫码—使用"**。 这学期我们要做的，就是让大家从一个使用者变成开发者。今天第一次课有两个目标：第一，搞清楚小程序到底是什么、什么时候该用它、什么时候不该用；第二，把开发环境装好，跑起来第一个项目。 --- ## 二、明确本课目标（约 5:00） 把目标写在白板上或直接翻到课件第 2 页，逐条念一遍： - 了解微信小程序的背景、应用场景与市场现状 - 理解小程序与原生App、H5的差异与各自定位 - 掌握微信开发者工具的安装与配置 - 能够创建第一个微信小程序项目 本次课 3 学时的安排是：**理论讲解 2 学时，上机实践 1 学时**——概念与技术选型为主，含小程序/原生App/H5 对比，末段完成环境搭建。 --- ## 三、知识点讲解 ### 幻灯片 3：小程序四大核心特点 **【8:00 讲解】** **无需安装** 用户无需下载安装即可使用，触手可及 **触手可及** 通过扫一扫或搜索即可打开应用 **用完即走** 无需卸载，用户不用关心是否安装太多应用 **无需卸载** 应用完全不存在卸载的概念 ### 幻灯片 4：小程序 vs 原生App vs H5 **【13:00 讲解】** 这一页是对比表，建议按列讲而不是按行讲——先讲三种方案在"开发成本"上的差别，再讲"用户体验"，学生更容易形成横向印象。 | 对比维度 | 微信小程序 | 原生App | H5网页 | |---|---|---|---| | 开发成本 | 中等 | 高 | 低 | | 用户体验 | 接近原生 | 最佳 | 一般 | | 安装方式 | 无需安装 | 应用商店下载 | 无需安装 | | 运行环境 | 微信客户端 | 操作系统 | 浏览器 | | 系统权限 | 受限 | 完整 | 极度受限 | | 推广成本 | 低(微信生态) | 高 | 中等 | | 离线能力 | 支持 | 支持 | 不支持 | 讲完这张表，回到开场那个问题：你手机里为什么装了美团 App，却只用小程序点奶茶？让学生自己说出"高频用 App、低频用小程序"这个结论。 ### 幻灯片 5：开发环境搭建步骤 **【18:00 讲解】** **步骤一：注册小程序账号** 访问 mp.weixin.qq.com 获取 AppID **步骤二：安装开发者工具** 下载微信开发者工具稳定版 **步骤三：创建第一个项目** 使用AppID或测试号创建项目 - 提示：建议使用自己的AppID，测试号部分功能受限 ### 幻灯片 6：开发者工具三大区域 **【23:00 讲解】** **模拟器** 左侧实时预览小程序运行效果，支持不同机型切换 **编辑器** 中间代码编辑区域，支持语法高亮与自动补全 **调试器** 底部调试面板，Console / Network / Storage 等 --- ## 四、难点突破：用类比讲清楚 下面这几个点是学生最容易卡住的地方，抽象讲不通就换成类比。 ### 小程序 / 原生App / H5 的关系 可以这样类比：原生 App 像自己买地盖房子，什么都能做但成本最高；H5 像租一间共享办公室，便宜灵活但能改的东西很少；小程序像在大商场里租一个铺面——商场（微信）帮你带来客流，但你得守商场的规矩，装修风格、营业时间、能卖什么都有约束。 ### 双线程架构 小程序的逻辑层和渲染层是两个独立线程，中间靠微信客户端转发数据。这就像餐厅的后厨和前厅：后厨（逻辑层）负责算账做菜，前厅（渲染层）负责摆盘上桌，两边不能直接伸手，所有东西必须通过传菜口（setData）过一遍。这也解释了后面为什么"不能在小程序里直接操作 DOM"。 ### 为什么没有 window 和 document 因为逻辑层跑在纯 JavaScript 引擎里，根本没有浏览器环境。就像你在计算器上写公式，能算数，但没法弹窗——不是不给你用，是那个环境里压根没这个东西。所以 jQuery 这类操作 DOM 的库在小程序里用不了。 --- ## 五、代码演示环节 以下每一段都建议**现场敲**，不要直接贴完整代码。边敲边问"下一行该写什么"，让学生跟上节奏。 ### 演示 1：微信小程序四大核心特点 **文件：** `概念解析`　**预期效果：** 小程序入口示例 ``` // 微信小程序四大核心特点 特点一：无需安装 用户无需下载安装即可使用 通过微信直接打开，不占手机存储 特点二：触手可及 扫一扫或搜索即可打开应用 无需记住网址，降低使用门槛 特点三：用完即走 无需关心是否安装太多应用 随时可用，又无需卸载 特点四：无需卸载 应用完全不存在卸载的概念 不残留垃圾文件，不占用后台资源 ``` **讲解口径：** 微信小程序有**四大核心特点**：**无需安装**—不占手机存储；**触手可及**—扫一扫即可打开；**用完即走**—无需关心卸载；**无需卸载**—不残留垃圾。这四点构成了小程序与原生App、H5的核心差异。 ### 演示 2：小程序 vs 原生App vs H5 对比 **文件：** `代码讲解`　**预期效果：** 选型决策 ``` // 三种移动应用开发方式对比 开发成本：小程序中等 | 原生App高 | H5低 小程序一套代码双端运行，成本低于原生 用户体验：小程序接近原生 | 原生App最佳 | H5一般 小程序渲染层使用WebView+原生组件混合 运行环境：小程序微信客户端 | 原生操作系统 | H5浏览器 小程序依赖微信运行，无法独立使用 系统权限：小程序受限 | 原生完整 | H5极度受限 小程序无法操作文件系统、后台运行等 推广成本：小程序低 | 原生高 | H5中等 小程序借助微信12亿+用户生态，获客成本低 离线能力：小程序支持 | 原生支持 | H5不支持 小程序支持本地缓存，可离线访问部分功能 ``` **讲解口径：** 三种开发方式各有优劣。**小程序**开发成本中等、体验接近原生、推广成本低，适合轻量级服务；**原生App**体验最佳但成本高，适合复杂应用；**H5**成本最低但体验一般，适合内容展示。选择时需根据**业务场景**综合考量。 ### 演示 3：开发环境搭建步骤 **文件：** `代码讲解`　**预期效果：** 开发者工具界面 ``` // 步骤一：注册小程序账号 1. 访问 mp.weixin.qq.com 2. 点击"立即注册" → 选择"小程序" 3. 填写邮箱、密码完成注册 4. 登录后台 → 开发管理 → 获取 AppID // 步骤二：安装开发者工具 1. 访问 developers.weixin.qq.com 2. 下载"稳定版"开发者工具 3. 安装后使用微信扫码登录 // 步骤三：创建第一个项目 1. 点击 "+" 新建项目 2. 填写项目名称、目录 3. 填写 AppID（或使用测试号） 4. 后端服务选择"不使用云服务" 5. 模板选择"JS基础模板" 6. 点击"确定"创建项目 // ⚠️ 注意事项 建议使用自己的 AppID，测试号部分功能受限 ``` **讲解口径：** 搭建开发环境分三步：**第一步**，访问mp.weixin.qq.com注册小程序账号，获取**AppID**；**第二步**，下载安装微信开发者工具稳定版，微信扫码登录；**第三步**，创建项目时填入AppID，选择JS基础模板。注意建议使用自己的AppID，测试号部分功能受限。 ### 演示 4：小程序项目目录结构 **文件：** `代码讲解`　**预期效果：** app.json 示例 ``` // 小程序项目目录结构 miniprogram/ ├── app.js // 小程序入口逻辑 ├── app.json // 全局配置文件（核心） ├── app.wxss // 全局样式文件 ├── project.config.json // 项目配置 ├── sitemap.json // 站点搜索配置 └── pages/ // 页面目录 └── index/ // 首页 ├── index.wxml // 页面结构（类似HTML） ├── index.wxss // 页面样式（类似CSS） ├── index.js // 页面逻辑（类似JS） └── index.json // 页面配置 // 核心文件说明 app.json 是最重要的配置文件： - pages: 页面路径列表（第一个为首页） - window: 全局窗口样式配置 - tabBar: 底部导航栏配置 // 每个页面由4个文件组成 .wxml = 结构 | .wxss = 样式 .js = 逻辑 | .json = 配置 ``` **讲解口径：** 小程序项目有三个全局文件：**app.js**入口逻辑、**app.json**全局配置、**app.wxss**全局样式。其中**app.json**最重要，它定义了页面路径列表和窗口样式。每个页面由4个文件组成：**.wxml**结构、**.wxss**样式、**.js**逻辑、**.json**配置，类似于Web开发中的HTML+CSS+JS。 ### 演示 5：开发者工具三大区域详解 **文件：** `代码讲解`　**预期效果：** 调试技巧 ``` // 开发者工具三大核心区域 区域一：模拟器（左侧） - 实时预览小程序运行效果 - 支持切换不同机型（iPhone/Android） - 可调节缩放比例和网络模拟 - 支持自动编译（保存即刷新） 区域二：编辑器（中间） - 代码编辑区域，支持语法高亮 - 自动补全（输入wx.自动提示API） - 文件树导航，快速切换文件 - Ctrl+S保存触发自动编译 区域三：调试器（底部） - Console：查看日志输出 - Network：查看网络请求 - Storage：查看本地缓存 - AppData：查看页面数据 - Wxml：查看组件树 ``` **讲解口径：** 开发者工具分三大区域：**模拟器**实时预览效果，可切换机型；**编辑器**编写代码，支持自动补全，Ctrl+S保存即编译；**调试器**查看Console日志、Network请求、Storage缓存等。调试时常用**console.log**输出数据，Network面板排查接口问题。 ### 演示 6：小程序的运行机制 **文件：** `运行机制`　**预期效果：** 双线程模型 ``` // 小程序双线程运行机制 渲染层：WebView（多个页面多个WebView） 负责页面渲染，使用WXML/WXSS 通过JSBridge与逻辑层通信 逻辑层：JsCore（只有一个JsCore线程） 负责业务逻辑，运行JavaScript代码 通过setData将数据传递给渲染层 通信方式： 逻辑层 → 渲染层：setData() 渲染层 → 逻辑层：事件绑定 // 为什么小程序不能操作DOM？ 因为渲染层和逻辑层分离 逻辑层无法直接访问DOM，只能通过setData更新 ``` **讲解口径：** 小程序采用**双线程**运行机制：**渲染层**使用WebView渲染页面，**逻辑层**使用JsCore运行JS代码。两者通过**setData**和**事件**通信。这就是为什么小程序中不能直接操作DOM——逻辑层和渲染层是分离的。 ### 演示 7：小程序的应用场景与生态 **文件：** `应用场景`　**预期效果：** 生态概览 ``` // 小程序典型应用场景 电商零售：京东购物、拼多多、蘑菇街 商品浏览、下单、支付一站式完成 生活服务：美团、滴滴、携程 外卖点餐、打车、酒店预订 政务民生：粤省事、随申办 社保查询、公积金提取、健康码 工具效率：腾讯文档、石墨文档 在线协作、文件处理 社交娱乐：狼人杀、头脑王者 轻度游戏、社交互动 // 小程序生态数据 日活用户超过 4.9亿 小程序数量超过 300万 ``` **讲解口径：** 小程序已覆盖**电商零售、生活服务、政务民生、工具效率、社交娱乐**等场景。目前小程序日活超过**4.9亿**，数量超过**300万**，已成为移动端不可忽视的开发方向。 ### 演示 8：小程序的运行机制 **文件：** `运行机制`　**预期效果：** 双线程模型 ``` // 小程序双线程运行机制 渲染层：WebView（多个页面多个WebView） 负责页面渲染，使用WXML/WXSS 通过JSBridge与逻辑层通信 逻辑层：JsCore（只有一个JsCore线程） 负责业务逻辑，运行JavaScript代码 通过setData将数据传递给渲染层 通信方式： 逻辑层 → 渲染层：setData() 渲染层 → 逻辑层：事件绑定 // 为什么小程序不能操作DOM？ 因为渲染层和逻辑层分离 逻辑层无法直接访问DOM，只能通过setData更新 ``` **讲解口径：** 小程序采用**双线程**运行机制：**渲染层**使用WebView渲染页面，**逻辑层**使用JsCore运行JS代码。两者通过**setData**和**事件**通信。这就是为什么小程序中不能直接操作DOM——逻辑层和渲染层是分离的。 ### 演示 9：小程序的应用场景与生态 **文件：** `应用场景`　**预期效果：** 生态概览 ``` // 小程序典型应用场景 电商零售：京东购物、拼多多、蘑菇街 商品浏览、下单、支付一站式完成 生活服务：美团、滴滴、携程 外卖点餐、打车、酒店预订 政务民生：粤省事、随申办 社保查询、公积金提取、健康码 工具效率：腾讯文档、石墨文档 在线协作、文件处理 社交娱乐：狼人杀、头脑王者 轻度游戏、社交互动 // 小程序生态数据 日活用户超过 4.9亿 小程序数量超过 300万 ``` **讲解口径：** 小程序已覆盖**电商零售、生活服务、政务民生、工具效率、社交娱乐**等场景。目前小程序日活超过**4.9亿**，数量超过**300万**，已成为移动端不可忽视的开发方向。 --- ## 六、常见错误与排查 上机环节学生一定会遇到下面这些问题，提前讲一遍能省掉大量重复答疑。 | # | 现象 | 原因与解决 | |:-:|------|------------| | 1 | 把 AppID 填成别人的 | 用测试号可以开发，但涉及支付、登录、地理位置等能力时会受限。建议课上就注册自己的账号，后面十几次课都要用。 | | 2 | 开发者工具装了但打不开项目 | 九成是路径里有中文或空格，或者选的目录不是小程序根目录（要选包含 app.json 的那一层）。 | | 3 | 以为小程序就是"套壳网页" | 这是最常见的误解。小程序有自己的组件、自己的 API、自己的渲染管线，WXML 不是 HTML，WXSS 也不是 CSS 的子集。开学就把这个概念纠正过来，后面少走弯路。 | --- ## 七、本课小结 回到课件小结页，逐条回顾： - 微信小程序四大核心特点 - 小程序 vs 原生App vs H5 对比 - 开发环境搭建步骤 - 小程序项目目录结构 - 开发者工具三大区域详解 - 小程序的运行机制 - 小程序的应用场景与生态 今天这节课我们没写多少代码，但建立的判断力比代码重要：拿到一个需求，先问"这该做成 App、H5 还是小程序"。 回去把三件事做完：装好开发者工具、注册自己的 AppID、创建第一个项目并改掉欢迎页的文字。下次课我们拆解项目目录，看看那七八个文件各自管什么。 --- ## 八、布置作业 三档任务，基础必做，进阶建议做，挑战选做。 ### 【基础】环境搭建截图 完成开发者工具安装，创建第一个项目并截图提交 ### 【进阶】修改欢迎页 修改默认项目的欢迎页面文字，展示个人信息（姓名、学号、专业） ### 【挑战】小程序调研报告 调研3个不同类型的小程序（电商/工具/社交），分析其功能特点与交互设计 --- > 配套资源：课件 `slides-v2/session01.pptx`　课堂视频 `videos-output/session01.mp4`　扩展阅读 `docs/第1次课_扩展阅读.md`