微信小程序

1、按钮响应事件：
在wxml文件中，按钮标签，compareb为响应函数名

<button form-type="submit" bindtap=" onChooseAvatar">提交</button>

2、响应函数
在js文件中，响应函数写在Component -> methods 中
Component -> methods data中为变量，在wxml文件中以{{motto}}可直接调用。

Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
  },
  methods: {
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
})

3、value监听事件使用bindchange
bindchange是一种在小程序中用于绑定组件属性改变事件的方法。它可以用来监听input、textarea等组件的value值改变，并在回调函数中执行相应操作。
wxml文件：

<input type="number" bindchange="num1change" data-id="num1"/>

js文件
其中： console.log(‘第一个数字为’+this.num1) 可打印

num1:0,
num1change(e){
          this.num1 = Number(e.detail.value)
          console.log(this.num1)
        },

比较数字大小

wxml文件

<navigation-bar title="比较大小"  color="black" background="#FFF"></navigation-bar>
<page>
  <view>
    <text>请输入第一个数字：</text>
    <input type="number" bindchange="change" data-id="snum1"/>
  </view> 
  <view>
    <text>请输入第二个数字：</text>
    <input type="number" bindchange="change" data-id="snum2"/>
  </view>
  <button bindtap="compare">比较</button>
  <view>
  <text wx:if="{{snum1>snum2}}">1大</text>
  <text wx:elif="{{snum1<snum2}}">2大</text>
  <text wx:else>相等</text>

  <view>
    <text>请输入第一个数字：</text>
    <input type="number" bindchange="num1change" data-id="snum1"/>
  </view> 
  <view>
    <text>请输入第二个数字：</text>
    <input type="number" bindchange="num2change" data-id="snum2"/>
  </view>
  <button bindtap="compare">比较2</button>
  <view>
    <text>比较结果：{{result}}</text>
    <!-- 97 应用级配置文件 TODO:app.json -->
  </view>
  </view>
</page>

js文件

// shuzidaxiao.js
// pages/index/index.js
// pages/index/index.js

Component({
    data:{
        sunm1:0,
        snum2:0,
        result:''
      },
     
    methods: {
        num1:0,
        num2:0,
        change(e){
            var data={}
            data[e.target.dataset.id]=Number(e.detail.value)
            this.setData(data)
        },
        num1change(e){
          this.num1 = Number(e.detail.value)
          console.log('第一个数字为'+this.num1)
        },
        num2change(e){
          this.num2 = Number(e.detail.value)
          console.log('第二个数字为'+this.num2)
        },
        compare(e){
        console.log("比较按钮被单击了")
        var str = '两数相等'
        if(this.num1>this.num2){
            var str = '第一个数大'
        }
        if(this.num1<this.num2){
            var str = '第二个数大'
        }
        this.setData({result:str})
     
    },
}

})

json文件

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

wxss文件

input{
    width: 600px;
    margin-top: 20px;
    border-bottom: 2px solid #cccccc;
}
button{
    margin: 50px;
}