跨平台開發之阿里Weex框架環境搭建（一）

 

愛編程愛分享，原創文章，轉載請注明出處，謝謝！https://i.cnblogs.com/EditPosts.aspx?postid=5995122

 

一、介紹

Weex是阿里今年6月份推出的跨平台解決方案，6月底正式開源。官網 https://alibaba.github.io/weex/

1、官方支持iOS、Android、HTML5.

2、Write Once, Run Everywhere。一次編寫可生成三平台代碼。

3、DSL模板學習超簡單，直接寫HTML、CSS、JS。這意味着可以直接用現有編輯器和IDE的代碼補全、提示、檢查等功能。

4、輕量級、可擴展、高性能。

5、集成花樣多，可在HTML5頁面嵌入，也可嵌在原生UI中。

 

二、環境搭建

1、安裝node.js環境

下載https://nodejs.org/en/download/

安裝完成后，打開cmd  輸入node --version命令查看node版本

 

2、安裝命令行工具weex-toolkit

輸入命令 npm install -g weex-toolkit

npm是nodejs一個非常流行的管理工具，可以安裝基於nodejs開發的任何模塊包，-g表示把weex-toolkit安裝到全局模塊中，成功后我們可以在

　　nodejs\node_modules下面找到weex-toolkit這個包；

　　注意：node_modules這個針對nodejs本身和基於nodejs開發項目都會存在，所以存在全局局部之分，不帶-g參數則表示在當前項目的node_modules目錄中添加模塊包

查看是否安裝成功，輸入命令weex，出現如下圖表示安裝成功

查看weex版本  ，輸入weex -version

3、編譯測試

將下面代碼拷貝到新建文件中，並以test_list.we文件命令

<template>
<div class="container">
<div class="cell">
<image class="thumb"src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text></div></div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>

然后運行終端，進入test_list.we文件所在目錄，輸入weex tech_list.we
如果成功，會在瀏覽器中打開一個新的頁面如下，表示運行成功

 

我們試着修改代碼，保存會發現我們頁面內容同時也更新了，這就是hot reloaded  

終端也能看到

 

4、手機運行APP

終端輸入以下命令會生成一個二維碼 weex tech_list.we --qr -h {ip or hostname}   這里-h指定本地ip地址或者主機名 ，我這里填寫我本地的ip如下：

weex tech_list.we --qr -h 192.168.0.102

 

最后我們手機安裝playground.apk（下載地址：https://alibaba.github.io/weex/download.html），打開二維碼掃一掃運行即可