认识微信小程序教案

1、认识微信小程序课程名称微信小程序开发图解案例 教程项目名称认识微信小程序任务名称认识微信小程序课时2项目性质口演示性口验证性口设计性，综合性授课班级授课日期授课地点教学目标(1)做好微/小程序开发的准备工作，包括基础技术准备和开发账号、文档、开发工具的准 备。(2)学会微信小程序开发工具的使用，会添加项目、编辑代码、调试代码等。(3)记住微信小程序常用的一些快捷键，以提高开发效率。(4)理解微信小程序的开发流程。教学内容(1)微信小程序介绍(2)微信小程序开发准备(3)微信小程序开发工具的使用(4)练习：Hello World 的创建教学重点微信小程序开发工具的使用教学难点微信小程序开发工具的

2、使用教学准备装有微信小程序的开发工具的电脑教学课件PPT教材：微信小程序开发图解案例教程(附精讲视频)(第3版)作业设计教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开授课计划、教案等），吸 ,学生注意力。课程说明【课前说明】分别从微信小程序的功能、使用场景、开发准备、开发工具的使用、开发流程、常用快捷键等 ,识点进行初步的了解。【目的】使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。微信小程序介绍初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口

3、，有多种进入方式，包括微信群聊入口、微信聊天主界面下拉入口、App分享消息卡片、发现栏小程序主入口、发现栏小程序主入口搜索框的搜索结果页、单人聊天会话中的小程序消息卡片、小程序打开小程 序、扫描二维码、小程序模板消息、公众号自定义菜单、公众号文章、公众号模板消息、微信 钱包、从另一个小程序返回、长按图片识别小程序码、顶部搜索框搜索使用过的小程序列表、 扫描小程序码、小程序 profile 页、顶部搜索框的搜索结果页、我的卡包等。在微信中的“发现”界面，可以找到小程序的入口，如图所示。课程内容描述微信小程序入口小程序的界面和使用方法和 App类似，下图所示是几个已发布的常用小程序界面常用微信小程

4、序界面微信小程序的功能(1)分享页功能。(2)分享对话功能。(3)线下扫码进入微信小程序功能。(4)挂起状态功能。(5)消息通知功能。(6)实时音视频录制播放功能。(7)硬件连接功能。(8)小游戏功能。(9)公众号关联功能。(10)搜索查找功能。(11)识别二维码功能。1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。通过这些服务类目，我们能知道小程序的使用场 景。服务类目分为个人服务类目和企业服务类目。个人服务类目针对以个人为开发主体的小程 手，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。1.1.4微信小程序能取代App吗原生App 一般要同时开发iOS

5、和Android两版，而小程序只需要做一版。毫无疑问，这点 是小程序最大的优势。从这个角度来看，小程序是“跨平台”的。小程序经过几年的发展，逐 渐成为与iOS、Android、公众号、网站并行的流量入口。各个企业在发布自己的产品的时候， 往往会发布iOS版、Android版、H5版、网站PC版、公众号版、微信小程序版，都是作为产 品流量的入口，并没有出现谁取代谁的现象。但是小程序可以快速构建出一个产品应用，门槛 (氐、成本低、发布快是各大企业制作小程序的原因。除了微信小程序，企业巨头也纷纷推出小 隹序。1.2微信小程序开发准备基础技术准备微信小程序自定义了一套语言，称为WXML微信标记语言)，

6、它的使用方法类似于HTML另外，微信小程序还定义了自己的样式语言WXSS兼容了 CSS并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML CSS JavaScript技术功底的人学习微信小程序开发会容易很多。开发准备(1)在“微信公众平台”注册微信开发者账号。单击“立即注册”，在“注册”界面选 择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。在微信公众平台中，选择“小程序” 一 “小程序开发文档”，可以打开帮助文档界面，如 哥所示。T C 安全 hitps/mpLW&kJni.qiq.corn-力

7、 I微信公众平台丛立即I喜曲恒F开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区 6个菜单，针对不同角色的 用户提供了不同内容的帮助文档。开发人员经常会用到这里的简易教程、框架的使用、组件的 介绍、API、工具以及腾讯云支持等内容。(2)在文档工具里，根据自己的操作系统，下载微信小程序的开发工具，如图所示。BS7匚卬而无如和川砒无三弓毒亡号?开SffiK 丽金M叁O ”运申云并爱16率 E意为严/台值.得第上由9*4|空师 Hjfcflft.恻间干,用蹴*ri3H*心*男声里.U可瀛A机事网LLq崛 1,丁铮制不即用药卷电对添加项目获取微信小程序 AppID,需要在“微信

8、公众平台”中登录 1.2.2节中注册的账户，在 “设 置” 一 “开发设置”中，查看微信小程序的AppID ,如图所示。获取AppID输入AppID后，建立一个 demd文件夹，并选择为项目目录，项目名称输入“demS ,开发模式选择“小程序”，后端服务可以选择“小程序云开发”或者“不使用云服务”，单 击“创建”按钮即可，如图所示。日司 H;总导二科SfltS 但W5tR!y序云开支ZHjeFa AKBfl4 且河 薪与 19fm 叼 *-btt i*44fSh , 同友” M 了峨a立G K 用Ei牙ifi JaMac*1tfe创建demo项目者工具界面创建项目后，进入到微信开发者工具界面，

9、界面大致可以分为6个区域：菜单栏区域,模拟器、编辑器、调试器显示与隐藏区域，模拟器区域，编辑器区域，工具栏区域， 调试器区域，如图所示。开发者工具界面菜单栏区域：包含项目、文件、编辑、工具、界面、设置、帮助、微信开发者工具8个菜单。模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试 k区域的显示与隐藏的便捷操作按钮。模拟器区域：用来显示小程序项目的界面。编辑器区域：用来进行代码编写的区域。包含编译、预览、真机调试、切后台、?t缓存、上传、版本管理、详情 8个工具栏按ho调试器区域：用来进行调试的区域。栏菜单栏中的菜单项集成了软件的一些常规操作和功能使用。“项目”菜单：

10、包括新建项目、导入项目、打开最近项目、新建代码片段、导入代码片 没、查看所有项目、关闭当前项目。这些命令都是对小程序项目或者代码片段进行管理使用 的。“文件”菜单：包括新建文件、保存、保存所有、关闭文件。这些命令可以新建文件、关 羽文件、保存文件。“编辑”菜单：是对代码进行管理的一个菜单，具有格式化代码等功能。“工具”菜单：包括编译、刷新、预览、清除缓存等功能。“界面”菜单：用于显示或者隐藏工具栏、模拟器、编辑器、目录树、调试器区域。“设置”菜单：包括通用设置、外观设置、快捷键设置、编辑设置、代理设置、安全设 置、项目设置。“帮助”菜单：包括文档搜索、开发者社区、开发者文档。“微信开发者工具”

11、菜单：包括对开发者工具进行升级、回退、退出等功能。器区域模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实 时变化，方便小程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效 果；可以设置小程序运行的终端设备，如 iPhone 5、iPhone 6等；可以设置模拟器区域的百 分比大小；可以模拟设置 Wi-Fi、2G 3G 4G等网络情况，如图所示。模拟器区域器区域编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构；另一部分用来进行代 画编辑，如图所示。编辑器区域(1)在项目目录上单击鼠标右键可以新建目录、Pages Component JS、T

12、S、JSOINWXML WXSSWX故件，对文件目录及文件进行重命名、删除、查找、硬盘打开、在终端中打 开等操作，如图所示。匕目量* is嗝醍J9 MubL./3 4nfjd h WJH* ip(3.*M ；Me=I 1 ifrE； BmsITS,如图所示。文件操作(2)在代码编辑区域里编写代码，可以通过模拟器区域实时预览编辑的情况代码编写(3)在代码编写过程中，开发工具提供自动补全功能。在编辑 JS文件时，会帮助开发者 补全所有的API,并给出相关的注释解释；编辑 WXML：件时，会帮助开发者直接写出相关的标 签；编辑JSONt件时，会帮助开发者补全相关的配置，并给出实时的提示，如图所示。.

13、Ltn,崂EMM eMdLHW升R 矽/ Ty-a加比产H短 y-g1nl电/加口,茜#9=30卜v L Tim14H H7口“加丫上61 匕由j.fBIn- HtUt cllH B jrlh“ pWl;teins i-dsef - vttij F Liutt，:卜:itit自动补全功能(4)开发工具提供自动保存功能。书写代码后，工具会自动帮助用户保存当前的代码编 置状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容。但需要注意的 是，只有保存文件，修改内容才会真实地写到硬盘上，并触发实时预览。1.3.6调试器区域小程序的常用调试工具有 Console、Sources Netw

14、ork Storage AppData、WxmLConsole窗口用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息， 还可以进行代码编写和调试，如图所示。Console 功能Sources窗口用于显示当前项目的脚本文件，在 Sources中开发者看到的文件是经 过处理之后的脚本文件，开发者的代码都会被包裹在define 函数中，并且对于 Page代码,有require 的主动调用，如图所示。10Sources 功能Network用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用 的状态、时间等，如图所示。Network 功能Storage 功能(4) Storage

15、窗口用于显示当前项目，使用 wx.setStorage 或者wx.setStorageSync 后 的数据存储情况，如图所示。(5) AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目数据情况。用 户可以在此处编辑数据，并及时地反馈到界面上，如图所示。11K wwifSws#*4ww Tw. FitfesjiMe-v :Me , pettw *U 口 Narldll wserlRfc 7) riuWu -。*如 皆Ed.丁 l 1 XvnguAjga sh EM c i.t:y T-anf =hbw prsjiHov B jln rim.ry I hEw xatUrLJ；.c

16、 Lap. HtE*n, ，1_ ：i纪 51*工二rLt 二二匕小；力；!,二.“L-yz-一户” 一出口 .r-U EJHEttl J.，*常B-M：3：r 二1i我的迫用石谴| ITT waUiMrlBrFo d EnILBB j rtruB wJrvigjZd _ I 13AppData 功能(6) Wxml窗口用于帮助开发者开发 Wxml转化后的界面。在这里可以看到真实的页面结 构以及结构对应的 wxss属性，同时可以修改对应的 wxss属性，如图所示。Wxml功能1.3.7工具栏区域.编译操作开发者可以通过“编译”按钮或者使用快捷键Ctrl+B编译当前小程序的代码，并自动刷新模拟器

17、。为了方便调试，开发者还可以添加或选择已有的自定义编译条件进行编译和代码预 览，如图所示。12.预览单击“预览”按钮，可以将小程序上传，生成二维码，通过扫描二维码可以在手机上预览 小程序，如图所示。预览.真机调试单击“真机调试”按钮，生成二维码，可以在手机上进行代码调试，手机界面如图所示手机界面也可以查看页面布局及请求情况，如图所示。13ISE 1MT一, iMIBA Utt号*B*：NLB.flf查看页面布局及请求.前后台切换工具栏中的前后台切换按钮可以帮助开发者模拟一些客户端的操作环境。例如，在操作微 管小程序过程中，突然进来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程 字时

18、，又会从后台进入到前台，如图所示。前后台切换.清缓存清缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状 态、全部清除功能，如图所示。.-总占勤单堆与他府立碑辞口除由库垢宁冷舸sat：理除网诏等耳5除母芸壮击至言羽14清缓存6.上传小程序开发完成后，需要上传到腾讯服务器进行版本发布，如图所示上传1.3.8常用快捷键.格式调整快捷键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 :可以编译当前代码，并自动刷新模拟器。.光标相关快捷键Ctrl+End :移动到文件结尾。Ctrl+Home :移动到文件开头。Ctrl+I :选中当前行。Shift+End :选择从光标到行尾。Shift+Home :选择从行首到光标处。Ctrl+Shift+L :选中所有匹配。Ctrl+D :选中匹配