如何使用phonegap從HTML頁面導航到本機屏幕？

我使用PhoneGap Framework爲Android和iOS製作了Hello world測試應用程序。如何使用phonegap從HTML頁面導航到本機屏幕？

我想從HTML頁面調用本機屏幕。

如何從HTML頁面調用本機屏幕？

反之亦然。

來源

2013-05-14 Amr Angry

你不能直接打開任何本機屏幕。如果你想使用設備的本地API，意味着如果你想打開本機屏幕，那麼PhoneGap中有幾個API可用。使用這些API，你可以實現本地功能您的應用程序與HTML，CSS和Javascript。

這裏是鏈接的原料藥： PhoneGap API

這是一個示例代碼。此會在HTML頁面中打開設備的照片庫和節目選擇的圖像。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Capture Photo</title> 

    <script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script> 
    <script type="text/javascript" charset="utf-8"> 

    var pictureSource; // picture source 
    var destinationType; // sets the format of returned value 

    // Wait for Cordova to connect with the device 
    // 
    document.addEventListener("deviceready",onDeviceReady,false); 

    // Cordova is ready to be used! 
    // 
    function onDeviceReady() { 
     pictureSource=navigator.camera.PictureSourceType; 
     destinationType=navigator.camera.DestinationType; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoDataSuccess(imageData) { 
     // Uncomment to view the base64 encoded image data 
     // console.log(imageData); 

     // Get image handle 
     // 
     var smallImage = document.getElementById('smallImage'); 

     // Unhide image elements 
     // 
     smallImage.style.display = 'block'; 

     // Show the captured photo 
     // The inline CSS rules are used to resize the image 
     // 
     smallImage.src = "data:image/jpeg;base64," + imageData; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoURISuccess(imageURI) { 
     // Uncomment to view the image file URI 
     // console.log(imageURI); 

     // Get image handle 
     // 
     var largeImage = document.getElementById('largeImage'); 

     // Unhide image elements 
     // 
     largeImage.style.display = 'block'; 

     // Show the captured photo 
     // The inline CSS rules are used to resize the image 
     // 
     largeImage.src = imageURI; 
    } 

    // A button will call this function 
    // 
    function capturePhoto() { 
     // Take picture using device camera and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, 
     destinationType: destinationType.DATA_URL }); 
    } 

    // A button will call this function 
    // 
    function capturePhotoEdit() { 
     // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, 
     destinationType: destinationType.DATA_URL }); 
    } 

    // A button will call this function 
    // 
    function getPhoto(source) { 
     // Retrieve image file location from specified source 
     navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
     destinationType: destinationType.FILE_URI, 
     sourceType: source }); 
    } 

    // Called if something bad happens. 
    // 
    function onFail(message) { 
     alert('Failed because: ' + message); 
    } 

    </script> 
    </head> 
    <body> 
    <button onclick="capturePhoto();">Capture Photo</button> <br> 
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> 
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> 
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
    <img style="display:none;" id="largeImage" src="" /> 
    </body> 
</html>

希望這將有助於。

注：

你將不能夠直接使用HTML.You必須去通過PhoneGap的API，如果你正在開發使用PhoneGap的應用程序中打開的任何屏幕爲您的應用程序。

來源

2013-05-14 10:46:36 Mkpatel

如何使用phonegap從HTML頁面導航到本機屏幕？

回答

相關問題