cordova项目全过程

time_goes

已于 2023-02-15 14:02:36 修改

阅读量2.2k

点赞数 1

分类专栏： study 文章标签： android javascript 前端

于 2022-08-01 16:35:35 首次发布

本文链接：https://blog.youkuaiyun.com/time_goes/article/details/126039333

版权

study 专栏收录该内容

13 篇文章

订阅专栏

依赖环境概述：node.js、jdk8、android-sdk、gradle

写在前面：安装cordova要注意版本兼容问题！！！

由于我的电脑是window7的，最高只能安装node.js13版本的，在后续安装cordova时，只能选择cordova9（虽然cordova已经出到11了。所以在安装cordova时要指定安装的版本，不然会默认安装最新的）；由于cordova9的限制，后续在android-sdk配置android版本时要选择android9（API28）

一、环境安装

1.安装node.js

去官网下载安装包，正常安装就行，没有特别需要注意的（略过）

2.安装jdk8

在oracle官网找到JDK8
在这里插入图片描述
然后傻瓜式安装，安装完成后 需要配置环境变量
a、新建系统变量，变量名：JAVA_HOME ，变量值为 jdk 的安装路径（一般默认是C:\Program Files\Java）
b、新建系统变量，变量名：CLASSPATH ，变量值： .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar（注意：变量值开头是英文句号）
c、修改Path变量，增加：%JAVA_HOME%\bin
d、检验安装配置是否成功，cmd中输入：java -version 获取当前安装的 jdk 的版本信息；在输入：javac.exe

3.安装android-sdk

去：https://www.androiddevtools.cn/ 下载
在这里插入图片描述
下载的是.exe的话，需要自己安装一下（正常安装即可），下载.zip的话，就直接解压到想要安装的目录下即可（无需安装）
安装完成后，运行SDK Manager.exe

下载Android SDK Tools、Android SDK Platform-tools、Android SDKBuild-tools、Android 9(API 28)和extras文件夹中的东西
在这里插入图片描述

下载完成后，需要配置环境变量
a、新建系统变量，变量名：ANDROID_HOME ，变量值 SDK 的安装路径
b、修改Path变量，增加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
c、检验Android SDK是否安装成功，cmd中输入：adb version

4.安装cordova

安装最新版本就是：npm install -g cordova
安装指定版本(cordova9)：npm install -g cordova@9.x
cmd中输入 cordova -v 查看版本号证明安装成功

5.安装gradle

选择下载binary-only版本下载
在这里插入图片描述
然后解压（解压到任意目录都可）
然后配置环境变量
a、新建系统变量，变量名：GRADLE_HOME，变量值解压的路径
b、修改Path变量，增加：%GRADLE_HOME%\bin
c、检验是否安装成功，cmd中输入：gradle -v

二、项目创建

创建项目：

进到你所要创建项目的目录下，cmd中输入：

$ cordova create hello com.example.hello HelloWorld

添加平台：

cd hello中

 cordova platform add ios
 cordova platform add android

要检查您当前的平台集：

 cordova platform ls

构建

构建之前先检查环境是否满足构建平台的要求：

 cordova requirements

如下图：如果有环境不满足，则先弄好环境
在这里插入图片描述
运行以下命令为所有平台构建项目：

cordova build

特定平台下构建：

cordova build android

构建完成后会在：xxx\hello\platforms\android\app\build\outputs\apk\debug目录下生成apk文件（就可以在手机上安装看效果啦~）

三、插件功能

1.相机插件

安装插件：

 cordova plugin add cordova-plugin-camera

使用：

要写在onDeviceReady函数中(实际项目中发现，不写在onDeviceReady函数中也是可以使用cordova插件的，只要保证调用时设备和页面加载完毕即可。比如有时在另一个页面中要使用别的页面的方法，就不能访问到onDeviceReady函数及写在onDeviceReady里面的方法，所以只能写在onDeviceReady函数外面了)

navigator.camera.getPicture(function (data) {
		// 拍照成功后执行的业务操作...
	 	document.getElementById("myImage").src = data;
	 },function (message) {
	  	// 失败
		alert(message); 
	  },{
		destinationType:Camera.DestinationType.FILE_URI,
	 	cameraDirection:Camera.Direction.BACK
})

2.获取地理位置插件

ios用cordova官方提供的：cordova-plugin-geolocation 插件
android用基于百度Android 定位sdk的：cordova-plugin-baidugeolocation 插件

申请AK:

要使用百度Android 定位sdk要先申请百度地图的AK，具体步骤查看百度地图官网https://lbsyun.baidu.com/介绍：https://lbsyun.baidu.com/index.php?title=android-locsdk/guide/create-project/key
在这里插入图片描述

安装插件：

cordova plugin add cordova-plugin-baidugeolocation --variable ANDROID_KEY=刚刚申请的安卓AK

cordova plugin add cordova-plugin-geolocation

使用：

			//判断设备类型，android使用百度的定位，ios使用cordova-plugin-geolocation
            if(device.platform == "Android"){
                BaiduGeolocation.getCurrentPosition(function (result) {
                	// 获取定位成功后执行业务操作...
                    alert(JSON.stringify(result))
                }, function (error) {
                    alert(JSON.stringify(error))
                }, {timeout: 3000});
            }else {
                var options = {
                    enableHighAccuracy: true,
                    timeout: 5000,
                    maximumAge: 3000
                 }
    
                var onSuccess = function(position) {
                    alert('Latitude: '          + position.coords.latitude          + '\n' +
                          'Longitude: '         + position.coords.longitude         + '\n' +
                          'Altitude: '          + position.coords.altitude          + '\n' +
                          'Accuracy: '          + position.coords.accuracy          + '\n' +
                          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
                          'Heading: '           + position.coords.heading           + '\n' +
                          'Speed: '             + position.coords.speed             + '\n' +
                          'Timestamp: '         + position.timestamp                + '\n');
                };
            
                // onError Callback receives a PositionError object
                function onError(error) {
                    alert('code: '    + error.code    + '\n' +
                          'message: ' + error.message + '\n');
                }
    
                navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
            }

注意：安卓一定要指定 timeout参数，如果地理定位服务关闭，onError则在间隔后调用回调timeout。如果timeout未指定参数，则不会调用回调。

3.应用浏览器插件

在cordova的壳子中，要跳转到其他第三方的页面（在服务器上部署的应用），不能直接使用window.open的方式（这种方式跳转会跳到手机的浏览器上访问了，就跳出了app本身），要使用应用浏览器插件进行跳转
但是在应用浏览器中，不能直接访问手机的原生功能了（相机等等），要通过消息机制来实现

安装插件

cordova plugin add cordova-plugin-inappbrowser

使用：

cordova.InAppBrowser.open(url, target, options)
如：
cordova.InAppBrowser.open('http://trustee.betatime.com.cn:27910/cordovawebtest?user=beta123', '_self', 'location=no,zoom=no');

具体的 target, options参数详解参看cordova官网
由于安全和白名单的问题，这样跳转会出现无法访问页面的情况，还需要：
在 /config.xml文件 中添加<allow-navigation>标签来配置导航白名单：

<allow-navigation href="http://trustee.betatime.com.cn:27910/*/*" />

在 /platforms/android/app/src/main/AndroidManifest.xml文件 中的 <application> 标签中添加android:usesCleartextTraffic=“true”：

<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:usesCleartextTraffic="true">

实现一个页面，既有服务器上的部分，也有本地app的页面功能

在这里插入图片描述
原理：使用inappbrowser打开服务器上的页面，使用inappbrowser提供的脚本注入方法叫js代码注入到页面上，形成服务器上的页面也有本地页面的效果

//跳转服务器页面
var ref = cordova.InAppBrowser.open('https://xxx.xxx' , '_blank', 'location=no,zoom=no')
// 添加监听，当页面加载完成loadstop后，会调用脚本注入函数replaceFooter
ref.addEventListener('loadstop', replaceFooter);

function replaceHeaderImage() {
	ref.executeScript({ // 注入的脚本代码
		code: "var div=document.createElement('div'); div.style.backgroundColor='orange';div.style.width='100px';div.style.height='100px';var 	body=$('body');body.append(div)"
 	}, function() { // 注入成功后回调
		alert("Element Successfully Hijacked");
	 });
}

注入代码多的时候，可以直接注入一个js文件

function replaceHeaderImage() {
	ref.executeScript({ 
		file: "myscript.js" // 注入的脚本文件
 	}, function() { // 注入成功后回调
		alert("Element Successfully Hijacked");
	 });
}

4.发送短信插件

安装插件

cordova plugin add cordova-sms-plugin

使用

// 手机自带的短信应用界面发短信
function sendSms(message){
    var options = {
        replaceLineBreaks: false, // true to replace \n by a new line, false by default
        android: {
            intent: 'INTENT'  // send SMS with the native android SMS messaging
        }
    };
    var success = function () { console.log('打开短信成功'); };
    var error = function (e) { alert('短信发送失败:' + e); };
    try {
    	//  window.sms.send("15271485839", "message是要发送的短信内容", options, success, error);
        window.sms.send("", message, options, success, error);
        
    } catch (error) {
        console.log('sendSms:error'+ JSON.stringify(error))
    }
}

5.二维码扫码插件

安装插件

cordova plugin add phonegap-plugin-barcodescanner

使用

	cordova.plugins.barcodeScanner.scan(
            function(result) {
                //扫码成功后执行的回调函数
				// alert("收到一个二维码n" +
                // "扫码文字结果: " + result.text + "n" +
                // "格式: " + result.format + "n" +
                // "是否在扫码页面取消扫码: " + result.cancelled);
                
                // 扫码成功后执行业务操作。。。。。。
            },
            function(error) {
             //扫码失败执行的回调函数
             console.log("Scanning failed: " + error);
            }, {
             // preferFrontCamera: true, // iOS and Android 设置前置摄像头
            //  showFlipCameraButton: true, // iOS and Android 显示旋转摄像头按钮
            //  showTorchButton: true, // iOS and Android 显示打开闪光灯按钮
             torchOn: false, // Android, launch with the torch switched on (if available)打开手电筒
             prompt: "在扫描区域内放置二维码", // Android提示语
             resultDisplayDuration: 0, // Android, display scanned text for X ms.
             //0 suppresses it entirely, default 1500 设置扫码时间的参数
             formats: "QR_CODE", // 二维码格式可设置多种类型
             orientation: "portrait" // Android only (portrait|landscape),
             //default unset so it rotates with the device在安卓上 landscape 是横屏状态
             // disableAnimations: true, // iOS     是否禁止动画
             // disableSuccessBeep: false // iOS and Android  禁止成功后提示声音 “滴”
            }
	)

6.获取app版本插件

安装插件

cordova plugin add cordova-plugin-app-version

使用

cordova.getAppVersion.getVersionNumber().then(function (version) {
        console.log('获取版本：'+ version)
        localStorage.setItem('.appVersion', version)
});

7.指纹插件

安装插件

cordova plugin add cordova-plugin-android-fingerprint-auth

使用

//点击同意开通指纹时，先验证手机是否支持指纹，不支持则提示
$('#fp-dialog').on('click', '.weui-dialog__btn', function(){
        $(this).parents('.js_dialog').fadeOut(200);
        $(this).parents('.js_dialog').attr('aria-hidden','true');
        $(this).parents('.js_dialog').removeAttr('tabindex');
        if($(this).attr('id') === 'open'){ // 点击同意开通指纹
            FingerprintAuth.isAvailable(isAvailableSuccess, isAvailableError);
        }else{
        	// fingerprint: 是否开通指纹标志
        	// LAST_MODE:登陆方式；0:是账号密码登陆，1是指纹登陆（手机需求一般开通了指纹就默认指纹登陆方式优先）
            localStorage.setItem(concatCacheKey('fingerprint'), false)
            localStorage.setItem(concatCacheKey('LAST_MODE'), 0)
        }
        localStorage.setItem(concatCacheKey('firstLogin'), false)

});

function isAvailableSuccess(result) { // 支持指纹
    if (result.isAvailable) {
        localStorage.setItem(concatCacheKey('fingerprint'), true)
        localStorage.setItem(concatCacheKey('LAST_MODE'), 1)
    }else{
        localStorage.setItem(concatCacheKey('fingerprint'), false)
        localStorage.setItem(concatCacheKey('LAST_MODE'), 0)
    }
}

function isAvailableError(message) { // 不支持指纹
    alert("获取指纹支持失败");
}

8.打开手机系统设置插件

安装插件

cordova plugin add cordova-open-native-settings

使用

	window.cordova.plugins.settings.open(["settings", true], function() {
					//打开系统设置成功
                    // alert('opened settings');
                },
                function () {
                    alert('打开手机系统设置失败');
   				});

9.发送系统通知插件

安装插件

cordova plugin add cordova-plugin-local-notification

使用

//有数据，发通知
var noticeParam = {
	id: "test001"
}
 window.cordova.plugins.notification.local.schedule({
       id: Math.random(),
       title: "消息的title",
       text: "消息的内容",
       data: noticeParam, // 后面点击的通知后，要根据消息通知的参数来执行业务操作
       foreground: true,
       wakeup: true,
       lockscreen: true
})

  	// 点击了通知
    cordova.plugins.notification.local.on("click", function (notification) {
        let id= JSON.parse(notification.data).id;
        //执行业务操作
        //......
    });

10.app后台运行插件

原因：当退出app后，app不会在后台运行，就会导致手机收不到系统通知消失，所以要使用后台运行插件，使app保持后台运行

安装插件

cordova plugin add cordova-plugin-background-mode

使用

cordova.plugins.backgroundMode.setDefaults({
        title: '"app名称xx"正在运行',
        // text: '执行后台任务', // 后台任务说明(可选)
        // color: '#fff', // hex format like 'F14F4D'
        resume: true, // 默认情况下，应用程序将在点击通知时进入前台。 如果是假的，插件不会到达前台。（可选）
        hidden: false,
        // icon: 'www/static/assets/images/title-icon.png',
        // bigText: false,
        silent: false // 如果true插件不会显示通知。 默认值为false （可选）
    })

    // 如果应用程序移到后台，模式将变为活动状态
    cordova.plugins.backgroundMode.enable();