Cordova iOS PlatformiOS DeveloperIOS+前段 Cordova框架研究

iOS手动添加Cordova官方插件

2017-07-27  本文已影响86人  seanward

添加Cordova资源

采用命令生成cordova项目的话,我就不讲了,查资料,教程也简单的。这里主要是讲** cordova集成到现有项目中 **。自己查了很多资料,这篇是比较好的:已存项目中添加Cordova,其中要注意两个config.xml文件的拷贝位置。

手动添加官方插件

获得插件资源文件

以barcodescanner扫码插件为例,我们在官网上找到这个插件,该插件提供了安装命令,只要在终端cd到cordova的根目录下(即上述文章中所讲到的hello文件夹下面),然后执行命令即可。

官方安装指导命令.png
cordova plugin add cordova-plugin-barcodescanner
这个时候,用命令创建的cordova项目中,已经有插件资源了,然后就是进行复制了,将这些资源文件,复制到我们自己已有的项目中。
1.复制原生iOS文件
插件的iOS文件.png

注意看上面的路径,不要找错了文件夹!最好在你自己的工程中创建一个文件夹(没具体路径要求),专门放cordova插件的原生iOS文件。我直接复制到了home模块下

Home模块中的插件资源.png
2.复制js文件
插件的js文件.png

复制到自己之前复制Cordova资源时候的一个www文件夹js中:如下图:


复制到自己项目中的www文件夹中.png
3.在自己的项目中设置配置文件

在config.xml中添加(请看最下面的注意⚠️第1点)

<feature name="BarcodeScanner">
        <param name="ios-package" value="CDVBarcodeScanner" />
        <param name="onload" value="true" />
    </feature>

再在下面的截图文件中改写


cordova_plugins配置文件.png

将这个文件里面的全部代码(command+A)替换成下面的代码,具体差别,自己看吧。

cordova.define('cordova/plugin_list', function(require, exports, module) {
               module.exports = [{
                                 "id": "phonegap-plugin-barcodescanner.BarcodeScanner",
                                 "file": "js/barcodescanner.js",
                                 "pluginId": "phonegap-plugin-barcodescanner",
                                 "clobbers": [
                                              "cordova.plugins.barcodeScanner"
                                              ]
                                 }];
module.exports.metadata = 
// TOP OF METADATA
{
    "phonegap-plugin-barcodescanner": "6.0.7",
    "cordova-plugin-whitelist": "1.3.2"
};
// BOTTOM OF METADATA
});

如果你下次还要添加新的插件的话,就需要在原Cordova工程的文件夹里找到新插件的上述配置代码,就在cordova_plugins.js中:


屏幕快照 2018-04-23 下午2.52.23.png
4.修改index.html文件

复制下面代码,替换即可:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function buttonClick(){
//这个如何调用的话,在网页的插件文档中都会有说的,甚至有例子展现
cordova.plugins.barcodeScanner.scan(successFunction,failFunction);
}
function successFunction(result){
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
}
function failFunction(result){
alert("shibai"+result);
}
</script>
</head>
<body>
<p>ExampleObject</p>
<button onclick="buttonClick()">自定义插件</button>
</body>
</html>

注意了!重点来了!,你还需要给整个工程配置!

我当时就困在这一阶段,初接触cordova,根本不知道个所以然,也就没有想到这一阶段。需要的配置,取决于插件的不同,** 查看原始插件资源 **,找到这个文件:

插件需要的相关配置.png

文件里面可以看到下图所示:

插件所需配置说明.png

想必搞iOS的一看就清楚了吧,我稍微讲解一下

然后运行呢,就可以了,你也可以用真机试试。

模拟器运行效果图.png
手动添加Cordova资源本来就好了,后来涉及到插件的手动添加,几乎没有找不到,有的也是乱讲一通,没个结果,好在我有足够时间研究,也有同事帮忙。如果这篇文章有帮助到你了,请下手重点,帮我点个赞,谢谢哈!

下面附上我所参考过的文章

http://www.jianshu.com/nb/4708571
http://www.jianshu.com/p/d9f08aaaa0d2#comment-13084370
http://www.jianshu.com/p/e982b9a85ae8

除非注明,文章均为seanward原创,转载请注明本文地址:https://www.jianshu.com/p/36e163a72721

上一篇下一篇

猜你喜欢

热点阅读