微信小程序开发教案全套 第1--7章初识微信小程序 --微信小程序入门.docx

《微信小程序开发教案全套 第1--7章初识微信小程序 --微信小程序入门.docx》由会员分享，可在线阅读，更多相关《微信小程序开发教案全套 第1--7章初识微信小程序 --微信小程序入门.docx（197页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章微信小程序入门任务1.1微信小程序概述课时内容微信小程序概述课时1教学目标小程序简介； 小程序的诞生； 小程序的优点； 小程序的发展前景。教学重难点小程序的诞生； 小程序的优点； 小程序的发展前景。教学设计1 .教学思路：介绍小程序简介、小程序的诞生、小程序的优点、小程序的发展前景。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容现:“” 、小程序简介在，生活中随处都应用 可以进行转发、添加到116853199169 5324台,码41常用号区ax*M nXMl到微信我的小小程序。打开不同的希 程序、取消等。点击不搴/内0*0S3幻丽”W* 23w缶2” Q *#。

2、 q 8 a “ ” 6攵信小木让角呈序，如图1.1所示，/ “。”，则可以关闭微信上一t t? 8 VI 2DB1 论内41A L 早上好，金效.fRksixr* .-AQ外工gK 一”拿焦点看卷均夫*箕此 安B外务一O/ 61| 0 1点击右上角 小程序。只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。同时， 小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。微信小程序也被简称为小程序，其英文名称是Mini Program。它是一种存在于微信内部的轻量 级应用程序。微信研发团队在其官方网站上有一段关于微信小程序的介绍：“小程序是一种新的开放回回谪用依理

3、员本人曰*二M码.本怆0方式和标任 何费用.注期JS.打碎的勇博号将成为iXIK号的管理员 am.短信验证码 411668清入手机短信收到的6位蛇证码管理员身份始证无去接收脸证码？身份蛔成功声酝将作龙h序的M3员.身份验证成功后，单击“继续”按钮，进入下一步，系统会弹出一个提示框，让开发者进 行最后的信息确认，如图所示。提示请确认以下提交的主体信息主体名称：主体类型：个人该主体一经提交，将成为你使用微信公众平台各项服务与功能的唯一法律主体与缔 约主体.腾讯将在法律允许的范围内向微信用户展示你的注册信息，你需对填写资 料的真实性、合法性、准确性和有效性承担责任，否则腾讯有权拒绝或终止提供服 务.

4、取消确定最后一步，单击“确认”按钮完成主体信息的确认，如图所示。出执行结果。其中，需要注意的是必须在对应的JS文件中添加同名函数，若函数不存在，则会在触 发时报错。练习第3章 微信小程序概述任务3.14小猫叫课时内容小猫叫课时1教学目标掌握image图片组件的使用方法，音频的创建和使用方法，以及数据和事件绑定的实 现方法教学重点image图片组件的使用方法 音频的创建和使用方法 数据和事件绑定的实现方法教学难点image图片组件的使用方法教学设计1.教学思路：通过实训任务小猫叫的制作来让学生掌握image图片组件的使用方法， 音频的创建和使用方法，以及数据和事件绑定的实现方法2.教学手段：多媒

5、体+计算机 3.教学资料：教材、多媒体课件教学内容一、任务描述设计一个小程序，小程序运行后显示一张可爱的小猫图，点击小猫图后会发出好听的猫叫声。二.导入知识点本任务主要涉及image图片组件的使用方法，音频的创建和使用方法，以及数据和事件绑定的 实现方法。（1）image图像组件。支持JPG、PNG、SVG格式，用src属性指定图片的路径。（2）使用音频audio组件。首先要利用API函数wx.createlnnerAudioContext。创建音频上下文，然 后定义音频的源文件src,并利用play（）函数来进行音频播放。（3）数据绑定。WXML文件中的动态数据通过 符号与JS文件中的数据进

6、行绑定，这样JS中 的数据就可以传给WXML文件，但这种传递是单向的。（4）事件绑定。在WXML文件组件标签内利用“bind二函数名”绑定组件事件与函数，并在JS 文件中定义该事件函数。三.实现效果根据任务描述做出如图3.29所示的效果。小程序的界面首先显示一张可爱的小猫图，当点击 小猫图时，会发出萌萌的猫叫声。图3.29点击小猫叫运行效果图3.29点击小猫叫运行效果四、任务实现（1）在项目根目录下创建images和audio文件夹，并把cat.jpg图片文件和meow.mp3声音文件分 别复制到images和audio文件夹中，注意images文件夹和audio文件夹必须在根目录下。（2）编

7、写index.wxml文件代码。代码中主要使用了 image组件，并在组件中进行了数据绑定和事件 绑定。image组件用来设置图片，其中的src属性用来指定图片的路径，本案例绑定了属性值imgSrc, 该值在index.js文件中的data中进行了初始化；bindtap属性绑定了点击图片事件函数lapCat,该函数 在index.js文件中进行了定义。（3）编写index.wxss文件代码。本任务定义了.box和.title样式，index.wxss文件见附件；（4）编写index.js文件代码。代码在data中给出了图片路径，并定义了点击图片事件处理函数 tapCat o练习练习第3章 微信

8、小程序概述任务3.15温度转换计课时内容温度转换计课时1教学目标掌握JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的使用 方法、数据和事件绑定的实现方法教学重点JavaScript中顺序结构的程序设计方法 数学运算的基本方法 input组件的使用方法 数据和事件绑定的实现方法教学难点input输入框组件使用方法1 .教学思路：通过实训任务温度转换计的制作来让学生掌握JavaScript中顺序结构的程 序设计方法、数学运算的基本方法、input组件的使用方法、数据和事件绑定的实现方 教学设计法.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任

9、务描述设计一个温度转换计，根据摄氏温度C转换华氏温度F和华氏温度F转换摄氏温度C的微信小 程序。摄氏温度C转换华氏温度F的计算公式为：F=9*C/5+32华氏温度F转换摄氏温度C的计算公式为：C=( F-32)* 5/9二、导入知识点本任务主要演示了 JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的 使用方法、数据和事件绑定的实现方法。(1) JavaScript中顺序结构的程序设计方法。顺序结构程序设计是指按照解决问题的顺序写出相应 的语句，它的执行顺序是自上而下，依次执行。(2) JavaScript中数学运算的基本方法。JavaScript中的数学运算需

10、要将数学表达式利用JavaScript 运算符和函数等转换成JavaScript表达式。(3) input输入框组件使用方法。该组件主要用于输入数据，其常用属性如表3.8所示。表3.8 hiput组件常用属性属性类型默认值说明valuestring输入框的初始内容typestringtextinput的类型passwordbooleanfalse是否是密码类型placeholderstring输入框为空时的占位符placeholder-stylestring指 placeholder 的祥式maxlengthnumber140最大输入长度，设置为时不限制最大长度bindinputeventha

11、ndle键盘输入时触发，event.detail=value,cursor,keyCode, keyCode为键值，处理函数可以直接返回一个 字符串，返回的字符串将替换输入框的内容bindfocuseventhandle输入框聚焦时触发,event.detail=val tie,height), height为键盘iWj度bindblureventhandle输入框失去焦点时触发， event.detail= value:value)type属性是指利用真机运行时，当在输入框中输入数据时，根据type属性指定的类型弹出来的 键盘类型，而不是输入内容的类型。其有效值如表3.9所示。表3.9 ty

12、pe有效值值说明text文本输入键盘idcard身份证输入键盘number数字输入键盘digit带小数点的数字键盘三、实现效果根据此任务描述可以做出如图3.31所示的效果。当在输入框中输入数据时，界面下面自动弹出 数字键盘，如图(a)所示。当在“摄氏温度转华氏温度”文本输入框中输入30,在“华氏温度转摄 氏温度”文本输入框中输入100.4,并点击其他地方时，计算结如图(b)所示，此时计算结果已经 算出，数字键盘自动消失。WKMfTM21温度计的转换摄氏温度转华氏温度jWftA-eae华氏谑值为：华氏温度转摄氏温度亮除入华田B度史氏温度为：MMPC* WHitn温度计的转换摄氏温度转华氏温度30

13、华氏建度为86 华氏温度转摄氏温度1004密氏温度为.38(a)输入数据界面(b)计算结果界面图3.31摄氏温度转华氏温度案例运行效果四、任务实现1 .编写index.wxml文件代码代码中使用了 input组件输入数据，使用了 placeholder属性提示用户“请输入摄氏温度”和“请 输入华氏温度”，使用了 digit属性实现在真机上输入时弹出数字键盘，使用了 bindblur属性引发 input组件失去焦点时的动作事件一一根据摄氏温度计算华氏温度和根据华氏温度计算摄氏温度， 同时input组件进行了样式的设置。2 .编写index.wxss文件代码该文件定义了 boxs title Is

14、 title2 input和image样式。设置了 input组件的边距和下边框线条样 式，设置了图片的高宽以及上下左右的间距。3 .编写index.js文件代码代码实现了由input组件失去焦点时引发的动作的事件bindblur,该事件对应的函数分别是CDegree 和FDegree,函数的参数e表示input组件失去焦点事件，函数中首先定义2个变量C和F用来存 储摄氏温度和华氏温度，然后利用e.detail.value获取input组件中的数值并赋值给C或者E然后 根据C计算出F或者根据F计算出C,并通过this.setData。函数将华氏温度“F”值或者摄氏温度 “C”值由逻辑层传递给视

15、图层，并在index.wxml视图界面上渲染出来。练习第3章 微信小程序概述任务3.16事件冒泡与捕获课时内容事件冒泡与捕获课时1教学目标掌握事件冒泡与事件捕获教学重点完成事件冒泡与事件捕获教学难点完成事件冒泡与事件捕获教学设计1 .教学思路：通过实训任务来让学生掌握完成事件冒泡与事件捕获2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述此任务是完成事件冒泡与事件捕获的一个操作案例。事件冒泡是当用户行为触发我们页面的定义 好的事件后，会有一个由内到外的一个冒泡过程，而不是一下子就命中事件绑定的元素。事件捕获 与冒泡恰恰相反，当鼠标点击或者触发事件时，浏览器会从根

16、节点开始由外到内进行事件传播，即 点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。二、导入知识点在小程序中，绝大部分定义好的事件都是冒泡的。冒泡是什么意思呢？在现实生活中，就好像是水中的泡泡一样，从下往上走；在小程序中，就 是点击一个子元素，如果事件是冒泡的，那么这个事件也会传递给父元素。如在下边这个例子中，点击inner view会先后调用handleTap2和handleTaploouter viewinner view 事件向上冒泡：bind事件绑定不会阻止冒泡事件向上冒泡; 阻止事件冒泡：catch事件绑定可以阻止冒泡事件向上冒泡。如果我们想要阻

17、止事件的冒泡。我们可以以catch开头来定义一个事件，比如把bindtap改为 catchtap。这样就可以拦截事件的冒泡了。如在下边这个例子中，点击inner view会先后调用handleTap3 和handleTap2 （因为tap事件会冒泡到middle view,而middle view阻止了 tap事件冒泡,不再向父 节点传递），点击 middle view 会触发 handleTap2,点击 outer view 会触发 handleTapl。outer viewmiddle viewinner view三、实现效果事件管泡与捕获Outterview3.33 console调试器

18、事件冒泡响应效果此任务分别实现事件冒泡和事件捕获两种效果。当点击一个子元素时，那么这个事件也会传递给 父元素，这就叫做事件冒泡。当点击蓝色盒子时，就会把事件一直传递，传递到外面的粉红色的大 盒子里面，如图3.32和3.33所示。当点击一个子元素时，所响应的事件不会传递给父元素，只会在 子元素中响应，也就是阻止冒泡事件向上冒泡，这就叫做事件捕获，如图3.34所示。3.32事件冒泡与捕获的效果图3.34 console调试器阻止冒泡事件效果3.34 console调试器阻止冒泡事件效果四、任务实现(1)在index.wxml中，写两个嵌套的view组件,一个外面的view (outterview)

19、,另外一个是里面 的view (innerView )；并且分别绑定外面点击的事件onOutterViewClick和里面点击的事件 onlnnerViewClicko(2)在 index.wxss 中,设置外框.box、标题.title、本文 text 以及类.outterview 和.innerview 的样式。 index.wxss文件见附件；(3)在 index.js 文件中，分别用函数 onOutterViewClick:function。和 onInnerViewClick:function()来渲 染“外面的视图被点击的事件”和“里面的视图被点击的事件”。(4)编写index.w

20、xml,把bindtap改为catchtap,以catch开头来定义一个事件就会阻止事件的冒泡。 catch事件绑定阻止冒泡事件向上冒泡，outterview不被响应。练习第3章 微信小程序概述任务3.17小程序include引用文件课时内容小程序include引用文件课时1教学目标掌握include标签教学重点include标签教学难点include,标签教学设计1 .教学思路：通过实训任务来让学生掌握include,标签2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一.任务描述编写一个小程序，在项目中添加文件header.wxml和footer.wxml,然后在in

21、dex.wxml文件中利 用include引用header.wxml和footer.wxml,作为index页面的头部和尾部内容。二、导入知识点小程序使用include,标签将目标文件除了template外的整个代码引入，相当于是把目标文件的 代码直接复制到了到include标签的位置。如，为页面制作统一的页眉页脚。页眉header.wxml代码：view这是小程序的页眉v/view页脚footer.wxml代码：view这是小程序的页脚/view 正文部分 include src=路径/footer.wxml/WXML提供两种文件引用方式：import和include。import只能引用文

22、件中定义的template,不能 引用该文件中的其他内容，而通过include可以引用文件中除了template/A；和wxs/之外的整个代 码，相当于将目标文件中的代码复制到include位置。import更适合于统一样式但内容需要动态变化的情况；而（include标签更适合于无需改动目标 文件的情况。三、实现效果根据任务描述可以做出如图3.41所示的效果。界面头部内容首页新闻”是通过引用headero wxml文件来实现的，界面底部内容“版权所有”是通过引用footer.wxml文件来实现的。WeChar14:51100% 9Mixin,*首页新闻介绍机构教学科研扇城技师学院直属于深圳市人

23、力资源和社会保障局， 为市财政全额拨款的公办高级技工学校，主要承担全 日制教育、社会化培训I、技能鉴定、就业创业服务四 项职能.曾先后获得全国重点就业训练中心” “全 国职业教育先进单位”.国家技畿人才培养突出贡献 奖” .国冢级高技能人才培训基地”等多项国家级荣 誉.版权所有鹏城技师学院|电话：0755-83316411图3.41利用include引用文件运行效果四、任务实现1 .添加header.wxml文件并编写该文件中的代码该文件用来显示一个页面的头部内容。在该文件中添加如下代码，并利用header样式进行布局， header样式在index.wxss中进行定义。2 .添加footer

24、.wxml文件并编写该文件中的代码该文件用来显示一个页面的尾部内容。在该文件中添加如下代码，并使用footer样式布局，该样 式在index.wxss中进行定义。3 .编写index.wxss文件代码文件中定义了在header.wxml中使用的样式.header和在footer.wxml中使用的样式.footer。header样 式采用了 flex布局，布局方向flex-direction为row,水平对齐方式justify-content为均匀分布space- evenlyo4 .编写index.wxml文件代码文件头部利用include的src属性引用了 header.wxml文件，文件尾

25、部引用了 footer.wxml文件，从而 使index.wxml文件的头部和尾部分别显示了 header.wxml和footer.wxml文件中的内容和样式。练习第3章 微信小程序概述任务3.18旅游攻略课时内容旅游攻略课时2教学目标掌握template标签的使用方法 掌握import标签的使用方法教学重点template标签的使用方法 import标签的使用方法教学难点import标签的使用方法教学设计1 .教学思路：通过实训任务旅游攻略的制作来让学生掌握template标签、import标签 的使用方法2 .教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一一、任务描述设计一

26、个旅游攻略小程序，根据在任务项目要求，利用import进行固定样式的导入和旅游攻略 新闻信息内容的动态导入。import更适合于统一样式但内容需要动态变化的情况。二.导入知识点小程序可以使用(template标签在目标文件中事先定义好模板，然后在当前页面使用import 标签引用template中的内容。在template.wxml文件中使用template定义了一个名称为myTemp的模板代码块。 text 然后在首页index.wxml中使用import引用了 tmpl.wxmL就可以使用myTemp模板。此时等同于在index.wxml中显示了，如图3.42所示。helloWeCha玲1

27、4:55100% (S)Weixinhello图3.42使用templateA模板标签前面学习了 include引入标签，它更适合于无需改动目标文件的情况；而import标签更适合于 统一样式但内容需要动态变化的情况。三、实现效果本任务利用import进行旅游攻略的设计与制作。首先编写模板文件news.wxml和news.wxss, 然后在 index.wxml 和 index.css 文件中利用 import 引用 news.wxml 和 news.wxss,并编写 index.js 中 的data数据进行内容动态的引用。如图3.43所示。旅游攻略山是中国舔依名山.世界文化号 a然双三产ai

28、eiuaAftH8. 石，天候 s危尊圣战之称旅游攻略山里中g饮名山.世界文化与 自然双产山昆世界地质公含.中华十大名山 之一,SU力天下TB山山帚国家”圾籍勇区.SS&tt.天下第一th(a) 一个模板静态引用(b)多个模板动态引用3.43使用模板编写旅游攻略四任务实现(1)首先，需要把news.wxml微信页面和news.wxss微信样式做成模板，在css文件夹中新家一个 template目录，在template目录下再新建一个news,在news下新建两个文件，分别为news.wxml和 news.wxss o(2)编写 news.wxml 文件。在 news.wxml 中，编写模板文件

29、templatename=news/template,。 (3)编写news.wxss文件的代码。根据模板文件news.wxml来对.newGroup组样式、.newGroup .infoGroup信息样式、.newGroup .infoGroup .title 标题样式、.newGroup .infoGroup .address 地址样式、.newGroup .infoGroup .time 时间样式和.thumbGroup .thumb 缩略图进行编写。(4)在 index.wxmL 利用 import 导入 news.wxml 页面模板。(5)在index.wxml页面中，利用impor

30、t导入news.wxss样式模板。(6)利用import导入模板，需要把模板news.wxml文件中的标题信息、地址、时间和图片改为titleaddresss time和imgSrc动态变量。(7)同时，编写index.js中的data数据，实现动态新闻组。(8)编写index.wxml文件，把数据data动态地渲染到视图界面上。练习第3章 微信小程序概述任务3.19 WXSS微信样式表课时内容WXSS微信样式表课时1教学目标掌握尺寸单位、全局样式和局部样式的概念掌握样式导入、常用属性、内联样式、选择器的使用方法提示信息提交成功。你可以前往微信公众平台使用相关功能。五、登录管理页面通过腾讯服务

31、器验证后，可以进入https:页面进行登录了，登录后需要利用微信扫描二维码进行身份验证，登录后的界面如图所示，登录后就可以直接进行小程序的后续管理工作。cP小理序.as*mpMC tfttt：泰加富MAnnw MXIA 访.夕零& IJ|v o XY成长短序发布流程 1 w/ras -NEW* BH. W弄 Stu7 21!n 27 代5列 MCLLfl MkNWRSaXAMl ua 一newaR我&“ rera7MAs* * am-x/ M-nMnx*；Min* MdniAawiim nuAx* ma hi，hM 初 n：n小 im ch maUMTMW假火UTkXmA Wi r力 AKI

32、aw教学重点教学难点教学重点教学难点教学设计尺寸单位、全局样式和局部样式的概念样式导入、常用属性、内联样式、选择器的使用方法样式导入、常用属性、内联样式、选择器的使用方法1 .教学思路：通过PPT讲解尺寸单位、全局样式和局部样式的概念，通过代码讲解让 学生掌握样式导入、常用属性、内联样式、选择器的使用方法.教学手段：多媒体+计算机2 .教学资料，教材、多媒体课件教学内容WXSS文件的全称是WeiXin Style Sheets （微信样式表），这是一种样式语言，用于描述WXML的 组件样式（例如尺寸、颜色、边框效果等）。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发

33、微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS 自主的特性有：尺寸单位和样式导入。一、尺寸单位小程序规定了全新的尺寸单位rpx （responsive pixel）,可以根据屏幕宽度进行自适应。其原理 是无视设备原先的尺寸大小，统一规定屏幕宽度为750rpx。rpx不是固定值，屏幕越大，Irpx对应的像素就越大。例如在iPhone6上，屏幕宽度为375px, 共有750个物理像素，则750rpx = 375px = 750物理像素，Irpx = 0.5px = 1物理像素。由于iPhone6 换算较为方便，建议开发者可以用该设备作为视觉稿的标准。如表3.10所示。表3.

34、10 px和rpx之间的换算设备rpx换算pxpx换算rpx（屏幕宽度/750）（750/屏幕宽度）iPhone5Irpx = 0.42pxIpx = 2.34rpxiPhone6Irpx = 0.5px1 px = 2rpxiPhone6 PlusIrpx = 0.552pxIpx = 1.8 Irpx二.样式导入小程序在WXSS样式表中使用import语句导入外联样式表，import后跟需要导入的外联样式 表的相对路径，用;表示语句结束。如，有个公共样式表common.wxss代码如下：.redcolor:red;J然后可以在其他任意样式表中使用import语句对其进行引用。例如a. wx

35、ss代码如下：import common.wxss;.blue colonblue;三、常用属性WXSS所支持的样式属性与css属性类似，为方便理解示例代码，表列出了部分常用样式属性 和参考值。如表3.11所示。表3.11部分常用样式属性和参考值其中颜色可以用以下几种方式来表示：样式属性含义参考值background-color背景色颜色名，例如red表示红色color前景色同上font-size字体大小例如16px表示16像素大小的字体border边框例如3Px solid blue表示宽度为3像素 的蓝色实线width宽度例如20px表示20像素的宽度height高度例如100px表示10

36、0像素的高度 RBG颜色：用RGB红绿蓝三通道色彩表示法，例如rgb(255,0,0)表示红色；RGBA颜色：在RGB的基础上加上颜色透明度，例如rgba(255,0,0,0.5)表示半透明红色； 16进制颜色：又称为HexColor,用#加上6位数字表示，例如#FF0000表示红色；预定义颜色：使用颜色英文单词的形式表示，例如red表示红色。小程序目前共预设了 148种 颜色名称。四、内联样式小程序允许使用style和class属性来控制组件的样式。1.stylestyle属性又称为行内样式，可直接将样式代码写到组件的首标签中。例如：则试v/view上述代码表示当前这个vview组件中的文本

37、将变为红色、背景将变为黄色。同时，style也支持动态样式效果，例如：测试上述代码表示组件中的文本颜色将由页面JS文件的data.color属性规定。官方建议开发者尽量避免将静态的样式写进style中，以免影响渲染速度。如果是静态的样式 可以统一写到class中。2.class小程序使用class属性指定样式规则，其属性值是一个或多个自定义样式类名组成，多个样式类 名之间用空格分隔。.styleOl color: red; 文字为红色1.style02font-size: 20px; 字体大小为20像素font-weight: bold; 字体加粗测试!-上述代码表示组件同时接受.styleO

38、l和.style02的样式规则。注意在class属性值的引号内部不需要加上类名前面的点五.选择器小程序目前在wxss样式表中支持的选择器如表3.12所示。表3.12小程序在wxss样式表中支持的选择器例如，在wxss样式表中规定:样例样例描述.class.demo选择所有拥有class=demo”属性的组件#id#test选择拥有id=test”属性的组件elementview选择所有view组件element, elementview, text选择所有文档的view组件和所有的text组件:rafterview: rafter在view组件后边插入内容:beforeview:before在

39、view组件前边插入内容viewwidth: lOOrpx;上述代码表示将当前页面所有的view组件宽度都更新为lOOrpxo六.全局样式和局部样式小程序wxss样式表中规定的样式根据其作用范围分为两类： 全局样式：在app.wxss中的样式，作用于每一个页面； 局部样式：在页面wxss文件中定义的样式，只作用在对应的页面，并会覆盖app.wxss中相同 的选择器。组件是WXML页面上的基本单位，例如小程序页面上的按钮、图片、文本等都是用组件渲染出 来的。练习第3章 微信小程序概述任务3.20字体样式设置课时内容字体样式设置课时1教学目标掌握分别利用style和class属性设置字体样式，包括

40、设置文本的颜色，字符间距，文本 对齐，文本装饰，文本缩进教学重点style和class属性设置字体样式教学难点style和class属性设置字体样式教学设计1 .教学思路：通过实训任务来让学生掌握style和class属性设置字体样式，包括设置 文本的颜色，字符间距，文本对齐，文本装饰，文本缩进等2 .教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一一、任务描述设计一个小程序，分别利用style和class属性设置字体样式，包括设置文本的颜色，字符间距, 文本对齐，文本装饰，文本缩进等等。二.导入知识点本任务主要介绍了各种字体样式属性的名称及其含义，利用style和class设置

41、字体样式的方法, 以及在index.wxss和app.wxss中定义样式类的方法。字体属性包括字体类型、大小、粗细、风格（如斜体）和变形（如小型大写字母）等。常用字体 样式属性如表3.13所示。表3.13常用字体样式属性属性含义属性值举例font-family字体类型serif,sansserif,monospace,cursive,fantasy,font-size字体大小5px/rpx/cm, large, small, medium, larger, smaller, font-style字体倾斜italic, normal, oblique, font-weight字体粗细bold,

42、bolder, lighter, view组件支持使用style、class属性来设置组件的样式，静态的样式一般写到class中，动态的 样式一般写到style中，这样可以提高渲染速度。class引用的样式类可以在index.wxssapp.wxss打定 义，在叩p.wxss中定义的样式是全局样式，可以在项目中的任何页面使用，而在index.wxss中定义 的样式一般只在index页面中使用。三.实现效果根据任务描述可以做出如图3.46所示的效果。边框样式和标题样式是在叩p.wxss文件中定义 的样式类，在index.wxml文件中利用class引用。标题下面、虚线上面的文字样式是在index

43、.wxml 中直接利用style来设置的，设置的字体样式为：Courier,蓝色、3（）像素。虚线下面的样式是通过在 index.wxss文件中定义，在index.wxml文件中利用class来引用的，设置的字体样式为：Impacl、25 像素、绿色、倾斜、加粗。WcOwB15.06lOtnlHWenon*,0字体样式设置利用Style设置字体样三 字体：Courier New,蓝色，30像素利用日婚群式设置字体:字体:Unpack 25像素,绿色,倾斜,加粗图3.46字体样式设置四任务实现.编写index.wxml文件代码代码中主要使用了 view组件科、加粗的style和class属性来设置字体样式，其中style是直接 在标签内部进行设置，而class则首先需要在wxss文件中定义样式类，然后在wxml文件中通过 class属性引用。.box和.title两利J样式类分别用来设置边框和标题样式，它们在app.wxss文件中定 义，是全局样式，可以在项目中的任何WXML文件中使用。fontStyle样式类用来设置字体样式， 在index.wxss文件中定