WEEX，一次撰寫，多端運行

最新體驗了下WEEX，這是一個使用js語法編寫客戶端程序的框架。我們可以使用vue.js編寫代碼。
vue語法
demo
效果展示：

這個展示效果app使用的是我本地的tomcat提供服務，服務端源碼：碼雲
- 首先 web 開發體驗在各端當中是相同的。包括語法設計和工程鏈路。
- 其次，Weex 的組件、模塊設計都是 iOS、Android、Web 的開發者共同討論出來的，有一定的通用性和普遍性。
- Weex 開發同一份代碼，可以在不同的端上分別執行，避免了多端的重複研發成本。

下面進入正題：

環境搭建

• 客戶端原生: 只需要在手機上安裝一個app即可，調試運行可以通過掃描二維碼非常方便。playground
• node.js: 官網，
  首頁上就有下載鏈接。node安裝應該也是非常輕鬆
• WEEX:
  官網guide
  官網github
  demo和源碼

首先安裝weex-toolkit

$ npm install -g weex-toolkit

如果npm遭遇網絡問題，可以使用淘寶的 cnpm 鏡像：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit

初始化 weex 項目

$ weex init weex-bobby

這樣在當前文件夾下會生成一個weex-bobby工程，進入weex-bobby文件夾安裝項目依賴

$ npm install 

這樣環境基本就可以正常使用了。

項目運行

首先是Hello World

在weex-bobby文件夾下，會有一個src文件夾，這個文件夾就是源代碼的目錄，新建的項目工程目錄中會有一個index.vue文件。

<template>
    <text>Hello World</text>
</template>

template標籤中寫的是頁面佈局
script標籤控制邏輯
style標籤控制樣式

第一個文件有了，然後在weex-bobby目錄下輸入或直接點擊start.bat

$ npm run serve

頁面就啓動了，網頁會自動打開，想在手機上看到效果可以輸入

weex src/index.vue

頁面啓動後，還會生成二維碼，使用playground掃一下即可在真機上看到效果。

運行demo

demo源碼的地址在文章開頭，直接把源代碼放到src目錄就是這麼簡單。這裏我們需要對整個工程打包

$ weex src --entry src/index.vue

同樣的，手機掃一掃即可看到效果

如果想直接打包生成js源碼發在手機上運行不通過網絡，使用下面的命令

$ weex compile src dist

運行後，dist文件夾下就是項目的打包後的文件，我們直接把dist文件夾下的所有內容全部複製到android工程中的assets目錄下，然後重新運行playground的項目，playground項目android源碼在demo和源碼

存在的未知問題：

使用weex src --entry src/index.vue運行項目後tabbar中單頁標籤中的style樣式會解析失敗，但是通過解析打包後的js文件就可以加載style樣式，目前原因不知道。
所以demo項目如果想通過二維碼直接在真機上看到效果使用一下2個命令

$ weex src --entry src/index.vue

然後在一個cmd中

$ weex compile src .weex_tmp

更新第一步生成的js源碼