详细讲解混合开发之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提供，通过事件的回调函数继续操作即可