WEEX環境搭建

轉載請註明出處

本文出自Hansion的博客

WEEX官方網址

一、安裝node.js

node.js是weex編譯、打包用的基礎工具

node.js下載地址

安裝完成後在cmd中輸入

node -v

npm -v

如果都分別輸出了版本號，就代表node.js正確安裝了。如果不顯示，可以嘗試配置環境變量

如果以前安裝過node.js，要注意npm的版本號要在5.0.0以上，如果不在，可以運行以下命令升級至最新版本：

npm install npm@latest -g

二、安裝weex-toolkit

安裝weex-toolkit 的腳手架工具來輔助開發和調試

爲了節省時間，國內開發者使用淘寶npm鏡像cnpm來安裝weex-toolkit 

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

安裝成功後，輸入weex命令驗證是否安裝成功，它會顯示 weex 命令行工具各參數

三、創建模板項目並運行

weex create awesome-project

執行完命令後，在當前目錄就生成了一個awesome-project項目，它是使用 Weex 和 Vue 的模板項目

我們進入該目錄中

cd awesome-project

安裝項目依賴

npm install

開啓靜態服務器

npm run serve

這時會自動彈出網頁，打開默認的 weex h5 頁面http://localhost:8081/index.html
（端口號可能略有不同）

其中，需要注意的是npm run XXX是執行配置在package.json中的腳本，比如：

"scripts": {
        "start": "npm run serve",
        "build": "webpack",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "webpack --config webpack.config.js --watch -d",
        "serve": "webpack-dev-server --config webpack.dev.js --watch --open"
    }

我們剛纔所輸入的npm run serve，實際上就相當於輸入了webpack-dev-server --config webpack.dev.js --watch --open，就像是一些命令的快捷方式，免去每次都要輸入很長的的命令。

打開頁面的示例代碼可以在 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>

我們可以將它複製到Playground中運行 http://dotwe.org/vue

然後使用playground app掃描生成的二維碼，查看在手機上的效果

四、其他錯誤：

如果遇到了ERR! Error: listen EACCES錯誤，可能是端口被佔用的原因。

info Fri Jan 12 2018 16:24:03 GMT+0800 (中國標準時間)WebSocket  is listening on port 8082

info Fri Jan 12 2018 16:24:03 GMT+0800 (中國標準時間)http  is listening on port 8081

info http://192.168.2.35:8081/?hot-reload_controller&page=hello.js&loader=xhr&wsport=8082&type=we

ERR! Error: listen EACCES 0.0.0.0:8082

我們打開控制檯，輸入

netstat -ano

然後搜索報錯的端口號，看是哪個pid的進程佔用了他，我這裏是pid=4

在任務管理器中，我們看到pid=4的進程，其實是system進程，其對應的進程描述是NT kernel & system

解決：

運行命令提示符（管理員模式），輸入：

net stop http

按y確定

然後輸入以下命令即可解決

Sc config http start= disabled