hybrid app(混合模式移動應用)是指介于web-app、native-app這兩者之間的app，兼具"Native App良好使用者互動體驗的優勢"和"Web App跨平台開發的優勢"。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)')
一、介紹
https://phonegap.com/
混合開發
根據需求先寫頁面，假設你的一個按鈕需要調用系統的功能，在你的按鈕事件中調用由android工程師提供的相對應的對象和其方法即可，同時前端也會定義一些方法，但是前端自己不調動，android會根據webview的loadUrl方法進行調用，并且傳參(根據需求看)
如果将這些對象和方法進一步統一封裝，再結合一定的技術可以提供給js調用，就好比我們在寫頁面的時候引入jquery一樣，再結合特定的環境(混合開發所必須的環境)就可以無需原生開發者，隻要你懂web技術即可開發需要的app
phonegap ******
DCloud ******
ApiCloud
ReactNative
.....
二、如何開發 https://phonegap.com/getstarted/
1、安裝桌面版應用程式，用來建立項目
2、安裝移動應用
ios，請移駕到appstore進行下載下傳
3、建立新的應用程式
4、項目預覽效果，手機和電腦處于同一個區域網路，
三、調用系統功能 --- 拍照
調用功能：http://www.phonegap100.com/doc/cordova_file_file.md.html
拍照API
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
});
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);
};
五、打包
https://build.phonegap.com/
點選私有的，上傳www檔案的壓縮檔案即可
點選open-source
先寫好頁面，在你頁面需要的部分添加點選事件，事件代碼塊由phonegap提供，通過事件的回調函數繼續操作即可
本文來自千鋒教育，轉載請注明出處。