Weex入門

官方文檔

文檔
iOS集成

開發環境配置

• 安裝node
• 安裝weex開發工具

sudo npm install -g weex-toolkit

• 驗證 weex-toolkit是否安裝
  輸入weex --version或者weex,得到下圖結果，就說明ok了～

weex.png

Weex Playground

• Weex Android Playground下載地址
• Weex iOS Playground(需要自己編譯運行,操作步驟參照README.md)

創建第一個Weex文件

• 創建Weex文件(此處使用first命名)

weex create first

• 打開.we文件 (推薦使用Atom、Sublim Text等IDE打開,再給IDE添加Weex的代碼提示插件)

• 編輯first.we內容改為

<template>
  <div class="container"  >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>
       <text class="title">JavaScript</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3uo9"></image>
       <text class="title">Java</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE31hq"></image>
       <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {width: 200; height: 200; }
  .title {text-align: center ; flex: 1; color: grey; font-size: 50; }
</style>

• 生成對應二維碼

weex first.we --qr

• 使用手機安裝的Playground掃描二維碼(請保證電腦和手機同一網絡)

創建第一個Weex工程(較老版本的 weex-toolkit，不能使用weex init)

• 創建一個目錄存放文件

mkdir FirstWeex

• 初始化Weex工程

weex init

輸出如下(項目名默認使用當前目錄名)：

prompt: Project Name:  (FirstWeex) 
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/main.we created.
file: webpack.config.js created.

• 添加依賴(科學上網,稍等幾分鐘就好)

npm install

• 運行服務

npm run serve

run_serve.png

• 打開瀏覽器，輸入 http://localhost:8080/,注意: 端口號與run_serve.png中框起來部分一致。

瀏覽器預覽.png