开始之前先检测一下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
