suitcases

微信小程序开发入门(五)

一、案例:摄氏温度转华氏温度

  F=(9/5)*C+32

<!--index.wxml-->
<view class=\'box\'>
  <view class="title">摄氏温度转华氏温度</view>
  <view>
    <input placeholder="请输入摄氏温度" type="digit" bindblur="calc"></input>
  </view>
  <view>华氏温度为:{{F}}</view>
</view>
<input placeholder="请输入摄氏温度" type="digit" bindblur="calc"></input>
  placeholder="请输入摄氏温度"  占位符,文本提示
   type="digit"  输入框类型"digit",输入的时候下面会弹出数字键盘
  bindblur="calc" 绑定了一个事件:失去焦点事件,事件一定发生,就会调用事件函数calc,这个函数是在js文件中定义的
<view>华氏温度为:{{F}}</view>
  调用calc函数后返回一个结果,数据绑定返回到F里了
通过数据绑定和事件绑定,实现了视图层和逻辑层的通信
/* pages/index/index.wxss */

input {
  margin: 20px 0; /*设置input组件上下边距为20px,左右边距为0*/
  border-bottom: 1px solid blue; /*设置input组件下边框粗细为1px、实心、蓝色*/
}
input样式针对所有的input组件都起作用
//index.js

Page({
  //事件处理函数
  calc:function(e){
    var C,F;//定义变量
    C = e.detail.value;//获取input组件中输入的数值(value),C就是input组件中的value值
    this.setData({
      F:C*9/5+32//求出华氏温度F并渲染到视图层
    })
  }
})
calc:function(e){
pass
}
calc:函数名,失去焦点函数
e:函数的参数,代表失去焦点事件 
this.setData函数   小程序本身具有的一个函数  能够将逻辑层当中的数据传递给视图层  参数是对象参数   给F赋值,对象的赋值是通过冒号实现,不是等号
e.detail.value失去焦点以后获取的input组件中输入的值

二、案例主要涉及JavaScript中顺序结构的程序设计方法、数学运算的基本方法、input组件的使用方法、数据和事件绑定的实现方法。
顺序结构程序设计方法 

  是指按照解决问题的顺序写出相应的语句,它的 执行顺序是自上而下,依次执行。 

数学运算的基本方法 

  利用JavaScript运算符和函数等将数学表达式转换成JavaScript表达式。 

input输入框组件。用于输入数据。 

  input组件的属性 

  

 

type属性。是指真机运行时键盘的类型。 

   type属性的合法值,平时默认的就是text文本输入键盘

  

 

 

 

 

 

 

发表于 2020-07-19 19:10  Luna彬  阅读(186)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章: