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

});

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);

}

};

五、打包

https://build.phonegap.com/

點擊私有的，上傳www文件的壓縮文件即可

點擊open-source

先寫好頁面，在你頁面需要的部分添加點擊事件，事件代碼塊由phonegap提供，通過事件的回調函數繼續操作即可

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的混合开发之phonegap开发相关知识解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。