详细讲解混合开发之phonegap开发原理
混合开发之phonegap开发
混合开发：hybrid app --- 可以安装到手机
webapp m站 touch端项目 手机网站 --- 手机浏览器访问
nativeapp android、ios语言开发的app --- 可以安装到手机
webview是由原生语言提供的组件（浏览器），该组件本身需要设定一些属性（设置让其支持javascript，设置链接在本组件WEBVIEW中跳转）,让他可以像一个真正的浏览器一样。
让其加载一个网页：
wv.loadUrl('地址') //本地地址/远程地址
android、ios提供一些可供js调用的对象obj和方法fn，js中只需要通过
window.obj.fn // 如果需要传递参数 window.obj.fn(params)
js可以提供android调用的方法test，供android、ios调用
wv.loadUrl('javascript:test()') //如果需要参数wv.loadUrl('javascript:test(params)')
一、介绍
此处需要安全上网
混合开发
根据需求先写页面，假设你的一个按钮需要调用系统的功能，在你的按钮事件中调用由android工程师提供的相对应的对象和其方法即可，同时前端也会定义一些方法，但是前端自己不调动，android会根据webview的loadUrl方法进行调用，并且传参（根据需求看）
如果将这些对象和方法进一步统一封装，再结合一定的技术可以提供给js调用，就好比我们在写页面的时候引入jquery一样，再结合特定的环境（混合开发所必须的环境）就可以无需原生开发者，只要你懂web技术即可开发需要的app
phonegap ******
DCloud ******
ApiCloud
ReactNative
.....
二、如何开发
1、安装桌面版应用程序，用来创建项目
2、安装移动应用
ios，请移驾到appstore进行下载
3、创建新的应用程序
4、项目预览效果，手机和电脑处于同一个局域网，
三、调用系统功能 --- 拍照
调用功能：
拍照API
<div class="app">
<button id="takephoto">拍照</button>
<button id="getphoto">相册选取</button>
<button id="getUser">获取通讯录</button>
<img src="" id="myImage" style="width: 100%;"/>
<ul id="list">
<li></li>
</ul>
</div>
receivedEvent: function(id) {
var takePhotoBtn = document.getElementById("takephoto");
var getPhotoBtn = document.getElementById("getphoto");
takePhotoBtn.onclick = function(){
alert("拍照");
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
getPhotoBtn.onclick = function(){
alert("相册选取");
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType:Camera.PictureSourceType.PHOTOLIBRARY
});
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
var getUser = document.getElementById("getUser");
var list = document.getElementById("list")
getUser.onclick = function(){
alert("通讯录");
var options = new ContactFindOptions();
options.filter = "";
options.multiple = true; // return multiple results
filter = ["name"]; // return contact.displayName field
// find contacts
navigator.contacts.find(filter, onSuccess, onError, options);
function onSuccess(contacts) {
// display the address information for all contacts
for (var i = 0; i < contacts.length; i++) {
var oli = document.createElement("li");
oli.innerHTML = i + ":"+JSON.stringify(contacts[i].name)
list.appendChild(oli);
}
};
五、打包
点击私有的，上传www文件的压缩文件即可
点击open-source
先写好页面，在你页面需要的部分添加点击事件，事件代码块由phonegap提供，通过事件的回调函数继续操作即可