1、案例说明：

• 制作一个学生成绩求平均值的小程序，要求输入学生姓名和学生成绩后，点击提交，会出现学生姓名和学生平均成绩。

1.1、代码实现

wxml:

<view class="box">
    <view class="title">学生成绩计算器</view>
    <input type="text" placeholder="请输入你的名字" placeholder-class="holder_style" bindinput="name"/>
    <input type="digit" placeholder="请输入你的语文成绩" placeholder-class="holder_style" bindinput="language"/>
    <input type="digit" placeholder="请输入你的数学成绩" placeholder-class="holder_style" bindinput="math"/>
    <button class="button" bindtap="submit">
        提交
    </button>
    <view class="context" hidden="{{hidden}}">
        <view class="name">{{name}}</view>
        <view class="language">{{language}}</view>
        <view class="math">{{math}}</view>
        <view class="math">{{average}}</view>
    </view>
</view>

wxss:

page{
    background-color: rgb(194, 194, 216);
}
input{
    border: 1px solid rgb(127, 127, 129);
    margin: 10px auto;
    height: 120rpx;
    
}
.holder_style{
    font-size: 15px;
    background-color: white;
    padding-left: 10px;
}
.button{
    background-color: red;
    color: white;
}
.context{
    background-color: white;
    line-height: 30px;
    color: red;
}

js:

// pages/dem_2/dem_2.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        name : "",
        language : 0,
        math : 0,
        average : 0,
        hidden : true
    },
    name: function(e){
      this.setData({
          name : e.detail.value
      })  
    },
    language: function(e){
        this.setData({
            language : e.detail.value
        })  
    },
    math: function(e){
        this.setData({
            math : e.detail.value
        })  
    },
    submit: function(e){
        console.log(e)
       if(this.data.name == ''||this.data.language == ''||this.data.math == ''){
           return;
       }
       else{
           var ave = (this.data.language*1 + this.data.math*1) / 2;
           this.setData({
            average : ave,
            hidden : false
           })
       }
        
    }
})

1.2、结果展示

结果展示.jpg

2、知识总结：

button组件属性.jpg button组件属性的合法值.jpg js中的逻辑运算符号.jpg

3、踩坑说明：

• page设置整个页面布局
• wxml文件中input绑定bindinput事件后，只要键盘输入元素，就会触发input事件。
• 每次在js的事件中修改了页面的data要用this.setData()重新用对象的数值类型设置，才会在页面渲染出来。
• 在js的data中设置的变量不是全局变量，在js的方法中使用js的data中设置的变量时必须加上this.data.变量名。js的data中的变量是需要在页面上显示的变量
• 在js方法中设置方法内部变量要用var关键字。
• 在this.setData()中可以直接用在js的data中设置的变量的变量名，同样this.setData()中也识别“this.setData()与之对应的js方法”内部设置的变量名。（this.setData()写在那个方法中，这个方法内部变量可以在this.setData()中使用）
  注意：this.setData()的作用就是把方法内部变量，或全局变量更新到页面的一种方法，同时要注意在this.setData()中重新设置变量和在js中给变量赋值是两码事，this.setData中重置全局变量，只会改变页面的显示数值，并不会改变js逻辑层的全局变量的值，详见《2021-11-11、js中的时间函数》中踩坑说明。
  格式：

this.setData({
  在js的data中已经设置的变量(或者全局变量) : 对应事件的局部变量或者全局变量或者data中定义的变量
})

**

• 在js的data中设置的变量是可以更新到页面的变量名，方法中的局部变量和全局变量没法直接更新到页面上去。
• input返回的数字，都是字符类型，如果要拿来做数值运算，必须给其*1，从而转化为数值类型。
• 调试器当中AppData里面的变量值是页面当中的变量值随着页面的更新而更新，在js当中没有用this.setData()之前，变量是不会更新到页面当中去的。