如何为Cordova手动实现插件?

时间:2014-12-25 10:06:21

标签: android cordova plugins hybrid-mobile-app

我有以下脚本:

<!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
         <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
         <link rel="stylesheet" type="text/css" href="css/index.css" />
         <meta name="msapplication-tap-highlight" content="no" />
         <title>Hello World</title>
    </head>
    <body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>

        <h2> Camera Position </h2>
        <input type="radio" name="deviceposition" id="deviceposition_back" value="Back" onclick="onChangeDevicePosition();"/>
        <label for="deviceposition_back">Back</label>
        <br/>
        <input type="radio" name="deviceposition" id="deviceposition_front" value="Front" onclick="onChangeDevicePosition();"/>
        <label for="deviceposition_front">Front</label>


        <h2> Flash Mode </h2>
        <input type="radio" name="flashmode" id="flashmode_off" value="Off" onclick="onChangeFlashMode();"/>
        <label for="flashmode_off">Off</label>
        <br/>
        <input type="radio" name="flashmode" id="flashmode_on" value="On" onclick="onChangeFlashMode();"/>
        <label for="flashmode_on">On</label>
        <br/>
        <input type="radio" name="flashmode" id="flashmode_auto" value="Auto" onclick="onChangeFlashMode();"/>
        <label for="flashmode_auto">Auto</label>
        <br/>

        <input type="button" value="Take a picture" onclick="onTakePicture();" />


    </div>

<!— camera preview canvas —>
    <canvas id="camera" width="352" height="288" style="border:2px"></canvas>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>

    <script>
        document.addEventListener("deviceready", function() {
                                      canvasMain = document.getElementById("camera");
                                      CanvasCamera.initialize(canvasMain);
                                      // define options
                                      var opt = {
                                          quality: 75,
                                          destinationType: CanvasCamera.DestinationType.DATA_URL,
                                          encodingType: CanvasCamera.EncodingType.JPEG,
                                          saveToPhotoAlbum:true,
                                          correctOrientation:true,
                                          width:640,
                                          height:480
                                      };
                                      CanvasCamera.start(opt);
                                  });

        function onChangeDevicePosition() {

            var newDevicePosition = CanvasCamera.CameraPosition.BACK;
            if (document.getElementById("deviceposition_back").checked)
            {
                newDevicePosition = CanvasCamera.CameraPosition.BACK;
            }
            else if (document.getElementById("deviceposition_front").checked)
            {
                newDevicePosition = CanvasCamera.CameraPosition.FRONT;
            }
            //
            CanvasCamera.setCameraPosition(newDevicePosition);
        }

        function onChangeFlashMode() {

            var newFlashMode = CanvasCamera.FlashMode.OFF;
            if (document.getElementById("flashmode_off").checked)
            {
                newFlashMode = CanvasCamera.FlashMode.OFF;
            }
            else if (document.getElementById("flashmode_on").checked)
            {
                newFlashMode = CanvasCamera.FlashMode.ON;
            }
            else if (document.getElementById("flashmode_auto").checked)
            {
                newFlashMode = CanvasCamera.FlashMode.AUTO;
            }

            CanvasCamera.setFlashMode(newFlashMode);
        }

        function onTakePicture() {
            CanvasCamera.takePicture(onTakeSuccess);
        }

        function onTakeSuccess(data) {
            //
        }
    </script>
</body>

我刚试过这个用git安装插件后: - https://github.com/donaldp24/CanvasCameraPlugin。 ,这段代码正常,我的问题可以通过error of installation of the plugin来解释。所以,我问是否有人可以帮助我安装插件,因为这里有以下步骤: - https://github.com/donaldp24/CanvasCameraPlugin
对我不起作用 我不明白为什么这不是我第一次尝试安装插件。

由于

1 个答案:

答案 0 :(得分:1)

如果手动方式不适合你,可以试试&#34;在线Phonegap构建服务&#34;。它对我有用,它对你也有帮助。它会将你的插件绑定到你的应用程序中并为你构建它。 试试这个解决方案,4步骤程序:

  1. 创建项目的Zip文件。(构建包 - &gt; Zip)
  2. 使用新插件更新config.xml文件
  3. 使用Phonegap构建服务构建应用程序
  4. 获取.apk,.ipa,.xap即本机应用程序
  5. 来源:https://www.devexpress.com/Support/Center/Question/Details/KA18816