Cordova 
Cordova 是⽤ Web 技术( HTML,CSS 和 JS )构建移动应⽤的平台。我们可以认为Cordova 是⼀个容器,⽤于将的 Web 应⽤移植到移动端,同时⽀持移动端的功能(例如:定位、蓝⽛、摄像头等)。
TIP
默认情况下,Web 应⽤不能使⽤移动端功能(例如:定位,蓝⽛,摄像头等)。通过 Cordova,我们 可以使⽤ Web 技术,实现应⽤,同时,⽀持移动端功能
优势 
- 对前端友好,学习成本低。HTML,CSS 和 JS,只要你写过 SPA,就很熟悉 Cordova
 - 跨平台,⼀套代码,多端部署(便于移植)。IOS,Android,Windows Phone,Amazon-fireos,⿊莓,Firefox OS,Ubuntu 和 tizien
 
不足 
- Cordova 应⽤⽐原⽣应⽤慢(不适合做⾼性能应⽤)
 - Cordova 跨浏览器的兼容性差
 - Cordova 跨平台的兼容性有待提⾼(某些平台上的 API 还不⽀持)
 
资源网站 
- 官⽹: https://cordova.apache.org/
 - 中⽂镜像:http://cordova.axuer.com/
 - Github: https://github.com/apache/cordova
 
架构图 

环境搭建 
整体来说,Cordova 需要的环境是 Node.js + 平台(例如:Android 和 iOS)。环境搭建主要包含如下内容:
- Node.js 环境搭建
 - Git 安装
 - Android 环境搭建
 - iOS 环境搭建
 - VS Code 编辑器
 
Node.js 环境搭建 
- Node.js 的版本应⼤于等于 12,推荐安装 LTS 版本(去 Node.js 官⽹下载安装包)
 - 安装之后,(为了提⾼下载速度)我们将 npm 镜像源,设置为淘宝的
 
# 修改 npm 的镜像源
npm config set registry https://registry.npm.taobao.org
# 验证是否更改成功(查看镜像源):
npm config get registry# 修改 npm 的镜像源
npm config set registry https://registry.npm.taobao.org
# 验证是否更改成功(查看镜像源):
npm config get registryGit 安装 
Cordova 依赖 Git 命令⾏⼯具
Android 环境搭建 
简介 
JDK(Java Development Kit)是 Java 开发套件的简称。Android 开发,需要安装 JDK。
下载 
下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
请选择⼀个适合本地操作系统的安装包(操作系统+位数,例如:Windows x64)。
下载时,提示需要登陆,我们可以先注册 Oracle 账户,登陆后再下载。
安装 
下载完成后,双击安装包,开始安装(⼀直下⼀步就好,⽆需特殊配置),设置 Java 环境变量 JAVA_HOME=C:\Program Files\Java\jdk1.8.0_271
配置好 JAVA_HOME 后,可以再配置两个路径 
检测安装结果 
如果以下命令可以正常运⾏,则说明环境变量配置成功
java -version
javacjava -version
javacAndroid Studio 
Android Studio (简称 AS)是安卓开发的编辑器和运⾏环境。使⽤之前,先下载。(如已经安装,请略过本节)
下载地址:https://developer.android.com/studio/index.html
下载过程需要翻墙,下载安装内容很多,所以安装过程会很缓慢
安装 Android SDK(可选)
正常来说,你可以忽略这⼀步。因为 Android Studio 默认会安装最新版本的 Android SDK 。
Android SDK 是针对安卓开发的套件。 如果最新的 Android SDK 存在兼容性问题。这⾥你还可以单独安装,指定版本的 Android SDK。
打开 Android Studio,在菜单 Tools 下找到 "SDK Manager"
在 SDK Manager 中选择"SDK Platforms"选项卡,然后,在右下⻆勾选"Show Package Details"。展开指定版本(例如: Android 10 (Q) )的选项,确保勾选了下⾯这些组件(重申:你必须使⽤稳定的翻墙⼯具,否则可能都看不到这个界⾯):
- Android SDK Platform 29
 - Intel x86 Atom_64 System Image (官⽅模拟器镜像⽂件,使⽤⾮官⽅模拟器不需要安装此组件)
 
然后点击"SDK Tools"选项卡,同样勾中右下⻆的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 29.0.2 版本。
总共有两个内容,组件⼤⼩约:113.0 MB,安装后占⽤空间约:451.9 MB
点击 OK 执⾏下载(这个下载时间也⽐较⻓,同时确保翻墙⼯具稳定可⽤)
如果下载过程中断,请重复选中以上两个组件,再次下载 例如,我本地下载中断,报错:SSL peer shut down incorrectly(⽹络中断报错) 只需要重复选中所需组件,再次下载即可。
下载完成后,点击 Finish
设置 Android 环境变量 
- ANDROID_HOME=C:\Users\你的名字\AppData\Local\Android\Sdk
 - ANDROID_SDK_ROOT=C:\Users\你的名字\AppData\Local\Android\Sdk
 

Gradle 安装 
- 下载
 
下载地址:https://services.gradle.org/distributions/
下载版本:建议使⽤ gradle-6.5-all.zip (我之前下载的 6.8 说太⾼了,⽽后⼜切换到 6.5)
- 解压
 
下载后解压,将加压包放到任意位置(例如,我本地是 D:\Program Files\gradle-6.5)
- 绑定环境变量
 
D:\Program Files\gradle-6.5\bin

检测安装结果
gradle -vgradle -viOS环境搭建 
安装 Xcode 
在 App Store 中安装即可。安装完成后,再安装 iOS 模拟器。
安装部署⼯具 
npm install -g ios-sim
npm install -g ios-deploynpm install -g ios-sim
npm install -g ios-deploy初始化项⽬ 
安装 Cordova CLI 
npm install -g cordova
cordova -vnpm install -g cordova
cordova -v创建项目 
cordova create HelloCordova io.cordova.hellocordova CordovaApp
# HelloCordova 应⽤程序的⽬录名称。
# io.cordova.hellocordova 项⽬唯⼀标识(默认的反向域值)。⼀般是点连接的语法
# CordovaApp 应⽤的标题。cordova create HelloCordova io.cordova.hellocordova CordovaApp
# HelloCordova 应⽤程序的⽬录名称。
# io.cordova.hellocordova 项⽬唯⼀标识(默认的反向域值)。⼀般是点连接的语法
# CordovaApp 应⽤的标题。添加平台 
cd HelloCordova
# 浏览器
cordova platform add browser
# 安卓 添加 android 平台,并确保他们保存在了 config.xml 中
cordova platform add android --save
# 查看当前平台
cordova platform lscd HelloCordova
# 浏览器
cordova platform add browser
# 安卓 添加 android 平台,并确保他们保存在了 config.xml 中
cordova platform add android --save
# 查看当前平台
cordova platform ls当前平台信息(注意平台版本,例如,Android 是 9.0,将来安装模拟器时,也要安装对应的版本)
Installed platforms:
android 9.0.0
browser
Available platforms:
browser ^6.0.0
electron ^1.0.0
windows ^7.0.0Installed platforms:
android 9.0.0
browser
Available platforms:
browser ^6.0.0
electron ^1.0.0
windows ^7.0.0运行 
# 浏览器端运⾏
cordova run browser
# 安卓端运⾏
cordova run android # 真机调试
cordova emulate android # 模拟器启动# 浏览器端运⾏
cordova run browser
# 安卓端运⾏
cordova run android # 真机调试
cordova emulate android # 模拟器启动项目目录 
- hooks:钩⼦⽬录。每个Cordova 命令都可以定义 before 和 after 的 Hook,⽐如:before_build、after_build
 - platforms:平台⽬录。例如 android、ios、browser 等
 - plugins:插件⽬录。安装的插件会放在这⾥
 - www:源代码⽬录。在执⾏ cordova prepare 的时候,源码会被 copy 到各个平台⼯程的 assets\www⽬录下
 - config.xml:主配置⽂件,⽐如:项⽬使⽤了哪些插件、应⽤图标和启动⻚⾯
 
cordova.js 
在 [项⽬⽬录]/www/index.html 中引⼊的 cordova.js 不是当前⽬录下的。⽽是构建之后⽬录下的
<script src="cordova.js"></script><script src="cordova.js"></script>这⾥以 browser 平台为例来解释(如果没有添加 browser 平台,请先添加)运⾏ browser
cordova run browsercordova run browser实际上,平台下 cordova.js 来⾃于 [项⽬⽬录]/platform/[平台名称]/platform_www/cordova.js 不同 平台下的 cordova.js 内容不同
事件 
Cordova 给我们提供了很多的事件。应⽤程序代码中可以添加这些事件的监听。
设备就绪 
它是 Cordova 设备 API 准备好,并可以访问的信号。相当于 Web ⻚⾯中的 onload 事件。
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// 设备就绪后的其他逻辑代码
}document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// 设备就绪后的其他逻辑代码
}其他后续事件,⼀般都写在 onDeviceReady 函数中
应用挂起 
function onDeviceReady() {
    // 当前应⽤切换到后台时,触发 pause 事件
    document.addEventListener('pause', function() {
        alert('设备挂起');
    })
}function onDeviceReady() {
    // 当前应⽤切换到后台时,触发 pause 事件
    document.addEventListener('pause', function() {
        alert('设备挂起');
    })
}应用回来 
function onDeviceReady() {
    // 当前应⽤由后台切换到前台时,触发 resume 事件
    document.addEventListener('resume', function() {
        alert('设备重新回来');
    })
}function onDeviceReady() {
    // 当前应⽤由后台切换到前台时,触发 resume 事件
    document.addEventListener('resume', function() {
        alert('设备重新回来');
    })
}回退按钮 
function onDeviceReady() {
    // 点击回退按钮时,触发 backbutton 事件
    document.addEventListener('backbutton', function() {
        alert('回退按钮');
    })
}function onDeviceReady() {
    // 点击回退按钮时,触发 backbutton 事件
    document.addEventListener('backbutton', function() {
        alert('回退按钮');
    })
}菜单按钮 
function onDeviceReady() {
    // 按下菜单按钮时,触发 menubutton 事件
    document.addEventListener('menubutton', function() {
        alert('按下菜单按钮');
    })
}function onDeviceReady() {
    // 按下菜单按钮时,触发 menubutton 事件
    document.addEventListener('menubutton', function() {
        alert('按下菜单按钮');
    })
}更多详情:https://cordova.apache.org/docs/en/10.x/cordova/events/events.html
config.xml 
简介 
config.xml 是 Cordova 应⽤程序的全局配置⽂件。进⾏项⽬构建后,该⽂件会被复制到平台的⼦⽬录下。例如
app/platforms/android/res/xml/config.xml
app/platforms/ios/AppName/config.xml
app/platforms/browser/config.xmlapp/platforms/android/res/xml/config.xml
app/platforms/ios/AppName/config.xml
app/platforms/browser/config.xml基本结构 
<?xml?>
 <widget>
 <name>引⽤名称</name>
 <description>应⽤描述</description>
 <author>作者</author>
 <content src="加载内容" />
 <access origin="访问限制" />
 <platform name="android">
 <!-- 针对 Android 平台的配置 -->
 <allow-intent href="market:*" />
 </platform>
 <platform name="ios">
 <!-- 针对 iOS 平台的配置 -->
 <allow-intent href="itms:*" />
 <allow-intent href="itms-apps:*" />
 </platform>
 </widget><?xml?>
 <widget>
 <name>引⽤名称</name>
 <description>应⽤描述</description>
 <author>作者</author>
 <content src="加载内容" />
 <access origin="访问限制" />
 <platform name="android">
 <!-- 针对 Android 平台的配置 -->
 <allow-intent href="market:*" />
 </platform>
 <platform name="ios">
 <!-- 针对 iOS 平台的配置 -->
 <allow-intent href="itms:*" />
 <allow-intent href="itms-apps:*" />
 </platform>
 </widget>上述配置是精简后的,不能直接⽤于项⽬
Widget 
Widget 是 config.xml ⽂档的根元素。
| 属性(类型) | 描述 | 
|---|---|
| id(string) | (必填)指定应⽤程序的 ID (反向域标识符) | 
| version(string) | (必填)⽤ 主要/次要/补丁 表示的完整版本号 | 
| xmlns(string) | (必填)config.xml ⽂件的命名空间 | 
| xmlns:cdv(string) | (必填)命名空间前缀 | 
<?xml version='1.0' encoding='utf-8'?> 
<widget 
    id="io.cordova.hellocordova" 
    version="1.0.0" 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <!- 其他配置 --> 
</widget><?xml version='1.0' encoding='utf-8'?> 
<widget 
    id="io.cordova.hellocordova" 
    version="1.0.0" 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <!- 其他配置 --> 
</widget>name 
指定应⽤程序的正式名称,因为它出现在设备的主屏幕上
<name>HelloCordova</name><name>HelloCordova</name>description 
指定可在应⽤商店上市出现的元数据
<description>A sample Apache Cordova application</description><description>A sample Apache Cordova application</description>author 
指定可在应⽤商店上市出现的联系⼈信息。
| 属性(类型) | 描述 | 
|---|---|
| email(string) | (作者)作者邮箱 | 
| href(string) | (必填)作者⽹站 | 
<author email="dev@cordova.apache.org" href="http://cordova.io"></ author><author email="dev@cordova.apache.org" href="http://cordova.io"></ author>content 
声明应⽤的起始⻚⾯,默认是 index.html,指代 www ⽬录下的 index.html
<content src="startPage.html"></content><content src="startPage.html"></content>access 
声明与应⽤程序通信的外部域名集合。 允许访问所有域名
<access origin="*"></content><access origin="*"></content>允许访问指定域名
<access origin="http://google.com"></content><access origin="http://google.com"></content>allow-navigation 
声明 WebView 可以导航到哪些 URL
<!-- 允许链接到 example.com --> 
<allow-navigation href="http://example.com/*" /> 
<!-- 通配符设置协议, ⼦域名及域名下的路径 -->  
<allow-navigation href="*://*.example.com/*" /><!-- 允许链接到 example.com --> 
<allow-navigation href="http://example.com/*" /> 
<!-- 通配符设置协议, ⼦域名及域名下的路径 -->  
<allow-navigation href="*://*.example.com/*" />allow-intent 
声明应⽤请求系统打开的 URL
<allow-intent href="http://*/*" /> 
<allow-intent href="https://*/*" /> 
<allow-intent href="tel:*" /> 
<allow-intent href="sms:*" /><allow-intent href="http://*/*" /> 
<allow-intent href="https://*/*" /> 
<allow-intent href="tel:*" /> 
<allow-intent href="sms:*" />engine 
指定有关准备过程中要还原的平台的详细信息。
<engine name="android" spec="https://github.com/apache/cordova-and roid.git#5.1.1" /> 
<engine name="ios" spec="^4.0.0" /><engine name="android" spec="https://github.com/apache/cordova-and roid.git#5.1.1" /> 
<engine name="ios" spec="^4.0.0" />plugin 
指定准备过程中要还原的插件的详细信息。
<plugin name="cordova-plugin-device" spec="^1.1.0" /> 
<plugin name="cordova-plugin-device" spec="https://github.com/apac he/cordova-plugin-device.git#1.0.0" /><plugin name="cordova-plugin-device" spec="^1.1.0" /> 
<plugin name="cordova-plugin-device" spec="https://github.com/apac he/cordova-plugin-device.git#1.0.0" />preference 
偏好设置。设置各种 名/值 格式的属性。其中 名 ⼤⼩写敏感。很多属性在特定平台下名称是唯⼀的。
<!-- 状态条的背景⾊ --> 
<preference name="StatusBarBackgroundColor" value="#0000FF" /> 
<!-- Splash ⻚⾯的停留时间 --> 
<preference name="SplashScreenDelay" value="3000" /><!-- 状态条的背景⾊ --> 
<preference name="StatusBarBackgroundColor" value="#0000FF" /> 
<!-- Splash ⻚⾯的停留时间 --> 
<preference name="SplashScreenDelay" value="3000" />更多详情: http://cordova.axuer.com/docs/zh-cn/latest/config_ref/index.html#preference
platform 
声明平台
<platform name="android"> 
<!-- Android 平台下的配置 --> 
<preference name="Fullscreen" value="true" /> 
</platform><platform name="android"> 
<!-- Android 平台下的配置 --> 
<preference name="Fullscreen" value="true" /> 
</platform>hook 
特定动作发⽣时,需要执⾏的⾃定义脚本
<!-- type="钩⼦名称" src="执⾏脚本" --> 
<hook type="after_plugin_install" src="scripts/afterPluginInstall. js" /><!-- type="钩⼦名称" src="执⾏脚本" --> 
<hook type="after_plugin_install" src="scripts/afterPluginInstall. js" />钩⼦详情:https://cordova.apache.org/docs/en/10.x/guide/appdev/hooks/index.html
更多详情:https://cordova.apache.org/docs/en/10.x/config_ref/index.html
Cordova 命令 
基本语法 
cordova <command> [options] -- [platformOpts]cordova <command> [options] -- [platformOpts]查看帮助 
cordova helpcordova help项⽬命令列表 
| 命令 | 描述 | 
|---|---|
| info | ⽣成项⽬信息 | 
| requirements | 检查并打印指定平台的所有安装需求 | 
| platform | 管理项⽬平台 | 
| plugin | 管理项⽬插件 | 
| prepare | 将⽂件复制到平台⽬录下,准备构建 compile 为平台编辑项⽬ | 
| build | 为平台构建项⽬ ( prepare + compile ) | 
| clean | 从构建⼯件中清除项⽬ run 运⾏项⽬ (包括 prepare 和 compile) | 
| serve | 通过本地服务器运⾏项⽬ (包括 prepare) | 
创建项⽬ 
cordova create HelloCordova io.cordova.hellocordova CordovaApp 
# HelloCordova 应⽤程序的⽬录名称。 
# io.cordova.hellocordova 项⽬唯⼀标识(默认的反向域值)。⼀般是点连接的语法
# CordovaApp 应⽤的标题。cordova create HelloCordova io.cordova.hellocordova CordovaApp 
# HelloCordova 应⽤程序的⽬录名称。 
# io.cordova.hellocordova 项⽬唯⼀标识(默认的反向域值)。⼀般是点连接的语法
# CordovaApp 应⽤的标题。常⽤命令 
cordova install android // 将编译好的应⽤程序安装到模拟器上 
cordova emulate android // 在模拟器上运⾏ 
cordova serve android // 在浏览器运⾏ 
cordova build android // 打包 Cordova 项⽬到 android 平台。 
cordova run android // 通过 USB 直接安装到真机(这⾥已经包括了 build 命令)cordova install android // 将编译好的应⽤程序安装到模拟器上 
cordova emulate android // 在模拟器上运⾏ 
cordova serve android // 在浏览器运⾏ 
cordova build android // 打包 Cordova 项⽬到 android 平台。 
cordova run android // 通过 USB 直接安装到真机(这⾥已经包括了 build 命令)命令语法 
这⾥以 管理平台 为例
cordova {platform | platforms} [ 
    add <platform-spec> [...] {--save | link=<path> } | 
        {remove | rm} platform [...] | 
        {list | ls} | 
        check | 
        save ]cordova {platform | platforms} [ 
    add <platform-spec> [...] {--save | link=<path> } | 
        {remove | rm} platform [...] | 
        {list | ls} | 
        check | 
        save ]上述命令语法是官⽹给出的,可以拆分成如下命令
添加平台 
cordova platform add androidcordova platform add android删除平台 
cordova platform remove android 
 # 或 
 cordova platform rm androidcordova platform remove android 
 # 或 
 cordova platform rm android列出平台 
cordova platform list 
# 或 
cordova platform lscordova platform list 
# 或 
cordova platform ls我们可以看到,官⽅给出的语法,实际上是各个命令的组合⽅式。其他命令也是类似的,这⼀不再⼀⼀ 展开
命令参数 
通估参数,可以限制命令的执⾏效果。例如:
# 安装插件,并将插件记录在 package.json 中 (默认) 
cordova plugin add cordova-plugin-geolocation --save 
# 只安装插件,不记录在 package.json 中 
cordova plugin add cordova-plugin-geolocation --nosave# 安装插件,并将插件记录在 package.json 中 (默认) 
cordova plugin add cordova-plugin-geolocation --save 
# 只安装插件,不记录在 package.json 中 
cordova plugin add cordova-plugin-geolocation --nosave更多详情:https://cordova.apache.org/docs/en/10.x/reference/cordova-cli/index.html
插件 
cordova 是⼀个注⼊代码包,允许 Cordova webview 在其中呈现的应⽤程序与运⾏它的本机平台进⾏通 信,提供基于 web 的应⽤程序与设备和平台功能的访问,所有主要的 Cordova API 功能都作为插件实 现,通俗点来说, cordova 插件是连接 web 应⽤程序和设备平台之间的⼀个桥梁。
电池状态 
安装
cordova plugin add cordova-plugin-battery-statuscordova plugin add cordova-plugin-battery-status相机 
安装
cordova plugin add cordova-plugin-cameracordova plugin add cordova-plugin-camera联系⼈ 
安装
cordova plugin add cordova-plugin-contactscordova plugin add cordova-plugin-contacts设备信息 
安装
cordova plugin add cordova-plugin-devicecordova plugin add cordova-plugin-device对话框 
安装
cordova plugin add cordova-plugin-dialogscordova plugin add cordova-plugin-dialogs⽂件系统 
安装
cordova plugin add cordova-plugin-filecordova plugin add cordova-plugin-file地理位置 
安装
cordova plugin add cordova-plugin-geolocationcordova plugin add cordova-plugin-geolocation全球化 
安装
cordova plugin add cordova-plugin-globalizationcordova plugin add cordova-plugin-globalization⽹络状态 
安装
cordova plugin add cordova-plugin-network-informationcordova plugin add cordova-plugin-network-information启动屏幕 
安装
cordova plugin add cordova-plugin-splashscreencordova plugin add cordova-plugin-splashscreen内置浏览器 
安装
cordova plugin add cordova-plugin-inappbrowsercordova plugin add cordova-plugin-inappbrowser扫码 
安装
cordova plugin add cordova-plugin-qrscannercordova plugin add cordova-plugin-qrscannercordova-plugin-device 
该插件用来获取设备信息, 例如: 操作系统, 版本号
安装 
cordova plugin add cordova-plugin-devicecordova plugin add cordova-plugin-device添加按钮 
<button id="device Info">设备信息</button><button id="device Info">设备信息</button>添加事件监听 
document.getElementById ("device Info").addEventListener ("click", device Info);document.getElementById ("device Info").addEventListener ("click", device Info);获取设备信息 
function device Info () {
    alert ("Cordova version: " + device.cordova + "\n" +
       "Device model: "       + device.model + "\n" +
       "Device platform: "    + device.platform + "\n" +
       "Device UUID: "        + device.uu id + "\n" +
       "Device version: "     + device.version);
}function device Info () {
    alert ("Cordova version: " + device.cordova + "\n" +
       "Device model: "       + device.model + "\n" +
       "Device platform: "    + device.platform + "\n" +
       "Device UUID: "        + device.uu id + "\n" +
       "Device version: "     + device.version);
}设备属性 
- device.cordova: 获取 Cordova 版本
 - device.model: 获取设备模型 ( 包含制造商等相关信息)
 - device.platform: 获取设备操作系统名称
 - device.uuid: 获取设备唯一 ID
 - device.version: 获取操作系统版本
 - device.manufacturer: 获取设备制造商
 - device.isVirtual: 判断是否运行在模拟器上
 - device.serial: 获取设备的硬件号码
 
cordova-plugin-whitelist 
该插件用来指定导航中的白名单策略
详情查看: https://www.npmjs.com/package/cordova-plugin-whitelist
安装 
cordova plugin add cordova-plugin-whitelistcordova plugin add cordova-plugin-whitelist一般来说, Cordova 项目初始化时, 会自动安装该插件
使用 
白名单用来配置域名的访问规则 。一 般来说, 有两个地方可以配置
- config.xml 中
 - index.html 的 CSP 中
 
cordova-plugin-inappbrowser 
该插件允许在 Cordova 应用内部打开 Web 地址 ( 例如: 播放视频, 查看文章等) 。而不用跳出当前 App。
详情参考: https://www.npmjs.com/package/cordova-plugin-inappbrowser
安装 
cordova plugin add cordova-plugin-inappbrowsercordova plugin add cordova-plugin-inappbrowser添加触发按钮 
<button id="goBaidu">百度</button><button id="goBaidu">百度</button>添加事件监听 
document.getElementById ("goBaidu").addEventListener ("click", openBaidu);document.getElementById ("goBaidu").addEventListener ("click", openBaidu);跳转 
function openBaidu () {
   var url = 'https://m.baidu.com '; // 跳转地址
   var target = '_blank '; // 打开方式  _blank 新页面 , _self 当前页 , _s y stem 系统浏览器中打开
   var options = "location=yes" // 是否显示地址栏
   var ref = cordova.InAppBrowser.open (url, target, options); 6
   ref.addEventListener ( 'load start ', load startCallback);
   ref.addEventListener ( 'loadstop ', loadstopCallback);
   ref.addEventListener ( 'loaderror ', loaderrorCallback);
   ref.addEventListener ( 'exit ', exitCallback);
   function load startCallback (event) {
      alert ( 'Loading started: '  + event.url)
   }
   function loadstopCallback (event) {
      alert ( 'Loading finished: ' + event.url)
   }
   function loaderrorCallback (error) {
      alert ( 'Loading error: ' + error.message)
   }
   function exitCallback () {
      alert ( 'Browser is closed... ')
   }
}function openBaidu () {
   var url = 'https://m.baidu.com '; // 跳转地址
   var target = '_blank '; // 打开方式  _blank 新页面 , _self 当前页 , _s y stem 系统浏览器中打开
   var options = "location=yes" // 是否显示地址栏
   var ref = cordova.InAppBrowser.open (url, target, options); 6
   ref.addEventListener ( 'load start ', load startCallback);
   ref.addEventListener ( 'loadstop ', loadstopCallback);
   ref.addEventListener ( 'loaderror ', loaderrorCallback);
   ref.addEventListener ( 'exit ', exitCallback);
   function load startCallback (event) {
      alert ( 'Loading started: '  + event.url)
   }
   function loadstopCallback (event) {
      alert ( 'Loading finished: ' + event.url)
   }
   function loaderrorCallback (error) {
      alert ( 'Loading error: ' + error.message)
   }
   function exitCallback () {
      alert ( 'Browser is closed... ')
   }
}跳转语法:
cordova.InAppBrowser.open(url, target, options);也可以将其挂到 window 对象上:window.open = cordova.InAppBrowser.open;
选项参数 
| 选项 | 描述 | 
|---|---|
| location | 用于打开或关闭浏览器位置栏 。 值为是或否。 | 
| hidden | 用于隐藏或显示inAppBrowser 。 值为是或否。 | 
| clearCache | 用于清除浏览器缓存缓存 。 值为是或否。 | 
| clearsessioncache | 用于清除会话cookie缓存 。 值为是或否。 | 
| zoom | 用于隐藏或显示Android浏览器的缩放控件 。 值为是或否。 | 
| hardwareback | 是使用硬件后退按钮浏览浏览器历史记录。无可在关闭浏览器后点击返回按钮。 | 
cordova-plugin-camera 
该插件允许使用摄像头拍照, 或在相册中选取图片。
安装 
cordova plugin add cordova-plugin-cameracordova plugin add cordova-plugin-camera添加按钮和图像 
- 按钮: 负责触发事件
 - 图像: 用来展示图片
 
<button id="take Pic">拍照</button>
<button id="getPic">从相册中选取</button>
<img id="myImage"></img><button id="take Pic">拍照</button>
<button id="getPic">从相册中选取</button>
<img id="myImage"></img>添加事件监听 
// 拍照
document.getElementById ("take Pic").addEventListener ("click", take P
ic);
// 从相册中选取
document.getElementById ("getPic").addEventListener ("click", getPic );// 拍照
document.getElementById ("take Pic").addEventListener ("click", take P
ic);
// 从相册中选取
document.getElementById ("getPic").addEventListener ("click", getPic );拍照 
const take Pic = () => {
   navigator.camera.getPicture (onSuccess, on Fail, {
    quality: 50,
     destinationType: Camera.DestinationType.FILE_URI
   });
   function onSuccess (imageURI) {
     var image = document.getElementById ( 'myImage ');
     image.s rc = imageURI;
   }
   function on Fail (message) {
     alert ( 'Failed because: ' + message);
   }
 }const take Pic = () => {
   navigator.camera.getPicture (onSuccess, on Fail, {
    quality: 50,
     destinationType: Camera.DestinationType.FILE_URI
   });
   function onSuccess (imageURI) {
     var image = document.getElementById ( 'myImage ');
     image.s rc = imageURI;
   }
   function on Fail (message) {
     alert ( 'Failed because: ' + message);
   }
 }语法: camera.getPicture(successCallback, errorCallback, options)
从相册中选取 
const getPic = () => {
   // alert ( '相册 ')
   navigator.camera.getPicture (onSuccess, on Fail, {
     quality: 50,
     destinationType: Camera.DestinationType.FILE_URI,
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });
   function onSuccess (imageURL) {
     var image = document.getElementById ( 'myImage ');
     image.s rc = imageURL;
   }
   function on Fail (message) {
     alert ( 'Failed because: ' + message);
   }
 }const getPic = () => {
   // alert ( '相册 ')
   navigator.camera.getPicture (onSuccess, on Fail, {
     quality: 50,
     destinationType: Camera.DestinationType.FILE_URI,
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });
   function onSuccess (imageURL) {
     var image = document.getElementById ( 'myImage ');
     image.s rc = imageURL;
   }
   function on Fail (message) {
     alert ( 'Failed because: ' + message);
   }
 }拍照选项 
| 字段名 | 类型 | 默认值 | 简介 | 
|---|---|---|---|
| quality | number | 50 | 图像质量在 0-100 范围内, 100 质量最高 | 
| destinationType | Destination Type | FILE URI | DATA_URL 或 0 返回 base64 编码字符 串。FILE_URI 或 1 返回图片文件 URI。NATIVE_URI 或 2 返回图片本机 URI。 | 
| sourceType | Picture Source Type | CAMERA | PHOTOLIBRARY 或 0 打开照片库。CAMERA 或 1 打开本机相机。SAVEDPHOTOALBUM 或 2 打开已保存相册 | 
| allowEdit | Boolean | false | 允许图像编辑 | 
| encodingType | EncodingType | JPEG | JPEG 或 0 返回 JPEG 编码图像。PNG 或 1 返回 PNG 编码图片。 | 
| targetWidth | number | 图片缩放宽度 ( 以像素为单位), 必须与 targetHeight一起使用。纵横比保持不变。 | |
| targetHeight | number | 图片缩放高度 ( 以像素为单位), 必须与 targetWidth 一起使用 。纵横比保持不变。 | |
| mediaType | MediaType | PICTURE | PICTURE 或 0 仅允许选择图片。VIDEO 或 1 仅允许视频选择。ALLMEDIA 或 2 允许选择所有媒体类型。 | 
| correctOrientation | boolean | 用于校正图像的方向。 | |
| saveToPhotoAlbum | Boolean | 用于将图像保存到相册。 | |
| popoverOptions | Camera PopoverOptions | 用于在IOS上设置popover位置。 | |
| cameraDirection | Direction | BACK | FRONT 或 0 前置摄像头。 返回或 1 后置摄像头。ALLMEDIA | 
cordova-plugin-qrscanner 
该插件可以执行扫码功能
详情查看: https://www.npmjs.com/package/cordova-plugin-qrscanner
安装 
cordova plugin add cordova-plugin-qr scannercordova plugin add cordova-plugin-qr scanner初始化 
var done = function (err, status){
   if (err){
     console.error (err._message);
   } else {
     console.log ( 'QRScanner 初始化 . 状态 : ');
     console.log (status);
   }
};
QRScanner.prepare (done);var done = function (err, status){
   if (err){
     console.error (err._message);
   } else {
     console.log ( 'QRScanner 初始化 . 状态 : ');
     console.log (status);
   }
};
QRScanner.prepare (done);扫描 
var callback = function (err, contents) {
   if (err){
     console.error (err._message);
   }
   alert ( '扫描内容 : ' + contents);
};
QRScanner.scan (callback);var callback = function (err, contents) {
   if (err){
     console.error (err._message);
   }
   alert ( '扫描内容 : ' + contents);
};
QRScanner.scan (callback);取消扫描 
QRScanner.cancelScan (function (status) {
   console.log (status);
});QRScanner.cancelScan (function (status) {
   console.log (status);
});扫描开关 
QRScanner.show (function (status) {
   console.log (status);
});
QRScanner.hide (function (status) {
   console.log (status);
});QRScanner.show (function (status) {
   console.log (status);
});
QRScanner.hide (function (status) {
   console.log (status);
});闪光灯开关 
 QRScanner.enable Light (function (err, status) {
   err && console.error (err);
   console.log (status);
 });
 QRScanner.disable Light (function (err, status) {
   err && console.error (err);
   console.log (status);
 }); QRScanner.enable Light (function (err, status) {
   err && console.error (err);
   console.log (status);
 });
 QRScanner.disable Light (function (err, status) {
   err && console.error (err);
   console.log (status);
 });切换摄像头 
 QRScanner.use FrontCamera (function (err, status) {
   err && console.error (err);
   console.log (status);
 });
 QRScanner.useBackCamera (function (err, status) {
   err && console.error (err);
   console.log(status);
 }) QRScanner.use FrontCamera (function (err, status) {
   err && console.error (err);
   console.log (status);
 });
 QRScanner.useBackCamera (function (err, status) {
   err && console.error (err);
   console.log(status);
 })销毁 
 QRScanner.destroy (function (status) {
   console.log (status);
 }); QRScanner.destroy (function (status) {
   console.log (status);
 });cordova-plugin-geolocation 
该插件可以获取位置信息 (经纬度)
详情查看: https://www.npmjs.com/package/cordova-plugin-geolocation
安装 
cordova plugin add cordova-plugin-geo locationcordova plugin add cordova-plugin-geo location添加触发按钮 
<button id="getPosition">获取位置</button>
<button id="watchPosition">监测位置</button><button id="getPosition">获取位置</button>
<button id="watchPosition">监测位置</button>也可以在页面加载时 ( 例如: onload 或 deviceready), 直接调用位置插件。
添加监听事件 
document.getElementById ("getPosition").addEventListener ("click", g
etPosition);
document.getElementById ("watchPosition").addEventListener ("click",
watchPosition);document.getElementById ("getPosition").addEventListener ("click", g
etPosition);
document.getElementById ("watchPosition").addEventListener ("click",
watchPosition);获取位置 
function getPosition () {
   var options = {
      enableHighAccuracy: true, // 启用高精度
      maximumAge: 3600000 // 最大请求时间 ( 单位: 毫秒)
   }
   var watchID = navigator.geo location.getCurrentPosition (onSuccess, on Error, options);
    function onSuccess (position) {
       alert ( 'Latitude: '          + position.coord s.latitude
+ '\n ' + // 纬度
             'Longitude: '         + position.coord s.longitude
+ '\n ' + // 经度
             'Altitude: '          + position.coord s.altitude
+ '\n ' + // 高度
             'Accuracy: '          + position.coord s.accuracy
+ '\n ' + // 精确度
             'Altitude Accuracy: ' + position.coord s.altitudeAccura
cy  + '\n ' + // 高度精确度
             'Heading: '            + position.coord s.heading
+ '\n ' + // 方向
             'Speed: '              + position.coord s.speed
+ '\n ' + // 速度
             'Timestamp: '         + position.timestamp
+ '\n '); // 获取时间戳
    };
    function on Error (error) {
       // alert ( 'code: '    + error.code    + '\n ' + 'message: ' +
error.message + '\n ');
       switch (error.code) {
         case error.PERMISSION_DENIED:
           alert ("定位失败 ,用户拒绝请求地理定位 ");
            break;
         case error.POSITION_UNAVAILABLE:
           alert ("定位失败 ,位置信息是不可用 ");
            break;
         case error.TIMEOUT:
           alert ("定位失败 ,请求获取用户位置超时 ");
            break;
         case error.UNKNOWN_ERROR:
           alert ("定位失败 ,定位系统失效 ");
            break;
       }
   }
 }function getPosition () {
   var options = {
      enableHighAccuracy: true, // 启用高精度
      maximumAge: 3600000 // 最大请求时间 ( 单位: 毫秒)
   }
   var watchID = navigator.geo location.getCurrentPosition (onSuccess, on Error, options);
    function onSuccess (position) {
       alert ( 'Latitude: '          + position.coord s.latitude
+ '\n ' + // 纬度
             'Longitude: '         + position.coord s.longitude
+ '\n ' + // 经度
             'Altitude: '          + position.coord s.altitude
+ '\n ' + // 高度
             'Accuracy: '          + position.coord s.accuracy
+ '\n ' + // 精确度
             'Altitude Accuracy: ' + position.coord s.altitudeAccura
cy  + '\n ' + // 高度精确度
             'Heading: '            + position.coord s.heading
+ '\n ' + // 方向
             'Speed: '              + position.coord s.speed
+ '\n ' + // 速度
             'Timestamp: '         + position.timestamp
+ '\n '); // 获取时间戳
    };
    function on Error (error) {
       // alert ( 'code: '    + error.code    + '\n ' + 'message: ' +
error.message + '\n ');
       switch (error.code) {
         case error.PERMISSION_DENIED:
           alert ("定位失败 ,用户拒绝请求地理定位 ");
            break;
         case error.POSITION_UNAVAILABLE:
           alert ("定位失败 ,位置信息是不可用 ");
            break;
         case error.TIMEOUT:
           alert ("定位失败 ,请求获取用户位置超时 ");
            break;
         case error.UNKNOWN_ERROR:
           alert ("定位失败 ,定位系统失效 ");
            break;
       }
   }
 }监测位置 
 function watchPosition () {
    var options = {
       maximumAge: 3600000,
       timeout: 3000,
       enableHighAccuracy: true,
    }
    var watchID = navigator.geo location.watchPosition (onSuccess, o
n Error, options);
    function onSuccess (position) {
       alert ( 'Latitude: '          + position.coord s.latitude
+ '\n ' +
             'Longitude: '         + position.coord s.longitude
+ '\n ' +
             'Altitude: '          + position.coord s.altitude
+ '\n ' +
             'Accuracy: '          + position.coord s.accuracy
+ '\n ' +
             'Altitude Accuracy: ' + position.coord s.altitudeAccura
cy  + '\n ' +
             'Heading: '            + position.coord s.heading
+ '\n ' +
             'Speed: '              + position.coord s.speed
+ '\n ' +
             'Timestamp: '         + position.timestamp
+ '\n ');
    };
    function on Error (error) {
       alert ( 'code: ' + error.code + '\n ' + 'message: ' + error.mes
sage + '\n ');
    }
 } function watchPosition () {
    var options = {
       maximumAge: 3600000,
       timeout: 3000,
       enableHighAccuracy: true,
    }
    var watchID = navigator.geo location.watchPosition (onSuccess, o
n Error, options);
    function onSuccess (position) {
       alert ( 'Latitude: '          + position.coord s.latitude
+ '\n ' +
             'Longitude: '         + position.coord s.longitude
+ '\n ' +
             'Altitude: '          + position.coord s.altitude
+ '\n ' +
             'Accuracy: '          + position.coord s.accuracy
+ '\n ' +
             'Altitude Accuracy: ' + position.coord s.altitudeAccura
cy  + '\n ' +
             'Heading: '            + position.coord s.heading
+ '\n ' +
             'Speed: '              + position.coord s.speed
+ '\n ' +
             'Timestamp: '         + position.timestamp
+ '\n ');
    };
    function on Error (error) {
       alert ( 'code: ' + error.code + '\n ' + 'message: ' + error.mes
sage + '\n ');
    }
 }取消监测 
 var watchID = navigator.geo location.watchPosition (onSuccess, on Err
or, { enableHighAccuracy: true });
 // ...later on...
 navigator.geo location.clearWatch (watchID); var watchID = navigator.geo location.watchPosition (onSuccess, on Err
or, { enableHighAccuracy: true });
 // ...later on...
 navigator.geo location.clearWatch (watchID);对象属性 
postion
- coords: (Coordinates 类型 )地理坐标信息, 包括经纬度 、海拔 、速度等信息 latitude: (Number) 纬度, 数值 ( 十进制) 
- longitude: (Number) 经度, 数值 ( 十进制)
 - altitude: (Number) 海拔-高度, 数值 ( 米)
 - accuracy: (Number) 精确度, 数值 ( 米)
 - altitudeAccuracy: (Number) 海拔的精确度, 数值 ( 米)
 - heading: (Number) 设备移动的方向, 数值 ( 度)
 - speed: (Number) 设备移动的速度
 
 - coordsType: (String) 坐标系类型, 
- gps: WGS-84 坐标系
 - gcj02: 国测局经纬度坐标系
 - bd09: 百度墨卡托坐标系
 - bd09ll: 百度经纬度坐标系
 - timestamp: (Number) 获取坐标的时间戳
 - address: (Address) 地理位置对应的地址信息, 可以通过设置 PositionOptions 参数 的 geocode 属性值为 false 避免获取地址信息
 - addresses: (String) 获取完整地址描述信息
 
 
- coords: (Coordinates 类型 )地理坐标信息, 包括经纬度 、海拔 、速度等信息 latitude: (Number) 纬度, 数值 ( 十进制) 
 PositionOptions
- enableHighAccuracy: (Boolean) 是否高精确度获取位置信息
 - timeout: (Number 毫秒) 获取位置信息的超时时间
 - maximumAge: (Number 毫秒 ) 获取位置信息的间隔时间, 默认 5000 不是很准
 - provider: (String 类型 )优先使用的定位模块 
- system: 系统定位
 - baidu: 百度定位
 - amap: 高德定位
 - 默认 amap>baidu>system
 
 - coordsType: (String) 指定获取的定位数据坐标系类型, wgs84, gcj02, bd09, bd09ll
 - geocode: (Boolean) 是否解析地址信息, 默认为 true
 
cordova-plugin-globalization 
该插件可以获取全球化信息, 包括: 语言, 日期和时区, 货币等。
详情查看: https://www.npmjs.com/package/cordova-plugin-globalization
安装 
cordova plugin add cordova-plugin-globalizationcordova plugin add cordova-plugin-globalization添加触发按钮 
 <button id="getLanguage">语言</button>
 <button id="getLocaleName">地域</button>
 <button id="getDate"> 日期</button>
 <button id="getCurrency">货币</button> <button id="getLanguage">语言</button>
 <button id="getLocaleName">地域</button>
 <button id="getDate"> 日期</button>
 <button id="getCurrency">货币</button>添加事件监听 
document.getElementById ("getLanguage").addEventListener ("click", g
etLanguage);
document.getElementById ("getLocaleName").addEventListener ("click",
getLocaleName);
document.getElementById ("getDate").addEventListener ("click", getDa
te);
document.getElementById ("getCurrency").addEventListener ("click", g
etCurrency);document.getElementById ("getLanguage").addEventListener ("click", g
etLanguage);
document.getElementById ("getLocaleName").addEventListener ("click",
getLocaleName);
document.getElementById ("getDate").addEventListener ("click", getDa
te);
document.getElementById ("getCurrency").addEventListener ("click", g
etCurrency);获取语言 
function getLanguage () {
   navigator.globalization.getPreferredLanguage (onSuccess, on Error);
   function onSuccess (language) {
     // zh-CN | en-US
     alert ( 'language: ' + language.value + '\n ');
   }
   function on Error (){
     alert ( 'Error getting language ');
   }
}function getLanguage () {
   navigator.globalization.getPreferredLanguage (onSuccess, on Error);
   function onSuccess (language) {
     // zh-CN | en-US
     alert ( 'language: ' + language.value + '\n ');
   }
   function on Error (){
     alert ( 'Error getting language ');
   }
}获取地域 
 function getLocaleName () {
   navigator.globalization.getLocaleName (onSuccess, on Error);
   function onSuccess (locale) {
     // en-US
     alert ( 'locale: ' + locale.value);
   }
   function on Error (){
     alert ( 'Error getting locale ');
   }
} function getLocaleName () {
   navigator.globalization.getLocaleName (onSuccess, on Error);
   function onSuccess (locale) {
     // en-US
     alert ( 'locale: ' + locale.value);
   }
   function on Error (){
     alert ( 'Error getting locale ');
   }
}获取日期 
 function getDate () {
   var date = new Date ();
   var options = {
     formatLength: 'short ',
     selector: 'date and time '
   }
   navigator.globalization.dateToString (date, onSuccess, on Error,
options);
   function onSuccess (date) {
     // 12/4/2021 6:46 PM
     alert ( 'date: ' + date.value);
   }
   function on Error (){
     alert ( 'Error getting dateString ');
   }
 } function getDate () {
   var date = new Date ();
   var options = {
     formatLength: 'short ',
     selector: 'date and time '
   }
   navigator.globalization.dateToString (date, onSuccess, on Error,
options);
   function onSuccess (date) {
     // 12/4/2021 6:46 PM
     alert ( 'date: ' + date.value);
   }
   function on Error (){
     alert ( 'Error getting dateString ');
   }
 }获取货币 
 function getCurrency () {
   var currencyCode = 'EUR ';
   navigator.globalization.getCurrencyPattern (currencyCode, onSucc
ess, on Error);
   function onSuccess (pattern) {
     alert ( 'pattern: '  + pattern.pattern  + '\n ' +
            'code: '     + pattern.code     + '\n ' +
            'fraction: ' + pattern.fraction + '\n ' +
            'rounding: ' + pattern.rounding + '\n ' +
            'decimal: '  + pattern.decimal  + '\n ' +
            'grouping: ' + pattern.grouping);
   }
   function on Error (){
     alert ( 'Error getting pattern ');
   }
 } function getCurrency () {
   var currencyCode = 'EUR ';
   navigator.globalization.getCurrencyPattern (currencyCode, onSucc
ess, on Error);
   function onSuccess (pattern) {
     alert ( 'pattern: '  + pattern.pattern  + '\n ' +
            'code: '     + pattern.code     + '\n ' +
            'fraction: ' + pattern.fraction + '\n ' +
            'rounding: ' + pattern.rounding + '\n ' +
            'decimal: '  + pattern.decimal  + '\n ' +
            'grouping: ' + pattern.grouping);
   }
   function on Error (){
     alert ( 'Error getting pattern ');
   }
 }方法详情 
| 方法 | 参数 | 细节 | 
|---|---|---|
| getPreferredLanguage | onSuccess, onError | 当前语言。 | 
| getLocaleName | onSuccess, onError | 当前地域。 | 
| dateToString | 日期, onSuccess, onError, 选项 | 根据区域设置和时区返回日期。 | 
| stringToDate | dateString, onSuccess, onError, options | 根据客户端的设置解析日期。 | 
| getCurrencyPattern | currencyCode, onSuccess, onError | 货币模式。 | 
| getDatePattern | onSuccess, onError, options | 日期模式。 | 
| getDateNames | onSuccess, onError, options | 返回月 , 周或天的数组。 | 
| isDayLightSavingsTime | date, successCallback, errorCallback | 根据时区和日历确定夏令时是否活动。 | 
| getFirstDayOfWeek | onSuccess, onError | 返回 — 周的第 — 天。 | 
| numberToString | number, onSuccess, onError, options | 返回 number。 | 
| stringToNumber | string, onSuccess, onError, options | 解析 — 个数字。 | 
| getNumberPattern | onSuccess, onError, options | 返回数字模式。 | 
cordova-plugin-splashscreen 
该插件可以设置 App 的启动页面和图标
详情查看: https://www.npmjs.com/package/cordova-plugin-splashscreen
安装 
cordova plugin add cordova-plugin-splash screencordova plugin add cordova-plugin-splash screen添加启动屏幕 
打开项目目录下的 config.xml, 在 widget 中添加配置项
<platform name="android">
     <splash s rc="res/screen/android/splash.png" density="hdpi" />
     <splash s rc="res/screen/android/splash.png" density="ldpi" />
     <splash s rc="res/screen/android/splash.png" density="mdpi" />
     <splash s rc="res/screen/android/splash.png" density="xhdpi" /
>
     <splash s rc="res/screen/android/splash.png" density="xx hdpi"
/>
     <splash s rc="res/screen/android/splash.png" density="xxx hdpi"
/>
     <icon s rc="res/screen/android/m ipmap-ldpi/icon.png" density=
"ldpi" />
     <icon s rc="res/screen/android/m ipmap-mdpi/icon.png" density=
"mdpi" />
     <icon s rc="res/screen/android/m ipmap-hdpi/icon.png" density=
"hdpi" />
     <icon s rc="res/screen/android/m ipmap-xhdpi/icon.png" density=
"xhdpi" />
     <icon s rc="res/screen/android/m ipmap-xx hdpi/icon.png" density
="xx hdpi" />
     <icon s rc="res/screen/android/m ipmap-xxx hdpi/icon.png" dens it
y="xxx hdpi" />
 </platform>
 <platform name="ios">
   <!-- ios 设置省略  -->
 </platform><platform name="android">
     <splash s rc="res/screen/android/splash.png" density="hdpi" />
     <splash s rc="res/screen/android/splash.png" density="ldpi" />
     <splash s rc="res/screen/android/splash.png" density="mdpi" />
     <splash s rc="res/screen/android/splash.png" density="xhdpi" /
>
     <splash s rc="res/screen/android/splash.png" density="xx hdpi"
/>
     <splash s rc="res/screen/android/splash.png" density="xxx hdpi"
/>
     <icon s rc="res/screen/android/m ipmap-ldpi/icon.png" density=
"ldpi" />
     <icon s rc="res/screen/android/m ipmap-mdpi/icon.png" density=
"mdpi" />
     <icon s rc="res/screen/android/m ipmap-hdpi/icon.png" density=
"hdpi" />
     <icon s rc="res/screen/android/m ipmap-xhdpi/icon.png" density=
"xhdpi" />
     <icon s rc="res/screen/android/m ipmap-xx hdpi/icon.png" density
="xx hdpi" />
     <icon s rc="res/screen/android/m ipmap-xxx hdpi/icon.png" dens it
y="xxx hdpi" />
 </platform>
 <platform name="ios">
   <!-- ios 设置省略  -->
 </platform>图标可以针对不同尺寸的屏幕生成 。生成网站: https://icon.wuruihong.com/ 因为 splash 图片的生成收费 , 因此 , 我这里用了同一张图片
另外, 还可以通过 land 和 port 前缀指定横屏和竖屏的 splash
<splash src= "res/screen/android/splash.png " density= " land-hdpi " />    <!-- 横屏启动页 --><splash src= "res/screen/android/splash.png " density= " land-hdpi " />    <!-- 横屏启动页 --><splash src= "res/screen/android/splash.png " density= "port-hdpi " />    <!-- 竖屏启动页 --><splash src= "res/screen/android/splash.png " density= "port-hdpi " />    <!-- 竖屏启动页 -->详情查看 扩展知识
设置启动屏幕 
打开项目目录下的 config.xml, 在 widget 中添加配置项
<preference name="SplashScreenDelay" value="3000" />         <!--
启动时长, 单位: 毫秒  -->
<preference name="FadeSplashScreen" value="false"/>          <!--
启动淡入淡出  -->
<preference name="FadeSplashScreenDuration" value="750"/>    <!--
淡入淡出时长, 默认  500 -->
<preference name="SplashMaintainAspectRatio" value="true" /> <!-- true: 不拉伸图片, 默认  false -->
<preference name="SplashShowOnlyFirstTime" value="true" />   <!-- 只启动一 次  --><preference name="SplashScreenDelay" value="3000" />         <!--
启动时长, 单位: 毫秒  -->
<preference name="FadeSplashScreen" value="false"/>          <!--
启动淡入淡出  -->
<preference name="FadeSplashScreenDuration" value="750"/>    <!--
淡入淡出时长, 默认  500 -->
<preference name="SplashMaintainAspectRatio" value="true" /> <!-- true: 不拉伸图片, 默认  false -->
<preference name="SplashShowOnlyFirstTime" value="true" />   <!-- 只启动一 次  -->扩展知识 
两种布局 
- land ( landscape - 横屏)
 - port ( portrait - 竖屏)
 
密度 
密度为每平方英寸 ( inch) 中的像素 ( px) 数, 常用 dpi ( Dots Per Inch - 每英寸点数) 来表示。
- ldpi 低密度
 - mdpi 中等密度
 - hdpi 高密度
 
屏幕大小 
| 尺寸 | 竖屏 | 横屏 | 
|---|---|---|
| ldpi | 200x320 | 320x200 | 
| mdpi | 320x480 | 480x320 | 
| hdpi | 480x800 | 800x480 | 
| xhdpi | 720x1280 | 1280x720 | 
| xxhdpi | 960x1600 | 1600x960 | 
| xxxhdpi | 1280x1920 | 1920x1280 | 
cordova-plugin-network-information 
该插件可以获取本地网络信息。
详情查看: https://www.npmjs.com/package/cordova-plugin-globalization
安装 
cordova plugin add cordova-plugin-network-informationcordova plugin add cordova-plugin-network-information添加按钮 
<button id="networkInfo">网络详情</button><button id="networkInfo">网络详情</button>添加监听事件 
 document.getElementById ("networkInfo").addEventListener ("click", n
etworkInfo);
 document.addEventListener ("offline", onOffline, false);
 document.addEventListener ("online", onOnline, false); document.getElementById ("networkInfo").addEventListener ("click", n
etworkInfo);
 document.addEventListener ("offline", onOffline, false);
 document.addEventListener ("online", onOnline, false);声明函数 
 function networkInfo () {
    var networkState = navigator.connection.type;
    var states = {};
    states [Connection.UNKNOWN]  = 'Unknown connection ';
    states [Connection.ETHERNET] = 'Ethernet connection ';
    states [Connection.WIFI]     = 'WiFi connection ';
    states [Connection.CELL_2G]  = 'Cell 2G connection ';
    states [Connection.CELL_3G] = 'Cell 3G connection ';
    states [Connection.CELL_4G] = 'Cell 4G connection ';
    states [Connection.CELL] = 'Cell generic connection ';
    states [Connection.NONE] = 'No network connection ';
    alert ( 'Connection type: ' +states [networkState]);
 }
 function onOffline () {
    alert ( '网络掉线! ');
 }
 function onOnline () {
    alert ( '网络在线! ');
 } function networkInfo () {
    var networkState = navigator.connection.type;
    var states = {};
    states [Connection.UNKNOWN]  = 'Unknown connection ';
    states [Connection.ETHERNET] = 'Ethernet connection ';
    states [Connection.WIFI]     = 'WiFi connection ';
    states [Connection.CELL_2G]  = 'Cell 2G connection ';
    states [Connection.CELL_3G] = 'Cell 3G connection ';
    states [Connection.CELL_4G] = 'Cell 4G connection ';
    states [Connection.CELL] = 'Cell generic connection ';
    states [Connection.NONE] = 'No network connection ';
    alert ( 'Connection type: ' +states [networkState]);
 }
 function onOffline () {
    alert ( '网络掉线! ');
 }
 function onOnline () {
    alert ( '网络在线! ');
 }cordova-plugin-battery-status 
该插件用于获取终端电池的状态
详情查看: https://www.npmjs.com/package/cordova-plugin-battery-status
安装 
cordova plugin add cordova-plugin-battery-statuscordova plugin add cordova-plugin-battery-status添加监听事件 
window.addEventListener ("battery status", onBatteryStatus, false);window.addEventListener ("battery status", onBatteryStatus, false);创建回调函数 
function onBatteryStatus (info) {
   alert ("BATTERY STATUS:  Level: " + info.level + " is Plugged: "
+ info.is Plugged);
}function onBatteryStatus (info) {
   alert ("BATTERY STATUS:  Level: " + info.level + " is Plugged: "
+ info.is Plugged);
}- level: 剩余电量的百分比 (0-100)
 - isPlugged: 是否正在充电
 
其他事件 
插件除了 batterystatus 事件之外, 还有两个事件 。这些事件的使用方式与 batterystatus 事件相 同。
| 事件 | 描述 | 
|---|---|
| batterylow | 当电池充电百分比达到低值时触发该事件 。此值在不同设备上有所不同 | 
| batterycritical | 当电池电量百分比达到临界值时触发该事件 。此值在不同设备上有所不同 | 
cordova-plugin-statusbar 
该插件用来设置终端顶部状态条
详情查看: https://www.npmjs.com/package/cordova-plugin-statusbar
安装 
cordova plugin add cordova-plugin-statusbarcordova plugin add cordova-plugin-statusbar配置 
 <!-- 状态栏是否覆盖  WebView -->
 <preference name="StatusBarOverlaysWebView" value="true" /> 3
 <!-- 状态栏背景色  -->
 <preference name="StatusBarBackgroundColor" value="#000000" /> 6
 <!-- 状态栏样式, 可用选项: default, lightcontent, blacktranslucent, b
lackopaque -->
 <preference name="StatusBarStyle" value="lightcontent" /> 9
 <!-- 在   iOS 上, 是否允许  WebView 使用默认的   scroll-to-top 行为  -->
 <preference name="StatusBarDefaultScrollToTop" value="false" /> <!-- 状态栏是否覆盖  WebView -->
 <preference name="StatusBarOverlaysWebView" value="true" /> 3
 <!-- 状态栏背景色  -->
 <preference name="StatusBarBackgroundColor" value="#000000" /> 6
 <!-- 状态栏样式, 可用选项: default, lightcontent, blacktranslucent, b
lackopaque -->
 <preference name="StatusBarStyle" value="lightcontent" /> 9
 <!-- 在   iOS 上, 是否允许  WebView 使用默认的   scroll-to-top 行为  -->
 <preference name="StatusBarDefaultScrollToTop" value="false" />使用 
 // 是否覆盖  WebView
 StatusBar.overlaysWebView (true);
 // 使用默认样式( 黑色文字, 白色背景)
 StatusBar.styleDefault ();
 // 使用高亮样式( 白色文字, 黑色背景)
 StatusBar.style LightContent ();
 // 黑色半透明样式
 StatusBar.styleBlackTranslucent ();
 // 黑色不透明样式
 StatusBar.styleBlackOpaque ();
 // 通过颜色单词设置背景色,
 // 支持的颜色由:
 // black, darkGray, lightGray, white, gray, red, green,
 // blue, cyan, yellow, magenta, orange, purple, brown
 StatusBar.backgroundColorByName ("red");
 // 通过十六进制声明背景颜色
 StatusBar.backgroundColorByHexString ("#C0C0C0");
 // 隐藏状态栏
 StatusBar.hide ();
 // 显示状态栏
 StatusBar.show ();
 // 判断状态栏是否可见
 StatusBar.isVisible
 // 状态栏是否被触碰( 该事件只支持   iOS 平台)
 window.addEventListener ( 'statusTap ', function () {
     // scroll-up with document.body.scrollTop = 0; or do whatever
you want
 }); // 是否覆盖  WebView
 StatusBar.overlaysWebView (true);
 // 使用默认样式( 黑色文字, 白色背景)
 StatusBar.styleDefault ();
 // 使用高亮样式( 白色文字, 黑色背景)
 StatusBar.style LightContent ();
 // 黑色半透明样式
 StatusBar.styleBlackTranslucent ();
 // 黑色不透明样式
 StatusBar.styleBlackOpaque ();
 // 通过颜色单词设置背景色,
 // 支持的颜色由:
 // black, darkGray, lightGray, white, gray, red, green,
 // blue, cyan, yellow, magenta, orange, purple, brown
 StatusBar.backgroundColorByName ("red");
 // 通过十六进制声明背景颜色
 StatusBar.backgroundColorByHexString ("#C0C0C0");
 // 隐藏状态栏
 StatusBar.hide ();
 // 显示状态栏
 StatusBar.show ();
 // 判断状态栏是否可见
 StatusBar.isVisible
 // 状态栏是否被触碰( 该事件只支持   iOS 平台)
 window.addEventListener ( 'statusTap ', function () {
     // scroll-up with document.body.scrollTop = 0; or do whatever
you want
 });自定义插件 
本节实现自定义 Cordova 插件
安装 Plugman 
npm install -g plugmannpm install -g plugmanCordova 通过 Plugman 来创建插件
创建插件 
注意: 存放插件的目录, 不能有中文和空格等特殊符号 。例如: 我先创建一 个目录 cordovaplugin, 然后 cd 进入
 plugman create --name [插件名] --plugin_id [插件id]        --plugin_version [插件版本]
 plugman create --name MyToast --plugin_id me.c liu.mytoast --plugin_version 1.0.0
 cd MyToast plugman create --name [插件名] --plugin_id [插件id]        --plugin_version [插件版本]
 plugman create --name MyToast --plugin_id me.c liu.mytoast --plugin_version 1.0.0
 cd MyToast- 插件名: 建议使用大驼峰
 - 插件 id: 建议使用 Java 包的命名方式, 例如: me.cliu.mytoast
 - 插件版本: 三级写法 1 .0.0
 
生成插件的目录结构:
 MyToast
 ├── src  平台源码
 ├── www  原生JS
 │   └── MyToast.js
 └── plugin.xml	  插件配置文件 MyToast
 ├── src  平台源码
 ├── www  原生JS
 │   └── MyToast.js
 └── plugin.xml	  插件配置文件初始的 MyToast.js 代码
 var exec = require ( 'cordova/exec ') 
 exports.coolMethod = function (arg0,success, error) {
     exec (success, error, 'MyToast ','coolMethod ', [arg0]);
 }; var exec = require ( 'cordova/exec ') 
 exports.coolMethod = function (arg0,success, error) {
     exec (success, error, 'MyToast ','coolMethod ', [arg0]);
 };初始的 plugin.xml 代码
 <?xml version= '1.0 ' encoding= 'utf-8 '?>
 <plugin
   id="me.cliu.mytoast"
   version="1.0.0"
   xmlns="http://apache.org/cordova/ns/plugins/1.0"
   xmlns:android="http://schemas.android.com/apk/res/android"
  >
     <name>MyToast</name>
     <js-module name="MyToast" s rc="www/MyToast.js">
         <clobbers target="cordova.plugins.MyToast" />
     </js-module>
 </plugin> <?xml version= '1.0 ' encoding= 'utf-8 '?>
 <plugin
   id="me.cliu.mytoast"
   version="1.0.0"
   xmlns="http://apache.org/cordova/ns/plugins/1.0"
   xmlns:android="http://schemas.android.com/apk/res/android"
  >
     <name>MyToast</name>
     <js-module name="MyToast" s rc="www/MyToast.js">
         <clobbers target="cordova.plugins.MyToast" />
     </js-module>
 </plugin>| 字段 | 功能简介 | 
|---|---|
| plugin | 定义命名空间, ID和插件版本 。应该用定义在 htp://apache.org/cordova/ns/...命名空 间 。plugin的 ID 在输入 cordova plugins 命令时在插件列表中显示。 | 
| name | 定义插件的名字。 | 
| description | 定义插件的描述信息。 | 
| author | 定义插件作者的名字。 | 
| keywords | 定义与插件相关的关键字 。Cordova研发组建立了公开 、可搜索的插件仓库, 添加的关键 字能在你把插件提交到仓库后帮助被发现。 | 
| license | 定义插件的许可。 | 
| engines | 用来定义插件支持的Cordova版本 。再添加engine元素定义每个支持的Cordova版本。 | 
| js-module | 指js文件名, 而这个文件会自动以 <script >标签的形式添加到Cordova项目的起始页。 通过在js-module中列出插件, 可以减少开发者的工作。 | 
| 字段 | 功能简介 | 
|---|---|
| info | 它是另一个除了description外说插件信息的地方。 | 
添加支持平台 
进入插件目录之后 ( cd MyToast), 我们添加插件支持的平台
 plugman platform add --platform_name android  # 安卓平台支持
 plugman platform add --platform_name ios      # iOS 平台支持 ( 不支持
可以不添加) plugman platform add --platform_name android  # 安卓平台支持
 plugman platform add --platform_name ios      # iOS 平台支持 ( 不支持
可以不添加)添加完平台后, 插件的 src 下会多出两个目录
	MyToast	
	├── s rc	
	├──── android	# 安卓平台支持
	│     └── MyToast.java	
	├──── ios	# iOS 平台支持
	│     └── MyToast.m	
	├── www	
	│   └── MyToast.js	
	└── plugin.xml	MyToast	
	├── s rc	
	├──── android	# 安卓平台支持
	│     └── MyToast.java	
	├──── ios	# iOS 平台支持
	│     └── MyToast.m	
	├── www	
	│   └── MyToast.js	
	└── plugin.xml```src/android/MyToast.java````
如果没有调整的内容, 则不需要编辑
 package me.c liu.mytoast;
 import org.apache.cordova.Cordova Plugin;
 import org.apache.cordova.CallbackContext;
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 /**
  * This class echoes a string called from JavaScript.
  */
 public class MyToast extends Cordova Plugin {
     @Override
     public boolean execute (String action, JSONArray arg s, Callbac
kContext callbackContext) throws JSONException {
         if (action.equals ("coolMethod")) {
              String message = arg s.getString (0);
             this.coolMethod (message, callbackContext);
              return true;
          }
         return false;
     }
     private void coolMethod (String message, CallbackContext callb
ackContext) {
         if (message != null && message.length () > 0) {
             callbackContext.success (message);
         } else {
             callbackContext.error ("Expected one non-empty string
argument.");
         }
     }
 } package me.c liu.mytoast;
 import org.apache.cordova.Cordova Plugin;
 import org.apache.cordova.CallbackContext;
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 /**
  * This class echoes a string called from JavaScript.
  */
 public class MyToast extends Cordova Plugin {
     @Override
     public boolean execute (String action, JSONArray arg s, Callbac
kContext callbackContext) throws JSONException {
         if (action.equals ("coolMethod")) {
              String message = arg s.getString (0);
             this.coolMethod (message, callbackContext);
              return true;
          }
         return false;
     }
     private void coolMethod (String message, CallbackContext callb
ackContext) {
         if (message != null && message.length () > 0) {
             callbackContext.success (message);
         } else {
             callbackContext.error ("Expected one non-empty string
argument.");
         }
     }
 }此时, 我们再来看 — 下 www/MyToast.js
 var exec = require ( 'cordova/exec ');
 exports.coolMethod = function (arg0, success, error) {
     exec (success, error, 'MyToast ', 'coolMethod ', [arg0]);
     // 执行(成功 ,  失败 ,   类名 ,       方法名 ,       参数);
 }; var exec = require ( 'cordova/exec ');
 exports.coolMethod = function (arg0, success, error) {
     exec (success, error, 'MyToast ', 'coolMethod ', [arg0]);
     // 执行(成功 ,  失败 ,   类名 ,       方法名 ,       参数);
 };此时, 我们可以调整代码内容 。例如: 方法名可以自定义 但是 www/MyToast.js 中的类名和方法名 , 需要与 src/android/MyToast.java 中保持一 致
plugin.xml 
目的: 熟悉 plugin.xml 中各个配置项的含义
 <?xml version= '1.0 ' encoding= 'utf-8 '?>
 <plugin
   id="me.c liu.mytoast"
   version="1.0.0"
   xmlns="http://apache.org/cordova/ns/plugins/1.0"
   xmlns:android="http://schemas.android.com/apk/res/android"
 >
   <name>MyToast</name>
   <!--JS 代码的位置    -->
   <js-module name="MyToast" s rc="www/MyToast.js">
     <clobbers target="cordova.plugins.MyToast" />
   </js-module>
   <!--添加  Android 平台    -->
   <platform name="android">
     <config-file parent="/*" target="res/xml/config.xml">
       <!-- JS调用时的名字  -->
       <feature name="MyToast">
         <!-- value: 的值是对应的插件中  MyToast.java 存放的路径  -->
         <param name="android-package" value="me.c liu.mytoast.MyToast" />
       </feature>
     </config-file>
     <config-file parent="/*" target="AndroidManifest.xml"></config-file>
     <!--
              src:是插件里存放对应   .java 的路径,
              target-dir:安装插件时把   .java 文件存放的位置, 要和上面的  value 路径对应
         -->
     <source-file
       s rc="s rc/android/MyToast.java"
       target-dir="s rc/me/c liu/mytoast/MyToast"
     />
   </platform>
 </plugin> <?xml version= '1.0 ' encoding= 'utf-8 '?>
 <plugin
   id="me.c liu.mytoast"
   version="1.0.0"
   xmlns="http://apache.org/cordova/ns/plugins/1.0"
   xmlns:android="http://schemas.android.com/apk/res/android"
 >
   <name>MyToast</name>
   <!--JS 代码的位置    -->
   <js-module name="MyToast" s rc="www/MyToast.js">
     <clobbers target="cordova.plugins.MyToast" />
   </js-module>
   <!--添加  Android 平台    -->
   <platform name="android">
     <config-file parent="/*" target="res/xml/config.xml">
       <!-- JS调用时的名字  -->
       <feature name="MyToast">
         <!-- value: 的值是对应的插件中  MyToast.java 存放的路径  -->
         <param name="android-package" value="me.c liu.mytoast.MyToast" />
       </feature>
     </config-file>
     <config-file parent="/*" target="AndroidManifest.xml"></config-file>
     <!--
              src:是插件里存放对应   .java 的路径,
              target-dir:安装插件时把   .java 文件存放的位置, 要和上面的  value 路径对应
         -->
     <source-file
       s rc="s rc/android/MyToast.java"
       target-dir="s rc/me/c liu/mytoast/MyToast"
     />
   </platform>
 </plugin>www/MyToast.js
 var exec = require ( 'cordova/exec ');
 // MyToast:       是   plugin.xml 文件中的   feature 标签   name 属性
 // coolMethod: 是  js 中调用的方法名
 // [arg0] :     表示一 个参数, [arg0, arg1] :表示两个参数
 exports.coolMethod = function (arg0, success, error) {
     exec (success, error, 'MyToast ', 'coolMethod ', [arg0]);
 }; var exec = require ( 'cordova/exec ');
 // MyToast:       是   plugin.xml 文件中的   feature 标签   name 属性
 // coolMethod: 是  js 中调用的方法名
 // [arg0] :     表示一 个参数, [arg0, arg1] :表示两个参数
 exports.coolMethod = function (arg0, success, error) {
     exec (success, error, 'MyToast ', 'coolMethod ', [arg0]);
 };初始化插件 
进入到插件目录, 然后运行
 cd MyToast
 npm init
 # 或
 plugman createpackagejson [插件路径]
   根据提示一 路向下, 最终会在插件目录下生成 package.json cd MyToast
 npm init
 # 或
 plugman createpackagejson [插件路径]
   根据提示一 路向下, 最终会在插件目录下生成 package.json在项目中安装自定义插件 
 cd [Cordova项目目录]
 cordova plugin add [插件路径]
 // 我本地
 cordova plugin add D:\c liu\HelloCordova\MyToast cd [Cordova项目目录]
 cordova plugin add [插件路径]
 // 我本地
 cordova plugin add D:\c liu\HelloCordova\MyToast声明触发按钮 
在 [项目目录]/www/index.html 中添加如下一 行
 <button id="toast">点我提示</button> <button id="toast">点我提示</button>调用自定义插件 
在 [项目目录]/www/js/index.js 中添加如下内容
 function onDeviceReady () {
     // ....
         // 添加这一 行
     document.getElementById ("toast").addEventListener ("click", ca
llMyToast);
 }
 // 调用自定插件
 function callMyToast () {
     cordova.plugins.MyToast.coolMethod ( 'Hello ', toastSuccess, toa
stFail);
     function toastSuccess (msg) {
         alert ( 'toast success '+msg)
     }
     function toastFail () {
         alert ( 'toast fail ')
     }
 } function onDeviceReady () {
     // ....
         // 添加这一 行
     document.getElementById ("toast").addEventListener ("click", ca
llMyToast);
 }
 // 调用自定插件
 function callMyToast () {
     cordova.plugins.MyToast.coolMethod ( 'Hello ', toastSuccess, toa
stFail);
     function toastSuccess (msg) {
         alert ( 'toast success '+msg)
     }
     function toastFail () {
         alert ( 'toast fail ')
     }
 }