Weex-语法笔记一

时间 2019-11-06

标签 weex 语法笔记繁體版

原文原文链接

数据绑定javascript

Weex使用 mustache 的语法 ({{...}}) 来对 <template> 中的模板和 <script> 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。html

样式: style 或 classjava

组件的样式可以经过style特性进行绑定：node

<template>android

<div>ios

<text style="font-size: {{size}}; color: {{color}};">Hello World</text>git

</div>github

</template>浏览器

<script>weex

module.exports = {

data: {

size: 32,

color: '#ff0000'

}

</script>

体验一下

样式也可以经过class特性实现样式绑定，多个 class 名经过空格分隔：

<div>

<text class="{{size}}">Hello</text>

<text class="title {{status}}">World</text>

</div>

</template>

<style>

.large { font-size: 64; }

.small { font-size: 32; }

.title { font-weight: bold; }

.success { color: #00ff00; }

.error { color: #ff0000; }

</style>

module.exports = {

data: {

size: 'large',

status: 'success'

}

</script>

按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车，而后在列表中选中要安装的插件。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车，而后在列表中选中要安装的插件。

weex hello.we

weex hello.we --qr

weex debug hello.we

在 Weex 中，您能够经过在特定的子组件上设置 id 特性，以此在该 <template> 内惟一标识这个组件。

Weex 代码由三部分构成：template、style、script，这三个概念之于 Weex 就如 HTML，CSS，JavaScript 之于 Web。

Weex 代码由 <template>、<style>、<script> 三个部分构成。

<template>：必须的，使用 HTML 语法描述页面结构，内容由多个标签组成，不一样的标签表明不一样的组件。
<style>：可选的，使用 CSS 语法描述页面的具体展示形式。
<script>：可选的，使用 JavaScript 描述页面中的数据和页面的行为，Weex 中的数据定义也在 <script> 中进行。

每一个 Weex 页面最顶层的节点，咱们称为根节点。下面是目前咱们支持的三种根节点：

<div>：普通根节点，有肯定的尺寸，不可滚动。
<scroller>：可滚动根节点，适用于须要全页滚动的场景。
<list>：列表根节点，适用于其中包含重复的子元素的列表场景。

目前 Weex 仅支持以上三种根节点。

上面 <script> 标签中定义了被赋值给 module.exports 的对象，这个对象其实就是一个 ViewModel 选项，

定义组件是经过一组选项来描述一个组件。这组选项老是被赋值给 <script> 标签中的 module.exports 。

module.exports = {

// a set of options here

}

data 选项是一个函数，它返回这个视图模型可监听的数据对象。而 methods 是一个映射，其中包含全部视图模型的方法。

每一个 data 或 method 属性将被代理到视图模型实例中。因此，你能经过 this.x 读写数据，或者经过 this.doThis() 调用方法。

events 选项容许你在视图模型被建立时注册自定义事件。而后，它会监听这些类型的事件，并经过函数类型的值处理它们。

Weex 会把一个事件对象做为第一个参数传递给其绑定的事件，这个事件对象在 e.detail 中包含事件数据。

组件定义

定义组件是经过一组选项来描述一个组件。这组选项老是被赋值给 <script> 标签中的 module.exports

data 选项是一个函数，它返回这个视图模型可监听的数据对象。而 methods 是一个映射，其中包含全部视图模型的方法。

events 选项容许你在视图模型被建立时注册自定义事件。而后，它会监听这些类型的事件，并经过函数类型的值处理它们。

生命周期

module.exports = {

data: ...,

methods: ...,

init: function () {

console.log('ViewModel constructor begins')

console.log('在初始化内部变量，而且添加了事件功能后被触发');

created: function () {

console.log('Data observation finished')

 console.log('完成数据绑定以后，模板编译以前被触发');

ready: function () {

console.log('Virtual DOM finished')

console.log('模板已经编译而且生成了 Virtual DOM 以后被触发');

 destroyed: function () { console.log('在页面被销毁时调用'); },

...

}

Weex 视图模型如今支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：

init: 在视图模型的构造函数开始调用时激活；
created: 当视图模型监听默认数据，但还未编译模板时激活；
ready: 当视图模型监听默认数据而且编译模板生成虚拟DOM后被激活。

init内通常用于初始化一些内部变量，绑定一些自定义事件，这时尚未数据绑定，没有建立vdom，因此不能经过this获取到data和methods，也不能获取vdom的节点

created 完成了数据绑定，但还未开始编译模板，能够经过this获取data和methods，但不能获取vdom的节点

ready表示渲染完成，从子组件往上触发

destroyed 组件销毁，好比页面跳转，从子组件开始往上触发

注意：当 methods、events 或生命周期方法做为参数传递给别的函数时，务必确认函数执行时的上下文符合您的预期，例如：

module.exports = {

data: function () {

return {x: 1, y: 2}

ready: function () {

// `undefined`

// 由于上下文发生了变化

this.foo(this.bar)

// `1`

// 正确绑定上下文以后能够获得预期的值

this.foo(this.bar.bind(this))

methods: {

foo: function (fn) {

return fn()

bar: function () {

return this.x

}

Weex使用 mustache 的语法 ({{...}}) 来对 <template> 中的模板和 <script> 里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。

注意事项：data、methods、computed 中的字段是不能相互重复的，由于它们都会经过组件实例的this 访问到。

事件绑定：on...

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

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

<template> 中的 style 特性
<style> 样式表

append

append 特性定义了当前组件的子组件：

以一整棵树的方式一次性添加到视图中 (append="tree")，仍是
每一个子组件都产生一次单独的添加到视图的指令 (append="node")

自定义组件

常常咱们会发现 Weex 的 <template> 中有不少可复用的部分，这时候咱们能够将其封装成上层的自定义组件并重用。例如咱们能够直接建立一个名为 foo.we 的文件，<foo> 就是自定义组件的组件名称：

组件嵌套

自定义组件也支持嵌套，以下：

<text>{{title}}</text>

</div>

</template>

module.exports = {

data: {

// These keys must be declared explicitly here

// or data-binding will not work from its parent.

title: null,

image: null

}

</script>

<div>

<text>{{description}}</text>

</div>

</template>

module.exports = {

data: {

description: '',

// This key must be declared explicitly here

// or data-binding will not work from its parent.

list: []

}

</script>

<foo-list list="{{list}}"></foo-list>

</template>

module.exports = {

data: {

list: [

{text: '...', img: '...'},

...

]

}

</script>

这里的main.we嵌套了<foo-list>，<foo-list>嵌套了<foo>，同时组件能够正常的配合数据绑定、repeat特性等使用。

更多子组件的定义和书写方式

除了在主文件同目录下建立和被封装组件同名的 we 文件以外，Weex 还支持另外几种子组件的书写方式：

在 <script> 中经过 require 其它目录的 we 文件定义同名组件
在主文件下新增 <element name="xxx"> 标签，name 特性的值为新建立的组件名，其 <element> 内部的内容是定义该组件的代码

好比：

</element>

<div>

</div>

</template>

require('path-b/bar.we')

</script>

</template>

这样的话，path-a/main.we 最终展现的结果是“Foo”和“Bar”两段文本。

注意事项

组件各自的 <style> 是相互独立的，不会担忧不一样组件中相同的 class name 相互干扰。
若是自定义组件在父组件中有 id 特性，则能够在父组件上下文中经过 this.$vm(id) 接口来访问该自定义组件的上下文，也能够经过 this.$el(id) 来找到其背后真实的原生组件。更多详见获取子组件信息
自定义组件之间通讯的问题能够参考组件间通讯
不论经过父组件把数据传递进来仍是在当前组件内部对数据发起修改，只有在组件的 data 选项中明确写明的字段才会被正常的监听。

获取自定义子组件的上下文

另外，咱们还能够经过this.$vm(id) 方法能够访问自定义子组件的上下文：

另外，咱们还能够经过this.$vm(id)方法能够访问自定义子组件的上下文：

<text>{{title}}</text>

</div>

</template>

module.exports = {

data: {

title: null

methods: {

setTitle: function (text) {

this.title = text

}

</script>

</element>

<div>

<text onclick="update">Click Me to Update</text>

</div>

</template>

module.exports = {

methods: {

update: function (e) {

this.$vm('sub').setTitle('Updated')

}

</script>

获取子组件信息

在 Weex 中，您能够经过在特定的子组件上设置id特性，以此在该<template>内惟一标识这个组件。

获取子组件

您能够在父组件上下文中使用this.$el(id)来找到该组件，以运用scrollToElement()为例：

<div>

</div>

</template>

var dom = require('@weex-module/dom')

module.exports = {

methods: {

back2Top: function () {

var el = this.$el('goto-top')

dom.scrollToElement(el, { offset: 10 })

}

</script>

组件间通讯

自定义事件

Weex 支持自定义事件，这里有两个相关的设计：1，监听自定义事件；2，建立自定义事件。

监听自定义事件

每一个 Weex 的 ViewModel 都支持 this.$on(type, handler) 和 this.$off(type[, handler]) 的 API。type 是监听的自定义事件类型，handler 是事件处理函数。

当 handler 被触发时，会有一个事件对象 event 做为第一个参数被传入，事件对象的数据格式基于事件机制中提到的事件描述对象。

建立自定义事件

每一个 Weex 的 ViewModel 都支持 this.$emit(type, detail) 的 API，能够在当前 ViewModel 中产生一个自定义事件。type 是自定义事件的类型，detail 则是一个对该事件细节补充描述的 JSON 对象，会以 event.detail 的形式出如今处理此事件的函数中。

从子组件向父组件通讯

首先父组件要监听特定类型的自定义事件，而子组件可使用 this._parent 找到父组件，而后再调用 this._parent.$emit(type, detail) 方法，便可实现自下而上的通讯。例如：

从父组件向子组件通讯

同理，首先子组件要监听特定类型的自定义事件，而父组件可使用 this.$vm(id) “访问自定义子组件的上下文”，而后再调用 this.$vm(id).$emit(type, detail) 方法，便可实现自上而下的通讯。例如：

页面总体配置

在 Weex 中，你能够经过一些特殊的 <script> 进行页面总体配置。

注意事项：这些配置会表明页面总体，因此写在自定义子组件中是无效的，只有写在顶级 ViewModel 的 <sctipt> 中才会生效。

先举个例子：

module.exports = {

data: { x: 1, y: 2 }

}

</script>

downgrade: {

ios: {

os: '9', // all of 9.x.x

app: '~5.3.2',

framework: '^1.3', // all of 1.3.x

deviceModel: ['AAAA', 'BBBB']

android: {

os: '*', // all of version

app: '^5',

framework: '',

deviceModel: ''

}

</script>

{ y: 200 }

</script>

<script type="config">

开发者能够在顶级 ViewModel 中加入这样一段 <script>，以 JSON 格式描述页面总体的配置信息。

目前支持的配置信息只有 downgrade：用来从平台、应用等维度描述页面的降级规则。这样设计对于产品迭代最大的帮助是能够在高版本中使用 Weex，而在低版本中使用以前已有的渲染方式，这部分控制降级的细节须要 native 接入的时候进行相应的识别和具体操做。

将来这里会有更多的配置项出如今这里。

<script type="data">

开发者能够在顶级 ViewModel 中加入这样一段 <script>，以 JSON 格式额外配置顶级 ViewModel 的数据，它会覆盖顶级 ViewModel 数据中相应的字段。好比上述例子中，最终的顶级 ViewModel 中的数据为 { x: 1, y: 200 }。

Weex-语法笔记 一

Weex-语法笔记一