「工欲善其事，必先利其器」，學習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

如果使用上面的命令安裝，使用的是從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所需要的原生運行環境配置正確，並且需要先啟動模擬器或連接上移動設備再運行啟動命令。

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

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


推薦閱讀：
查看原文 >>
相关文章