微信小程序开发3——事件处理

事件处理

index.wxml

<!--index.wxml-->
<view bindtap="viewTapHandle">
  <button bindtap="tapHandle">click me</button>
</view>

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  // data
  // on xxx
  // 定义用于界面层的事件处理函数
  tapHandle(e){
   // e 指的是事件参数
   console.log(e)
  },
  viewTapHandle (e){
    console.log(1,e)
  }
})

解决方案：通过 catchcap 绑定的事件不会有冒泡

<!--index.wxml-->
<view bindtap="viewTapHandle">
  <!-- <button bindtap="tapHandle">click me</button> -->
  <!-- 通过 catchcap 绑定的事件不会有冒泡 -->
  <button catchtap="tapHandle">click me</button>
</view>

bindtap属性 只能去指定函数的名字，并不能写一个表达式

params.wxml

<!--pages/params/params.wxml-->
<!-- 可以通过  data-xx  属性，给 事件处理函数 传递额外的参数 -->
<view>
    <text>item 1 </text>
    <button bindtap="removeHandle" data-id="1">remove</button>
</view>
<view>
    <text>item 2 </text>
    <button bindtap="removeHandle" data-id="2">remove</button>
</view>
<view>
    <text>item 3 </text>
    <button bindtap="removeHandle" data-id="3">remove</button>
</view>
<view>
    <text>item 4 </text>
    <button bindtap="removeHandle" data-id="4">remove</button>
</view>

params.js

// pages/params/params.js
Page({
    removeHandle(e){
      console.log(e)
    }
})

---

单向数据流

index.wxss

/**index.wxss**/
input{
  border: 1px solid #ccc;
  margin: 20px;
}

index.wxml

<!--index.wxml-->
<text>{{foo}}</text>
<input value="{{foo}}"  bindinput="inputChangeHandle"  />

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data:{
    foo:'hello wechat app'
  },

  inputChangeHandle(e){
    // e.target  当前文本框
    console.log(e.detail.value)
    //将界面上的数据再次同步回 数据源上
    this.data.foo=e.detail.value

    //setData  1. 改变数据源
    //         2. 通知框架，数据源变了，需要重新渲染页面
    this.setData({foo:e.detail.value})
  }
})

             

---

WXSS  vs  CSS

rpx  可以根据屏幕宽度进行自适应。规定屏幕宽度为750 rpx 。

导入样式 。 公用样式 是放在公共目录下的

app.wxss  是所有的页面都会用到的样式

@import "../../common.wxss"