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

 

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

 

1、介紹

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

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

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

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

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

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

 

2、環境搭建

一、安裝node.js環境

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

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

 

二、安裝命令行工具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

三、編譯測試

將下面代碼拷貝到新建文件中，並以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

終端也能看到

 

四、手機運行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），打開二維碼掃一掃運行便可