混合開發之phonegap開發相關知識解析

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

　　一、介紹

　　

　　混合開發

　　根據需求先寫頁面，假設你的一個按鈕需要呼叫系統的功能，在你的按鈕事件中呼叫由android工程師提供的相對應的物件和其方法即可，同時前端也會定義一些方法，但是前端自己不調動，android會根據webview的loadUrl方法進行呼叫，並且傳參(根據需求看)

　　如果將這些物件和方法進一步統一封裝，再結合一定的技術可以提供給js呼叫，就好比我們在寫頁面的時候引入jquery一樣，再結合特定的環境(混合開發所必須的環境)就可以無需原生開發者，只要你懂web技術即可開發需要的app

　　phonegap ******

　　DCloud ******

　　ApiCloud

　　ReactNative

　　.....

　　二、如何開發  getstarted/

　　1、安裝桌面版應用程式，用來建立專案

　　2、安裝移動應用

　　ios，請移駕到appstore進行下載

　　3、建立新的應用程式

　　4、專案預覽效果，手機和電腦處於同一個區域網，

　　三、呼叫系統功能 --- 拍照

　　呼叫功能：

 

　　拍照API

　　receivedEvent: function(id) {

　　var takePhotoBtn = document.getElementById("takephoto");

　　var getPhotoBtn = document.getElementById("getphoto");

　　takePhotoBtn.>

　　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.>

　　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.>

　　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提供，透過事件的回撥函式繼續操作即可

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