本章节了解小程序的一些基础组件和基本的事件处理以及小程序实现数据双向绑定

参考资料:

微信官方文档

学习和开发小程序我们可以借助微信官方提供的开发文档，文档中提供了框架，组件和各种API满足我们的开发需求，本文介绍的只是一些基础的内容

小程序基础组件

• 1、小程序view标签相当于是html中的div标签，用来实现基础布局.

• 2、image是图片标签，默认尺寸是320*240，可通过css或设置mode属性来修改尺寸。

  mode属性：

  aspectFit:缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来
  aspectFit：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来
  widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
  heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
  

小程序的事件处理

什么是事件

（参考官方文档）

官方文档解释小程序的事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。
• 了解事件这就得需要了解一下前端基础JS事件流，何为事件流？事件流:就是事件的流向,先捕获,再到事件源,最后再冒泡,这一个流程称为事件流，一共分三个阶段:捕获阶段,目标,冒泡阶段。”

事件捕获：

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

目标阶段：

当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

事件冒泡：

冒泡事件就是点击子节点，会向上触发父节点

举个例子

wxml页面结构：一个父盒子包着子盒子的结构

<view class="parent" bindtap="parent">
  <view class="child" bindtap="child"></view>
</view>

js文件：当触发子盒子的事件，会先执行子盒子的事件处理函数，接着会执行父盒子的事件处理函数

  parent () {
    console.log('父盒子')
  },
  child () {
    console.log('子盒子')
  },

事件处理函数的执行结果

如上图，使用bindtap绑定事件会有冒泡事件，如果不想有冒泡事件产生，可以使用catchtap来绑定事件，catch 会阻止事件向上冒泡，举个例子：如下图

wxml代码：

<view class="parent" bindtap="parent">
  <view class="child" catchtap="child"></view>
</view>

js代码：

  parent () {
    console.log('父盒子')
  },
  child () {
    console.log('子盒子')
  },

事件处理函数执行结果：

点击事件：

• 两种写法:bindtap/bind : tap ,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。(在wxml页面的标签上绑定完点击事件以后，在页面的js文件中的Page中可以声明这个事件的事件处理函数)
• wxml文件绑定点击事件,当触发点击事件后就会执行js文件中Page里的事件处理函数

<button bindtap="bindViewTap"></button>

js文件声明事件处理函数

  bindViewTap(){
    console.log('点击事件');
  },

事件对象

事件对象用于描述所产生的事件。调用事件处理程序时，JS会把事件对象作为参数传给事件处理程序。事件对象提供了有关事件的详细信息，因而可以在事件处理程序中通过事件对象获取有关事件的相关信息

举个例子

wxml页面：

<button  type="primary"  bindtap="getEvent">事件对象</button>

js文件：

  getEvent(e){
    console.log(e);
  },

点击按钮就会触发bindtap绑定的事件，这样也会执行js文件中的getEvent事件处理函数，在事件处理函数中传入参数e就代表事件对象，下面打印的 e 就是事件对象的信息

事件对象的信息

• type：触发事件的类型
• timestamp：触发事件当时的时间戳
• target：触发事件的根源组件，包括触发事件组件的id，类型，以及dataset自定义属性的集合
• currentTarget：触发事件的当前组件，触发当前事件的id，类型，以及dataset自定义属性的集合
• touches：表示我们停留在屏幕上触摸点的一个信息；
• changedTouches：表示一个有变化的触摸点的信息；
• detail：表示我们绑定事件所携带的数据，包括x/y到页面左上角的距离
• currentTarget和target的区别：
• currentTarget：表示的是绑定事件的元素
• target：表示出发事件的元素

小程序实现数据双向绑定

简单了解数据的双向绑定

• 数据的双向绑定理念就是数据驱动视图，就是MVVM模式，是Model–View–ViewModel模式的缩写。
• View是视图层，也就是用户界面。主要由HTML和CSS来构成，为了更方便地展现ViewModel或者Model层的数据。
• Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
• ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者从后端获取得到Model数据进行转换出来，做二次封装，以生成符合View层使用预期的视图数据模型。
• 视图状态和行为都封装在ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。

小程序实现数据的双向绑定

在原生小程序开发中，数据流是单向的，无法双向绑定，但是要实现双向绑定的功能还是蛮简单的！

举个例子：

内容实现数据的双向绑定：小程序中的首先是需要在js文件中data里面定义数据，在wxml文件中在需要使用数据的标签内使用{{}}进行动态插入

如图：

wxml文件

<view>数据绑定{{text}}</view>

js文件

page({
  data:{
    text:'绑定123'
 }
})

页面展示

如果是想实现属性的双向绑定，也是如此，在js文件中定义，在wxml页面中在需要使用数据的属性内使用{{}}来进行动态插入

wxml文件

<image src="{{imageSrc}}"></image>

js文件

page({
  data:{
   imageSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp410377270.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652347697&t=6c4dc166614abb74776d2ef7dbb58ee5'
}
})

以上只是实现了数据的绑定，并不是双向绑定，我们还需要在数据变化时视图展示的内容也跟着变化，那怎么让数据变化?小程序中更改数据时使用code this.setData()这个方法。

举个例子

在js文件中使用code this.setData()修改数据

onLoad () {
    this.setData({
      text:'修改数据内容'
    })
    console.log(this.data.text);
  }

页面展示

使用方法就是code this.setData()({变量：更改后的值} 更改完后可以看一下在data中定义的变量现在的值，获取data中的变量的方法是：this.data.变量名 （this.setData()和this.data.变量名的this指的是Page创建的页面对象，指的是页面本身）

个人见解，有问题可留言。。。