返回 导航

Cordova

hangge.com

Swift - 在现有的项目中添加Cordova支持2（添加Cordova插件）

作者：hangge | 2016-04-30 06:45
在前文（Swift - 在现有的项目中添加Cordova支持1（添加Cordova核心库）） 中，我介绍了如何往现有的工程项目中添加 Cordova。而 Cordova 最大优势就是提供了许许多多插件供我们安装使用（比如相机、定位、联系人等等），我们通过 js 就可以简单地调用这些功能，而不用再调用系统API。
如过是一个Cordova工程，只需运行“cordova plugin add xxxx”命令就可以自动添加需要的插件。而对于前文那样，是后来把Cordova再内嵌进来的 Swift 项目，也是可以使用各种Cordova插件的，只需稍加配置即可。

还是接着上文的 iOS 工程为例，前面已经添加了Cordova库了（整个目录结构如下），本文再添加 camera 插件进来。

1，添加Cordova插件相关文件到Swift项目文件夹下 
（1）进入前文创建的Cordova项目文件夹（MyCordova），运行如下命令添加camera插件： 
cordova plugin add cordova-plugin-camera

（2）将 MyCordova/platforms/ios/www/plugins下的 cordova-plugin-camera 拷贝到 MySwiftProject/www/plugins 下

（3）将 MyCordova/platforms/ios/www/cordova_plugins.js 里插件相关内容添加 MySwiftProject/www/cordova_plugins.js 中去 
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
        "id": "cordova-plugin-camera.Camera",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "Camera"
        ]
    },
    {
        "file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
        "id": "cordova-plugin-camera.CameraPopoverOptions",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "CameraPopoverOptions"
        ]
    },
    {
        "file": "plugins/cordova-plugin-camera/www/Camera.js",
        "id": "cordova-plugin-camera.camera",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "navigator.camera"
        ]
    },
    {
        "file": "plugins/cordova-plugin-camera/www/ios/CameraPopoverHandle.js",
        "id": "cordova-plugin-camera.CameraPopoverHandle",
        "pluginId": "cordova-plugin-camera",
        "clobbers": [
            "CameraPopoverHandle"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.2.2",
    "cordova-plugin-compat": "1.0.0",
    "cordova-plugin-camera": "2.2.0"
}
// BOTTOM OF METADATA
});

2，配置Swift项目相关内容
（1）在工程中建立一个 Plugins 文件夹，将 MyCordova/platforms/ios/HelloCordova/Plugins下的 cordova-plugin-camera 拖到刚建的那个文件夹中。
这样就把摄像头相关的iOS实现类添加进来了。

（2）在桥接头文件 MySwiftProject-Bridging-Header.h 中将camera插件头文件引用进来
#import <Cordova/CDVViewController.h>
#import <Cordova/CDVCommandDelegateImpl.h>
#import <Cordova/CDVCommandQueue.h>
#import <Cordova/CDVPlugin.h>

#import "CDVCamera.h"

（3）在 config.xml 中添加 camera插件的配置 
<feature name="Camera">
    <param name="ios-package" value="CDVCamera" />
</feature>

3，测试运行 
（1）将 www/index.html 内容修改如下： 
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">
                
                var destinationType;
                
                document.addEventListener("deviceready",onDeviceReady,false);
                
                //Cordova加载完成会触发
                function onDeviceReady() {
                    destinationType=navigator.camera.DestinationType;
                }
            
            //拍照
            function capturePhoto() {
                //拍照并获取Base64编码的图像（quality : 存储图像的质量，范围是[0,100]）
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                            destinationType: destinationType.DATA_URL }
                                            );
            }
            
            //拍照成功
            function onPhotoDataSuccess(imageData) {
                console.log(imageData);
                var smallImage = document.getElementById('smallImage');
                smallImage.style.display = 'block';
                smallImage.src = "data:image/jpeg;base64," + imageData;
            }
            
            //拍照失败
            function onFail(message) {
                alert('拍照失败: ' + message);
            }
            </script>
            </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="capturePhoto();">拍摄照片</button> <br>
        <img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
    </body>
</html>

（2）使用真机调试，可以看到成功调用摄像头拍照并显示
                
源码下载：MySwiftProject.zip
评论

全部评论（2）

回到顶部