微信小程序初体验（二）

前情提要

    在上一次的博客内容里面，我主要写出了微信小程序的一些框架模式。

    现在我写一下，框架的详细目录作用

    app.js:小程序的入口，全局变量以及获取用户信息都存放在这里。
    app.json:界面的路径(会自动生成)，tarBar在这里定义。
    app.wxss:类似与css,全局的样式我们一般写在这里。
    utils:一些工具js存放在这里。
    pages:详细界面部署在这里面。

    images:存放图片。

    到此我们对微信小程序，有一个较为充分的认识，大概知道了他的工作原理和方法。

    

事件

什么是事件

*一种用户行为

*一种通讯方式

事件的类别

*点击事件 tap

*长按事件 longtap

*触摸事件 touchstart touchend touchmove touchcancel

*其他 submit input 之类

        可能你们觉得touchend touchcancel 他们的意思不是一样的吗

        其实touchend是一种主动结束的方式，而touchcancel是被动结束，类似迫不得已被弹窗终结掉了此次的触摸

事件的冒泡

*冒泡事件

*非冒泡事件

 我们可以用一种小实验来解释冒泡事件

 首先我们先写一段html和css代码

<view class='view1' bindtap='view11' id='9527' data-title='shazi'>
            <view class='view2' bindtap='view22'>
                        <view class='view3' bindtap='view33'>  
                        
                        </view>
            </view>
</view>

.view1{
  height: 500px;
  width: 100%;
  background: red;
}
.view2{
  height:400px;
  width: 80%;
  background: blue;
}
.view3{
  height:300px;
  width: 60%;
  background: green;
}

我们运行一下就达到下图的效果，而且因为我们写了bindtap，所以这些view所显示的范围是可以点击

贴上它的的点击事件

  view11:function(event){
    console.log('viewclick1');
    console.log(event);
  },
    view22: function () {
    console.log('viewclick2');
  },
    view33: function () {
      console.log('viewclick3');
    },

当我们点击一下绿色的区域

在console.log的作用下，会显示我们已经写好的日志显示文字

可以看到点击绿色(view3)，也会点到后面的所有区域包括蓝色(view2)红色(view3)

而如果我们只点击蓝色，会出现蓝色红色的日志显示，但是不会出现绿色的日志显示

这作为一个冒泡事件的小实验不知道大家有没有看懂，大概就是这样的一个意思

如果我们并不想点击到后面的图层该怎么办，我们可以用到catchtap而不用bindtap，问题迎刃而解。

当我们在html中写下如下的代码，还可以将一些数据传入到后台日志中。

<view class='view1' bindtap='view11' id='9527' data-title='shazi'>