weex text 解析html,Weex学习第五篇：css样式和类的运用-CSDN博客

复习上篇文章学习的数据绑定，感觉比较重要的是

1.计算属性的的使用，类似响应式编程，就是一个变量的值会随着它相关的那个变量的值的变化而变化，不需要去update，比如fullName = firstName+lastName，一个text=fullName，如果firstName变化，那么fullName就会变。

2.if & repeat使用，if判断这个标签是否显示隐藏，repeat用在数组中生成表格数据类似的场景使用

本次要学习的是css样式和class使用,内联事件处理函数

重点，多个class名使用，在个个类名之间用空格分开像这样class="title highlight"

在class里也可以使用变量来代替像这样class="large {{textClass}}"

下面来看一下具体官方教程使用

CSS 样式和类

基础语法

CSS 样式可以理解为一系列的键值对，其中的每一对描述了一个特定的样式，例如组件的宽或者高。

width: 400; height: 50; ...

键值对的形式是 prop-name: prop-value;。键名是 prop-name，键值是 prop-value。一般情况下，键名按照连接符的方式进行命名，键和值之间由冒号 : 进行分隔，每对键值之间由分号 ; 进行分隔。

在 Weex 页面上样式有两种形式：

中的 style 特性

在 style 特性中编写样式，例如：

...

这段代码的意思是

组件的宽和高分别为 400 像素和 50 像素。

例如:

.wrapper { width: 600; }

.title { width: 400; height: 50; }

.highlight { color: #ff0000; }

样式表包含了多个样式规则，每条规则有一个对应的类，以及由 {...} 包括的若干条样式。例如：

.title { width: 400; height: 50; }

class 特性

标签中的 class 特性值用来匹配

...

.wrapper { width: 600; }

.title { width: 400; height: 50; }

.highlight { color: #ff0000; }

这段代码的含义是

组件的宽度是 600 像素，两个组件的尺寸为 400x50，其中第二个文本组件是红色字。

注意事项

为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。

标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。

标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 px 单位可以忽略不写，直接使用对应的数值。更多详情请查看通用样式。

子元素的样式不会继承自父元素，这一点与标准 CSS 不同，比如 color 和 font-size 等样式作用在上层的

上是无效的。

标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 font-size、color 等其它样式。

与数据绑定结合

请查阅数据绑定中有关 style 和 class 特性的相关部分。这里简单举个例子：

Alibaba

Weex Team

.large {font-size: 32;}

.highlight {color: #ff0000;}

module.exports = {

data: {

fontSize: 32,

textClass: 'highlight'

}

今天看到一个特殊的内联事件处理参数，$event 是默认的事件处理函数的第一个参数，这个参数包含三个属性type，target，timestamp。这个属性是固定存在的，格式也是固定的就是通过$event这样传的。看一下具体用法：

事件处理

Weex 允许对中的元素绑定事件处理函数。

基本语法

以 on... 开头的就是用于绑定事件的特性，特性名中 on 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。函数名外不需要添加 mustache 语法中的大括号。例如：

Toggle: {{result}}

module.exports = {

data: {

result: true

methods: {

toggle: function () {

this.result = !this.result

}

内联事件处理参数

同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如：

Result: {{result}}

module.exports = {

data: {

result: ''

methods: {

update: function (x, y) {

this.result = x + y

}

特殊的内联事件处理参数

额外的，在这种内联的事件绑定写法中，你可以使用一个特殊的参数 $event，代表事件描述对象，即默认事件处理函数的第一个参数。所以中的 οnclick="foo" 和 οnclick="foo($event)" 是等价的，$event 的用法可以更多参考下面的例子

Result: {{result}}

module.exports = {

data: {

result: ''

methods: {

update: function (e, x, y) {

this.result = e.type + (x + y)

}

事件描述对象

每当一次事件被触发的时候，都会产生一个事件描述对象，该对象会默认作为第一个参数传递给事件处理函数，或以 $event 形参的方式出现在内联事件处理函数中。

每个事件描述对象至少包含以下几个特性：

type (string): 事件名称, 如: click

target (Element): 目标元素

timestamp (number): 事件触发时的时间戳数字

参考链接：https://weex-project.io/cn/doc/syntax/display-logic.html