開始之前先檢測一下node和npm

node -v
npm -v

安裝weex-toolkit

npm install weex-toolkit -g

搞定之后看一下weex信息

weex -v

沒問題之后繼續(xù)全局裝webpack

npm install webpack -g

前端部分到此結(jié)束
AS部分不再贅述

環(huán)境部分基本結(jié)束,開始新建項目

weex create demo1

*輸入完這條命令時，如果沒有安裝weexpack，會提醒進(jìn)行安裝，也可以單獨安裝

npm install weexpack -g

根據(jù)提示配置項目名稱等信息

? Project name y
? Project description y
? Author y
? Select weex web render lts
? Babel compiler (https://babeljs.io/docs/plugins/#stage-x-experimental-presets) stage-0
? Use vue-router to manage your view router? (not recommended) Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

然后cd到目錄下,安裝依賴包

cd demo1
npm install

坑: cnpm可能裝不全,多跑幾次

項目創(chuàng)建完畢,接下來添加Android

weex platform add android

platform里會出現(xiàn)android文件夾,此時可以嘗試運(yùn)行一下

weex run android

報錯,暫時不管 可能找不到模擬器,也可能找不到ANDROID_HOME

在Android Studio里載入platform下的android項目

根據(jù)提示更新Gradle

坑: AS 3.0報錯
Cannot set the value of read-only property 'outputFile' for ApkVariantOutputImpl_Decorated{apkData=Main{type=MAIN, fullName=debug, filters=[]}} of type com.android.build.gradle.internal.api.ApkVariantOutputImpl.
原因:自定義apk名稱代碼報錯

解決方法:

applicationVariants.all { variant ->
        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)
            }
        }
    }

替換為

 android.applicationVariants.all { variant ->
        variant.outputs.all {
            outputFileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
        }
    }

項目構(gòu)建完成,然后跑一下

坑: AS 3.0注解報錯

解決方法:修改build.gradle

 defaultConfig {
        applicationId "com.weex.app"
        minSdkVersion project.appMinSdkVersion
        targetSdkVersion project.targetSdkVersion
        versionCode 1
        versionName "1.0.0"
        ndk {
            abiFilters "x86"
            abiFilters "armeabi"
        }
        //添加
        javaCompileOptions { annotationProcessorOptions { includeCompileClasspath = true } }
    }

之后順利啟動,項目終于跑起來了

源碼地址:GitHub