2023年7月2日发(作者：)

第1章 认识微信小程序

课程名称

任务名称

项目性质

授课班级

微信小程序开发图解案例教程

认识微信小程序

□演示性

项目名称

课时

√综合性

认识微信小程序

2

□验证性 □设计性

授课日期 授课地点

（1）做好微信小程序开发的准备工作，包括基础技术准备和开发账号、文档、开发工具的准备。

教学目标

（2）学会微信小程序开发工具的使用，会添加项目、编辑代码、调试代码等。

（3）记住微信小程序常用的一些快捷键，以提高开发效率。

（4）理解微信小程序的开发流程。

（1）微信小程序介绍

教学内容

（2）微信小程序开发准备

（3）微信小程序开发工具的使用

（4）练习：Hello World的创建

教学重点

教学难点

微信小程序开发工具的使用

微信小程序开发工具的使用

装有微信小程序的开发工具的电脑

教学准备

教学课件PPT

教材：《微信小程序开发图解案例教程（附精讲视频）（第2版）》

作业设计

1 教学过程

教学环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

【课前说明】

分别从微信小程序的功能、使用场景、开发准备、开发工具的使用、开发流程、常用快捷键等课前组织

课程说明

知识点进行初步的了解。

【目的】

使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。

1.1微信小程序介绍

1.1.1初识微信小程序

微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。

（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。

课程内容描述

微信小程序入口

（2）在微信主界面下拉，会看到用过的微信小程序。

（3）给好友或者在群里分享小程序。

小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。

2 常用微信小程序界面

1.1.2微信小程序的功能

（1）分享页功能。

（2）分享对话功能。

（3）线下扫码进入微信小程序功能。

（4）挂起状态功能。

（5）消息通知功能。

（6）实时音视频录制播放功能。

（7）硬件连接功能。

（8）小游戏功能。

（9）公众号关联功能。

（10）搜索查找功能。

（11）识别二维码功能。

1.1.3微信小程序的使用场景

在发布小程序的时候，要选择服务类目。通过这些服务类目，我们能知道小程序的使用场景。服务类目分为个人服务类目和企业服务类目。个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。

1.2微信小程序开发准备

1.2.1基础技术准备

微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。

1.2.2开发准备

Step1：在“微信公众平台”注册微信开发者账号。单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。

3 在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。

开发文档

帮助文档

在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。开发人员经常会用到这里的简易教程、框架的使用、组件的介绍、API、工具以及腾讯云支持等内容。

Step2：在文档工具里，根据自己的操作系统，下载微信小程序的开发工具，如图所示。

下载开发工具

Step3：按照提示完成开发工具的安装，安装完成后用微信扫描二维码登录。开发工具提供了小程序项目和公众号网页项目两个调试类型，如图所示。

4

开发工具

1.3微信小程序开发工具的使用

1.3.1创建项目

在开发工具里单击“小程序项目”，进入到“小程序项目”界面，可以添加一个新的项目。在这个界面里需要填写项目目录、AppID和项目名称，如图所示。

添加项目

获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2节中注册的账户，在 “设置”→“开发设置”中，查看微信小程序的 AppID ，如图所示。

5 获取AppID

输入App ID后，在桌面上建立一个“demo”文件夹，并将其选择为项目目录，在项目名称中输入“demo”，勾选“建立普通快速启动模板”选项（还可以选择“建立插件快速启动模板”创建插件项目）， 单击“确定”按钮即可，如图所示。

创建demo项目

1.3.2开发者工具界面

创建项目后，进入到微信开发者工具界面，界面大致可以分为6个区域：①菜单栏区域，②模拟器、编辑器、调试器显示与隐藏区域，③模拟器区域，④编辑器区域，⑤调试器区域，⑥工具栏区域，如图所示。

开发者工具界面

① 菜单栏区域：包含项目、文件、编辑、工具、界面、设置、微信开发者工具菜单。

6 ② 模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试器区域的显示与隐藏的便捷操作按钮。

③ 模拟器区域：用来显示小程序项目的界面。

④ 编辑器区域：用来进行代码编写的区域。

⑤ 调试器区域：用来进行调试的区域。

⑥ 工具栏区域：包含编译、预览、远程调试、切后台、清缓存、上传、测试、腾讯云、详情工具栏按钮。

1.3.3模拟器区域

模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，方便小程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的终端设备，如iPhone 5、iPhone 6等；设置模拟器区域的百分比大小；模拟设置Wi-Fi、2G、3G等网络连接情况，如图所示。

模拟器区域

1.3.4编辑器区域

编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构；另一部分用来进行代码编辑，如图所示。

7

编辑器区域

（1）在项目目录上单击鼠标右键可以在硬盘打开文件目录，对文件目录重新命名，删除目录，在该目录下查找指定内容、新建文件等，如图所示。

文件操作

（2）在代码编辑区域里编写代码，可以通过模拟器区域，实时预览编辑的情况。修改

wxss、wxml 文件，会刷新当前页面（page），修改js文件或者json文件，会重新编译小程序，如图所示。

代码编写

（3）在代码编写过程中，开发工具提供自动补全功能。在编辑js文件时，开发工具会帮助开发者补全所有的 API，并给出相关的注释解释；编辑wxml文件时，会帮助开发者直接写出相关的标签；编辑json文件时，会帮助开发者补全相关的配置，并给出实时的提示，如图1.14所示。

8 自动补全功能

（4）开发工具提供自动保存功能，书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修改内容才会真实地写到硬盘上，并触发实时预览。

1.3.5调试器区域

小程序的常用调试工具有：Console、Sources、Network、Storage、AppData、Wxml。

（1）Console窗口用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息，还可以进行代码编写和调试，如图所示。

Console功能

（2）Sources窗口用于显示当前项目的脚本文件，在 Sources中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page代码，有require 的主动调用，如图所示。

9 Sources功能

（3）Network用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用的状态、时间等，如图所示。

Network功能

（4）Storage窗口用于显示当前项目，使用rage 或者 rageSync 后的数据存储情况，如图所示。

Storage功能

（5）AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上，如图所示。

10 AppData功能

（6）Wxml窗口用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以修改对应的 wxss 属性，如图所示。

Wxml功能

1.3.6工具栏区域

1．编译操作

我们可以通过编译按钮或者使用快捷键 Ctrl+B编译当前小程序的代码，并自动刷新模拟器。为了方便调试，开发者还可以添加或选择已有的自定义编译条件进行编译和代码预览，如图所示。

编译

11 2．预览

单击预览按钮，可以将小程序上传，生成二维码，通过扫描二维码可以在手机上预览小程序，如图所示。

预览

3．前后台切换

工具栏中的前后台切换按钮可以帮助开发者模拟一些客户端的操作环境。例如，在操作微信小程序过程中，突然进来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台进入到前台，如图所示。

前后台切换

4．清缓存

清缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除功能，如图所示。

12 清缓存

5．上传、测试

小程序开发完成后，需要上传到腾讯服务器进行测试，然后可以获取测试报告，根据测试报告进行相应的修改，如图所示。

上传

测试报告申请

1.3.7常用快捷键

1．格式调整快捷键

Ctrl+S：保存文件。

Ctrl+[， Ctrl+]：代码行缩进。

Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块。

Ctrl+C，Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行。

Shift+Alt+F：代码格式化。

Alt+Up，Alt+Down：上下移动一行。

Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行。

Ctrl+Shift+Enter：在当前行上方插入一行。

13 Ctrl+Shift+F：全局搜索。

Ctrl+B：可以编译当前代码，并自动刷新模拟器。

2．光标相关快捷键

Ctrl+End：移动到文件结尾。

Ctrl+Home：移动到文件开头。

Ctrl+I：选中当前行。

Shift+End：选择从光标到行尾。

Shift+Home：选择从行首到光标处。

Ctrl+Shift+L：选中所有匹配。

Ctrl+D：选中匹配。

Ctrl+U：光标回退。

3．界面相关快捷键

Ctrl + ：隐藏侧边栏。

Ctrl + M：打开或者隐藏模拟器。

1.4沙场大练兵：Hello World的创建

在创建项目之后，开发工具会添加默认的目录和页面，在默认的页面上，可以看到有“Hello World”文字，如图所示。

Hello World界面

分析一下Hello World是怎么创建出来的。

（1）在pages/index/文件里，Page的data中提供数据源motto，data的数据可以动态地绑定到 WXML页面中，如图所示。

14 motto数据源

（2）在pages/index/文件里，通过双大括号（{{}}）的方式，将motto绑定到页面里， motto对应的值就可以在页面里显示出来，如图所示。

绑定motto

（3）在pages/index/文件里，通过class的方式给Hello World添加样式，距顶部的高度 200px，如图所示。

添加样式

在实际的开发过程中也是这样来进行的，在js文件里进行业务逻辑的处理，动态地提供数据；在wxml文件里绑定数据，渲染界面；在wxss文件里添加样式，美化页面，就可以完成微信小程序的开发了。

15 总结评价

本节课主要学习微信小程序开发的准备工作、微信小程序开发工具的使用、微信小程序常用快捷键等知识，并通过Hello World的创建理解微信小程序的开发流程。

16