WEEX系列 個人第一個WEEX DEMO

和一步一塊兒聊聊WEEX

我剛學 WEEX 的時候，環境就搭建了很久，你們若也遇到了一些坑能夠去 weex-toolkit 的 github上提 issue。這個也是我遇到困難的解決方案。那麼就讓咱們來實現第一個 weex 程序吧。

建立項目

weex create first-demo
npm install

咱們先了解 src 是咱們業務代碼存放的地方，webpack.config.js 是 webpack 的配置文件將 vue 文件打包成 weex 能夠執行的 JS Bundle。web能夠簡單理解爲是 h5個性化的代碼工做區。platforms 是原生 android 代碼或者 ios 代碼的存放位置。

寫兩行代碼試試

<template>
  <div>
    <text>Hello World</text>
  </div>
</template>
<style>
</style>
<script>
  export default {
  }
</script>

上述代碼是 weex文件的模板。咱們在 template中書寫標籤，在 style 中完成佈局和樣式，在 script 中實現咱們的業務邏輯。
在項目的根目錄下執行npm start，執行該命令咱們能夠預覽 h5的效果，而且是熱更新的。

使用 weex-toolkit 進行調試預覽

雖說 weex 號稱本身三端兼容，可是在效果呈現上仍是有必定的差別的，有時在瀏覽器上有效果，但在端上是無效的，反之亦然。所以咱們也須要使用 playground校驗原生應用的效果。 weex、weex debug weex run android目前我接觸最多的就是上述三個命令。

weex調試單個文件（沒法熱更新）

weex '文件.vue|we' 使用 weex 進行預覽時文件的後綴只能是 vue 或者 we。這種形式和dotwe的效果是同樣的。

weex debug 進行調試

調試單個文件, 文件後綴不限。
weex debug filename

執行成功後，會自動打開 chrome 瀏覽器，屏幕上生成兩個二維碼，先用 playground 掃一掃左邊，在掃一下右面的。注意： 手機和電腦必須鏈接的是同一網絡進入調試狀態實現的是熱更新的效果。每次編寫代碼後只要刷新下瀏覽器或者手機便可。

調試整個項目(操做同上)
weex debug your/we/path -e index.we

使用真機進行調試

weex platform add android
weex run android
手機有問題沒法向你們演示。

總結

前三篇文章帶着你們搭建weex開發環境，介紹常見命令的使用。後期的文章主要圍繞 weex 框架及 與vue、vuex、router的結合使用。最後會結合根據所學的基礎知識，一塊兒開發一個應用。

歡迎你們指正批評、或留言。