最近在學習混合開發 對于iOS原生組件的創建并使用 分享并記錄一下自己的經驗 希望對新人有所幫助(我使用的是cordova + vue 進行開發)
1.創建一個cordova項目,并添加iOS?platforms
cordova create CordovaProject
cd CordovaProject/
cordova platform add ios --save
2.創建插件
plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]
cd ..
plugman create --name CHPlugin --plugin_id CHPlugin --plugin_version 1.0.0
3.使用xcode創建源文件,在src目錄下中創建ios文件夾 并將源文件放入其中
注意創建出來的類要繼承CDVPlugin類
.h文件
.m文件
4.修改plugin.xml中的內容 并添加一個package.json文件
plugin.xml
修改完后的內容
修改完后的plugin.xml
要添加的json文件
package.json
5.修改www中的js文件
CHPlugin.js
這樣一個原生組件基本就完成了,接著把這個組件加入到cordova項目中
6.把組件加入項目
cd CordovaProject/
cordova plugin add 【CHPlugin路徑】
補充 :(cordova plugin rm 【組件名稱】//刪除組件)
提示如上圖表示項目安裝組件成功了
7.在vue中使用這個組件
在index.html中加入如下代碼
index.html
在需要的地方使用
然后打包 npm run build 將dist文件中的內容復制到CordovaProject/platforms/ios/www 目錄下 然后運行項目
8.大功告成
有些教程上會讓我們修改config.xml 還有其他一些文件中的內容 其實是不用的 使用了cordova plugin add 命令系統會自動的幫我們填寫其中的內容
忽略后面的頁面 點擊callnative就可以調用原生方法了
讓我不解的是cordova這個目錄結構 為什么iOS文件夾下還有個www目錄 這個www目錄不應該是各個平臺共享的嗎
有什么說的不對的地方歡迎大家指教