iOS手动添加Cordova官方插件
添加Cordova资源
采用命令生成cordova项目的话,我就不讲了,查资料,教程也简单的。这里主要是讲** cordova集成到现有项目中 **。自己查了很多资料,这篇是比较好的:已存项目中添加Cordova,其中要注意两个config.xml文件的拷贝位置。
手动添加官方插件
获得插件资源文件
以barcodescanner扫码插件为例,我们在官网上找到这个插件,该插件提供了安装命令,只要在终端cd到cordova的根目录下(即上述文章中所讲到的hello文件夹下面),然后执行命令即可。
cordova plugin add cordova-plugin-barcodescanner
这个时候,用命令创建的cordova项目中,已经有插件资源了,然后就是进行复制了,将这些资源文件,复制到我们自己已有的项目中。
1.复制原生iOS文件
插件的iOS文件.png注意看上面的路径,不要找错了文件夹!最好在你自己的工程中创建一个文件夹(没具体路径要求),专门放cordova插件的原生iOS文件。我直接复制到了home模块下
Home模块中的插件资源.png2.复制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的一看就清楚了吧,我稍微讲解一下
- 1.就是我们之前再config.xml中添加的特性
- 2.扫码就要调用相机,iOS需要相机的权限,自己手动设置一下咯
- 3.就是插件需要的iOS原生文件,我们刚才已经复制到自己的项目中了,值得注意的是,我举例的这个插件采用mrc写的,所有需要给CDVBarcodeScanner.mm文件设置-fno-objc-arc。
- 4.插件所需要的系统库,你去导入相关的库就可以了。
然后运行呢,就可以了,你也可以用真机试试。
模拟器运行效果图.png手动添加Cordova资源本来就好了,后来涉及到插件的手动添加,几乎没有找不到,有的也是乱讲一通,没个结果,好在我有足够时间研究,也有同事帮忙。如果这篇文章有帮助到你了,请下手重点,帮我点个赞,谢谢哈!
下面附上我所参考过的文章
http://www.jianshu.com/nb/4708571
http://www.jianshu.com/p/d9f08aaaa0d2#comment-13084370
http://www.jianshu.com/p/e982b9a85ae8