移动开发

外观

微信公众号

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 还不⽀持）

资源网站 ​

架构图 ​

环境搭建 ​

整体来说，Cordova 需要的环境是 Node.js + 平台（例如：Android 和 iOS）。环境搭建主要包含如下内容：

  • Node.js 环境搭建
  • Git 安装
  • Android 环境搭建
  • iOS 环境搭建
  • VS Code 编辑器

Node.js 环境搭建 ​

  • Node.js 的版本应⼤于等于 12，推荐安装 LTS 版本（去 Node.js 官⽹下载安装包）
  • 安装之后，（为了提⾼下载速度）我们将 npm 镜像源，设置为淘宝的
shell
# 修改 npm 的镜像源
npm config set registry https://registry.npm.taobao.org

# 验证是否更改成功（查看镜像源）：
npm config get registry

Git 安装 ​

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 后，可以再配置两个路径

检测安装结果 ​

如果以下命令可以正常运⾏，则说明环境变量配置成功

shell
java -version

javac

Android 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 安装 ​

  1. 下载

下载地址：https://services.gradle.org/distributions/

下载版本：建议使⽤ gradle-6.5-all.zip （我之前下载的 6.8 说太⾼了，⽽后⼜切换到 6.5）

  1. 解压

下载后解压，将加压包放到任意位置（例如，我本地是 D:\Program Files\gradle-6.5）

  1. 绑定环境变量

D:\Program Files\gradle-6.5\bin

检测安装结果

shell
gradle -v

iOS环境搭建 ​

安装 Xcode ​

在 App Store 中安装即可。安装完成后，再安装 iOS 模拟器。

安装部署⼯具 ​

shell
npm install -g ios-sim
npm install -g ios-deploy

初始化项⽬ ​

安装 Cordova CLI ​

shell
npm install -g cordova

cordova -v

创建项目 ​

shell
cordova create HelloCordova io.cordova.hellocordova CordovaApp

# HelloCordova 应⽤程序的⽬录名称。
# io.cordova.hellocordova 项⽬唯⼀标识（默认的反向域值）。⼀般是点连接的语法
# CordovaApp 应⽤的标题。

添加平台 ​

shell
cd HelloCordova

# 浏览器
cordova platform add browser

# 安卓 添加 android 平台，并确保他们保存在了 config.xml 中
cordova platform add android --save

# 查看当前平台
cordova platform ls

当前平台信息（注意平台版本，例如，Android 是 9.0，将来安装模拟器时，也要安装对应的版本）

shell
Installed platforms:

android 9.0.0
browser
Available platforms:
browser ^6.0.0
electron ^1.0.0
windows ^7.0.0

运行 ​

shell
# 浏览器端运⾏
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 不是当前⽬录下的。⽽是构建之后⽬录下的

js
<script src="cordova.js"></script>

这⾥以 browser 平台为例来解释（如果没有添加 browser 平台，请先添加）运⾏ browser

shell
cordova run browser

实际上，平台下 cordova.js 来⾃于 [项⽬⽬录]/platform/[平台名称]/platform_www/cordova.js 不同 平台下的 cordova.js 内容不同

事件 ​

Cordova 给我们提供了很多的事件。应⽤程序代码中可以添加这些事件的监听。

设备就绪 ​

它是 Cordova 设备 API 准备好，并可以访问的信号。相当于 Web ⻚⾯中的 onload 事件。

js
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
// 设备就绪后的其他逻辑代码
}

其他后续事件，⼀般都写在 onDeviceReady 函数中

应用挂起 ​

js
function onDeviceReady() {
    // 当前应⽤切换到后台时，触发 pause 事件
    document.addEventListener('pause', function() {
        alert('设备挂起');
    })
}

应用回来 ​

js
function onDeviceReady() {
    // 当前应⽤由后台切换到前台时，触发 resume 事件
    document.addEventListener('resume', function() {
        alert('设备重新回来');
    })
}

回退按钮 ​

js
function onDeviceReady() {
    // 点击回退按钮时，触发 backbutton 事件
    document.addEventListener('backbutton', function() {
        alert('回退按钮');
    })
}

菜单按钮 ​

js
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 应⽤程序的全局配置⽂件。进⾏项⽬构建后，该⽂件会被复制到平台的⼦⽬录下。例如

shell
app/platforms/android/res/xml/config.xml
app/platforms/ios/AppName/config.xml
app/platforms/browser/config.xml

基本结构 ​

html
<?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)（必填）命名空间前缀
js
<?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 ​

指定应⽤程序的正式名称，因为它出现在设备的主屏幕上

js
<name>HelloCordova</name>

description ​

指定可在应⽤商店上市出现的元数据

js
<description>A sample Apache Cordova application</description>

author ​

指定可在应⽤商店上市出现的联系⼈信息。

属性（类型）描述
email(string)（作者）作者邮箱
href(string)（必填）作者⽹站
js
<author email="dev@cordova.apache.org" href="http://cordova.io"></ author>

content ​

声明应⽤的起始⻚⾯，默认是 index.html，指代 www ⽬录下的 index.html

js
<content src="startPage.html"></content>

access ​

声明与应⽤程序通信的外部域名集合。 允许访问所有域名

js
<access origin="*"></content>

允许访问指定域名

js
<access origin="http://google.com"></content>

allow-navigation ​

声明 WebView 可以导航到哪些 URL

js
<!-- 允许链接到 example.com --> 
<allow-navigation href="http://example.com/*" /> 
<!-- 通配符设置协议, ⼦域名及域名下的路径 -->  
<allow-navigation href="*://*.example.com/*" />

allow-intent ​

声明应⽤请求系统打开的 URL

js
<allow-intent href="http://*/*" /> 
<allow-intent href="https://*/*" /> 
<allow-intent href="tel:*" /> 
<allow-intent href="sms:*" />

engine ​

指定有关准备过程中要还原的平台的详细信息。

js
<engine name="android" spec="https://github.com/apache/cordova-and roid.git#5.1.1" /> 
<engine name="ios" spec="^4.0.0" />

plugin ​

指定准备过程中要还原的插件的详细信息。

js
<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 ​

偏好设置。设置各种 名/值 格式的属性。其中 名 ⼤⼩写敏感。很多属性在特定平台下名称是唯⼀的。

js
<!-- 状态条的背景⾊ --> 
<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 ​

声明平台

js
<platform name="android"> 
<!-- Android 平台下的配置 --> 
<preference name="Fullscreen" value="true" /> 
</platform>

hook ​

特定动作发⽣时，需要执⾏的⾃定义脚本

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 命令 ​

基本语法 ​

shell
cordova <command> [options] -- [platformOpts]

查看帮助 ​

shell
cordova help

项⽬命令列表 ​

命令描述
info⽣成项⽬信息
requirements检查并打印指定平台的所有安装需求
platform管理项⽬平台
plugin管理项⽬插件
prepare将⽂件复制到平台⽬录下，准备构建 compile 为平台编辑项⽬
build为平台构建项⽬ ( prepare + compile )
clean从构建⼯件中清除项⽬ run 运⾏项⽬ (包括 prepare 和 compile)
serve通过本地服务器运⾏项⽬ (包括 prepare)

创建项⽬ ​

shell
cordova create HelloCordova io.cordova.hellocordova CordovaApp 
# HelloCordova 应⽤程序的⽬录名称。 
# io.cordova.hellocordova 项⽬唯⼀标识（默认的反向域值）。⼀般是点连接的语法
# CordovaApp 应⽤的标题。

常⽤命令 ​

shell
cordova install android // 将编译好的应⽤程序安装到模拟器上 
cordova emulate android // 在模拟器上运⾏ 
cordova serve android // 在浏览器运⾏ 
cordova build android // 打包 Cordova 项⽬到 android 平台。 
cordova run android // 通过 USB 直接安装到真机（这⾥已经包括了 build 命令）

命令语法 ​

这⾥以 管理平台 为例

js
cordova {platform | platforms} [ 
    add <platform-spec> [...] {--save | link=<path> } | 
        {remove | rm} platform [...] | 
        {list | ls} | 
        check | 
        save ]

上述命令语法是官⽹给出的，可以拆分成如下命令

添加平台 ​

shell
cordova platform add android

删除平台 ​

shell
cordova platform remove android 
 # 或 
 cordova platform rm android

列出平台 ​

shell
cordova platform list 
# 或 
cordova platform ls

我们可以看到，官⽅给出的语法，实际上是各个命令的组合⽅式。其他命令也是类似的，这⼀不再⼀⼀ 展开

命令参数 ​

通估参数，可以限制命令的执⾏效果。例如：

shell
# 安装插件，并将插件记录在 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 应⽤程序和设备平台之间的⼀个桥梁。

电池状态 ​

安装

shell
cordova plugin add cordova-plugin-battery-status

相机 ​

安装

shell
cordova plugin add cordova-plugin-camera

联系⼈ ​

安装

shell
cordova plugin add cordova-plugin-contacts

设备信息 ​

安装

shell
cordova plugin add cordova-plugin-device

对话框 ​

安装

shell
cordova plugin add cordova-plugin-dialogs

⽂件系统 ​

安装

shell
cordova plugin add cordova-plugin-file

地理位置 ​

安装

shell
cordova plugin add cordova-plugin-geolocation

全球化 ​

安装

shell
cordova plugin add cordova-plugin-globalization

⽹络状态 ​

安装

shell
cordova plugin add cordova-plugin-network-information

启动屏幕 ​

安装

shell
cordova plugin add cordova-plugin-splashscreen

内置浏览器 ​

安装

shell
cordova plugin add cordova-plugin-inappbrowser

扫码 ​

安装

shell
cordova plugin add cordova-plugin-qrscanner

cordova-plugin-device ​

该插件用来获取设备信息， 例如： 操作系统， 版本号

详情查看： https://www.npmjs.com/package/cordova-plugin-device

安装 ​

shell
cordova plugin add cordova-plugin-device

添加按钮 ​

js
<button id="device Info">设备信息</button>

添加事件监听 ​

js
document.getElementById ("device Info").addEventListener ("click", device Info);

获取设备信息 ​

js
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

安装 ​

shell
cordova 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

安装 ​

shell
cordova plugin add cordova-plugin-inappbrowser

添加触发按钮 ​

js
<button id="goBaidu">百度</button>

添加事件监听 ​

js
document.getElementById ("goBaidu").addEventListener ("click", openBaidu);

跳转 ​

js
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 ​

该插件允许使用摄像头拍照， 或在相册中选取图片。

详情查看： https://www.npmjs.com/package/cordova-plugin-camera

安装 ​

shell
cordova plugin add cordova-plugin-camera

添加按钮和图像 ​

  • 按钮： 负责触发事件
  • 图像： 用来展示图片
js
<button id="take Pic">拍照</button>
<button id="getPic">从相册中选取</button>
<img id="myImage"></img>

添加事件监听 ​

js
// 拍照
document.getElementById ("take Pic").addEventListener ("click", take P
ic);

// 从相册中选取
document.getElementById ("getPic").addEventListener ("click", getPic );

拍照 ​

js
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)

从相册中选取 ​

js
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);
   }
 }

拍照选项 ​

字段名类型默认值简介
qualitynumber50图像质量在 0-100 范围内， 100 质量最高
destinationTypeDestination TypeFILE URIDATA_URL 或 0 返回 base64 编码字符 串。FILE_URI 或 1 返回图片文件 URI。NATIVE_URI 或 2 返回图片本机 URI。
sourceTypePicture Source TypeCAMERAPHOTOLIBRARY 或 0 打开照片库。CAMERA 或 1 打开本机相机。SAVEDPHOTOALBUM 或 2 打开已保存相册
allowEditBooleanfalse允许图像编辑
encodingTypeEncodingTypeJPEGJPEG 或 0 返回 JPEG 编码图像。PNG 或 1 返回 PNG 编码图片。
targetWidthnumber图片缩放宽度 （ 以像素为单位）， 必须与 targetHeight一起使用。纵横比保持不变。
targetHeightnumber图片缩放高度 （ 以像素为单位）， 必须与 targetWidth 一起使用 。纵横比保持不变。
mediaTypeMediaTypePICTUREPICTURE 或 0 仅允许选择图片。VIDEO 或 1 仅允许视频选择。ALLMEDIA 或 2 允许选择所有媒体类型。
correctOrientationboolean用于校正图像的方向。
saveToPhotoAlbumBoolean用于将图像保存到相册。
popoverOptionsCamera PopoverOptions用于在IOS上设置popover位置。
cameraDirectionDirectionBACKFRONT 或 0 前置摄像头。 返回或 1 后置摄像头。ALLMEDIA

cordova-plugin-qrscanner ​

该插件可以执行扫码功能

详情查看： https://www.npmjs.com/package/cordova-plugin-qrscanner

安装 ​

js
cordova plugin add cordova-plugin-qr scanner

初始化 ​

js
var done = function (err, status){
   if (err){
     console.error (err._message);
   } else {
     console.log ( 'QRScanner 初始化 . 状态 : ');
     console.log (status);
   }
};

QRScanner.prepare (done);

扫描 ​

js
var callback = function (err, contents) {
   if (err){
     console.error (err._message);
   }
   alert ( '扫描内容 : ' + contents);
};
QRScanner.scan (callback);

取消扫描 ​

js
QRScanner.cancelScan (function (status) {
   console.log (status);
});

扫描开关 ​

js
QRScanner.show (function (status) {
   console.log (status);
});
QRScanner.hide (function (status) {
   console.log (status);
});

闪光灯开关 ​

js
 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);
 });

切换摄像头 ​

js
 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);
 })

销毁 ​

js
 QRScanner.destroy (function (status) {
   console.log (status);
 });

cordova-plugin-geolocation ​

该插件可以获取位置信息 （经纬度）

详情查看： https://www.npmjs.com/package/cordova-plugin-geolocation

安装 ​

js
cordova plugin add cordova-plugin-geo location

添加触发按钮 ​

js
<button id="getPosition">获取位置</button>
<button id="watchPosition">监测位置</button>

也可以在页面加载时 （ 例如： onload 或 deviceready）， 直接调用位置插件。

添加监听事件 ​

js
document.getElementById ("getPosition").addEventListener ("click", g
etPosition);
document.getElementById ("watchPosition").addEventListener ("click",
watchPosition);

获取位置 ​

js
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;
       }
   }
 }

监测位置 ​

js
 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 ');
    }
 }

取消监测 ​

js
 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) 获取完整地址描述信息

  • 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

安装 ​

js
cordova plugin add cordova-plugin-globalization

添加触发按钮 ​

js
 <button id="getLanguage">语言</button>
 <button id="getLocaleName">地域</button>
 <button id="getDate"> 日期</button>
 <button id="getCurrency">货币</button>

添加事件监听 ​

js
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);

获取语言 ​

js
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 ');
   }
}

获取地域 ​

js
 function getLocaleName () {
   navigator.globalization.getLocaleName (onSuccess, on Error);

   function onSuccess (locale) {
     // en-US
     alert ( 'locale: ' + locale.value);
   }

   function on Error (){
     alert ( 'Error getting locale ');
   }
}

获取日期 ​

js
 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 ');
   }
 }

获取货币 ​

js
 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 ');
   }
 }

方法详情 ​

方法参数细节
getPreferredLanguageonSuccess， onError当前语言。
getLocaleNameonSuccess， onError当前地域。
dateToString日期， onSuccess， onError， 选项根据区域设置和时区返回日期。
stringToDatedateString， onSuccess， onError， options根据客户端的设置解析日期。
getCurrencyPatterncurrencyCode， onSuccess， onError货币模式。
getDatePatternonSuccess， onError， options日期模式。
getDateNamesonSuccess， onError， options返回月 ， 周或天的数组。
isDayLightSavingsTimedate， successCallback， errorCallback根据时区和日历确定夏令时是否活动。
getFirstDayOfWeekonSuccess， onError返回 — 周的第 — 天。
numberToStringnumber， onSuccess， onError， options返回 number。
stringToNumberstring， onSuccess， onError， options解析 — 个数字。
getNumberPatternonSuccess， onError， options返回数字模式。

cordova-plugin-splashscreen ​

该插件可以设置 App 的启动页面和图标

详情查看： https://www.npmjs.com/package/cordova-plugin-splashscreen

安装 ​

js
cordova plugin add cordova-plugin-splash screen

添加启动屏幕 ​

打开项目目录下的 config.xml， 在 widget 中添加配置项

js
<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

js
<splash src= "res/screen/android/splash.png " density= " land-hdpi " />    <!-- 横屏启动页 -->
js
<splash src= "res/screen/android/splash.png " density= "port-hdpi " />    <!-- 竖屏启动页 -->

详情查看 扩展知识

设置启动屏幕 ​

打开项目目录下的 config.xml， 在 widget 中添加配置项

js
<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 高密度

屏幕大小 ​

尺寸竖屏横屏
ldpi200x320320x200
mdpi320x480480x320
hdpi480x800800x480
xhdpi720x12801280x720
xxhdpi960x16001600x960
xxxhdpi1280x19201920x1280

cordova-plugin-network-information ​

该插件可以获取本地网络信息。

详情查看： https://www.npmjs.com/package/cordova-plugin-globalization

安装 ​

js
cordova plugin add cordova-plugin-network-information

添加按钮 ​

js
<button id="networkInfo">网络详情</button>

添加监听事件 ​

js
 document.getElementById ("networkInfo").addEventListener ("click", n
etworkInfo);
 document.addEventListener ("offline", onOffline, false);
 document.addEventListener ("online", onOnline, false);

声明函数 ​

js
 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

安装 ​

js
cordova plugin add cordova-plugin-battery-status

添加监听事件 ​

js
window.addEventListener ("battery status", onBatteryStatus, false);

创建回调函数 ​

js
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

安装 ​

js
cordova plugin add cordova-plugin-statusbar

配置 ​

js
 <!-- 状态栏是否覆盖  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" />

使用 ​

js
 // 是否覆盖  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 ​

shell
npm install -g plugman

Cordova 通过 Plugman 来创建插件

创建插件 ​

注意： 存放插件的目录， 不能有中文和空格等特殊符号 。例如： 我先创建一 个目录 cordovaplugin， 然后 cd 进入

shell
 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

生成插件的目录结构：

js
 MyToast
 ├── src  平台源码
 ├── www  原生JS
 │   └── MyToast.js
 └── plugin.xml	  插件配置文件

初始的 MyToast.js 代码

js
 var exec = require ( 'cordova/exec ') 
 exports.coolMethod = function (arg0,success, error) {
     exec (success, error, 'MyToast ','coolMethod ', [arg0]);
 };

初始的 plugin.xml 代码

js
 <?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）， 我们添加插件支持的平台

js
 plugman platform add --platform_name android  # 安卓平台支持
 plugman platform add --platform_name ios      # iOS 平台支持 （ 不支持
可以不添加）

添加完平台后， 插件的 src 下会多出两个目录

js
	MyToast	
	├── s rc	
	├──── android	# 安卓平台支持
	│     └── MyToast.java	
	├──── ios	# iOS 平台支持
	│     └── MyToast.m	
	├── www	
	│   └── MyToast.js	
	└── plugin.xml

```src/android/MyToast.java````

如果没有调整的内容， 则不需要编辑

js
 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

js
 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 中各个配置项的含义

js
 <?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

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]);
 };

初始化插件 ​

进入到插件目录， 然后运行

shell
 cd MyToast
 npm init

 # 或
 plugman createpackagejson [插件路径]
   根据提示一 路向下， 最终会在插件目录下生成 package.json

在项目中安装自定义插件 ​

shell
 cd [Cordova项目目录]
 cordova plugin add [插件路径]

 // 我本地
 cordova plugin add D:\c liu\HelloCordova\MyToast

声明触发按钮 ​

在 [项目目录]/www/index.html 中添加如下一 行

js
 <button id="toast">点我提示</button>

调用自定义插件 ​

在 [项目目录]/www/js/index.js 中添加如下内容

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 ')
     }
 }

本站总访问量次，本站总访客数人次
Released under the MIT License.

Copyright © 2023-present codeteenager