原文:
Cordova WP8 插件开发
FlashLight
前面博客中介绍了Cordova WP8平台上的安装部署,Cordova扩展可以利用WP8本地代码扩展WebApp的功能,调用本地能力需要开发相应的插件,下面以闪光灯作为实例来描述创建一个WP8插件的详细步骤,对于闪光灯实现打开和关闭两个接口函数。
1. 创建插件类
创建闪光灯插件类FlashLight需继承BaseCommand,通常我们会在工程目录下创建Plugins目录用于存放插件类。即在Plugins目录下创建FlashLight.cs文件。
编写FlashLight.cs文件,添加如下代码:
![](https://yqfile.alicdn.com/img_1c53668bcee393edac0d7b3b3daff1ae.gif?x-oss-process=image/resize,w_1400/format,webp)
![](https://yqfile.alicdn.com/img_405b18b4b6584ae338e0f6ecaf736533.gif?x-oss-process=image/resize,w_1400/format,webp)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using Windows.Phone.Media.Capture; 7 using WPCordovaClassLib.Cordova; 8 using WPCordovaClassLib.Cordova.Commands; 9 10 namespace TestCordova.Plugins 11 { 12 class FlashLight : BaseCommand 13 { 14 /// <summary> 15 /// 闪光灯实例 16 /// </summary> 17 protected static AudioVideoCaptureDevice Device { get; set; } 18 19 /// <summary> 20 /// 打开闪光灯 21 /// </summary> 22 /// <returns></returns> 23 public async Task trunOn(string options) 24 { 25 var sensorLocation = CameraSensorLocation.Back; 26 27 try 28 { 29 if (Device == null) 30 { 31 //取得 AudioViceoCaptureDevice 32 Device = await AudioVideoCaptureDevice.OpenAsync(sensorLocation, AudioVideoCaptureDevice.GetAvailableCaptureResolutions(sensorLocation).First()); 33 } 34 35 // 打开闪光灯 36 var supportedCameraModes = AudioVideoCaptureDevice.GetSupportedPropertyValues(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchMode); 37 if (supportedCameraModes.ToList().Contains((UInt32)VideoTorchMode.On)) 38 { 39 Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchMode, VideoTorchMode.On); 40 41 // 设定亮度为最大 42 Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchPower, AudioVideoCaptureDevice.GetSupportedPropertyRange(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchPower).Max); 43 } 44 45 //返回状态 46 DispatchCommandResult(new PluginResult(PluginResult.Status.OK, "{data: \"ok\"}")); 47 } 48 catch (Exception ex) 49 { 50 // 无法控制闪光灯,返回错误状态 51 DispatchCommandResult(new PluginResult(PluginResult.Status.JSON_EXCEPTION)); 52 } 53 } 54 55 /// <summary> 56 /// 关闭闪光灯 57 /// </summary> 58 public void trunOff(string options) 59 { 60 var sensorLocation = CameraSensorLocation.Back; 61 62 try 63 { 64 var supportedCameraModes = AudioVideoCaptureDevice 65 .GetSupportedPropertyValues(sensorLocation, KnownCameraAudioVideoProperties.VideoTorchMode); 66 // 关闭闪光灯 67 if (Device != null && supportedCameraModes.ToList().Contains((UInt32)VideoTorchMode.Off)) 68 { 69 Device.SetProperty(KnownCameraAudioVideoProperties.VideoTorchMode, VideoTorchMode.Off); 70 } 71 72 //返回状态 73 DispatchCommandResult(new PluginResult(PluginResult.Status.OK, "{data: \"ok\"}")); 74 } 75 catch (Exception ex) 76 { 77 // 无法控制闪光灯,返回错误状态 78 System.Diagnostics.Debug.WriteLine(ex); 79 DispatchCommandResult(new PluginResult(PluginResult.Status.JSON_EXCEPTION)); 80 } 81 } 82 } 83 }
由于调用闪光灯需要打开硬件的部分能力,所以需要配置WMAppManifest.xml文件勾选ID_CAP_ISV_CAMERA和ID_CAP_MICROPHONE。
2. 配置config.xml
打开config.xml文件在widget元素内加入配置:
1 <feature name="FlashLight"> 2 <param name="wp-package" value="FlashLight" /> 3 </feature>
说明:以上配置是基于FlashLight类的命名空间为Cordova.Extension.Commands,如果将命名空间修改为其他,例如:TestCordova.Plugins,那么上述配置需修改为:
1 <feature name="FlashLight"> 2 <param name="wp-package" value="TestCordova.Plugins.FlashLight" /> 3 </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工程,界面显示效果如下图: