Weex開源測試之環境搭建，weex未來展望。

Dusan_杜小菜發表於2016-06-17

2018年最新weex實戰，戳這裡：

https://blog.csdn.net/dzsw0117/article/details/79270643
專案github地址，直接看效果:star，fork一下吧！

https://github.com/duqian291902259/weex-demo-dusan

最近一直在研究移動終端的跨平臺解決方案。ReactNative對Native開發人員來說，學習成本有點高，weex相對有優勢。weex內測以來，兩個月內已經有5000＋開發者加入weex專案的測試了。我通過阿里weex團隊成員，獲得了，github內測資格，有許可權訪問weex倉庫，下載了原始碼，就一起研究下吧。
weex環境配置還是比較簡單方便的，推薦mac開發，有前端基礎上手更快。
我諮詢了阿里－鬼道，新手學RN還是Weex，有何區別，他給我發了這樣一條資訊，看看它與React Native的比較：

挺好的問題：
1. DSL 語法差異很大，可能 weex 更輕量一些，上手快一些；
2. Native 效能 weex 還是有一些優勢的，包也更小。
通過內測資格

下面是安裝weex開發環境。可以參照官方文件：weex tutorial

1，安裝官方demo：playground.apk

下載apk檔案，Weex Playground
執行命令，，安裝後的demo如圖：

adb install -r /Users/duqian/Desktop/Learning/Weex/playground.apk

安裝後的demo

2，安裝命令列工具： weex-toolkit

$ npm install -g weex-toolkit

前提是要有node環境，如果沒有安裝：

brew install node

brew沒有安裝，請先安裝Homebrew。如何安裝，可以參照我的博文：
http://blog.csdn.net/dzsw0117/article/details/51260020：Mac下安裝常用開發工具

3.編譯測試

將下面的程式碼寫成demo，命名tech_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>

進入tech_list.we所在的檔案目錄，執行終端命令就可以在瀏覽器看到頁面效果了：

weex tech_list.we

如果ok，會開啟瀏覽器跳轉到渲染出來的頁面。
DuQian-MBP:~ duqian$ weex /Users/duqian/Desktop/Learning/Weex/demo/tech_list.we
info Fri Jun 17 2016 12:04:35 GMT+0800 (CST)WebSocket is listening on port 8082
info Fri Jun 17 2016 12:04:35 GMT+0800 (CST)http is listening on port 8081

4，測試weex手機執行app中的效果

終端使用下面的命令執行後會生成一個二維碼在終端。

weex tech_list.we --qr -h {ip or hostname}

生成二維碼
手機安裝了playground.apk ，然後裡面有掃碼二維碼的功能，掃一掃就能看到這個頁面效果了，實際上對應的就是pc端的頁面地址。
是不是很簡單啊？weex手機測試效果:
weex手機測試效果

5,weex團隊2016－06－21語錄

阿里－克爽

Ｗｅｅｘ的原始碼其實不復雜的，相比ＲＮ，所以希望以後大家都能參與進來維護。
大家從表面看像輪子 但深入瞭解下去會發現不一樣的。
你見過哪個阿里的專案跟Ｗｅｅｘ這樣的，開源前先內測一樣　所以不要擔心爛尾　我們的投入是空前的

阿里-天施 14:56:40

其實做Weex專案，還是有我們自己的理念。
一是三端一致性；
二是希望做的事情能夠幫助前端開發人員在移動開發這塊大顯身手（把過去的知識技能積累，工程經驗）很快會搬移到移動業務開發上去。當然這一步同時也會考慮native同學的成本，當前是有一些事情的判斷和先後取捨；
三是我們其實更希望從頁面到整個App構建，我們覺得rn一上來就想構建整個App其實是不合理的，從做好每個業務開始，逐步到把整體App做好，才是合理的。

native 使用weex成本，和rn應該差不多，我們也在工具上在降低這些成本。

所以我們也提供了app framework，但演進上是穩健的根據開發者需求來的，不是希望一上來就翻天覆地的變化。

我們跟rn團隊關係，其實更多是交流，大家對於這塊更多是相互學習。沒有國內同學覺得彼此之間那麼緊張。。。去年我們在Qcon SF分享的時候facebook同學就很感興趣。這次我們去wwwdc,他們核心團隊跑過來申請我們的專案access。。
每一個開源專案都有自己的核心理念和堅持.Weex團隊也不希望說太多，更多看投入幫助開發者解決了什麼問題。

阿里-天施 15:07:36

我們整個專案之所以願意大力投入，從去年年底到現在，我們看到了這塊大力投入對於改變阿里的移動開發方式，提升開發者效率有很大的幫助。。。目前半年來努力，阿里內部已經普遍接受Weex，我們希望通過1-2年未來徹底改變阿里的移動開發模式(業務上用Weex,專業native領域專業同學負責作為元件透出給業務使用，Native與業務徹底解耦，術業有專攻）。。

我相信weex會發展起來，努力跟著大神的腳步走吧。歡迎交流。

更多內容，請看下一篇文章：Weex開發筆記

Dusan_Q：291902259，duqian.net.cn，公眾號：OpenDeveloper

相關文章