開始之前先檢測(cè)一下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é)束,開始新建項(xiàng)目
weex create demo1
*輸入完這條命令時(shí)陌凳，如果沒有安裝weexpack，會(huì)提醒進(jìn)行安裝足淆，也可以單獨(dú)安裝
npm install weexpack -g
根據(jù)提示配置項(xiàng)目名稱等信息
? 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可能裝不全,多跑幾次
項(xiàng)目創(chuàng)建完畢,接下來添加Android
weex platform add android
platform里會(huì)出現(xiàn)android文件夾,此時(shí)可以嘗試運(yùn)行一下
weex run android
報(bào)錯(cuò),暫時(shí)不管 可能找不到模擬器,也可能找不到ANDROID_HOME
在Android Studio里載入platform下的android項(xiàng)目
根據(jù)提示更新Gradle
坑: AS 3.0報(bào)錯(cuò)
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名稱代碼報(bào)錯(cuò)
解決方法:
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")
}
}
項(xiàng)目構(gòu)建完成,然后跑一下
坑: AS 3.0注解報(bào)錯(cuò)
解決方法:修改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 } }
}
之后順利啟動(dòng),項(xiàng)目終于跑起來了
源碼地址:GitHub
