创建第一个weex android应用及采坑处理

junzaivip 2019-06-27

什么是weex

关于什么是weex,引用官网解释"Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架"。此处不做过多赘述,本文主要致力于创建第一个weex应用及其中采坑处理。关于weex介绍,请参考官网:http://weex-project.io/cn/

如何创建weex

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遇到的坑

android 下weex搭建及运行

1.上述操作并未添加android和iOS项目,执行如下代码:

weex platform add android

此处只介绍android环境下采坑,故只添加android,等待下载完成

2.配置android开发环境,此处推荐android studio,可以通过以下链接下载
http://www.android-studio.org...
3.下载完成后配置android环境变量

创建第一个weex android应用及采坑处理
添加ANDROID_HOME ,路径指向androidsdk目录

创建第一个weex android应用及采坑处理
配置path,在path中追加 ;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools;如图

创建第一个weex android应用及采坑处理
重新打开命令行,指定adb,出现如图则代表配置成功

创建第一个weex android应用及采坑处理

4.重新定位到当前工程目录,执行

weex run android
  • 若出现如下错误,请连接手机,打开开发者模式并开启usb调试

创建第一个weex android应用及采坑处理

  • 出现如下错误

创建第一个weex android应用及采坑处理
则需要用androidstudio打开platform下的android

创建第一个weex android应用及采坑处理
在message中出现如下错误提示

创建第一个weex android应用及采坑处理
解决方案:
在工程下的build.gradle添加 google(),如图
创建第一个weex android应用及采坑处理
try again后出现

创建第一个weex android应用及采坑处理
说是需要升级gradle,点击第一个链接进行升级,升级过程可能有些慢,等待即可。
此时又出现了另外一个错误

创建第一个weex android应用及采坑处理
原因是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
若仍出现错误,如下:

创建第一个weex android应用及采坑处理
则需更新build Tools ,此时直接点击链接即可,第二个错误则说明 compile即将被启用,需要替换为implemention 与api,此处替换为implemention可解决问题(api不行,原因目前未探究),文件如app下的build.gradle,如图

创建第一个weex android应用及采坑处理
try again后无错误提示. 此时,错误解决完毕
重新回到命令行,并定位到当前项目目录执行weex run android,出现如下错误

创建第一个weex android应用及采坑处理
此时在build.gradle中添加如下命令

javaCompileOptions { annotationProcessorOptions { includeCompileClasspath = true } 
}

执行sync now,无报错

重新运行 weex run android

创建第一个weex android应用及采坑处理
运行成功

相关推荐