环境安装
- 安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - 安装Node.js
brew install node - 安装
weex-toolkit,使用淘宝的npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g weex-toolkit
快速上手
基本知识
- 用了vuejs框架
-
<template>、<style>、<script>分别对应于Web中的HTML,CSS(<style>标签),JavaScript(<script>标签) -
Weex支持通过style标签来设定样式,也支持内联样式风格。 对于数值,无需添加任何单位(包括px、em、rem等),这是建议的写法。 -
<template>只支持一个根节点,多个根节点将无法被Weex正常的识别和处理。根节点有<div>、<scroller>、<list>三种。 -
Weex使用mustache的语法({{...}})来对<template>中的模板和<script>`里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效。 - 以
on...开头的就是用于绑定事件的特性,特性名中on之后的部分就是事件的类型,特性的值就是处理该事件的函数名。函数名外不需要添加mustache语法中的大括号。 -
if特性能够通过特性值的真假来控制组建是否显示,且mustache大括号可以省略。repeat特性可以根据一组数组数据重复生成相同或相似的顺序排列的界面。if不能用在<template>的根组件上,否则将无法被Weex正常的识别和处理。在repeat特性值中,如果没有指定索引值的形参,则可以通过绑定形参$index来展示数组项目的索引值。 -
static特性可以一次性把数据设置到模板相应的位置上,但是今后不会随着数据的变化而更新。 -
CSS样式可以理解为一系列的键值对,其中的每一对描述了一个特定的样式。键和值之间由冒号:进行分隔,每对键值之间由分号;进行分隔。<template>标签中的class特性值用来匹配<style>样式表中的一个或多个class名,多个class name之间由空格分隔。weex只是CSS其中一个子集。 - 为了简化页面设计和实现,屏幕的宽度统一为
750像素,不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。750代表全屏宽度,大于750的数值也是全屏。 - 当一次事件被触发的时候,都会产生一个事件描述对象,该对象会默认作为第一个参数传递给事件处理函数,或以
$event形参的方式出现在内联事件处理函数中。对象至少包含type、target、timestamp这几个字段 - 默认情况下,除了
<cell>组件的默认渲染过程是tree模式,其它组件都默认按照node模式进行渲染 - 组件和使用者必须在同目录下才能自动建立依赖关系。
this有各自独立的上下文,不会混淆。组件以标签的方式存在,可以嵌套。不同目录的组件,在<script>标签中通过require导入。<element>可以在文件内部定义子组件。 - 用
id标识组件。this.$el(id)获取组件(被设置的对象)。this.$vm(id)获取组件上下文(访问组件方法)。this.$parent获取父级上下文。 -
this.$on(type, handler)监听事件。this.$off(type)取消监听。type是监听的自定义事件类型,handler是事件处理函数。this.$emit(type, detail)产生事件。detail则是一个对该事件细节补充描述的JSON对象,会以event.detail的形式出现在处理此事件的函数中。 - 页面配置
<script type="config">,目前支持downgrade。数据<script type="data">