cordova入门

cordova入门

1.Cordova是什么?

Cordova 是一个开源的移动开发框架。允许你用标准的 Web 技术——HTML5，CSS3 和 JavaScript 做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的 API 绑定去访问每个设备的功能。

1.1 整体结构图

1.2 整体结构

1.WebView

WebView 是 App 原生当中的浏览器组件，Cordova 本质就是一个（混合编程）Hybrid 框架。对原生和 Web 直接交互的一些封装。对外提供了一套接口。

2.WebApp

WebApp 是 Web 编程的所有文件内容存放的地方。包括 html，js，css 等。

Cordova 实现是通过调用原生的 WebView，然后默认加载本地的 index.html 页面。index.html 中引用其他的本地的css，javascript，images，media 和其他等一些必要等资源文件。

这里其中有一个最重要等文件 config.xml。定义了运行过程中很重要的一些参数。

如果直接通过 Web 访问一个服务器的页面，一个是访问效果非常差，受限于网速，另一个就是和原生的交互问题。而将资源放在 WebApp 下，等于是在 App 本地访问页面，展示效果更接近于原生。

3.Cordova Plugins

插件是 Cordova 生态系统的重要组成部分。他提供了 Cordova 和原生组件相互通信的接口并绑定到了标准的设备 API 上，这使你能够通过 JavaScript 调用原生代码。

2 开发环境

• 1. jdk
• 2. nodejs
• 3. android-sdk-manager
• 4. gradle

2.1 下载所需软件包

提供两种下载方法
一. 官网下载
1. jdk - https://www.oracle.com
2. nodejs - https://nodejs.org
3. android sdk - https://developer.android.com
4. gradle - https://gradle.org
二. 我把下载好的上传到坚果云,需要的可以直接打包下载
https://www.jianguoyun.com/p/DQahxXcQlLWgBxj-gp8B (访问密码： mGJUTr)

2.2 配置环境变量

# /data/work/tools/是我放开发工具的位置.你们根据自己的安装目录修改配置环境变量的代码
export JAVA_HOME=/data/work/tools/jdk1.8.0_131/
export PATH=$JAVA_HOME/bin:$PATH 
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export ANDROID_HOME=/data/work/tools/android-sdk-linux
export PATH=$ANDROID_HOME/build-tools:$ANDROID_HOME/tools:$ANDROID_HOME/platforms:$ANDROID_HOME/platform-tools:$PATH
export GRADLE_HOME=/data/work/tools/gradle-5.1.1
export PATH=$GRADLE_HOME/bin:$PATH
export MAVEN_HOME=/data/work/tools/apache-maven-3.6.0
export PATH=$MAVEN_HOME/bin:$PATH
export NODE_HOME=/data/work/tools/node-v8.12.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

2.3 安装Android构建工具

# 打开Android SDK Manager
$ android

这里我们需要下载一些工具，注意只需要勾选3个,如果你勾选了其它的，可能要下载 2、30G 的东西。像这样选只需要下载 200M.(我之前就是全选,安装,一边写代码一边安装,装了一下午,后来老提示我磁盘空间不足,那几天我一直以为是我电脑系统出问题了…)

1.Android SDK Platform-tools

2.Android SDK Build-tools

3.API23 下的 SDK Platform (编译的时候会提示你需要的 api 版本)

2.3.1 Android-SDK管理界面

2.3.2 编译时候的提示信息

2.3.3 最终安装结果

2.3.4 编译通过

3.HelloWorld

# 安装Cordova CLI
$ npm install -g cordova
# 创建应用程序
$ cordova create myApp com.homolo.myapp MyApp
# 添加平台
$ cd myApp
$ cordova platform add android
# 运行
$ cordova run android

4. 项目目录介绍

myApp
|-- hooks/          #存放对 cordova-cli 命令进行定制的脚本。这些脚本可以通过钩子控制何时执行。可用来建立自己的构建系统或与版本空着系统融合。
|-- node_modules/   #node项目引入的文件
|-- platforms/      #包括项目需要的相关平台的所有的源代码和构建脚本
|-- plugins/        #项目添加的所有插件会放到此目录
|-- res/            #图标,启动图
|-- www/            #应用的所有 web 资源存放与此（html，js，css等）
|-- config.xml      #对应用进行配置，为项目做一些定制化的设置
|-- package.json    #node项目配置文件

merges文件夹用来存放特定平台的 Web 资源。新建的项目默认是没有这个文件夹的。在 merges/ 目录中对应的文件将会在 prepare 时覆盖 www/ 目录中的文件。
例如 merges/ios/app.js 在构建 iOS 平台代码时，会覆盖 www/app.js

merges/
|-- ios/
| -- app.js
|-- android/
| -- android.js
www/
| -- app.js

5.Android打包

# 打包所有平台
$ cordova build 

# 打包测试版本
$ cordova build android
# 打包后的apk文件在当前项目下的 platforms/android/app/build/outputs/apk/debug/app-debug.apk 目录

# 打包发布版本
$ cordova build --release android
# 打包后的apk文件在当前项目下的 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk 目录

6.Android签名

6.1 打包一个发布版本的Android应用

# 打包一个发布版本的Android应用
$ cordova build --release android

6.2 生成签名文件

# 生成签名文件,以羊城app为例，最终生成一个签名文件myapp.keystore
$ keytool -genkeypair -alias myapp.keystore -keyalg RSA -validity 4000 -keystore myapp.keystore
输入密钥库口令:  
再次输入新口令: 
您的名字与姓氏是什么?
  [Unknown]:  shj
您的组织单位名称是什么?
  [Unknown]:  homolo
您的组织名称是什么?
  [Unknown]:  homolo
您所在的城市或区域名称是什么?
  [Unknown]:  sh
您所在的省/市/自治区名称是什么?
  [Unknown]:  sh
该单位的双字母国家/地区代码是什么?
  [Unknown]:  cn
CN=shj, OU=homolo, O=homolo, L=sh, ST=sh, C=cn是否正确?
  [否]:  y
输入 <myapp.keystore> 的密钥口令
        (如果和密钥库口令相同, 按回车):  
# 查看签名文件是否生成
$ ls
hooks node_modules platforms plugins res www 
config.xml package.json  package-lock.json  myapp.keystore

6.3 对apk文件进行签名

# jarsigner命令介绍:
# jarsigner -verbose -keystore [keystorePath] -signedjar [apkOut] [apkin] [alias]
# -verbose -> 输出签名过程的详细信息
# -keystore [keystorePath] -> 密钥的库的位置
# -signedjar [apkOut] -> 签名后的输出文件名
# [apkin] -> 待签名的文件名
# [alias] -> 证书别名

# 对apk文件进行签名,以羊城app为例
# 1.复制需要签名的apk到项目跟目录
$ cp ./platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk ./myapp_unsigned.apk

# 2.查看签名文件和apk文件
$ ls
hooks node_modules platforms plugins res www config.xml 
package.json  package-lock.json  myapp.keystore myapp_unsigned.apk

# 3.签名
$ jarsigner -verbose -keystore myapp.keystore -signedjar myapp.apk myapp_unsigned.apk myapp.keystore

# 4.查看最终结果
$ ls
hooks node_modules platforms plugins res www config.xml 
package.json  package-lock.json  myapp.keystore myapp_unsigned.apk myapp.apk