cordova项目全过程
依赖环境概述：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-百度geolocation 插件
申请AK:
要使用百度Android 定位sdk要先申请百度地图的AK，具体步骤查看百度地图官网https://lbsyun.百度.com/介绍：https://lbsyun.百度.com/index.php?title=android-locsdk/guide/create-project/key
安装插件：
cordova plugin add cordova-plugin-百度geolocation --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();
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgagcbb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
