junzaivip 2019-06-27
关于什么是weex,引用官网解释"Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架"。此处不做过多赘述,本文主要致力于创建第一个weex应用及其中采坑处理。关于weex介绍,请参考官网:http://weex-project.io/cn/。
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遇到的坑
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
则需要用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
运行成功