java-js知识库之五——cordova插件的基本使用和路径指向

本篇将记录cordova部分插件的使用和配置文件的修改。

一、最简单的app开发-主页面指向网址

很多人没有学过android,但是一样能开发app，如果业务需求门槛不高，我们完全可以将app内部的路径指向一个web项目的路径，将web项目嵌入app中。
打开config.xml文件

将以下两行添加到配置文件中

<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

将src改为http://yktzs.top/canvas/snaker.html

重新打包cordova build android，打开app

这是app最简单的开发模式，但是存在很大的缺陷，很多cordova插件必须在web项目中引入对应的js文件才能运行，而且性能非常差，只作了解。

二、cordova部分插件的使用

2.1 cordova-plugin-device的使用

命令行输入cordova plugin add cordova-plugin-device添加插件
将config.xml中src改为index.html

进入www目录下打开index.html,添加如下代码：

            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
               <!--这是添加的代码，点击div展示设备的信息->
				<div id="deviceDiv">获取设备信息</div>
				<div id="deviceInfo"></div>
            </div

进入js目录下，打开index.js,添加如下代码：

receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
        //这是添加的代码，device可以直接调用插件，获取设备信息
		var deviceDiv = document.getElementById("deviceDiv");
		var deviceInfo = document.getElementById("deviceInfo");
		deviceDiv.onclick = function(){
		   deviceInfo.innerHTML="uuid："+device.uuid+",产品名称"+device.model+",系统名称"+device.platform+",制造商"+device.manufacturer+",系统版本"+device.version;
		}
    }

重新打包apk，运行：

2.2 cordova-plugin-geolocation的使用(地理位置)

命令行输入cordova plugin add cordova-plugin-geolocation
js添加如下代码：

deviceDiv.onclick = function(){
			//获取设备信息
		   deviceInfo.innerHTML="uuid："+device.uuid+",产品名称"+device.model+",系统名称"+device.platform+",制造商"+device.manufacturer+",系统版本"+device.version;
           //获取当前地理位置
		   navigator.geolocation.getCurrentPosition((position)=>{
				var longitude=position.coords.longitude;//经度
				var latitude=position.coords.latitude;//纬度
				deviceInfo.innerHTML="经度:"+longitude+",纬度"+latitude;
			},(e)=>{
				alert("坐标获取失败", '失败');
			});
		}

2.3 cordova-plugin-camera的使用(相机)

命令行输入cordova plugin add cordova-plugin-camera
index.html添加如下代码：

<img id="img" style="width:200px;height:300px;">

js添加如下代码：

 //相机的使用，在点击事件中添加以下代码
			if(navigator.camera){
                    var options={
                        quality:50,
                        encodingType:navigator.camera.EncodingType.JPEG,
                        sourceType:1,//1为拍摄，0和2为相册
                        destinationType:0,
                        targetWidth: 800,
                        targetHeight: 1024,
                        saveToPhotoAlbum:true
                    };
                    navigator.camera.getPicture((data)=>{
						//返回base64位编码
						document.getElementById("img").src="https://img-blog.csdnimg.cn/2022010708463780283.jpeg"+data;
                    },(e)=>{
					  alert("相机打开失败");
					},options);
		   }

cordova的插件有很多，后续我会使用vue开发一款app，很多插件都会用到，具体代码在以后的博客中会陆续更新，cordova插件的用法具体请详见官方文档。
cordova官方文档
cordova很多插件都有相互依赖关系，如果出现添加插件错误，请尝试移除后再按不同顺序添加，如果出现android版本过低，请尝试移除cordova platform rm android,再添加cordova platform add android@7.0后面为android版本。
本篇到此结束，下一篇将介绍cordova的热更新配置，即混合开发。