Cordova WP8 插件开发

原文:Cordova WP8 插件开发

　　前面博客中介绍了Cordova WP8平台上的安装部署，Cordova扩展可以利用WP8本地代码扩展WebApp的功能，调用本地能力需要开发相应的插件，下面以闪光灯作为实例来描述创建一个WP8插件的详细步骤，对于闪光灯实现打开和关闭两个接口函数。

1. 创建插件类

　　创建闪光灯插件类FlashLight需继承BaseCommand，通常我们会在工程目录下创建Plugins目录用于存放插件类。即在Plugins目录下创建FlashLight.cs文件。

　　编写FlashLight.cs文件，添加如下代码：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Text;

 using System.Threading.Tasks;

 using Windows.Phone.Media.Capture;

 using WPCordovaClassLib.Cordova;

 using WPCordovaClassLib.Cordova.Commands;

 namespace TestCordova.Plugins

 {

     class FlashLight : BaseCommand

     {

         /// <summary>

         /// 闪光灯实例

         /// </summary>

         protected static AudioVideoCaptureDevice Device { get; set; }

         /// <summary>

         /// 打开闪光灯

         /// </summary>

         /// <returns></returns>

         public async Task trunOn(string options)

         {

             var sensorLocation = CameraSensorLocation.Back;

             try

             {

                 if (Device == null)

                 {

                     //取得 AudioViceoCaptureDevice

                     Device = await AudioVideoCaptureDevice.OpenAsync(sensorLocation, AudioVideoCaptureDevice.GetAvailableCaptureResolutions(sensorLocation).First());

                 }

                 // 打开闪光灯

                 var supportedCameraModes = AudioVideoCaptureDevice.GetSupportedPropertyValues(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchMode);

                 if (supportedCameraModes.ToList().Contains((UInt32)VideoTorchMode.On))

                 {

                     Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchMode, VideoTorchMode.On);

                     // 设定亮度为最大

                     Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchPower, AudioVideoCaptureDevice.GetSupportedPropertyRange(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchPower).Max);

                 }

                 //返回状态

                 DispatchCommandResult(new PluginResult(PluginResult.Status.OK, "{data: \"ok\"}"));

             }

             catch (Exception ex)

             {

                 // 无法控制闪光灯,返回错误状态

                 DispatchCommandResult(new PluginResult(PluginResult.Status.JSON_EXCEPTION));

             }

         }

         /// <summary>

         /// 关闭闪光灯

         /// </summary>

         public void trunOff(string options)

         {

             var sensorLocation = CameraSensorLocation.Back;

             try

             {

                 var supportedCameraModes = AudioVideoCaptureDevice

                     .GetSupportedPropertyValues(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchMode);

                 // 关闭闪光灯

                 if (Device != null && supportedCameraModes.ToList().Contains((UInt32)VideoTorchMode.Off))

                 {

                     Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchMode, VideoTorchMode.Off);

                 }

                 //返回状态

                 DispatchCommandResult(new PluginResult(PluginResult.Status.OK, "{data: \"ok\"}"));

             }

             catch (Exception ex)

             {

                 // 无法控制闪光灯,返回错误状态

                 System.Diagnostics.Debug.WriteLine(ex);

                 DispatchCommandResult(new PluginResult(PluginResult.Status.JSON_EXCEPTION));

             }

         }

     }

 }

FlashLight

　　由于调用闪光灯需要打开硬件的部分能力，所以需要配置WMAppManifest.xml文件勾选ID_CAP_ISV_CAMERA和ID_CAP_MICROPHONE。

2. 配置config.xml

　　打开config.xml文件在widget元素内加入配置：

   <feature name="FlashLight">

     <param name="wp-package" value="FlashLight" />

   </feature>

　　说明：以上配置是基于FlashLight类的命名空间为Cordova.Extension.Commands，如果将命名空间修改为其他，例如：TestCordova.Plugins，那么上述配置需修改为：

   <feature name="FlashLight">

     <param name="wp-package" value="TestCordova.Plugins.FlashLight" />

   </feature>

3. 编写js代码

　　打开index.html，编写js代码如下：

    <script type="text/javascript">

        app.initialize();

        function trunOn() {

            cordova.exec(

                function (data) {

                    //调用C#代码成功的回调函数

                    alert("Sucess:" + data);

                },

                function (data) {

                    //调用C#代码失败的回调函数

                    alert("Fail" + data);

                }

                , "FlashLight", "trunOn", ["input string"]);

        }

        function trunOff() {

            cordova.exec(

                function (data) {

                    //调用C#代码成功的回调函数

                    alert("Sucess:" + data);

                },

                function (data) {

                    //调用C#代码失败的回调函数

                    alert("Fail" + data);

                }

                , "FlashLight", "trunOff", ["input string"]);

        }

    </script>

　　添加两个button按钮，代码如下：

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

        <div>

            <button type="button" value="打开" style="width: 100px; height: 50px; color: black; font-size: larger;" onclick="trunOn()">打开</button>

            <button type="button" value="关闭" style="width: 100px; height: 50px; color: black; font-size: larger;" onclick="trunOff()">关闭</button>

        </div>

    </div>

4. 运行

　　编译并运行wp8工程，界面显示效果如下图：

巴特西

Cordova WP8 插件开发

最新文章

热门文章