第1次课 - 微信小程序概述与开发环境搭建

教学目标

了解微信小程序的背景、应用场景与市场现状
理解小程序与原生App、H5的差异与各自定位
掌握微信开发者工具的安装与配置
能够创建第一个微信小程序项目

重点、难点与课时分配

◎

教学重点

小程序定位与特点、开发环境搭建

△

教学难点

小程序运行机制、与原生App/H5对比

课时分配（共 3 学时）

理论 2 学时

实践 1 学时

概念与技术选型为主，含小程序/原生App/H5 对比，末段完成环境搭建

课件要点

小程序四大核心特点

无需安装 — 用户无需下载安装即可使用，触手可及

触手可及 — 通过扫一扫或搜索即可打开应用

用完即走 — 无需卸载，用户不用关心是否安装太多应用

无需卸载 — 应用完全不存在卸载的概念

小程序 vs 原生App vs H5

对比维度	微信小程序	原生App	H5网页
开发成本	中等	高	低
用户体验	接近原生	最佳	一般
安装方式	无需安装	应用商店下载	无需安装
运行环境	微信客户端	操作系统	浏览器
系统权限	受限	完整	极度受限
推广成本	低(微信生态)	高	中等
离线能力	支持	支持	不支持

开发环境搭建步骤

步骤一：注册小程序账号 — 访问 mp.weixin.qq.com 获取 AppID

步骤二：安装开发者工具 — 下载微信开发者工具稳定版

步骤三：创建第一个项目 — 使用AppID或测试号创建项目

提示：建议使用自己的AppID，测试号部分功能受限

开发者工具三大区域

模拟器 — 左侧实时预览小程序运行效果，支持不同机型切换

编辑器 — 中间代码编辑区域，支持语法高亮与自动补全

调试器 — 底部调试面板，Console / Network / Storage 等

代码示例与讲解

微信小程序四大核心特点

                概念解析
                小程序入口示例
              
1// 微信小程序四大核心特点
2
3特点一：无需安装
4  用户无需下载安装即可使用
5  通过微信直接打开，不占手机存储
6
7特点二：触手可及
8  扫一扫或搜索即可打开应用
9  无需记住网址，降低使用门槛
10
11特点三：用完即走
12  无需关心是否安装太多应用
13  随时可用，又无需卸载
14
15特点四：无需卸载
16  应用完全不存在卸载的概念
17  不残留垃圾文件，不占用后台资源

微信小程序有四大核心特点：无需安装—不占手机存储；触手可及—扫一扫即可打开；用完即走—无需关心卸载；无需卸载—不残留垃圾。这四点构成了小程序与原生App、H5的核心差异。

小程序 vs 原生App vs H5 对比

                代码讲解
                选型决策
              
1// 三种移动应用开发方式对比
2
3开发成本：小程序中等 | 原生App高 | H5低
4  小程序一套代码双端运行，成本低于原生
5
6用户体验：小程序接近原生 | 原生App最佳 | H5一般
7  小程序渲染层使用WebView+原生组件混合
8
9运行环境：小程序微信客户端 | 原生操作系统 | H5浏览器
10  小程序依赖微信运行，无法独立使用
11
12系统权限：小程序受限 | 原生完整 | H5极度受限
13  小程序无法操作文件系统、后台运行等
14
15推广成本：小程序低 | 原生高 | H5中等
16  小程序借助微信12亿+用户生态，获客成本低
17
18离线能力：小程序支持 | 原生支持 | H5不支持
19  小程序支持本地缓存，可离线访问部分功能

三种开发方式各有优劣。小程序开发成本中等、体验接近原生、推广成本低，适合轻量级服务；原生App体验最佳但成本高，适合复杂应用；H5成本最低但体验一般，适合内容展示。选择时需根据业务场景综合考量。

开发环境搭建步骤

                代码讲解
                开发者工具界面
              
1// 步骤一：注册小程序账号
21. 访问 mp.weixin.qq.com
32. 点击"立即注册" → 选择"小程序"
43. 填写邮箱、密码完成注册
54. 登录后台 → 开发管理 → 获取 AppID
6
7// 步骤二：安装开发者工具
81. 访问 developers.weixin.qq.com
92. 下载"稳定版"开发者工具
103. 安装后使用微信扫码登录
11
12// 步骤三：创建第一个项目
131. 点击 "+" 新建项目
142. 填写项目名称、目录
153. 填写 AppID（或使用测试号）
164. 后端服务选择"不使用云服务"
175. 模板选择"JS基础模板"
186. 点击"确定"创建项目
19
20// ⚠️ 注意事项
21建议使用自己的 AppID，测试号部分功能受限

搭建开发环境分三步：第一步，访问mp.weixin.qq.com注册小程序账号，获取AppID；第二步，下载安装微信开发者工具稳定版，微信扫码登录；第三步，创建项目时填入AppID，选择JS基础模板。注意建议使用自己的AppID，测试号部分功能受限。

小程序项目目录结构

                代码讲解
                app.json 示例
              
1// 小程序项目目录结构
2miniprogram/
3├── app.js          // 小程序入口逻辑
4├── app.json        // 全局配置文件（核心）
5├── app.wxss       // 全局样式文件
6├── project.config.json  // 项目配置
7├── sitemap.json    // 站点搜索配置
8└── pages/          // 页面目录
9    └── index/      // 首页
10        ├── index.wxml   // 页面结构（类似HTML）
11        ├── index.wxss   // 页面样式（类似CSS）
12        ├── index.js     // 页面逻辑（类似JS）
13        └── index.json   // 页面配置
14
15// 核心文件说明
16app.json 是最重要的配置文件：
17  - pages: 页面路径列表（第一个为首页）
18  - window: 全局窗口样式配置
19  - tabBar: 底部导航栏配置
20
21// 每个页面由4个文件组成
22.wxml = 结构 | .wxss = 样式
23.js = 逻辑   | .json = 配置

小程序项目有三个全局文件：app.js入口逻辑、app.json全局配置、app.wxss全局样式。其中app.json最重要，它定义了页面路径列表和窗口样式。每个页面由4个文件组成：.wxml结构、.wxss样式、.js逻辑、.json配置，类似于Web开发中的HTML+CSS+JS。

开发者工具三大区域详解

                代码讲解
                调试技巧
              
1// 开发者工具三大核心区域
2
3区域一：模拟器（左侧）
4  - 实时预览小程序运行效果
5  - 支持切换不同机型（iPhone/Android）
6  - 可调节缩放比例和网络模拟
7  - 支持自动编译（保存即刷新）
8
9区域二：编辑器（中间）
10  - 代码编辑区域，支持语法高亮
11  - 自动补全（输入wx.自动提示API）
12  - 文件树导航，快速切换文件
13  - Ctrl+S保存触发自动编译
14
15区域三：调试器（底部）
16  - Console：查看日志输出
17  - Network：查看网络请求
18  - Storage：查看本地缓存
19  - AppData：查看页面数据
20  - Wxml：查看组件树

开发者工具分三大区域：模拟器实时预览效果，可切换机型；编辑器编写代码，支持自动补全，Ctrl+S保存即编译；调试器查看Console日志、Network请求、Storage缓存等。调试时常用console.log输出数据，Network面板排查接口问题。

小程序的运行机制

                运行机制
                双线程模型
              
1// 小程序双线程运行机制
2
3渲染层：WebView（多个页面多个WebView）
4  负责页面渲染，使用WXML/WXSS
5  通过JSBridge与逻辑层通信
6
7逻辑层：JsCore（只有一个JsCore线程）
8  负责业务逻辑，运行JavaScript代码
9  通过setData将数据传递给渲染层
10
11通信方式：
12  逻辑层 → 渲染层：setData()
13  渲染层 → 逻辑层：事件绑定
14
15// 为什么小程序不能操作DOM？
16因为渲染层和逻辑层分离
17逻辑层无法直接访问DOM，只能通过setData更新

小程序采用双线程运行机制：渲染层使用WebView渲染页面，逻辑层使用JsCore运行JS代码。两者通过setData和事件通信。这就是为什么小程序中不能直接操作DOM——逻辑层和渲染层是分离的。

小程序的应用场景与生态

                应用场景
                生态概览
              
1// 小程序典型应用场景
2
3电商零售：京东购物、拼多多、蘑菇街
4  商品浏览、下单、支付一站式完成
5
6生活服务：美团、滴滴、携程
7  外卖点餐、打车、酒店预订
8
9政务民生：粤省事、随申办
10  社保查询、公积金提取、健康码
11
12工具效率：腾讯文档、石墨文档
13  在线协作、文件处理
14
15社交娱乐：狼人杀、头脑王者
16  轻度游戏、社交互动
17
18// 小程序生态数据
19日活用户超过 4.9亿
20小程序数量超过 300万

小程序已覆盖电商零售、生活服务、政务民生、工具效率、社交娱乐等场景。目前小程序日活超过4.9亿，数量超过300万，已成为移动端不可忽视的开发方向。

小程序的运行机制

                运行机制
                双线程模型
              
1// 小程序双线程运行机制
2
3渲染层：WebView（多个页面多个WebView）
4  负责页面渲染，使用WXML/WXSS
5  通过JSBridge与逻辑层通信
6
7逻辑层：JsCore（只有一个JsCore线程）
8  负责业务逻辑，运行JavaScript代码
9  通过setData将数据传递给渲染层
10
11通信方式：
12  逻辑层 → 渲染层：setData()
13  渲染层 → 逻辑层：事件绑定
14
15// 为什么小程序不能操作DOM？
16因为渲染层和逻辑层分离
17逻辑层无法直接访问DOM，只能通过setData更新

小程序的应用场景与生态

                应用场景
                生态概览
              
1// 小程序典型应用场景
2
3电商零售：京东购物、拼多多、蘑菇街
4  商品浏览、下单、支付一站式完成
5
6生活服务：美团、滴滴、携程
7  外卖点餐、打车、酒店预订
8
9政务民生：粤省事、随申办
10  社保查询、公积金提取、健康码
11
12工具效率：腾讯文档、石墨文档
13  在线协作、文件处理
14
15社交娱乐：狼人杀、头脑王者
16  轻度游戏、社交互动
17
18// 小程序生态数据
19日活用户超过 4.9亿
20小程序数量超过 300万

小程序已覆盖电商零售、生活服务、政务民生、工具效率、社交娱乐等场景。目前小程序日活超过4.9亿，数量超过300万，已成为移动端不可忽视的开发方向。

课件预览与下载

⬇ 下载 PPT 课件 ⬇ 下载讲稿 ⬇ 下载扩展阅读

课堂视频

▶

第1次课 · 微信小程序概述与开发环境搭建

▶

本次课教学视频请在课堂现场观看 视频文件较大未随本站发布；如需回看，请向任课教师索取或在课程群下载。

课后实践

基础

环境搭建截图

完成开发者工具安装，创建第一个项目并截图提交

进阶

修改欢迎页

修改默认项目的欢迎页面文字，展示个人信息（姓名、学号、专业）

挑战

小程序调研报告

调研3个不同类型的小程序（电商/工具/社交），分析其功能特点与交互设计

本课小结

微信小程序四大核心特点

小程序 vs 原生App vs H5 对比

开发环境搭建步骤

小程序项目目录结构

开发者工具三大区域详解

小程序的运行机制

小程序的应用场景与生态