建立第一個weex android應用及採坑處理

什麼是weex

關於什麼是weex,引用官網解釋"Weex 是一個使用 Web 開發體驗來開發高性能原生應用的框架"。此處不作過多贅述，本文主要致力於建立第一個weex應用及其中採坑處理。關於weex介紹，請參考官網：http://weex-project.io/cn/。

如何建立weex

1.請確保已經安裝了node.js,執行全局安裝命令:

npm install weex-toolkit -g

若安裝緩慢,可採用淘寶鏡像 --registry https://registry.npm.taobao.org

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

2.執行完畢後,可在當前目錄建立空的模板項目,執行命令:

weex create first-app

3.建立完畢後,進入first-app目錄,安裝依賴,並啓動項目

cd first-app
npm install
npm start

4.此時能夠在瀏覽器中訪問:http://localhost:8081查看效果。
此時沒有遇到什麼坑，項目也正常訪問，下面重點介紹下android下運行weex遇到的坑

android 下weex搭建及運行

1.上述操做並未添加android和iOS項目,執行以下代碼:

weex platform add android

此處只介紹android環境下采坑,故只添加android,等待下載完成

2.配置android開發環境,此處推薦android studio,能夠經過如下連接下載
http://www.android-studio.org...
3.下載完成後配置android環境變量

添加ANDROID_HOME ,路徑指向androidsdk目錄

配置path,在path中追加 ;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools;如圖

從新打開命令行,指定adb,出現如圖則表明配置成功

4.從新定位到當前工程目錄,執行

weex run android

• 若出現以下錯誤,請鏈接手機,打開開發者模式並開啓usb調試

• 出現以下錯誤

則須要用androidstudio打開platform下的android

在message中出現以下錯誤提示

解決方案:
在工程下的build.gradle添加 google(),如圖

try again後出現

說是須要升級gradle,點擊第一個連接進行升級,升級過程可能有些慢,等待便可。
此時又出現了另一個錯誤

緣由是gradle 升級到3.0以後將outputFile變爲只讀屬性，故不能用這種方式重命名，點擊open file,修改以下代碼:

variant.outputs.each { output ->
            def outputFile = output.outputFile
            if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
                def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
                output.outputFile = new File(outputFile.parent, fileName)
            }
        }

爲

variant.outputs.all { output ->
            def outputFile = output.outputFile
            if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
                def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
                outputFileName = fileName
                //output.outputFile = new File(outputFile.parent, fileName)
            }
        }

將each變爲all,註釋output,outputFile ,添加 outputFileName = fileName ,指定try again
若仍出現錯誤,以下:

則需更新build Tools ,此時直接點擊連接便可,第二個錯誤則說明 compile即將被啓用,須要替換爲implemention 與api,此處替換爲implemention可解決問題（api不行，緣由目前未探究）,文件如app下的build.gradle,如圖

try again後無錯誤提示. 此時,錯誤解決完畢
從新回到命令行,並定位到當前項目目錄執行weex run android,出現以下錯誤

此時在build.gradle中添加以下命令

javaCompileOptions { annotationProcessorOptions { includeCompileClasspath = true } 
}

執行sync now,無報錯

從新運行 weex run android

運行成功