weex ios 集成
WEEX 是阿里推送的一款基于Node.js,輕量級(jí)的移動(dòng)端跨平臺(tái)動(dòng)態(tài)性技術(shù)解決方案,用于構(gòu)建原生的速度的跨平臺(tái)APP.
一、搭建WEEX環(huán)境
參考官方教程痘番，我們需要先安裝Node核无。在Mac上也可以通過Homebrew直接進(jìn)行安裝：brew install node。
接著我們需要安裝Weex CLI：sudo npm install -g weex-toolkit款违，并確保版本號(hào)大于0.1.0：
$ weex --version
info 0.3.4
驗(yàn)證是否安裝成功
終端執(zhí)行
weex
顯示
info
Usage: weex foo/bar/we_file_or_dir_path [options]
Usage: weex init
選項(xiàng)：
--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
[默認(rèn)值: "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 [默認(rèn)值: -1]
--wsport websocket listening port number ,default is 8082 [默認(rèn)值: -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 [默認(rèn)值: "127.0.0.1"]
for example & more information visit https://www.npmjs.com/package/weex-toolkit
二唐瀑、 安裝weex的編輯工具
如果使用Xcode編輯weex,沒有格式也沒有高亮和提示,我們需要使用一個(gè)編輯工具來快速的編寫weex的代碼.
1、 去sublime Text官網(wǎng)下載安裝sublineText3 然后雙擊安裝.
2插爹、下載 weex高亮腳本
3哄辣、 添加高亮腳本 sublime Text 導(dǎo)航欄里選擇Tools->Developer->New Syntax
4、下載好的weex高亮腳本文件打開,把內(nèi)容拷貝到新建的文件中,覆蓋原有的內(nèi)容. 然后cmd + s保存,把名稱命名為Plain we.sublime-syntax,請(qǐng)注意文件名稱必須命名Plain we.sublime-syntax,否則沒有高亮.
5赠尾、開啟weex語法高亮
三力穗、制作一個(gè)簡單的weex文件
我們來做一個(gè)列表,現(xiàn)在只包含一個(gè)Cell
,cell內(nèi)部只有一個(gè)圖片,圖片右邊是一個(gè)文本.
<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文件的后綴.
預(yù)覽
打開終端,cd到list.we所在的目錄,執(zhí)行
weex list.we
weex 工具會(huì)啟動(dòng)服務(wù)器,把list.we
轉(zhuǎn)換為html5的頁面,然后在瀏覽器中把它打開. 效果如圖
備注：初始化程序
初始化工程前需要先安裝 homebrew，然后按照下面步驟創(chuàng)建一個(gè)工程气嫁。
$ brew install node //通過brew安裝node
$ npm install -g weex-toolkit //通過node安裝 weex-toolkit
$ sudo gem install cocoapods //安裝iOS包管理工具 cocoapods
$ weex init //創(chuàng)建項(xiàng)目的文件
$ npm install //依賴安裝 package.json文件
$ npm run dev //項(xiàng)目編譯
$ npm run serve //啟動(dòng)輕量服務(wù)器
這時(shí)有可能提示
npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.
你需要再
npm install babel-core
這時(shí)当窗，打開瀏覽器，輸入http://127.0.0.1:8080, 就會(huì)看到這個(gè)項(xiàng)目的效果.
參考Weex學(xué)習(xí)與實(shí)踐(一):Weex,你需要知道的事
四寸宵、weex 語法簡介
一個(gè)WEEX文件由三部分組成,分別為template,style,script;其中template是骨架,類似于HTML標(biāo)簽,style負(fù)責(zé)渲染,類似于css, script負(fù)責(zé)交互事件,類似于javascript
-
template由標(biāo)簽組成,標(biāo)簽用于包裹內(nèi)容.weex包含兩種類型的標(biāo)簽,分別為開放標(biāo)簽和閉合標(biāo)簽 開放標(biāo)簽由一對(duì)標(biāo)簽組成如<text>內(nèi)容</text>閉合標(biāo)簽,只有一個(gè)標(biāo)簽如<image src="http://t.cn/RGE3AJt"/>標(biāo)簽上可以有多個(gè)屬性,不同的屬性代表不同的含義.比如:class屬性用于定義標(biāo)簽的樣式.onclick屬性讓標(biāo)簽響應(yīng)點(diǎn)擊事件.
-
Style用于描述標(biāo)簽如何展示,語法與css類似,weex支持大部分css的特征,比如margin,padding,fixed等,更令人興奮的是weex支持flexbox的布局.
-
Script用于個(gè)標(biāo)簽設(shè)置數(shù)據(jù)和添加邏輯,讓我們更加簡單的綁定本地或遠(yuǎn)程的數(shù)據(jù)和更新標(biāo)簽. 我們可以定義函數(shù)來處理tag上的事件.Script類似于通用的CommonJS的模型.
更多weex語法,參考Syntax chapter 官網(wǎng)
