1. 程式人生 > 其它 >前端超簡單的圖文並茂cordova開發使用指南+自定義外掛

前端超簡單的圖文並茂cordova開發使用指南+自定義外掛

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會根據需求定期自動覆蓋此目錄中的檔案.

使用虛擬機器

使用adb連結夜神模擬器

執行專案

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 //外掛列表