添加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的一看就清楚了吧，我稍微讲解一下
- 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
网友评论