Cordova是什么
使用前端技術 開發跨平台web App的工具
底層原理:HTML+CSS搭建頁面, JS和原生交互
交互原理：Cordova插件
環境配置
安卓開發基礎環境搭建的文章可以參考一下我的其他博客哇，有詳細的圖文
ios的話等我不忙啦發
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
安裝插件成功
用代碼來進行交互
- \splugin\www\index.html
<button id="getPosition">點擊獲取位置</button>
- \splugin\www\js\index.js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// Cordova is now initialized. Have fun!
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
document.getElementById('deviceready').classList.add('ready');
// 添加獲取位置代碼
document.getElementById('getPosition').addEventListener('click', getPosition)
}
function getPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 10000,
}
navigator.geolocation.getCurrentPosition(onSuccess, onError, options)
function onSuccess(position) {
alert('經緯度：'+ position.coords.longitude)
}
function onError(err) {
alert('出錯啦'+ err.message)
}
}
使用真機調試--更加詳細的調試請移步此文--cordova第三方插件的創建,修改以及調試指南---真機調試，瀏覽器調試
運行成功
自定義插件，首先你需要一定原生能力
下載創建插件的命令行工具
npm install plugman
創建插件
npx plugman create --name [插件名] --plugin_id [插件ID] --plugin-version [插件版本】
我這里用這個命令 plugin_id 和 plugin_version是可以自己寫的哦
npx plugman create --name tangdoudou --plugin_id xiao.jin.tangdoudou --plugin_version 1.0.0
添加平台支持
plugman platform add --platform_name [android|ios]
初始化插件
plugman createpackagejson [插件路徑]
- 非常不好意思，輸入法老是在我截圖的時候失效
進入我們項目目錄，引入我們剛剛自定義的插件
cd ../
cd splugin
npx cordova plugin add ../tangdoudou/
插件引入成功
常用命令 命令之前根據需求添加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 //插件列表
