微信小程序开发 教案 3.8 教案-成绩计算器

1、第3章 微信小程序概述任务3.8成绩计算器课时内容成绩计算器课时1教学目标掌握JavaScript中的逻辑运算符 掌握button组件的使用方法教学重点JavaScript中的逻辑运算符 button组件的使用方法教学难点button组件的使用方法教学设计.教学思路：通过实训任务成绩计算器的制作来让学生掌握JavaScript中的逻辑运算符 与button组件的使用方法.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述设计一个计算学生平均成绩的小程序。当输入学生信息和各门功课成绩并提交后，能够显示学 生的信息及平均成绩。二、导入知识点本任务涉及JavaScript中的逻

2、辑运算符和button组件的使用方法。1. JavaScript中的逻辑运算符用于测定变量或值之间的逻辑关系，其中x=6,尸7,如表3.2解释了逻辑运算符的含义。表3.2 JavaScript中的逻辑运算符2.button按钮组件运算符描述例子&and(xl)为 falseIIor(x=6|y=6)为 true!not(x=y)为 false该组件常用属性如表3.3所示。表3.3 button组件常用属性属性size、type和form-type的合法值如表3.4所示。属性类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类型plai

3、nbooleanFALSE否按钮是否镂空，背景色透明disabledbooleanFALSE否是否禁用loadingbooleanFALSE否名称前是否带loading图标form-typestring否用于form组件，点击分别会触发form 组件的submi(/reset事件表3.4属性size% type和form-type的合法值属性合法值说明sizedefault默认大小mini小尺寸typeprimary绿色default白色warn红色form-typesubmit提交表单reset重置表单三、实现效果当输入屏幕下(c)提根据本次任务的描述，可做出如图3.14所示的效果。初始界面

4、如图(a)初始界面所示, 姓名时，屏幕下面显示中文的输入键盘，如图(b)输入信息时的界面所示，当输入成绩时, 面显示数字键盘；输入完成后点击“提交”按钮，在按钮下方将显示学生姓名及成绩，如图当输入屏幕下(c)提1112成绩计算器备喻入你的名字”入调文心I提交雄名:数学成级率均分:(a)初始界面11:14景文成展效学成爱(b)输入信息时的界面(c)提交后的界面图1112成绩计算器备喻入你的名字”入调文心I提交雄名:数学成级率均分:(a)初始界面11:14景文成展效学成爱(b)输入信息时的界面(c)提交后的界面四、任务实现(I)编写index.wxml文件代码。代码中主要包含用于输入学生姓名和成绩

5、的inpul输入框；(2)编写index.wxss文件代码。该文件中定义了 index.wxml文件中使用的各种样式,包括：page、 placeholderinput、button、content 和.content-item。(3)编写index.wxss文件代码。该文件中定义jindex.wxml文件中使用的各种样式，包括：page、 box、 titilc、 placeholder、 inputbutton content 和.content-item。 index.wxss 文件见附件；(4)编写index.js文件代码。该文件首先在data中初始化了 index.wxml文件，在index.wxml文件 中绑定的数据(flag初始值为true,表示显示学生姓名和成绩的view组件开始是隐藏的)，然