小程序中的事件处理

事件处理

一个应用仅仅只有界面展示是不够的，还需要和用户做交互，例如：响应用户的点击、获取用户输入的值等等，在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作

1. 事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种：

第一种方式：bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名

<button bind:tap="handler">按钮</button>

第二种方式：bind事件名，bind 后面直接跟上事件名

<button bindtap="handler">按钮</button>

事件处理函数需要写到 .js 文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。例如：

// pages/home/home.js
Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler () {
    console.log('我被执行啦~~~')
  }
    
  // 其他 coding...
})

当组件触发事件时，绑定的事件的处理函数会收到一个事件对象，用来记录事件发生时的相关信息。在触发事件时，事件处理程序会主动的给我们传入一个参数 —— event（事件对象）

// pages/home/home.js
Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler (event) {
    // console.log('我被触发了~~~')
    console.log(event)
  }
    
  // 其他 coding...
})

2. 小程序中的事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 事件系统

事件绑定

bind事件名 tap移动端事件

bindtap=“事件名字”

catchtap=“阻止事件冒泡”

事件需要在js文件中进行定义即可

事件传递参数

在标签上绑定一个属性data-index=“xxxx”

方法中event.target.dataset获取对象数据内容

<button size="mini" type="primary" data-type="jian" bindtap="changeNum">-</button>
{{num}}
<button size="mini" type="primary" data-type="jia"  bindtap="changeNum">+</button>

Page({
    changeNum(e){
        console.log(e);
        let {type} = e.target.dataset;
        type=='jia'?this.data.num++:this.data.num--;
        this.setData({
          num: this.data.num,
        })
      },
})

条件渲染

wx:if v-if block

 <view wx:if="{{flag}}">Hello wx:if条件渲染的使用</view>
 <view hidden="{{!flag}}">Hello hidden条件渲染的使用</view>

 <button bindtap="toggle">toggle</button>

Page({
    data:{
      flag:true,  
    },
    toggle(){
        console.log(this.data.flag);
        let flag = this.data.flag;
        //修改数据的内容,data中绑定的数据，
        this.setData({
          flag:!flag,
        })
  },
})

hidden

hidden和 wx:if的区别

被wx:if控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的UI结构
wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做， 在条件第一次变成真的时候才开始局部渲染
hidden只是简单的控制组件的显示与隐藏，组件始终会被渲染
wx:if 有更高的切换消耗而 hidden 有更高的 初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果运行时条件不大可能改变则 wx:if 较好。

列表渲染

wx：for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

block wx:for

类似 block wx:if，也可以将 wx:for 用在<block></block>标签上，以渲染一个包含多节点的结构块

指定索引与当前项的变量名

使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名

<view wx:for="{{user}}" wx:key="index">
  {{index}} - {{item.name}} - {{item.age}} -{{item.love}}
 </view>

Page({
    data:{
         user:[
          {name:"张三",age:18,love:"抽别人烟"},
          {name:"李四",age:18,love:"摸别人屁股"},
        ]
    }
})

Wxs

什么是wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

Wxs如何使用

cate.页面中

<!--pages/cate/index.wxml-->
<wxs module="m1">
var msg = "hello Wxs";
module.exports = {
  msg:msg
}
</wxs>
<view>
{{m1.msg}}
</view>

Wxs的内嵌及引入

直接把wxs引入页面中，内嵌方式
定义wxs的文件，使用引入的方式

<!--pages/cate/index.wxml-->
<wxs module="m1">
var msg = "hello Wxs";
module.exports = {
  msg:msg
}
</wxs>
引入的方式来使用wxs的方法
<wxs module="s1" src="/utils/sum.wxs"></wxs>
<view>
{{m1.msg}}
</view>
<view>
{{s1.getSum(10,20)}}
</view>

utils/sum.wxs

var getSum = function(x1,x2){
  return x1+x2;
}
module.exports = {
  getSum:getSum,
}

Wxs支持的数据类型

Number  String Boolean   Object Array  Date Function  Regexp

下拉刷新

下拉刷新的概念以及场景

概念：下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下拉刷新，更新列表数据
应用场景：在移动端，数据列表是常见的页面效果，更新列表数据是最基本的页面需求，相比于按钮刷新、定时刷新来说，下拉刷新的用户体验方便友好，已经成为移动端刷新列表数据的最佳解决方案

如何设置下拉刷新

方式一：需要在app.json 的 window 选项中或页面配置中开启enablePullDownRefresh。但是，一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为
方式二：可以通过wx.startPullDownRefresh()触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
示例代码：

通过配置enablePullDownRefresh来为页面开启下拉刷新功能
```
{
    "enablePullDownRefresh": true
}
```
通过wx.startPullDownRefresh()来为页面开启下拉刷新功能
```
<button bindtap="refresh">点击刷新页面</button>
```
```
Page({
    refresh() {
        console.log(1)
        wx.startPullDownRefresh()
    }
})
```
**注意：**即使通过startPullDownRefresh方法实现下拉刷新，也要在页面中配置enablePullDownRefresh属性

设置下拉刷新窗口的样式

需要在app.json 的 window 选项中或页面配置中修改backgroundColor和backgroundTextStyle选项
- backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值
- backgroundTextStyle 用来配置下拉刷新loading的样式，仅支持 dark 和 light

监听下拉刷新事件

为页面添加onPullDownRefresh()函数，可以监听用户在当前页面的下拉刷新事件

示例代码：

// 监听下拉刷新的事件
onPullDownRefresh() {
    console.log('页面刷新了')
    this.setData({
        arr: [1, 2]
    })
}

停止下拉刷新

当通过startPullDownRefresh方法处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新
//配置操作信息

如何配置，单页面json文件中开启enablePullDownRefresh:true, 修改窗口的样式信息
onPullDownRefresh中，监听下拉刷新事件，事件中做一下不为认知的事
this.setData({key:value})

上拉加载

使用场景

主要当用户滚动页面的时候加载更多的数据内容，
相当于移动端的分页。刚开始之家在部分数据，页面滚动的时候加载更多的数据，翻页

设置监听的距离

json文件中设置distance，默认是50px 单个页面或者全局

上拉加载

设置触底的距离

不设置默认是50px

生命周期函数

onReachBottom(){

加载更多数据的逻辑操作内容

}

其他事件

页面滚动事件onPageScroll

<wxs module="cate">
  var list = [{id:1,name:"张三"},{id:2,name:"李四"}];
  module.exports = {
    list:list
  }
</wxs>
<wxs src="/utils/cate.wxs" module="cate1"></wxs>
<view>
  <view class="item-{{item.id}}" wx:for="{{cate.list}}" wx:key="index">
    {{item.id}}--{{item.name}}
  </view>

  <view class="item-{{item.id}}" wx:for="{{cate1.list1}}" wx:key="index">
    {{item.id}}--{{item.name}}
  </view>
</view>

 // wx.showToast({
    //   title: '加载中',
    //   icon:"loading"
    // })
    // wx.showLoading({
    //   title:"小二正在努力加载中",
    //   mask:true,
    // })

    // setTimeout(()=>{
    //   wx.hideLoading();
    // },2000);

    // wx.showModal({
    //   title:"删除提示",
    //   content:"确定要删除数据吗",
    //   cancelColor:"#FF0000",
    //   complete:()=>{
    //     wx.showToast({
    //       title: '取消操作',
    //     })
    //   }
    // })

wx.pageScrollTo() 微信自带返回页面的某个滚动的位置，自带动画效果

比如返回顶部的操作效果，

<view class="top" bindtap="toTop">返回</view>

//返回顶部的方法
  toTop(){
    console.log("返回顶部的效果");
    //返回顶部所需要的数据
    wx.pageScrollTo({
      scrollTop:0,//滚动的高度
      duration:1000,//耗费的时间
    })
  },

分享事件onShareAppMessage

监听用户点击页面内转发按钮（<button> 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。其中 Object 参数说明如下

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title:"丁熙翔于小黑二三事",
      imageUrl:"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
    }
  }

网络数据请求

wx.showToast //信息提示

wx.pageScrollTo() //页面滚动

wx.getStorage

wx.setStorage

wx.request

小程序后台配置

请求合法的域名的，我们还可以在小程序的后台配置信息，
线上需要配置这个信息，

跳过域名检测

跳转域名检测，修改小程序的配置信息
详情中> 本地配置》勾选不检验合法域名，https等信息

get请求和post请求简单语法

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    //请求严选商城的Api
    wx.request({
      url: 'https://api.it120.cc/small4/shop/goods/list',
      method:"get",
      data:{
        page:1,
        pageSize:6
      },
      success:(res)=>{
        console.log(res);
      }
    })
  },

const request = (url,method="get",data={}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url || 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      data: data ||  {},
      method: method || "GET",
      success: (res) => {
        console.log(res);
        resolve(res);

        wx.hideLoading();
      },
      fail: (err) => {
        console.log(err);
        reject(err);
      }
    })
  })
}

module.exports = {
  request,
}

// pages/home/index.js
const {request} = require("../../utils/request.js");
....

  async getBanner(){
    wx.showLoading({
      title: '努力加载中',
    })

    let res = await request("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")

    console.log(res);
    let {message } = res.data;

    this.setData({
      banner:message,
    })
  },

3. 绑定并阻止事件冒泡

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。

<view bindtap="parentHandler">
  <!-- 使用 bind 绑定的事件，会产生事件冒泡 -->
  <!-- <button bindtap="handler">按钮</button> -->

  <!-- 使用 catcht 绑定的事件，会阻止事件冒泡 -->
  <button catchtap="handler">按钮</button>
</view>

Page({
  // 页面的初始数据
  data: {},

  // 事件处理程序
  handler (event) {
    console.log('我是子绑定的事件 ~~~')
  },
  
  parentHandler () {
    console.log('我是父绑定的事件 ~~~')
  }
    
  // 其他 coding...
})

WXML 中冒泡事件列表如下表：

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

📌 注意事项：

除上表之外的其他组件自定义事件，如无特殊声明都是非冒泡事件
例如 form 的submit事件，input 的input事件

4. 事件传参-data-*自定义数据

在小程序中，可以通过事件传参的方式，将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。

在组件节点中可以通过 data- 的方式传递一些自定义数据，传递的数据可以通过事件对象的方式进行获取

📌 注意事项：

使用 data- 方法传递参数的时候，多个单词由连字符 - 连接

连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符

例如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType

data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

在 wxml 文件中，使用 data-* 属性将数据传递给事件处理函数。例如：

<view bindtap="parentHandler" data-parent-id="1" data-parentName="tom">
  <!-- 如果需要进行事件传参，需要再组件上通过 data- 的方式传递数据 -->
  <!-- <button bindtap="btnHandler" data-id="1" data-name="tom">按钮</button> -->

  <button data-id="1" data-name="tom">按钮</button>
</view>

在 js 文件中，可以通过 event.currentTarget.dataset 获取传递的数据

// cate.js
Page({

  // 按钮触发的事件处理函数
  btnHandler (event) {
    // currentTarget 事件绑定者，也就是指：哪个组件绑定了当前事件处理函数
    // target 事件触发者，也就是指：哪个组件触发了当前事件处理函数
    // currentTarget 和 target 都是指按钮，因为是按钮绑定的事件处理函数，同时点击按钮触发事件处理函数
    // 这时候通过谁来获取数据都可以
    console.log(event.currentTarget.dataset.id)
    console.log(event.target.dataset.name)
  },


  // view 绑定的事件处理函数
  parentHandler (event) {
    // 点击蓝色区域(不点击按钮)
    // currentTarget 事件绑定者：view
    // target 事件触发者：view
    // currentTarget 和 target 都是指 view，如果想获取 view 身上的数据，使用谁都可以

    // 点击按钮(不点击蓝色区域)
    // currentTarget 事件绑定者：view
    // target 事件触发者：按钮
    // 如果想获取 view 身上的数据，就必须使用 currentTarget 才可以
    // 如果想获取的是事件触发者本身的数据，就需要使用 target
    console.log(event)

    // 在传递参数的时候，如果自定义属性是多个单词，单词与单词直接使用中划线 - 进行连接
    // 在事件对象中会被转换为小托峰写法
    console.log(event.currentTarget.dataset.parentId)

    // 在传递参数的时候，如果自定义属性是多个单词，单词如果使用的是小托峰写法
    // 在事件对象中会被转为全部小写的
    console.log(event.currentTarget.dataset.parentname)
  }

})

5. 事件传参-mark 自定义数据

小程序进行事件传参的时候，除了使用 data-* 属性传递参数外，还可以使用 mark 标记传递参数

mark是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据（类似于 dataset ）

mark 和 dataset 很相似，主要区别在于：

mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值 (事件委托的)

dataset 仅包含触发事件那一个节点的 data- 属性值。

在 wxml 文件中，使用 mark:自定义属性 的方式将数据传递给事件处理函数

<!-- pages/index/index.wxml -->

<view bindtap="parentHandler" mark:parentid="1" mark:parentname="tom">
  <!-- 如果需要使用 mark 进行事件传参，需要使用 mark:自定义属性的方式进行参数传递 -->
  <!-- <button bindtap="btnHandler" mark:id="1" mark:name="tom">按钮</button> -->
  <button mark:id="1" mark:name="tom">按钮</button>
</view>

// cart.js
Page({

  // 按钮绑定的事件处理函数
  btnHandler (event) {
    console.log(event.mark.id)
    console.log(event.mark.name)
  },

  // view 绑定的事件处理函数
  parentHandler (event) {
    // 先点击蓝色区域 (不点击按钮)
    // 通过事件对象获取的是 view 身上绑定的数据

    // 先点击按钮 (不点击蓝色区域)
    // 通过事件对象获取到的是 触发事件的节点 已经 父节点身上所有的 mark 数据
    console.log(event)
  }

})