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 ioscordova 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-geolocationif(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 objectfunction 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 defaultandroid: {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();
cordova项目全过程相关推荐
- cordova项目打包并更新腾讯开放平台安装包、加固重新签名步骤
打包apk 1.在webstorm中打开cordova项目,执行 cordova build android 这样会生成debug版的apk. 2.打包完成后会提示输出目录 一般是: /项目根目录/p ...
- cordova项目怎样修改版本号
cordova项目打包成apk上传到应用包时, 在腾讯开放平台更新安装包时,需要当前的版本大于已经提交的版本. 打开cordova项目 找到config.xml 修改最上面的version.
- cordova项目适配iPhoneX
iPhoneX适配踩坑浅谈 Apple每次退出新尺寸的iphone都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native Ap ...
- cordova 项目添加splash启动界面
需求:cordova项目启动添加启动界面,并在设备初始化完成后自动隐藏splash 1.新建项目 cordova create Mypro com.test.pro proName 2.添加平台 cd ...
- (阿里云)Linux部署SSM项目全过程
首先安装好jdk, 然后安装好mysql 具体步骤可以看我的这篇博客: (阿里云)Linux部署springboot项目全过程_向上的狼的博客-CSDN博客 如果你使用的是 Spring Boot,内 ...
- Cordova项目IphoneX适配，结合BUI前端框架项目（需要修改原生代码）
先吐槽一下苹果,每年都要出一下幺蛾子,你还没有办法. Hybrid App适配只能说一开始研究难一点,后面基本没什么问题,下面就把我自己的研究出来的跟大家分享一下. 部分参考: 点击打开链接 1.m ...
- cordova技术集（一）Hello,cordova! 如何创建cordova项目。
cordova技术集(一)Hello,cordova!如何创建cordova项目. Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄 ...
- EPC项目全过程精细化管控21个关键点，一个也不能少！
文章来源:EPC项目全过程精细化管控21个关键点,一个也不能少! EPC即为工程总承包模式,是设计采购施工一体化(EPC即Engineering(设计).Procurement(采购).Constru ...
- cordova项目搭建
Cordova开发环境安装 安装cordova命令行工具 安装命令 npm install -g cordova cordova项目的创建.平台添加.打包等都需要cordova命令行工具 // 创建c ...
最新文章
- 数据结构实验之链表五：单链表的拆分-sdut
- 具有SSM框架的CRUD与多条件查询
- python 报错 AttributeError: module ‘time‘ has no attribute ‘clock 解决方法
- 使用下列 else-if 排列来处理多个条件：
- 雷林鹏分享：C# 匿名方法
- 鸿蒙硬件HI3861开发环境搭建
- CentOS6.x安装mongodb3.4.x
- Java程序设计语言基础01：绪论
- python能做什么工作-python语言能做什么工作
- oracle怎样停止到数据,oracle启动和停止
- 算法实现 int sqrt(int x) 函数。
- [交换最小值和最大值] 本题要求编写程序，先将输入的一系列整数中的最小值与第一个数交换，然后将最大值与最后一个数交换，最后输出交换后的序列。 注意：题目保证最大和最小值都是唯一的。
- ue编辑器漏洞_7. 编辑器漏洞整理
- 在maven启动时tomcat端口冲突问题 Address already in use: JVM_Bind null:8080
- Matlab实现电子钢琴
- 从不温不火到炙手可热：语音识别技术简史
- Cannot add property 1, object is not extensible
- IC验证培训——SystemVerilog通用程序库（下）
- U盘格式的区别有哪些?
- Axure高保真原型｜音乐播放器原型