4、计算器实现

一、input组件使用

1、input组件是一个用于输入的控件

2、在页面的.wxml文件中条件该组件

         编译过后，用鼠标点击是可以看到有光标，可以输入的。

        

3、placeholder属性，输入框为空时占位符，提示用户该出是要输入数据的。只要往里面输入数据，这些字体就会自动消失，起到一个提示作用

4、placeholder-style属性修改placeholder的样式

         <input placeholder="请输入第一个数字" placeholder-style='color:red'  ></input>

5、style属性修改组件样式

    内联方式：

<input placeholder="请输入第一个数字" placeholder-style='color:red' style='border:2px solid red'  ></input>

6、以上方式是通过内联方式来设置组件样式的，可以通过微信提供的外部样式表来设置。

（1）、在组件中添加class

         <input placeholder="请输入第一个数字" placeholder-style='color:red' class='hhq'></input>

（2）、在样式文件.wxss文件中实例这个class 

         .hhq{

   border-style:solid;

   border-width:2px;

   border-color:red;

}

         得到的效果是一样的。

         注：样式可以参考网站：https://www.runoob.com/css/css-border.html

7、bindinput属性获取键盘输入值，是一个事件，每键盘输入一次会触发一次

         <input placeholder="请输入第一个数字" class='hhq' bindinput='GetNum1' ></input>

8、在功能文件.js中实例GetNum1,并声明全局变量存放输入的数值

         在Page外面声明全局变量并

  GetNum1:function(hhevent)

  {

    console.log(hhevent.detail.value)

    Num1 = parseInt(hhevent.detail.value)//把字符串转化成数值

  },

        

9、同理添加第二个输入框

  

10、添加计算结果按钮

<button>计算</button>

11、添加绑定事件：

<button bindtap="Sum">计算</button>

12、在功能文件.js中实例Sum函数

           Sum: function (hhevent){

    var sum = Num1 + Num2;

    console.log(sum)

  },

      

13、显示到<text></text>组件上

         （1）、用笔记《2、使用测号新建》的数据绑定方法，绑定一个<text></text>组件

                  

         （2）、在按钮函数中设置绑定的变量

                     Sum: function (hhevent){

    var sum = Num1 + Num2;

    this.setData({

      Result: '结果:' + sum

    })

  },