cordova入門(mén)基礎(chǔ)教程及使用中遇到的一些問(wèn)題總結(jié)
前言
現(xiàn)在做項(xiàng)目為了節(jié)約成功，適配多平臺(tái) cordova不為是一個(gè)很好的選擇。個(gè)人覺(jué)得以后也許是一個(gè)趨勢(shì)！像一些知名的APP 比如支付寶 淘寶 好多都大量集成了HTML5 頁(yè)面！像我們公司現(xiàn)在的APP 大多都是h5頁(yè)面 感覺(jué)原生都沒(méi)什么事情做了?？上攵獙W(xué)習(xí)cordova的重要性！
簡(jiǎn)介
Cordova提供了一組設(shè)備相關(guān)的API，通過(guò)這組API，移動(dòng)應(yīng)用能夠以JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)等。Cordova還提供了一組統(tǒng)一的JavaScript類(lèi)庫(kù)，以及為這些類(lèi)庫(kù)所用的設(shè)備相關(guān)的原生后臺(tái)代碼。Cordova支持如下移動(dòng)操作系統(tǒng)：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
入門(mén)第一步：下載資源庫(kù)并集成到項(xiàng)目中來(lái)
去下載cordova 庫(kù)的源碼 可以去github上下載 也可以去官網(wǎng)下載。其實(shí)官網(wǎng)上的代碼也是放到github上的！
官方網(wǎng)站：http://cordova.apache.org/
github資源下載地址：https://github.com/apache/cordova-ios
本地下載地址：http://xiazai.jb51.net/201711/yuanma/cordova-ios(jb51.net).rar
使用 CocoaPods進(jìn)行第三方庫(kù)的管理 我之前用的是cordova3.8.0 前幾天不久更新到了4.0.1 。 4.0.1 只支持8.0以上 以下的你用CocoaPods 更新會(huì)提示錯(cuò)誤！注意一下就可以了！
platform :ios, '8.0'
pod 'Cordova', '~> 4.0.1'
入門(mén)第二步：如何在項(xiàng)目中正確的集成 cordova4.0.1 庫(kù)
1. 配置 Config.xml 很重要
Config.xml is a global configuration file that controls many aspects of a cordova application's behavior. This platform-agnostic XML file is arranged based on the specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.For projects created with the Cordova CLI (described in The Command-Line Interface), this file can be found in the top-level directory:
大致意思就是: config.xml 是一個(gè)全局配置文件，控制一個(gè)cordova應(yīng)用行為的許多方面。這種平臺(tái)無(wú)關(guān)的XML文件是基于w3c'spackaged Web應(yīng)用程序設(shè)置（widgets）規(guī)范，并擴(kuò)展到指定核心cordovaAPI功能，插件和平臺(tái)的具體設(shè)置。與科爾多瓦CLI創(chuàng)建的項(xiàng)目（描述在命令行界面)
http://cordova.apache.org/docs/en/6.x/config_ref/index.html 官方詳解
2. 顯示html5頁(yè)面需要一個(gè)容器 在這里使用CDVViewController類(lèi) 進(jìn)行html5的顯示以及控制 當(dāng)然也可以自定義一個(gè)容器繼承CDVViewController類(lèi)做一些定制功能。
如何使用如下:
self.cordovaManageVC= [[CordovaManageVCalloc]init]; self.cordovaManageVC.startPage=@"http://www.baidu.com"; [self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];
3. 設(shè)置用戶(hù)代理
- (instancetype)init {
self= [superinit];
if(self!=nil) {
//設(shè)置用戶(hù)代理 如不設(shè)置無(wú)法調(diào)用與H5定制的JavaScript方法進(jìn)行交互
NSString* original = [CDVUserAgentUtiloriginalUserAgent];
NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"];
self.baseUserAgent= userAgent;
}
returnself;
}
4. 自定義插件 需要使用到 cordova的CDVPlugin類(lèi) 用子類(lèi)來(lái)集成CDVPlugin
/** *返回控件 * *@param command */ - (void)back:(CDVInvokedUrlCommand*)command;
定制完成之后需要在confing.xml 進(jìn)行配置
以上就是cordova 最基本的用法了；
使用 Cordova 遇到的一些問(wèn)題
問(wèn)題一
問(wèn)題
[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.] ERROR building one of the platforms: Error: cmd: Command failed with exit code
解決辦法
ANDROID_HOME=D:\apps\Android\sdk PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
問(wèn)題二
問(wèn)題
Error: 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
解決辦法
從 https://services.gradle.org/distributions/ 下載最新gradle包并安裝。
ANDROID_HOME=/home/kongxx/Android/Sdk GRADLE_HOME=/apps/gradle-3.2.1 PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin
問(wèn)題三
問(wèn)題
使用 “cordova build android” 打包的時(shí)候報(bào)錯(cuò)：Error: Could not find gradle wrapper within Android SDK.
$ cordova build android CHCP plugin after prepare hook: config-file set to http://www.tjdr.info/EWT/chcp.json ANDROID_HOME=/home/kongxx/Android/Sdk JAVA_HOME=/opt/jdk8 Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper
解決辦法
查看了一下 /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper 目錄，目錄確實(shí)不存在，于是檢查了一下 android-studio 環(huán)境，發(fā)現(xiàn)可以在 plugins/android/lib/templates 目錄下包括上面的內(nèi)容，于是，果斷copy之。
$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/
問(wèn)題四
問(wèn)題
使用Cordova打包時(shí)報(bào)錯(cuò)：Error: spawn EACCES
$ cordova build android CHCP plugin after prepare hook: config-file set to http://www.tjdr.info/EWT/chcp.json ANDROID_HOME=/home/kongxx/Android/Sdk JAVA_HOME=/opt/jdk8 Subproject Path: CordovaLib Error: spawn EACCES
解決辦法
sudo chmod -Rf 755 ~/Android
問(wèn)題五
問(wèn)題
在 cordova 中使用瀏覽器測(cè)試的時(shí)候，默認(rèn)啟動(dòng)的是 google-chrome 瀏覽器，比如：
cordova run browser
解決辦法
可以使用 –target 來(lái)指定想使用的瀏覽器。
cordova run browser --target=opera cordova run browser --target=firefox
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解JavaScript設(shè)計(jì)模式中的享元模式
享元模式是一種用于性能優(yōu)化的模式。享元模式的核心是運(yùn)用共享技術(shù)來(lái)有效支持大量細(xì)粒度的對(duì)象.如果系統(tǒng)中創(chuàng)建了大量類(lèi)似的對(duì)象而導(dǎo)致內(nèi)存占用過(guò)高，本文通過(guò)介紹書(shū)中文件上傳的優(yōu)化案例來(lái)說(shuō)明享元模式的使用方式和作用,需要的朋友可以參考下2023-06-06
js知識(shí)點(diǎn)總結(jié)之getComputedStyle的用法
getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值,下面這篇文章主要給大家介紹了關(guān)于js知識(shí)點(diǎn)總結(jié)之getComputedStyle用法的相關(guān)資料,需要的朋友可以參考下2022-10-10
JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義
本文主要介紹了JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了詳解微信小程序canvas圓角矩形的繪制的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程
這篇文章主要介紹了JavaScript函數(shù)柯里化實(shí)現(xiàn)原理及過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
調(diào)試JavaScript中正則表達(dá)式中遇到的問(wèn)題
這篇文章主要介紹了調(diào)試JavaScript中正則表達(dá)式中遇到的問(wèn)題,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)目錄滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
原生js與jQuery實(shí)現(xiàn)簡(jiǎn)單的tab切換特效對(duì)比
這篇文章主要通過(guò)原生js與jQuery實(shí)現(xiàn)簡(jiǎn)單的tab切換特效對(duì)比介紹了js與jQuery之間的區(qū)別，有需要的小伙伴可以參考下。2015-07-07
Js實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12