Weex之路 (一) 搭建环境和项目

开始之前先检测一下node和npm

node -v
npm -v

安装weex-toolkit

npm install weex-toolkit -g

搞定之后看一下weex信息

weex -v

没问题之后继续全局装webpack

npm install webpack -g

前端部分到此结束
AS部分不再赘述

环境部分基本结束,开始新建项目

weex create demo1

*输入完这条命令时，如果没有安装weexpack，会提醒进行安装，也可以单独安装

npm install weexpack -g

根据提示配置项目名称等信息

? 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可能装不全,多跑几次

项目创建完毕,接下来添加Android

weex platform add android

platform里会出现android文件夹,此时可以尝试运行一下

weex run android

报错,暂时不管 可能找不到模拟器,也可能找不到ANDROID_HOME

在Android Studio里载入platform下的android项目

根据提示更新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")
        }
    }

项目构建完成,然后跑一下

坑: 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