weex_快速入門

文章轉自：http://www.jianshu.com/p/576ee487df6e

WEEX 是阿裡推送的一款基于Node.js,輕量級的移動端跨平台動态性技術解決方案,用于建構原生的速度的跨平台APP.

一、搭建WEEX環境

參考官方教程，我們需要先安裝Node。在Mac上也可以通過Homebrew直接進行安裝：

brew install node

。

接着我們需要安裝Weex CLI：

sudo npm install -g weex-toolkit

，并確定版本号大于0.1.0：

$ weex --version
info                 

驗證是否安裝成功

終端執行

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                

二、 安裝weex的編輯工具

如果使用Xcode編輯weex,沒有格式也沒有高亮和提示,我們需要使用一個編輯工具來快速的編寫weex的代碼.

1、 去sublime Text官網下載下傳安裝sublineText3 然後輕按兩下安裝.

2、下載下傳 weex高亮腳本

3、 添加高亮腳本 sublime Text 導航欄裡選擇Tools->Developer->New Syntax

321489-43d99a2259256f03.png

4、下載下傳好的weex高亮腳本檔案打開,把内容拷貝到建立的檔案中,覆寫原有的内容. 然後cmd + s儲存,把名稱命名為

Plain we.sublime-syntax

,請注意檔案名稱必須命名

Plain we.sublime-syntax

,否則沒有高亮.

5、開啟weex文法高亮

321489-235f57f4394dc969.png

三、制作一個簡單的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: ; margin-left: ; flex-direction: row; }
  .thumb { width: ; height: ; }
  .title { text-align: center; flex: ; color: grey; font-size: ; }
</style>
           

把上面的文本拷貝到編譯器中,cmd + s 儲存你想儲存的位置,命名為list.we,其中

we

是

weex

檔案的字尾.

預覽

打開終端,cd到list.we所在的目錄,執行

weex list.we

weex 工具會啟動伺服器,把list.we

轉換為html5的頁面,然後在浏覽器中把它打開. 效果如圖

321489-498909239d153a0e.png

四、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 官網