Weex入坑筆記

Weex入坑筆記

第一步：安裝依賴

1. Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和除錯。首先，你需要 Node.js 和 Weex CLi。
2. 安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網 下載可執行程式直接安裝即可。
3. 對於 Mac，可以使用Homebrew 進行安裝：

brew install node

• 安裝完成後，可以使用以下命令檢測是否安裝成功：

$ node -v
v6.11.3
$ npm -v
3.10.10

安裝了 Node.js 環境，npm 包管理工具也隨之安裝了。因此，直接使用 npm 來安裝 weex-toolkit。

• 使用 sudo 關鍵字進行安裝

$ sudo cnpm install -g weex-toolkit

• 安裝結束後你可以直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令列工具各引數：

第二步：初始化

• 然後初始化 Weex 專案：

$ weex create awesome-project

• 執行完命令後，在 awesome-project 目錄中就建立了一個使用 Weex 和 Vue 的模板專案。

第三步：開發

• 之後我們進入專案所在路徑，weex-toolkit 已經為我們生成了標準專案結構。

• 在 package.json 中，已經配置好了幾個常用的 npm script，分別是：

  build: 原始碼打包，生成 JS Bundle
  dev: webpack watch 模式，方便開發
  serve: 開啟HotReload伺服器，程式碼改動的將會實時同步到網頁中

• 我們先通過 npm install 安裝專案依賴。之後執行根目錄下的 npm run dev & npm run serve 開啟 watch 模式和靜態伺服器。

• 然後自動開啟瀏覽器，即可看到 weex h5 頁面。

• 初始化時已經為我們建立了基本的示例，我們可以在 src/index.vue 中檢視。

• 程式碼如下所示：

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
    <text class="desc">Now, let's use vue to build your weex app.</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
  .logo { width: 360px; height: 156px; }
  .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
  export default {
    data: {
      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

第四步：編譯和執行

1. 預設情況下 weex create 命令並不初始化 iOS 和 Android 專案，你可以通過執行 weex platform add 來新增特定平臺的專案。

weex platform add ios
weex platform add android

2. 由於網路環境的不同，安裝過程可能需要一些時間，請耐心等待。如果安裝失敗，請確保自己的網路環境暢通。

3. 為了能在本地機器上開啟 Android 和 iOS 專案，你應該配置好客戶端的開發環境。對於 iOS，你應該安裝並且配置好 Xcode。對於 Android，你應該安裝並且配置好 Android Studio。當開發環境準備就緒後，執行下面的命令，可以在模擬器或真實裝置上啟動應用：

weex run ios
weex run android
weex run web

第五步：除錯

• weex-toolkit 還提供了強大的除錯功能，只需要執行：

weex debug

• 這條命令會啟動一個除錯服務，並且在 Chrome （目前只支援基於 V8 引擎的桌面瀏覽器） 中開啟除錯頁面。詳細用法請參考 weex-toolkit 的文件。