Weex快速上手

「工欲善其事，必先利其器」，學習Weex以前須要先搭建好本地的開發環境，若是隻是想簡單的體驗下Weex的魅力，可使用Weex提供的dotWe在線運行環境，地址爲「dotwe.org/vue」。

安裝依賴

Weex官方提供weex-toolkit的腳手架工具來輔助開發和調試。不過須要先安裝Node.js和Weex Cli相關的環境。

安裝Node.js

安裝Node.js有多種方式，最簡單的方式是直接從Node.js官網下載可執行安裝程序直接安裝便可。若是是Mac環境，還可使用Homebrew進行安裝，安裝命令以下：

brew install node
複製代碼

安裝完成以後，可使用下面的命令來檢測是否安裝成功。

$ node -v
v6.11.3
$ npm -v
3.10.10
複製代碼

一般，安裝Node.js軟件包後，npm包管理工具也會隨之安裝。所以，接下來能夠直接使用npm來安裝weex-toolkit工具。

npm install -g weex-toolkit
複製代碼

若是要升級weex-toolkit，則可使用下面的命令：

weex update weex-devtool@latest    //@後標註版本後，latest表示最新版本
複製代碼

若是是國內開發者，還可使用淘寶的npm鏡像來安裝weex-toolkit，涉及到的安裝命令以下：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit
複製代碼

安裝結束後，能夠直接使用weex命令來驗證是否安裝成功，若是安裝成功會顯示weex命令行工具各參數，以下圖所示。

安裝weexpack

weexpack是weex新一代的工程開發套件，是基於weex快速搭建應用原型的利器。使用weexpack能夠快速的幫助開發者經過命令行建立weex工程和插件工程，添加相應平臺的weex 應用模版，weexpack還支持快速打包weex 應用並安裝到手機運行，並建立weex插件模版併發布插件到weex應用市場。安裝weexpack的命令以下：

npm install -g weexpack
複製代碼

安裝Weektools

weex-toolkit是官方提供的一個腳手架命令行工具，可使用它進行Weex 項目的建立、調試以及打包等操做。weex-toolkit從1.0.1版本以後纔開始支持初始化Vue項目，因此使用時請注意weex-toolki的版本。weex-toolkit的安裝命令以下：

npm install -g weex-toolkit
複製代碼

若是使用上面的命令安裝，使用的是從https://registry.npmjs.org獲取的安裝源，因此對於國內用戶來講，最好選擇從阿里的鏡像去下載，安裝時須要執行以下的一些命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘寶鏡像
npm install -g weex-toolkit
複製代碼

安裝完成以後，可使用weex -v或者weex命令來驗證是否安裝成功。

安裝Android環境

若是須要支持Android平臺則須要配置Android開發環境：安裝Java相關環境，安裝Android Studio及Android SDK。在安裝編譯Android項目時須要保證Android build-tool的版本爲23.0.2以上。

安裝iOS環境

若是須要支持iOS平臺則須要配置iOS開發環境：安裝Xcode、cocoaPods及其相關環境。其中，Xcode是Apple 公司提供的集成開發工具，可使用它開發macOS和iOS應用程序，而CocoaPods則是負責iOS項目管理的第三方開源庫的工具，合理的使用CocoaPods能夠提升程序的開發效率。

建立項目

接下來，使用Weex提供的create命令初始化一個Weex項目。

weex create weexdemo
複製代碼

執行完上述命令後，在工程weexdemo目錄下就會建立一個使用Weex或Vue模板建立的項目，工程目錄結構以下。

WeexProject    
├── README.md         //項目便籤
├── android.config.json   //Android工程配置
├── configs             //weex配置         
├── ios.config.json       //ios工程配置
├── package-lock.json    
├── package.json        //項目npm包管理
├── platforms           //平臺模版目錄 
│   ├── ios             //ios原平生臺目錄
│   └── android         //android原平生臺目錄
├── plugins             //插件下載目錄 
│   └── README.md 
├── src                //業務源碼目錄
│   └── index.we       
├── tools              //工具目錄
│   └── webpack.config.plugin.js 
├── web              //web平臺目錄
│   ├── index.html 
└── webpack.config.js    // webpack模塊打包配置目錄
複製代碼

不過，經過create命令建立的weex工程默認是不包含iOS和Android原生工程模版的。若是須要添加原生工程模板，能夠切換到appName目錄後再安裝依賴，模版默認會被安裝到工程的platforms目錄下，官方提供的模版默認支持weex bundle調試和插件機制。安裝命令以下：

weexpack platform add ios   //安裝ios模板
weexpack platform add android    //安裝android模板
複製代碼

安裝模版完成以後，會在工程目錄下增長以下的模版目錄。目錄結構以下：

├── platforms 
│   ├── ios
│   └── android
複製代碼

當須要用到混合開發的時候，就可使用原生開發環境打開Android或iOS項目進行原生功能的開發。

開發與運行

使用create命令建立weex項目時，weex-toolkit工具已經爲咱們生成了標準項目結構。此時，打開初始化的Weex項目並定位到「/src/index.vue」，該頁面是Weex的默認首頁。代碼內容以下

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

複製代碼

運行weex項目前，須要先使用命令「npm install」來安裝項目的依賴，能夠在package.json文件中查看與項目相關的依賴。而後，在項目的根目錄下使用命令「npm run dev & npm run serve」開啓watch模式和靜態服務器。 打開瀏覽器，輸入「http://localhost:8081/index.html」便可開啓一個預覽頁面，使用用Weex 提供的playground app掃描生成的二維碼便可在在手機上看到頁面在手機上的渲染效果，以下圖所示。

若是須要在模擬器或真機設備上運行項目，可使用下面的命令來啓動應用程序，而且在運行客戶端命令前請先啓動服務端服務。

weex run ios        //在ios設備上運行
weex run android    //Android設備上運行
複製代碼

須要注意的是，在運行啓動命令前，請確保Android、iOS所須要的原生運行環境配置正確，而且須要先啓動模擬器或鏈接上移動設備再運行啓動命令。

執行啓動命令後，若是項目編譯過程沒有出現任何的錯誤提示，系統會在運行時要求用戶選擇一個安裝的設備，以下圖所示。

若是沒有任何錯誤，將會看到如系下圖所示的運行效果。