WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

Corodva Android 环境搭建

在windows中搭建cordova的android环境流程

node安装

安装步骤:略

验证: node -v

java安装

 下载能用的java版本安装,然后配置环境变量

 验证:javac -version

python安装(选装,RN需要安装)

 下载支持的python版本安装即可

 验证:python --version

搭建android环境

下载Android Studio并安装,注意下载的版本2.x和3.x的有很大的区别

这几个选项勾上(模拟器可以不装)
Android SDK 
Android SDK Platform 
Performance (Intel ® HAXM)
Android Virtual Device

安装 Android SDK

在settings->Appearance & Behavior -> System Settings -> Android SDK处安装SDK

选择需要的SDK Platforms和 SDK Tools。注意将 Show Package Details勾选上。

选好后开始下载 保证科学上网连接

配置 ANDROID_HOME 环境变量

在系统变量中新增ANDROID_HOME环境变量,地址指向上面安装的Android SDK的位置

在path中新增%ANDROID_HOME%\tool和%ANDROID_HOME%\platform-tool两个环境变量

第一个变量验证:输入android
image.png
第一个变量验证:输入adb --version
image.png

配置Gradle环境变量

首先下载需要版本的Gradle,然后解压到Android Studio目录下的gradle文件夹下。

然后配置GRADLE_HOME环境变量,路径为 F:\...\gradle\gradle-4.4

最后设置path: %GRADLE_HOME%\bin

gradle验证: gradle -v
image.png

gradle下载地址

cordova环境搭建

cordova 安装

使用npm安装cordova(已有项目需要安装相同版本的cordova)

npm install -g cordova@xx.xx.xx

cordova platform ls 查看已安装的平台和当前cordova支持的平台版本号

//添加Android平台
cordova platform add android@6.2.3(或其他版本)

//ios构建需要xcode
cordova platform add ios@4.3.1(或其他版本)

检验cordova运行依赖

cordova requirements

image.png

这条命令会检测:Java JDK,Android SDK, Android target, Gradle的安装情况,如上图所示:

Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Error: Some of requirements check failed

这里是没有检测到Gradle的安装,我们需要去设置Gradle的环境变量,参考上方的设置方法

打包app

cordova build android --debug(release) --(other params)

使用Android Studio构建和签名

GradleBuilder.js修改

要修改cordova定义的gradle版本:
platforms->android->cordova->lib->builders->GradleBuilder.js

//将distributionUrl变量的版本改成想要的版本 var distributionUrl = ...

否则会报错:Could not find method google() for arguments [] on repository container.

build.gradle修改

//1 添加版本限制 configurations.all{ resolutionStrategy.eachDependency{ DependencyResolveDetails details -> if (details.getRequested().getGroup() == 'com.android.support') { details.useVersion('25.0.1') } } } //2 添加http请求 android { //用于http请求 useLibrary 'org.apache.http.legacy' ... }

上述的修改发生在添加平台后,那我们以后每次添加平添岂不是都需要修改这些东西,通过设置hooks脚本来简化此工作。
image.png

构建gradel

打开Android Studio,选择项目下platforms->android。

image.png

选择以Android项目展示侧边栏文件,选择build.gradle(Module:android)文件

// 若Android Stduio版本大于3则需要如下操作 // 1 检查项目支持的gradel版本 若是太低需要升级版本 // gradle 4.4 需要gradle plugin 3.1.2 所以此处最小3.1.2 buildscript { dependencies { classpath 'com.android.tools.build:gradle:3.1.2' } } // 2 找到gradle-wrapper.properties文件 修改distributionUrl的版本 distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip // 3 找到file->settings->Build,Execuion->Gradle //选择Use default gradle wrapper -> Apply // 4 出现报错:Could not find com.android.tools.build:gradle:3.1.2. //Searched in the following locations: buildscript { repositories { //在此处添加google() google() } } allprojects { repositories { //在此处也添加google() google() } } // 5 继续sync 出现报错:Could not resolve project :CordovaLib // 将dependencies中的compile替换为api dependencies { compilefileTree(dir: 'libs', include: '*.jar') debugCompile(project(path: "CordovaLib", configuration: "debug")) releaseCompile(project(path: "CordovaLib", configuration: "release")) compile "com.android.support:support-v4:27.1.0" } dependencies { api fileTree(dir: 'libs', include: '*.jar') debugApi project(":CordovaLib") releaseApi project(":CordovaLib") api "com.android.support:support-v4:27.1.0" }

检验:sync成功如下:一个warning可以不用管
image.png

build apk

  • 1:选择Build -> Build APK(s) 开始打包

  • 2:打包完成后开始签名,签名是为了保证app的唯一性,可以覆盖安装(但是不能低版本的覆盖高版本),Build -> Generate Singed APK…

image.png

  • 3: 若是第一次签名则选择Create new新建一个应用签名,否则选择Choose existing…选择已有签名文件。

  • 4: 输入签名的密码 别名(alias)点击 next

  • 5: 选择apk存放路径和signature versions 点击finish

app的版本可以在AndroidManifest.xml中修改

上传

将sign后的app上传到测试网站用于测试下载。

测试完成后 将apk文件交由产品运营上传至各大应用平台。

分割线

若是没有已有的cordova项目需要新建一个

新建一个cordova的项目

创建新项目

cordova create jimTest(文件名) com.jim.test(项目id)

添加平台

//只能安装当前版本cordova支持的最大平台版本
cordova platform add android@x.x.x

修改platform中的部分文件

  • 修改gradle版本:参考上方的处理方式
  • 修改dependencies中的 compile为api
  • 若是build.gradle中的dependencies每次build发生变化则需要修改cordova源文件中的GradleBuilder.js中的内容:
subProjects.forEach(function (p) { console.log('Subproject Path: ' + p); var libName = p.replace(/[/\\]/g, ':').replace(name + '-', ''); depsList += ' debugCompile(project(path: "' + libName + '", configuration: "debug"))'; insertExclude(p); depsList += ' releaseCompile(project(path: "' + libName + '", configuration: "release"))'; insertExclude(p); }); //修改为下方这种 subProjects.forEach(function (p) { var libName = p.replace(/[/\\]/g, ':').replace(name + '-', ''); depsList += 'debugApi project(":' + libName + '")'; insertExclude(p); depsList += 'releaseApi project(":' + libName + '")'; insertExclude(p); });

sync项目

打开Android Stduio,选择新建的项目中的android文件夹打开,正常来说会自动Sync,若是没有,可以点击Sync按钮:

image.png

成功后即可Build app 了

app签名

选择创建一个新的签名

cordova hooks

执行顺序

cordova platform add:
before_platform_add
before_prepare
after_prepare
before_plugin_install
after_plugin_install
after_platform_add

cordova build:
before_build
before_prepare
after_prepare
before_compile
after_compile
after_build

新建hooks

在hooks文件夹内新建after_platform_add文件夹,内新建一个js文件,命名随意,在此文件中作相应的操作,如可以在after_platform_add中修改一些配置,如上述所讲 gradle的配置等等。同样可以在before_prepare中判断运行环境从而替换一些全局变量如,–debug --release等。

若是一个hooks生命周期文件夹下不止一个js文件,这时的文件名不能随意命名,因为我们需要保证多个js文件执行的顺序是可以控制的,hooks执行顺序是按照文件名来排序执行的,若是全英文的命名,在windows和linux中的执行顺序有可能不同,所以推荐使用数字做为文件名开头:
image.png
这样即可保证执行顺序。

build app时可以在before_prepare和after_prepare中做操作,包括但不仅限于:

1:区分平台对源代码做处理,比如给源代码的body标签中加入cordova-android Class,便于单独给Android设置样式。
2:获取到 build参数 区分dev和prod,然后去调用不同环境的接口,对于很多插件也是分了开发和生成环境的,且key值不同,可能也需要在这一步处理。
3:准备好修改好源码后,执行打包操作,可以是gulp,webpack等。

有可能在编译完成后需要修改某些文件,after_compile,after_build可用

注意点

升级android API等级

AndroidManifest.xml中

<users-sdk android:minSdkVersion="16"  android:targetSdkVersion="26"/>

gradle中配置版本信息

android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { applicationId "com.example.checkyourtargetsdk" minSdkVersion 7 targetSdkVersion 23 versionCode 1 versionName “1.0” } }

transformDexArchiveWithExternalLibsDexMergerForDebug 报错

解决:android project 下 .gradle目录, 然后点击Build -> Clean Project

修改targetSdkVersion的值

在config.xml中添加这样一行

<preference name="android-targetSdkVersion" value="26" />

有配置问题搜索cordova config.xml配置

android 的versionCode 可以在config.xml的 widget 中设置

<widget android-versionCode="216000" version="2.16.0" >

android studio 真机调试

error please select android sdk

android studio -> file -> Project -> Structure -> android -> Build Tools Version -> 选择要调试的安卓版本。

no target device found

android studio -> run -> Edit Configurations -> Target -> Open Select Deployment Target Dialog.

然后重新run。

chrome inspect page 404

这是由于两端的chrome的版本不一致导致的, 检查时选择 inspect fallback

image.png

ios iframe中内容空白 android没问题

在config.xml中配置

<allow-navigation href="*"/> <allow-intent href="*"/> <access origin="*"/>