微信小程序的事件机制,或因借鉴挖矿分红机制

来源:http://www.tzzyzscx.com 作者:666彩票区块链 人气:154 发布时间:2019-12-14
摘要:今日,支点微信小程序被暂停服务,疑似被微信封杀。 -事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 WXSS用于描述WXML的组件样式,用于决定WXML的

今日,支点微信小程序被暂停服务,疑似被微信封杀。

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

WXSS用于描述WXML的组件样式,用于决定WXML的组件应该如何显示。为了适应广大的前端开发者,它被设计为支持CSS中大部分的特性(但是注意是大部分,还是有一些特性是不支持的),并且有一些自己的扩展和修改。比如引入了一种新的尺寸单位rpx,还有@import这种外联样式的导入机制(话说这个功能不是CSS里也有的么...)

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

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

样式的设置

在WXML文件中,我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在,我们就可以动态的设置style和class的属性值了。比如:

<view style="color:{{color}};padding:{{padding}};">Hello</view>

<view >{{message}}</view>

不过,我们要尽量避免使用style来设置组件的样式,最好将样式定义成样式规则放到样式文件中,然后通过class属性来设置。因为组件通过style接收动态样式,在运行时会进行解析,影响渲染性能。

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

新的尺寸单位

最后来说一下WXSS中新增和扩展的尺寸单位,对于做屏幕的自适应是非常有帮助的。

  • rpx (responsive pixel,响应式px),简单来说,就是不管什么尺寸的设备,总是认为屏幕宽度是750rpx
  • rem (root em,根em),也很简单,就是不管什么尺寸的设备,总是认为屏幕的宽度是20rem。

所以rpx和rem之间的换算,就是:

1rem = rpx = 37.5rpx```设计师的设计稿一般都是按照px来做单位的,那么在开发阶段,开发人员就需要在px和rpx之间进行换算,具体可以如下来计算:```rpx = (屏幕实际宽度/750)px px = (750/屏幕实际宽度)rpx```因此,如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px),则:```1rpx = px = 0.5px 1px = rpx = 2rpx```是不是很容易理解?好了,关于微信小程序样式WXSS的关键点内容,就讲解到这里,不对的地方欢迎指正。谢谢啦。>> [1. 阿里云通用代金券:最高1888元,云产品通用红包,可叠加官网常规优惠使用](https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=hyn5a9ql)> [2. 阿里云基础版服务器优惠套餐:1核1G仅需293元/年](https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=hyn5a9ql)> [3. 阿里云高性能服务器优惠套餐:首次购买企业级云服务器5折](https://promotion.aliyun.com/ntms/act/enterprise-discount.html?userCode=hyn5a9ql)

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

关于CSS,我就不在这里介绍它的用法了,这个内容实在有点多,还没学习过CSS的朋友可以自己找一下资料学习,我在这里主要想讲解一下WXSS和CSS之间的不同之处。

图片 1event

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS几乎相同的一种机制,称作WXSS。

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

有限的选择器

和CSS不一样,小程序的WXSS支持的选择器的类型有限,官方文档中明确列出说支持的,目前只有以下几种选择器:

  • .class:类选择器,例如.error-msg,它会选择所有的组件
  • #id:ID选择器,例如#my-container,它会选择的组件
  • element:元素选择器,例如view,它会选择所有view组件
  • element, element:多选择器,例如view, button,它会选择所有view和button组件
  • ::after:例如view::after,它会在view组件后面插入内容
  • ::before:例如view::after,它会在view组件前面插入内容

其实自己试了一些在CSS中可用,小程序官方没有声明在WXSS里支持的选择器,也是可以生效的。但是有些用了就会把微信web开发者工具给整崩溃掉,所以,还是不要在实际开发中使用这类没说支持的选择器了,虽然在有的场景下麻烦了点,但是以上支持了的选择器还是基本够用了。

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

全局样式与局部样式

WXSS中有全局样式与局部样式之分。

定义在app.wxss文件中的样式为全局样式,将会对每一个页面起作用。

而定义为page同名的wxss文件,则称为局部样式,只会针对对应的页面起作用,而且样式优先级比全局样式要高,可以覆盖全局样式。

图片 2

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

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

图片 3

本文由666彩票发布于666彩票区块链,转载请注明出处:微信小程序的事件机制,或因借鉴挖矿分红机制

关键词:

上一篇:区块链为什么叫区块链,区块链大厦

下一篇:没有了

最火资讯