環(huán)境安裝
- 安裝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
快速上手
基本知識(shí)
- 用了vuejs框架
-
<template>、<style>、<script>分別對(duì)應(yīng)于Web中的HTML，CSS（<style>標(biāo)簽），JavaScript（<script>標(biāo)簽） -
Weex支持通過(guò)style標(biāo)簽來(lái)設(shè)定樣式，也支持內(nèi)聯(lián)樣式風(fēng)格。 對(duì)于數(shù)值，無(wú)需添加任何單位（包括px、em、rem等），這是建議的寫(xiě)法。 -
<template>只支持一個(gè)根節(jié)點(diǎn)，多個(gè)根節(jié)點(diǎn)將無(wú)法被Weex正常的識(shí)別和處理。根節(jié)點(diǎn)有<div>、<scroller>、<list>三種。 -
Weex使用mustache的語(yǔ)法({{...}})來(lái)對(duì)<template>中的模板和<script>`里的數(shù)據(jù)進(jìn)行綁定. 一旦數(shù)據(jù)額模板綁定了, 數(shù)據(jù)上的修改會(huì)實(shí)時(shí)的在模板內(nèi)容中生效。 - 以
on...開(kāi)頭的就是用于綁定事件的特性，特性名中on之后的部分就是事件的類型，特性的值就是處理該事件的函數(shù)名。函數(shù)名外不需要添加mustache語(yǔ)法中的大括號(hào)。 -
if特性能夠通過(guò)特性值的真假來(lái)控制組建是否顯示，且mustache大括號(hào)可以省略。repeat特性可以根據(jù)一組數(shù)組數(shù)據(jù)重復(fù)生成相同或相似的順序排列的界面。if不能用在<template>的根組件上，否則將無(wú)法被Weex正常的識(shí)別和處理。在repeat特性值中，如果沒(méi)有指定索引值的形參，則可以通過(guò)綁定形參$index來(lái)展示數(shù)組項(xiàng)目的索引值。 -
static特性可以一次性把數(shù)據(jù)設(shè)置到模板相應(yīng)的位置上，但是今后不會(huì)隨著數(shù)據(jù)的變化而更新。 -
CSS樣式可以理解為一系列的鍵值對(duì)，其中的每一對(duì)描述了一個(gè)特定的樣式。鍵和值之間由冒號(hào):進(jìn)行分隔，每對(duì)鍵值之間由分號(hào);進(jìn)行分隔。<template>標(biāo)簽中的class特性值用來(lái)匹配<style>樣式表中的一個(gè)或多個(gè)class名，多個(gè)class name之間由空格分隔。weex只是CSS其中一個(gè)子集。 - 為了簡(jiǎn)化頁(yè)面設(shè)計(jì)和實(shí)現(xiàn)，屏幕的寬度統(tǒng)一為
750像素，不同設(shè)備屏幕都會(huì)按照比例轉(zhuǎn)化為這一尺寸進(jìn)行長(zhǎng)度計(jì)算。750代表全屏寬度，大于750的數(shù)值也是全屏。 - 當(dāng)一次事件被觸發(fā)的時(shí)候，都會(huì)產(chǎn)生一個(gè)事件描述對(duì)象，該對(duì)象會(huì)默認(rèn)作為第一個(gè)參數(shù)傳遞給事件處理函數(shù)，或以
$event形參的方式出現(xiàn)在內(nèi)聯(lián)事件處理函數(shù)中。對(duì)象至少包含type、target、timestamp這幾個(gè)字段 - 默認(rèn)情況下，除了
<cell>組件的默認(rèn)渲染過(guò)程是tree模式，其它組件都默認(rèn)按照node模式進(jìn)行渲染 - 組件和使用者必須在同目錄下才能自動(dòng)建立依賴關(guān)系。
this有各自獨(dú)立的上下文，不會(huì)混淆。組件以標(biāo)簽的方式存在，可以嵌套。不同目錄的組件，在<script>標(biāo)簽中通過(guò)require導(dǎo)入。<element>可以在文件內(nèi)部定義子組件。 - 用
id標(biāo)識(shí)組件。this.$el(id)獲取組件（被設(shè)置的對(duì)象）。this.$vm(id)獲取組件上下文（訪問(wèn)組件方法）。this.$parent獲取父級(jí)上下文。 -
this.$on(type, handler)監(jiān)聽(tīng)事件。this.$off(type)取消監(jiān)聽(tīng)。type是監(jiān)聽(tīng)的自定義事件類型，handler是事件處理函數(shù)。this.$emit(type, detail)產(chǎn)生事件。detail則是一個(gè)對(duì)該事件細(xì)節(jié)補(bǔ)充描述的JSON對(duì)象，會(huì)以event.detail的形式出現(xiàn)在處理此事件的函數(shù)中。 - 頁(yè)面配置
<script type="config">，目前支持downgrade。數(shù)據(jù)<script type="data">
