微信小程序的风浪机制中国赌博合法网站,支点微信小程序被封杀

中国赌博合法网站,今日,支点微信小程序被暂停服务,疑似被微信封杀。

事件机制是一种非常典型的通讯方式,可以在程序中的不同对象之间传递信息,也可以在一个应用的不同层面进行沟通协作。微信小程序中也采用了事件机制,我们这次来了解一下微信小程序框架提供的事件处理机制。

在微信小程序中,可以看到同为点击事件,有的是bindtap而有的是catchtap,那么这两者有什么区别呢?为了进一步了解微信小程序的事件机制,在原DEMO的基础上增加了一个简单的页面。效果如下。

据网友爆料,支点微信小程序:支点行情于昨日上线,是借鉴挖矿分红机制的新闻类软件。

小程序官方文档对事件的定义是:

中国赌博合法网站 1Paste_Image.png

– 事件是视图层到逻辑层的通信方式

红黄绿分别代表三个view。 红是最外层的, 黄绿依次为中底层。
每一层view对应着一个点击事件。(outtap,midtap,innertap)。

– 事件可以将用户的行为反馈到逻辑层进行处理

Page({ outtap{ console.log("out:"+event); }, midtap{ console.log("mid:"+event) }, innertap{ console.log("innertap:"+event) }})


事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

首先先把所有的事件都改为bindtap。分别点击inner层,middle层,out层。再看看日志上打印出来的数据。

– 事件对象可以携带额外信息,如 id, dataset, touches。

<view bindtap="outtap"> out <view catchtap="midtap"> middle <view bindtap="innertap"> inner </view> </view></view>

从这里我们可以看到,官方文档主要将事件用于小程序中针对用户交互行为的处理,即视图层到逻辑层的通信,逻辑层收到这些用户行为事件后,可以进行业务处理,然后根据情况反馈或不反馈结果给用户。

中国赌博合法网站 2点击innertap.png中国赌博合法网站 3点击midtap.png中国赌博合法网站 4点击toptap.png

我们今天就撇开事件的其他用法,专门就来了解小程序视图层和逻辑层之间的事件用法。

可以看到,当为view的点击时间为bindtap的时候,
点击最底层的innerview的时候,除了触发innertap的点击方法之外,事件还会往上进行传递,依次触发midtap和outtap方法。

总体上来说,小程序中的事件机制在工作原理上来讲,和HTML
DOM的事件机制是一致的。在HTML中,我们可以通过在HTML元素上设置一个如onclick=”clickHandler”的属性来绑定用户的页面点击事件处理函数。而在WXML中,我们为一个组件绑定一个事件处理函数,可以使用如下语法来完成:

然后我们把middle的bindtap改成catchtap,再分别点击三个视图层。(顺序 inner
middle out)

中国赌博合法网站 5

中国赌博合法网站 6点击innertap.png中国赌博合法网站 7点击midtap.png中国赌博合法网站 8点击toptap.png

这里的bindtap就可以理解为将tap事件,绑定到一个名为tapName的事件处理函数上来进行处理。然后在相应的Page代码中,我们需要定义这个tapName函数:

可以看到,当mid层使用了catchtap后,事件执行到mid层之后,便不会再往上进行传递。

中国赌博合法网站 9

从上面的截出来的图片中,
我们可以看到点击了控件之后,返回的是一个Object对象,那么这个对象里面包含什么信息呢。查看官方文档。

这样完成了一个简单的tap事件的处理。当我们在小程序的界面上去点击这个显示为Click
me的view组件的时候,view组件捕获到这个tap动作,然后告诉Page中的tapName函数,要对这个动作进行处理,同时,它也为tapName函数提供了足够多的信息,也就是event对象,来帮助我们更好更精准的处理我们的业务逻辑。我们可以来看一下我们这个例子中的event对象里面包含了哪些内容:

中国赌博合法网站 10Paste_Image.png

中国赌博合法网站 11event

其中type为事件类型,timeStamp为事件生成的时间戳,target为触发事件的组件的一些属性值集合,currentTarget当前组件的一些属性值集合,touches为触摸事件,包含的信息为触摸点信息的数组,detail为额外的信息集合。

这里我们可以看到,在event对象中,包含了事件的名称,事件目标对象的信息,以及事件发生的在界面上的位置信息等等。我们在组件上设置的data-hi属性的值,也在target中的dataset上被携带了过来,这是比较有用的,在实际开发中,我们可以利用这个特性,来传递更多视图层的信息到逻辑层进行处理。

以下为事件的一些详细信息。

中国赌博合法网站 12Paste_Image.png中国赌博合法网站 13Paste_Image.png中国赌博合法网站 14Paste_Image.png

从官方的文档中,我们可以发现,事件分为两种,一种是冒泡事件,另一种是非冒泡事件。a.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递b.非冒泡事件:当一个组件上的事件被出发后,该事件不会向父节点传递。

显然bindtap属于冒泡事件,catchtap属于非冒泡事件。除了bindtap之外,wxml的其他冒泡事件还有以下事件。

中国赌博合法网站 15冒泡事件列表.png

注:除上表之外的其他组件自定义事件都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件。

如果你有DOM编程的经验,你就会在这里想到,小程序里事件的冒泡和非冒泡是怎么处理的?如果你还不了解什么是事件冒泡,那我在这里解释一下:

在HTML或者WXML这些基于XML的树形结构的界面布局方式中,元素与元素之间是有层级关系的,子级元素上触发的事件,可以向父级元素逐层向上传递,所以,父级元素上也可以捕获子级元素上的事件并进行逻辑处理。

这种事件冒泡的机制,在实际的开发中也经常会用到,所以我们有必要来了解下在小程序中,是如何来使用冒泡事件的。WXML中分别提供了两种方式,用来绑定事件处理函数:

  1. 使用 bind 开头的事件绑定,这种绑定不会阻止冒泡事件向上冒泡

  2. 使用 catch 开头的事件绑定,这种绑定可以阻止冒泡事件向上冒泡

直观起见,我们直接来看一个示例代码:

中国赌博合法网站 16index.wxml中国赌博合法网站 17index.wxss

在这个示例代码中,有三个逐级嵌套的view元素,最里层的是content元素,最外层的为outer-container元素。最里层和最外层的元素上,使用了bind属性绑定了tap事件的处理函数,而中间的innner-container上,使用了catch属性进行tap事件绑定。

然后,我们尝试在content上点击一下,可以看到这样的结果:

中国赌博合法网站 18点击content的结果

content和inner-container元素的tap事件处理函数被执行了,而outer-container元素的没有被执行。这说明在点击content的过程中,产生的tap事件向父级元素传递,而作为content元素的父级元素inner-container,
它使用了能阻止事件冒泡的catch方式,所以它在捕获通过冒泡形式过来的子级元素事件并执行事件处理函数后,让该事件停止向上传递,因此同样是父级元素的outer-contaner,就不再能收到这个冒泡事件了。

然后,来看一下,在不同层级的元素捕获的event对象,在数据方面有什么特点:

我们可以看到,在content的tap事件处理函数中,event里面的target和currentTarget的id都是content。

中国赌博合法网站 19

而在inner-container中的event对象里,target的id为content,而currentTarget的id是inner-content。

中国赌博合法网站 20

由此我们可以知道,event对象中的target是事件产生的源头组件,而currentTarget则是当前捕获这个事件的组件。

event对象中还包含其他一些有用的信息,如touches和changedTouches表示一个或多个手指在屏幕上的触摸位置和变动位置等信息,可以用来实现多点触摸的高级手势处理。

最后,关于事件冒泡,有一点是值得注意一下的:在微信小程序中,并不是所有事件都是冒泡的,从官方文档了解到,<canvas>组件的触摸事件不可冒泡。

网站地图xml地图