天天看點

折騰Weex+Android App開發運作環境搭建手記

搞了幾個月的Vuejs,也是時候開始搞搞基于Vuejs文法的Weex App了。

這裡做個廣告,最近用vuejs開發了一個小系統(前後端分離),架構有參考Oracle EBS,功能/職責随便配置。有興趣的兄台可以了解一下:https://github.com/samt007/jebms-ui

來正題,什麼是Weex App?

這裡有簡介:

Weex App

阿裡巴巴開發團隊在RN的成功案例上,重新設計出的一套開發模式,站在了巨人肩膀上并有淘寶團隊項目做養料,廣受關注,2016年4月正式開源,并在v2.0版本官方支援Vue.js,與RN分庭抗禮。

優點:單頁開發模式效率極高,熱更新發包體積小,并且跨平台性更強

缺點:剛剛起步,文檔欠缺;社群沒有RN活躍,功能尚不健全,暫不适合完全使用Weex開發App

舉個栗子:淘寶、天貓、阿裡雲、優酷、閑魚、餓了麼等

推薦看的文章:https://segmentfault.com/a/1190000011154120

Weex淘寶官方首頁:https://weex-project.io/cn/

好了,現在開始搭建開發環境吧!

這個是用筆記本新安裝一個環境(這個環境基本是空白的,隻是有安裝nodejs而已),系統版本:Win10。大概步驟:

  1. 安裝Java開發環境,Android Studio工具等。

    首先安裝好java的開發環境JDK。我用1.8版本,接着必須要全部配置好環境變量。反正最後用cmd輸入java –version和javac能識别就OK。有一點要說明的,修改了系統的環境變量,要生效的一個簡單辦法就是重新開機電腦。。。當然也有别的辦法,但是貌似都比較折騰,還是重新開機簡單直接!

    然後就是下載下傳Android Studio工具。這個碰到一個小插曲,Win10直接安裝百度搜尋的1.8G的版本會報錯(報錯是安裝軟體的完整性檢測有問題)。後來換一個版本下載下傳就OK,建議在這裡下載下傳:http://www.android-studio.org/

    上面的安裝教程可以參考這個網址:https://www.cnblogs.com/jliangqiu2016/p/5656676.html

    安裝AS工具時間是最長的,确實麻煩,而且要下載下傳的東西也很多,特别是Android SDK。必須要注意磁盤空間要足夠啊。

    另外,安裝好之後,還要配置一下ANDROID_HOME等的環境變量哦。

  2. 接着就是安裝Weex。

    基本按照官網的步驟安裝就行。因為我之前安裝了nodejs,這裡隻需要更新一下npm版本就OK啦。指令:npm i [email protected] -g

    接着就是安裝weex toolkit。安裝要注意:要先執行安裝指令,再執行更新的指令(官網都有對應指令)。

    執行更新指令的時候碰到一個問題:沒python運作環境。是以,又馬不停蹄地下載下傳了一個python(安裝之後還要配置好系統環境變量path哦。。。)

    但是更新weex toolkit還是報錯,網上百度了一下,原來我還是少安裝了這個東西:Windows Studio。是以,又安裝了一個Windows Studio 2013版本。(下面所說的碰到的主要問題也有提及到)。其實我有記得公司電腦是有安裝的,記憶比較深刻,當時搞的React Native運作環境,估計也是一樣的原因。

  3. 碰到的主要問題:

    首先,要用這個辦法開發手機app(就是js驅動原生界面),如果是Windows環境,必須得安裝python,而安裝python必須得安裝Windows Studio,我安裝是2013版本的,否則例如更新weex update [email protected],會報錯。

電腦環境變量截圖:

折騰Weex+Android App開發運作環境搭建手記
折騰Weex+Android App開發運作環境搭建手記

weex的項目,直接用Android Studio IDE打開:

折騰Weex+Android App開發運作環境搭建手記
折騰Weex+Android App開發運作環境搭建手記

沒問題的話,随便在AS工具裡面打包apk,就可以安裝使用啦!

安裝總結:有問題基本的解決思路是,根據錯誤資訊問度娘,一般都可以有解決辦法。你要相信,一般來說,你不會是第一個碰到該問題的人!