《3.15 教案-温度转换计.docx》由会员分享，可在线阅读，更多相关《3.15 教案-温度转换计.docx（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、3.15 教案-温度转换计YOUR LOGO原 创 文 档 请 勿 盗 版 第3章 微信小程序概述任务3.15 温度转换计课时内容温度转换计课时1教学目标掌握JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的使用方法、数据和事件绑定的实现方法教学重点JavaScript中顺序结构的程序设计方法数学运算的基本方法input组件的使用方法数据和事件绑定的实现方法教学难点input输入框组件使用方法教学设计1.教学思路：通过实训任务温度转换计的制作来让学生掌握JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的使用方法、数据和事件绑定的实
2、现方法2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述设计一个温度转换计，根据摄氏温度C转换华氏温度F和华氏温度F转换摄氏温度C的微信小程序。摄氏温度C转换华氏温度F的计算公式为：F=9*C/5+32华氏温度F转换摄氏温度C的计算公式为：C=( F-32)* 5/9二、导入知识点本任务主要演示了JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的使用方法、数据和事件绑定的实现方法。（1）JavaScript中顺序结构的程序设计方法。顺序结构程序设计是指按照解决问题的顺序写出相应的语句，它的执行顺序是自上而下，依次执行。（2）JavaS
3、cript中数学运算的基本方法。JavaScript中的数学运算需要将数学表达式利用JavaScript运算符和函数等转换成JavaScript表达式。（3）input输入框组件使用方法。该组件主要用于输入数据，其常用属性如表3.8所示。表3.8 input组件常用属性属性类型默认值说明valuestring输入框的初始内容typestringtextinput的类型passwordbooleanfalse是否是密码类型placeholderstring输入框为空时的占位符placeholder-stylestring指定placeholder的样式maxlengthnumber140最大输入
4、长度，设置为-1时不限制最大长度bindinputeventhandle键盘输入时触发，event.detail=value,cursor,keyCode，keyCode为键值，处理函数可以直接返回一个字符串，返回的字符串将替换输入框的内容bindfocuseventhandle输入框聚焦时触发，event.detail=value,height，height为键盘高度bindblureventhandle输入框失去焦点时触发，event.detail=value:valuetype属性是指利用真机运行时，当在输入框中输入数据时，根据type属性指定的类型弹出来的键盘类型，而不是输入内容的类型
5、。其有效值如表3.9所示。表3.9 type有效值值说明text文本输入键盘idcard身份证输入键盘number数字输入键盘digit带小数点的数字键盘三、实现效果根据此任务描述可以做出如图3.31所示的效果。当在输入框中输入数据时，界面下面自动弹出数字键盘，如图（a）所示。当在“摄氏温度转华氏温度”文本输入框中输入30，在“华氏温度转摄氏温度”文本输入框中输入100.4，并点击其他地方时，计算结如图（b）所示，此时计算结果已经算出，数字键盘自动消失。 （a）输入数据界面 （b）计算结果界面图3.31 摄氏温度转华氏温度案例运行效果四、 任务实现1. 编写index.wxml文件代码代码中使
6、用了input组件输入数据，使用了placeholder属性提示用户“请输入摄氏温度”和“请输入华氏温度”，使用了digit属性实现在真机上输入时弹出数字键盘，使用了bindblur属性引发input组件失去焦点时的动作事件根据摄氏温度计算华氏温度和根据华氏温度计算摄氏温度，同时input组件进行了样式的设置。2.编写index.wxss文件代码该文件定义了box、title1、title2、input和image样式。设置了input组件的边距和下边框线条样式，设置了图片的高宽以及上下左右的间距。3.编写index.js文件代码代码实现了由input组件失去焦点时引发的动作的事件bindblur,该事件对应的函数分别是CDegree和FDegree，函数的参数e表示input组件失去焦点事件，函数中首先定义2个变量C和F用来存储摄氏温度和华氏温度，然后利用e.detail.value获取input组件中的数值并赋值给C或者F，然后根据C计算出F或者根据F计算出C，并通过this.setData()函数将华氏温度“F”值或者摄氏温度“C”值由逻辑层传递给视图层，并在index.wxml视图界面上渲染出来。练习