小程序编程基础（三）

小程序编程基础（三）

一、 摄氏温度转华氏温度

1.知识点

（1）input组件的使用方法。

（2）数学表达式转化为JavaScript表达式的方法。

（3）JavaScript程序顺序执行的实现方法。

2.实现方法

（1）JavaScript中顺序结构的程序设计方法。顺序结构程序设计是指按照解决问题的顺序写出相应的语句，它的执行顺序是自上而下，依次而行。

（2）JavaScript中数学运算的基本方法。JavaScript中的数学运算需要将数学表达式利用JavaScript运算符和函数等转换为JavaScript表达式。

（3）input输入框组件使用方法。该组件主要用于输入数据，气场用属性如下表所示。

属性	类型	默认值	说明
value	string		输入框的初始内容
type	string	text	input的类型
password	boolean	false	是否是密码类型
placeholder	string		输入框为空时的占位符
placeholder-style	string		指定paceholder的样式
maxlength	number	140	最大输入长度，设置为-1时不限制最大长度
bindput	eventhandle		键盘输入时触发，event.datail={value,cursor,keyCode},keyCode为键值，2.1.2起支持，处理函数可以直接return一个字符串，将替换输入框的内容
bindfocus	eventhandle		输入框局聚集时触发，event.detail={value,height},height为键盘高度，在基础库1.9.90起支持
bindblur	eventhandle		输入框失去焦点时触发，event.datail={value:value}

type属性是指利用真机运行时，当在输入框中输入数据时，根据type属性指定的类型导出来的键盘类型，而不是输入内容的类型。

值	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

3.案例分析

3.1案例描述

设计一个根据摄氏温度C求缓释温度F的微信小程序，华氏温度的计算公式如下：
$$F=(9/5)\ast C+32$$

3.2实现效果

3.3案例实现

（1）编写index.wxml文件代码。代码中使用了input组件输入数据，使用了placeholder属性提示用户输入，使用了digit属性实现在真机上输入是弹出数字键盘，使用bindblur属性引发input组件失去焦点时的动作组件–根据摄氏温度计算华氏温度。此外，input组件样式通过input样式进行设置。

<view class="box">
  <view class="title">摄氏温度转华氏温度</view>
  <view>
    <input type="digit" placeholder="请输入摄氏温度" bindblur="calc" />
  </view>
  <view>华氏温度为：{{F}}</view>
</view>

（2）编写index.wxss文件代码。设置input组建的编剧和下框条样式。

input{
  margin: 20px 0;
  border-bottom: 1px solid blue;
}

（3）编写index.js文件代码。实现由input组件失去焦点时印发的动作的时间bindblur，该事件对应的函数是calc，函数的参数e表示input组件失去焦点事件，函数中首先定义2个变量C和F用来存储摄氏温度和华氏温度，然后利用e.detail.value获取input组件中的数值并赋值给C，然后根据C计算出F，并通过this.setData（）函数将F值由逻辑层传递给视图层，并在index.wxml文件中显示出来。

Page({
  calc:function(e){
    var C,F;                   /*变量的定义*/
    C=e.detail.value;          /*获取输入框中输入的数值*/
    this.setData({
      F:C*9/5+32               /*求出华氏温度的值F，并把该值传递到index.wxml文件中的{{F}}*/
    })
  }
})

二、条件语句与数学函数

1.知识点

（1）JavaScript中的条件语句。

（2）JavaScript中数学函数的使用方法。

2.实现方法

2.1 JavaScript中的条件语句

在JavaScript中使用以下语句：

• if语句：当指定条件为true时，使用该语句来执行代码。
• if…else语句：当指定条件为true时执行代码，当条件为false时执行其他代码。
• if…else if …else语句：使用该语句来选择多个代码块之一来执行。
• switch语句：使用该语句来选择多个代码块之一来执行。

（1）if语句

if(条件){
  条件为true时执行的代码
}

（2）if…else语句

if(条件){
  条件为true时执行的代码块
}else{
  条件为false时执行的代码块
}

（3）if…else if…else语句

if(条件1){
  条件1为true时执行的代码块
}else if(条件2){
  条件1为false而条件2为true时执行的代码块
}else{
  条件1和条件2都为false时执行的代码块
}

（4）switch语句

switch(表达式){
  case n1:
    代码块
    break；
  case n2：
    代码块
    break；
  ...
  default:
    默认代码块
}

代码解释：

• 计算一次switch表达式。
• 把表达式的值与每一个case的值进行对比，否则，执行默认代码块。
• 如果存在匹配，则执行关联代码。

2.2 JavaScript中的Math对象

JavaScript中的所有事物都是对象，对象是拥有属性和方法的数据，属性是与对象相关的值，方法是能够在对象上执行的动作。Math对象用于执行数学内容，它的常用属性和方法如下表所示。

属性和方法	说明
E	返回算数常量e，即自然对数的底线(约等于2.718)
PI	返回圆周率(约等于3.14159)
abs(x)	返回数的绝对值
ceil(x)	对数进行上舍入
cos(x)	返回角的余弦
exp(x)	返回e的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数(底为e)
max(x,y)	返回x和y的最大值
min(x,y)	返回x和y的最小值
pow(x,y)	返回x的y次幂
random()	返回0~1之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回角的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切
valueOf()	返回Math对象的原始值

3.案例分析

3.1案例描述

设计一个利用条件结构和数学函数进行计算的小程序。当输入x值时，根据下面的公式计算出y的值。
$$y=\{\begin{array}{ll}|x|,& \text{(x<0)}\\ e^x\sin x,& \text{(0}\le \text{x<10)}\\ x^3,& \text{(10}\le \text{x<20)}\\ (3+2x)\ln x,& \text{(x}\ge \text{20)}\end{array}$$

3.2实现效果

3.3案例实现

（1）编写index.wxml文件代码

<view class="box">
  <view class="title">条件语句和数学函数</view>
  <view>
    <input placeholder="请输入X的值" bindblur="jisuan" />
  </view>
  <view>计算Y的值为：{{y}}</view>
</view>

（2）编写index.wxss文件代码

input{
  margin: 20px 0;
  border-bottom: 1px solid blue;
}

（3）编写index.js文件代码

文件定义了“jisuan”函数，该函数根据x的值，利用条件语句和数学函数计算出了y的值，并通过setData函数将计算结果渲染到视图层。

page（{  
  jisuan:function(e){
    var x,y;                            /*定义局部变量x和y*/
    x=e.detail.value;                   /*获取input组件的value值并赋值给x*/
    if(x<0){                            /*根据x的值进行判断，并求出y的值*/
      y=Math.abs(x);
    }else if(x<10){
      y=Math.exp(x)*Math.sin(x);
    }else if(x<20){
      y=Math.pow(x,3);
    }else{
      y=(3+2*x)*Math.log(x);
    }
    this.setData({
      y:y                                /*将局部变量y赋值给绑定变量y*/
    })
  }
}）