《微信小程序开发项目教程》教学教案（全文）

下面是小编为大家整理的《微信小程序开发项目教程》教学教案（全文）,供大家参考。

　

　第 第 1 章

　微信小程序概述

　 课时内容

　微信小程序概述 课时

　2 教学目标

　了解微信小程序的功能、使用场景 掌握小程序环境搭建的步骤 熟悉微信开发者工具界面 掌握微信小程序项目创建的方法 教学重点

　小程序环境搭建的步骤 微信开发者工具界面 微信小程序项目的创建 教学难点

　小程序环境搭建和项目创建 教学设计

　1.教学思路：介绍微信小程序的概念、功能和发展历程；通过多媒体演示和实机操作讲解微信小程序环境搭建和开发者工具的使用；通过创建莫凡商城小程序实战巩固基础知识。

　2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容

　 1.1

　微信小程序介绍 1.1.1

　初识微信小程序 微信小程序是一种无须安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用；也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。应用将无处不在，随时随地可用，无须卸载。

　微信小程序也是基于去中心化而存在的一个平台，它没有聚合的入口，那么它的入口在哪里呢？

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

　（2）在微信主界面的下拉窗口里可以找到用过的小程序。

　（3）可以直接打开好友或者群里分享的小程序。

　（4）通过扫描二维码可以进入小程序。

　 （a）“发现”界面

　 （b）主界面下拉窗口

　（c）分享的小程序 微信小程序入口 1.1.2

　微信小程序的功能 （1）分享页功能：用户可以将小程序当前页面分享给好友，如分享北京到上海的火车票列表界面，用户打开时是这个页面的实时数据，而不需要再次启动微信小程序。

　（2）分享对话功能：可以将对话分享给好友或者分享到微信群。

　（3）线下扫码进入微信小程序功能：提示用户附近有哪些微信小程序可以使用，扫描二维码就可以使用微信小程序。

　（4）挂起状态功能：例如，来电话可以先接电话，接完电话后可以继续使用微信小程序进行相关操作。

　（5）消息通知功能：商户可以发送消息给接受过服务的用户，用户也可以使用微信小程序的客服功能联系商户。

　（6）实时音视频录制播放功能：通过此功能可以随时随地进行直播或者录播。

　（7）硬件连接功能：通过使用 NFC（Near Field Communication，近距离无线通信）功能，可以把手机变成公交卡、门禁卡等进行便捷使用；通过 Wi-Fi 连接功能，进行网络连接。

　（8）小游戏功能：微信小程序制作的“跳一跳”小游戏，让游戏大门从此打开，让用户知道小程序也可以制作小游戏。

　（9）公众号关联功能：微信小程序可与公众号进行关联，公众号可关联不同主体的 3 个小程序，可关联同一主体的 10 个小程序，同一个小程序最多可关联 3 个公众号。

　1.1.3

　微信小程序的使用场景 小程序有哪些适合的使用场景呢？在发布小程序的时候，要选择服务类目，通过这些服务类目，能知道小程序的使用场景。服务类目分为个人服务类目和企业服务类目。

　●

　个人服务类目的小程序开发主体为个人，它的服务类目少一些、服务范围小一些，主要包括出行与交通、生活服务、餐饮、旅游、商业服务、快递业与邮政、教育、工具、体育等。

　●

　企业服务类目的小程序开发主体是企业，它的服务类目多一些、服务范围大一些，主要包括快递业与邮政、教育、医疗、政务民生、金融业、出行与交通、房地产、生活服务、IT 科技、餐饮、旅游、时政信息、文娱、工具、电商平台、商家自营、商业服务、公益、社交、体育、汽车等。

　1.2

　微信小程序环境搭建 微信小程序环境搭建很简单，需要 3 个步骤。

　（1）下载微信开发者工具。在“微信公众平台”官网选择“小程序”→“小程序开发文档”，如图所示。在打开的界面中选择“工具”→“下载”，可以看到微信小程序为不同的操作系统（Windows 64、Windows 32、macOS）提供了不同版本的开发者工具（因为开发者工具的版本更新很快，实际版本以读者操作为准），我们可以根据自己的操作系统下载相应的版本，如图所示。

　小程序开发文档

　下载微信开发者工具 （2）注册“微信公众平台”账号。在“微信公众平台”官网选择微信小程序类别进行注册。小程序支持个人开发者账号，可以注册个人账号；如果公司需要小程序，也可以进行企业认证。通过这两种方式都可以发布小程序，如图所示。

　 注册“微信公众平台”账号 （3）使用下载的微信开发者工具包。按照提示完成开发者工具的安装，安装完成后，运行微信开发者工具，会出现一个二维码，需要用绑定“微信公众平台”的微信扫描登录，登录后可以发现，开发者工具提供了本地“小程序项目”开发和“公众号网页项目”开发两个调试类型。在小程序开发部分微信开发者工具支持新建小程序和导入已有的小程序，如图所示。

　微信开发者工具 1.3

　微信小程序开发者工具的使用 在进行小程序开发之前，需要先掌握微信开发者工具的使用，对工具的使用掌握得越熟练，越有助于小程序的开发和提高开发效率。下面介绍一下微信开发者工具的使用。

　1.3.1

　如何创建项目 创建一个小程序项目，需要准备 AppID、项目名称和项目目录。

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

　获取 AppID （2）创建一个“小程序开发工具使用”项目，项目文件存放到“chapter1”文件夹中，其他都使用默认配置，如图所示。

　创建小程序项目 （3）单击“新建”按钮，即可创建一个小程序项目，同时进入微信开发者工具界面，如图所示。

　 微信开发者工具界面 1.3.2

　微信开发者工具界面 微信开发者工具界面可以分为五大功能区域：菜单栏、工具栏、模拟器、编辑器、调试器，如图所示。

　微信开发者工具界面的五大功能区域 1．菜单栏 菜单栏有项目、文件、编辑、工具界面、设置、微信开发者工具７个菜单项，涉及软件的一些常规操作和功能使用。

　“项目”菜单：通过“项目”菜单，可以新建项目、导入项目、打开最近项目、新建代码片段、导入代码片段、查看所有项目和关闭当前项目，从而对小程序项目或者代码片段进行管理和使用。

　“文件”菜单：通过“文件”菜单，可以新建文件、保存文件、保存所有文件和关闭文件。

　“编辑”菜单：是对代码进行管理的一个菜单，通过该菜单可以格式化代码等。

　“工具”菜单：用于编译、刷新、预览、清除缓存等。

　“界面”菜单：用于显示或者隐藏工具栏、模拟器、编辑器、目录树、调试器区域。

　“设置”菜单：通过“设置”菜单，可以进行通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置。

　“微信开发者工具”菜单：通过该菜单，可以对开发者工具进行升级、回退和退出等。

　2．工具栏 工具栏包含了小程序开发中使用到的常用工具和常用功能。

　（1）显示或隐藏模拟器、编辑器、调试器按钮。这 3 个按钮可以控制模拟器、编辑器、调试器区域的显示或者隐藏。

　（2）“云开发”按钮。通过“云开发”按钮可以进入小程序云开发控制台，进行小程序云开发。

　（3）小程序模式。这里提供两种模式：一种是小程序模式，用于正常开发小程序项目；另一种是插件模式，用于开发小程序插件。

　（4）编译操作。可以通过使用“编译”按钮或者“Ctrl + B”组合键，编译当前代码，并自动刷新模拟器，同时鉴于开发者需调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览，如图 1.11 所示。

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

　 预览 （6）真机调试。小程序允许在真机上调试，可以在发布之前查看小程序在真机上的运行效果。

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

　前、后台切换 （8）清缓存。清缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状态、全部清除功能，如图所示。

　 清缓存

　（9）上传。小程序开发完成后需要上传到腾讯服务器进行测试如图所示。在手机上可以预览开发版本的小程序。

　上传 （10）版本管理。小程序代码可以上传到 Git 进行版本管理和多人协作开发。

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

　模拟器

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

　编辑器区域 （1）在项目目录上单击鼠标右键，在弹出的快捷菜单中可以新建目录、Page、Component、JS、TS、JSON、WXML、WXSS、WXS，可以对文件目录重新命名，可以删除目录，可以在该目录下查找指定内容，如图所示。

　文件操作 （2）在代码编辑区域中编写代码后，可以通过模拟器区域，实时预览编辑的小程序的演示情况。修改 WXSS、WXML 文件，会刷新当 Page，修改 JS、JSON 文件，会重新编译小程序，如图所示。

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

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

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

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

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

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

　Network 的功能 （4）Storage 窗口用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况，如图所示。

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

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

　Wxml 的功能

　1.3.3

　常用快捷键 １．格式调整组合键 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：在当前行上方插入一行。

　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

　项目实战：创建莫凡商城小程序 莫凡商城（mofunShop）小程序是贯穿本书的项目案例，通过学习本书内容可以完整地开发一个企业级的小程序。本章介绍如何创建微信小程序项目及如何使用微信开发者工具。下面开始创建一个莫凡商城小程序。

　（1）打开微信开发者工具，创建莫凡商城小程序，并将其存放到“mofunShop”文件夹，AppID 使用自己在公众平台里的 AppID，如图所示。

　 创建项目 （2）创建莫凡商城小程序项目之后，会进入到微信开发者工具里，默认创建一个小程序页面，包括两方面内容：一是输出 Hello World 文字；二是获取用户的头像、昵称信息。在 pages/index/index.js 文件里，Page的 data 里提供数据源 motto, data 的数据可以动态地绑定到 WXML 页面里，如图所示。

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

　绑定 motto

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

　添加样式 （5）单击“获取头像昵称”按钮，可以通过触发获取用户信息事件（getUserInfo）来获取用户的相关信息。微信小程序获取用户头像、昵称，需要用户授权后方可渲染到界面上，如图所示。

　获取头像昵称 在实际的开...

推荐访问:《微信小程序开发项目教程》教学教案 开发项目 教案 程序