WEEX 是阿里推送的一款基于Node.js,輕量級的移動端跨平臺動態性技術解決方案,用于構建原生的速度的跨平臺APP.
1. 搭建WEEX環境
1.1 首先下載安裝Node.js,MAC版下載
1.2 安裝 weex-toolkit(WEEX工具包)
終端執行
sudo npm install -g weex-toolkit
執行后需要輸入你電腦的密碼.
1.3 驗證是否安裝成功
終端執行
weex
顯示
info
Usage: weex foo/bar/we_file_or_dir_path [options]
Usage: weex init
選項：
--qr display QR code for native runtime, default action [boolean]
-o, --output transform weex we file to JS Bundle, output path must specified
(single JS bundle file or dir)
[for create sub cmd]it specified we file output path
[默認值: "no JSBundle output"]
--watch using with -o , watch input path , auto run transform if change
happen
-s, --server start a http file server, weex .we file will be transforme to JS
bundle on the server , specify local root path using the option
[string]
--port http listening port number ,default is 8081 [默認值: -1]
--wsport websocket listening port number ,default is 8082 [默認值: -1]
--np do not open preview browser automatic [boolean]
-f, --force [for create sub cmd]force to replace exsisting file(s) [boolean]
--help 顯示幫助信息 [boolean]
-h, --host [默認值: "127.0.0.1"]
for example & more information visit https://www.npmjs.com/package/weex-toolkit
表明安裝成功.
2. 安裝weex的編輯工具
如果使用Xcode編輯weex,沒有格式也沒有高亮和提示,我們需要使用一個編輯工具來快速的編寫weex的代碼.
2.1 去sublime Text官網下載安裝sublineText3 然后雙擊安裝.
2.2 下載 weex高亮腳本
2.3 添加高亮腳本 sublime Text 導航欄里選擇Tools->Developer->New Syntax
2.4 下載好的weex高亮腳本文件打開,把內容拷貝到新建的文件中,覆蓋原有的內容. 然后cmd + s保存,把名稱命名為Plain we.sublime-syntax,請注意文件名稱必須命名為Plain we.sublime-syntax,否則沒有高亮.
2.5 開啟weex語法高亮
3. 來一個簡單的Demo玩玩.
3.1 制作一個簡單的weex文件
我們來做一個列表,現在只包含一個Cell,cell內部只有一個圖片,圖片右邊是一個文本.
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text>
</div>
</div>
</template>
<style>
.cell { margin-top: 8; margin-left: 8; flex-direction: row; }
.thumb { width: 100; height: 100; }
.title { text-align: center; flex: 1; color: grey; font-size: 25; }
</style>
把上面的文本拷貝到編譯器中,cmd + s 保存你想保存的位置,命名為list.we,其中we是weex文件的后綴.
3.2 預覽
打開終端,cd 到 list.we 所在的目錄,執行
weex list.we
weex 工具會啟動服務器,把list.we轉換為html5的頁面,然后在瀏覽器中把它打開. 效果如圖
你可以改變上面的元素來查看不同的效果.
3.2 weex 語法簡介
一個WEEX文件由三部分組成,分別為template,style,script;其中template是骨架,類似于HTML標簽,style負責渲染,類似于css, script負責交互事件,類似于javascript
template由標簽組成,標簽用于包裹內容.weex包含兩種類型的標簽,分別為開放標簽和閉合標簽開放標簽由一對標簽組成如<text>內容</text>閉合標簽,只有一個標簽如<image src="http://t.cn/RGE3AJt"/>標簽上可以有多個屬性,不同的屬性代表不同的含義.比如:class屬性用于定義標簽的樣式.onclick屬性讓標簽響應點擊事件.Style用于描述標簽如何展示,語法與css類似,weex支持大部分css的特征,比如margin,padding,fixed等,更令人興奮的是weex支持flexbox的布局.Script用于個標簽設置數據和添加邏輯,讓我們更加簡單的綁定本地或遠程的數據和更新標簽. 我們可以定義函數來處理tag上的事件.Script類似于通用的CommonJS的模型.
更多weex語法,參考Syntax chapter
