微信小程序开发 教案 3.15 教案-温度转换计

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

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

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

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

5、入键盘idcard身份证输入键盘number数字输入键盘digit带小数点的数字键盘三.实现效果根据此任务描述可以做出如图3.31所示的效果。当在输入框中输入数据时，界面下面自动弹出 数字键盘，如图(a)所示。当在“摄氏温度转华氏温度”文本输入框中输入30,在“华氏温度转 摄氏温度”文本输入框中输入100.4,并点击其他地方时，计算结如图(b)所示，此时计算结果已 经算出，数字键盘自动消失。WeChatV14231424WeChatV1424Weixin温度计的转换1424Weixin温度计的转换摄氏温度转华氏温度请输入遢氏温度摄氏温度转华氏温度30华氏温度为：华氏温度转摄氏温度请偷入华氏温度

6、摄氏温度为:(a)输入数据界面华氏温8为：1424Weixin温度计的转换摄氏温度转华氏温度请输入遢氏温度摄氏温度转华氏温度30华氏温度为：华氏温度转摄氏温度请偷入华氏温度摄氏温度为:(a)输入数据界面华氏温8为：86摄氏温度为：38华氏温度转摄氏温度100.4(b)计算结果界面图3.31摄氏温度转华氏温度案例运行效果四任务实现.编写index.wxml文件代码代码中使用了 input组件输入数据，使用了 placeholder属性提示用户“请输入摄氏温度”和“请 输入华氏温度”，使用了 digit属性实现在真机上输入时弹出数字键盘，使用了 bindblur属性引发input 组件失去焦点时的动作事件一一根据摄氏温度计算华氏温度和根据华氏温度计算摄氏温度，同时 input组件进行了样式的设置。.编写index.wxss文件代码该文件定义了 box、titlel、title2、input和image样式。设置了 input组件的边距和下边框线条样 式，设置了图片的高宽以及上下左右的间距。.编写index.js文件代码代码实现了由input组件失去焦点时引发的动作的事件bindblur,该事件对应的函数分别是CDegree和 FDegree,函数的参数e表示input组件失去焦点事件，函数中首先定义2个变量C和F用来存储摄 氏温度和华氏温度，然后利用e.detail.value获取i