iOS手動新增Cordova官方外掛

weixin_33749242發表於2017-07-27
iOS

新增Cordova資源

採用命令生成cordova專案的話，我就不講了，查資料，教程也簡單的。這裡主要是講** cordova整合到現有專案中 **。自己查了很多資料，這篇是比較好的：已存專案中新增Cordova，其中要注意兩個config.xml檔案的拷貝位置。

手動新增官方外掛

獲得外掛資原始檔

以barcodescanner掃碼外掛為例，我們在官網上找到這個外掛，該外掛提供了安裝命令，只要在終端cd到cordova的根目錄下（即上述文章中所講到的hello資料夾下面），然後執行命令即可。

1373563-b7e90a9b997200a8.png
官方安裝指導命令.png

cordova plugin add cordova-plugin-barcodescanner
這個時候，用命令建立的cordova專案中，已經有外掛資源了，然後就是進行復制了，將這些資原始檔，複製到我們自己已有的專案中。

1.複製原生iOS檔案
1373563-17f0753230612575.png
外掛的iOS檔案.png

注意看上面的路徑，不要找錯了資料夾！最好在你自己的工程中建立一個資料夾（沒具體路徑要求），專門放cordova外掛的原生iOS檔案。我直接複製到了home模組下

1373563-f366118f3ea9815b.png
Home模組中的外掛資源.png
2.複製js檔案
1373563-b33d396aa772b02b.png
外掛的js檔案.png

複製到自己之前複製Cordova資源時候的一個www資料夾js中：如下圖：


1373563-debe927c92ca9653.png
複製到自己專案中的www資料夾中.png
3.在自己的專案中設定配置檔案

在config.xml中新增（請看最下面的注意⚠️第1點）

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

再在下面的截圖檔案中改寫


1373563-936b31f730a50210.png
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中：


1373563-4f06eb9503e5dbac.png
螢幕快照 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，根本不知道個所以然，也就沒有想到這一階段。需要的配置，取決於外掛的不同，** 檢視原始外掛資源 **，找到這個檔案：

1373563-061d04f20df8cc33.png
外掛需要的相關配置.png

檔案裡面可以看到下圖所示：

1373563-932a978931e74634.png
外掛所需配置說明.png

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

  • 1.就是我們之前再config.xml中新增的特性
  • 2.掃碼就要呼叫相機，iOS需要相機的許可權，自己手動設定一下咯
  • 3.就是外掛需要的iOS原生檔案，我們剛才已經複製到自己的專案中了，值得注意的是，我舉例的這個外掛採用mrc寫的，所有需要給CDVBarcodeScanner.mm檔案設定-fno-objc-arc。
  • 4.外掛所需要的系統庫，你去匯入相關的庫就可以了。

然後執行呢，就可以了，你也可以用真機試試。

1373563-59af1150185d0db2.png
模擬器執行效果圖.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

相關文章