前端超簡單的圖文並茂cordova開發使用指南+自定義外掛
阿新 • • 發佈:2022-01-29
Cordova是什麼
使用前端技術 開發跨平臺web App的工具
底層原理:HTML+CSS搭建頁面, JS和原生互動
互動原理:Cordova外掛
Cordova安裝 (可以根據自己需求選擇安裝全域性還是安裝自己專案檔案路徑)
npm install -g cordova
或者在專案路徑執行cmd命令
npm install cordova
建立Cordova工程
npx cordova create splugin com.xiaojin.splugin Splugin
Create命令詳細解析:
- 儲存路徑:splugin
- 專案id:com.xiaojin.splugin,
預設值是io.cordova.hellocordova
安卓中的Java包名, iOS的bundleID都需要用到,此值後期可修改 - 專案name:Splugin
- config.xml中會看到 id和name
新增平臺 platform
cd splugin
npx cordova platform add android
檢視你新增的平臺:
npx cordova platform ls
特別注意:使用CLI構建, 你不可以編輯/platforms/目錄. Cordova會根據需求定期自動覆蓋此目錄中的檔案.
使用虛擬機器
執行專案
npx cordova run android
遇到報錯(如果你沒有遇到就跳過哦)
ANDROID_SDK_ROOT=undefined (recommended setting) ANDROID_HOME=C:\Users\Jindi J Sun\AppData\Local\Android\Sdk (DEPRECATED) Using Android SDK: C:\Users\Jindi J Sun\AppData\Local\Android\Sdk Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio
解決報錯
新增環境變數 ANDROID_SDK_ROOT 變數值同 ANDROID_HOME
以管理員身份重新開啟vscode,重新執行 npx cordova run android
新增外掛進行JS 和 原生互動
安裝外掛
npx cordova plugin add cordova-plugin-geolocation
安裝外掛成功
用程式碼來進行互動---待補充
常用命令 命令之前根據需求新增npx
cordova -v //版本檢測 cordova platform add android cordova platform add ios 完成後執行以下命令檢視: cordova platfrom list 要移除Android平臺支援,可以執行: cordova platform rm android cordova build android //只針對Andorid平臺編譯 實際上build命令對應於以下兩個命令: cordova prepare android cordova compile android 這意味著你可以僅執行prepare命令,然後用SDK開發環境去另外編譯。 cordova requirements //檢測是否滿足構建平臺的要求 cordova plugin add cordova-plugin-camera //新增外掛 cordova plugin ls //外掛列表