如何使用phonegap从HTML页面导航到本机屏幕？

Question

i have made Hello world test app for Android and iOS using PhoneGap Framework. 我使用PhoneGap Framework为Android和iOS制作了Hello world测试应用程序。

I want to invoke Native Screens from the HTML page. 我想从HTML页面调用Native Screens。

How can i invoke native screen from HTML page? 如何从HTML页面调用本机屏幕？

And vice versa. 反之亦然。

Answer 1

You can't open any Native Screen directly.If you want to use native API of the devices means if you want to open native screen then there are several APIs available in PhoneGap.Using this APIs you can implement native functionalities into your application with HTML,CSS and Javascript. 您无法直接打开任何本机屏幕。如果您想使用设备的本机API，则意味着如果您要打开本机屏幕，那么PhoneGap中有几个可用的API。使用此API，您可以使用HTML在应用程序中实现本机功能，CSS和Javascript。

Here is the link for that APIs: PhoneGap API 以下是该API的链接： PhoneGap API

This is one sample code.This will open device's Photo Gallery and shows chosen image in your HTML Page. 这是一个示例代码。这将打开设备的照片库并在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>

Hope this will Help. 希望这会有所帮助。

Note: 注意：

You won't be able to open any screen directly into your app using HTML.You have to go through the phonegap API if you are developing an application using PhoneGap. 您将无法使用HTML直接打开任何屏幕。如果您正在使用PhoneGap开发应用程序，则必须通过phonegap API。

如何使用phonegap从HTML页面导航到本机屏幕？

问题描述

1 个解决方案

解决方案1
3 2013-05-14 10:46:36

如何使用phonegap从HTML页面导航到本机屏幕？

问题描述

1 个解决方案

解决方案1 3 2013-05-14 10:46:36

解决方案1
3 2013-05-14 10:46:36