cordova入門
編輯推薦: |
本文來自於cnblogs,文章介紹了Cordova安裝和配置,以及專案的建立和操作,Cordova專案目錄結構等相關內容。 |
Cordova入門
公司需要搞跨平臺開發,之前的舊專案是採用Ionic(另一種跨平臺方案)實現的,當初一頭扎進去學習ionic,發現是個大坑,後來才發現,Ionic內部核心也是Cordova實現的,所以又一頭扎進去,發現。。。。
無論如何,做下筆記
Cordova安裝和配置
因為Cordova是由npm管理的,所以需要安裝Nodejs環境,最好是最新的,在安裝之前檢視一下自己是否已經安裝過NodeJs了(終端輸入node -v,有輸出則有安裝)
如果有的話,別管什麼版本了,解除安裝了吧,我保證比你可能會有兩個nodejs版本或者安裝了一個Ionic1(還有Ionic2,Ionic3)的時候感到輕鬆。
然後
安裝最新的nodejs,他會自動包含npm了
終端npm install cordova -g
安裝完畢。over
Cordova建立專案
可以很簡單
終端進入你外掛專案的目錄cd ????
執行ionic create CordovaDemo
CordovaDemo:你專案的名字,專案包名,專案資料夾名
也可以稍微複雜一點
終端進入你外掛專案的目錄cd ????
執行ionic create CordovaDemo com.cordova.app HelloWorld
CordovaDemo:專案資料夾名
com.first.helloworld:專案包名
Helloworld:專案的名字
建立完畢。over
新增平臺
建立的Cordova預設是沒有任何平臺的,我們需要為專案新增我們需要的平臺:
進入目錄cd CordovaDemo
新增安卓平臺cordova platform add android
新增iOS平臺cordova platform add ios
一般就這兩個平臺了
執行
也是很簡單的。執行安卓cordova run android,執行ioscordova run ios
這裡需要注意的是執行ios的時候我估計是需要證書等原因,反正我沒能夠在終端上直接執行的。我的解決辦法是,我有XCode(iOS開發工具)~~
直接進入目錄進入platforms,可以看到你的安卓和iOS平臺,開啟iOS裡面其實就是一個iOS專案來的了。我們可以直接開啟.xcworkspace字尾的檔案就會執行xcode了,然後就是我的能做的事情了。
Cordova專案目錄結構
剛剛我們安裝和配置好一個Cordova專案之後,我們開啟專案檔案件應該這樣的檔案結構
一個個來介紹
config.xml
這個檔案是cordova專案的配置檔案,負責整個專案的一些配置資訊,簡單看一下我的一個專案的資訊:
<?xml version='1.0' encoding='utf-8'?> <widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloCordova</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="[email protected]" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> <allow-navigation href="http://ionic.local/*" /> <allow-navigation href="http://*/*" /> <allow-navigation href="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> <engine name="android" spec="^6.2.3" /> <engine name="ios" spec="^4.4.0" /> <plugin name="com.telerik.plugins.nativepagetransitions" spec="git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git" /> <plugin name="cordova-plugin-whitelist" spec="^1.3.2" /> </widget>
講一些主要的標籤吧:
widget:id代表專案包名 version代表版本
name:專案名
description:專案描述
author:作者資訊
content:src代表檔案入口,預設是www目錄下的index.html檔案,也可以指定為域名。也就是我們所說的直接一個webview載入網站變身應用了
allow-navigation:頁面跳轉的時候是能夠在應用內開啟的地址(例如:如果上面的入口是baidu.com,如果你沒新增這個的話,每次都會開啟手機的瀏覽器開啟網頁)
platform:平臺
allow-itent:平臺下的服務
plugin:外掛資訊
主要修改的東西有:專案的包名(打包時候用到),專案名,入口檔案,allow-navigation。其餘的一般通過命令列新增自動生成。
hooks
不知道,沒用過,看官方介紹吧,我不用這個東西依然能做個專案(簡單的)。
說到這裡,大家看官網的時候發現可以選擇語言的,這裡建議選擇英文原版,因為。。。。。中文版的是有欠缺的。。。。官網。。。。
node_modules
用過npm都知道這個東西是什麼來的了。主要是npm用來解決引入一些包的,可以不用特別在意,使用版本管理器的時候也會忽略這個資料夾內的管理,因為不同平臺(mac,window,linus)下的包貌似會不同,他會將依賴的包寫入一個檔案內,等到下載專案的時候再根據環境匯入不同的包。
所以才經常看到從github上面下載一些專案下來,都需要我們npm install了,這句命令就是根據他的檔案引入對應環境的包了。
package.json
這個檔案是一個描述檔案,他是node的產物。簡單看一下:
{ "name": "helloworld", "displayName": "HelloCordova", "version": "1.0.0", "description": "A sample Apache Cordova application that responds to the deviceready event.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Apache Cordova Team", "license": "Apache-2.0", "dependencies": { "com.telerik.plugins.nativepagetransitions": "git+https://github.com/Telerik-Verified-Plugins/NativePageTransitions.git", "cordova-android": "^6.2.3", "cordova-ios": "^4.4.0", "cordova-plugin-whitelist": "^1.3.2" }, "cordova": { "plugins": { "com.telerik.plugins.nativepagetransitions": {}, "cordova-plugin-whitelist": {} }, "platforms": [ "android", "ios" ] } }
可以看到,如果是一個原生開發人員,不懂得跨平臺開發,不懂得node的,這個檔案是看起來比較複雜的(我當初是這樣的感覺)。不過其實他不需要我們一個個鍵值對打出來,他是自動生成的。
platforms
這個資料夾下的就是我們的各個平臺的專案了。修改裡面的東西需要原生開發經驗。
plugins
這個資料夾是cordova的外掛目錄。
外掛的作用:可以通過外掛來使用js程式碼呼叫原生程式碼,由於可以通過原生程式碼調起裝置的硬體,所以可以以此來使用js調起裝置硬體。
我們所說Cordovad的一個架構應該是這樣的
可以看到我們做的就是一個webapp,然後通過安卓或者ios的web控制元件(iOS的WKWebView或UIWebVIew,安卓就不知道了),來講整個頁面嵌入到原聲應用當中,但是我們平常使用的HTML,CSS,JavaScript並不能夠呼叫到裝置的攝像頭,裝置資訊,本地儲存等功能,那麼怎麼辦呢?這個時候就是我們外掛出馬了,我之前也自己整理過一個外掛的編寫,簡單的來說就是通過js來呼叫原生程式碼(OC,Java)來實現這些功能的。所以編寫外掛需要原生開發經驗,但是我們大部分時候不需要自己去編寫,因為有外掛庫,一般使用的外掛都會有的了。
新增外掛的命令:
cordova plugin add cordova-plugin-device
推薦一些可能用到的外掛:
cordova-plugin-device 基本裝置資訊
cordova-plugin-network-information 網路連線資訊
cordova-plugin-battery-status 電池狀態資訊
cordova-plugin-device-motion 加速度資訊
cordova-plugin-device-orientation 指南針資訊
cordova-plugin-geolocation 定位資料
cordova-plugin-camera 相機
cordova-plugin-media-capture 媒體捕獲
cordova-plugin-media 媒體播放器
cordova-plugin-file 訪問檔案
cordova-plugin-file-transfer 檔案傳遞
cordova-plugin-dialogs 訊息提示對話方塊
cordova-plugin-vibration 振動提醒
cordova-plugin-contacts 聯絡人
cordova-plugin-globalization 全球化
cordova-plugin-splashscreen 閃屏(啟動畫面)
cordova-plugin-inappbrower 瀏覽器
cordova-plugin-console 控制檯
cordova-plugin-statusbar 狀態列
res
res也就是Resources了,專門放我們的資源的資料夾。裡面一般就icon資料夾代表專案圖片,screen資料夾代表專案的開啟頁面。
www
www資料夾就是我們真正編碼的地方了。內部預設一個index.html作為專案的入口檔案,其餘的三個資料夾css,img,js也不用多說了,真正完成我們一個app的各個頁面,各種功能就是在這裡實現的了。
接下來主要解釋一個index.html和index.js檔案吧
index.html
這個檔案是我們的預設首頁檔案,當然他也可以不是我們的首頁檔案。之前就說過,cordova專案的首頁是在 config.xml 檔案內的 content 的 src 屬性內設定的。預設是 index.html 就是指這個檔案了。
內容是:
<html> <head> <!-- Customize this policy to fit your own app's needs. For more guidance, see: https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy Some notes: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
一眼看完,沒多少東西解釋的。
不過這裡我覺得唯一要注意的地方,也是我當初剛學糾結的地方。就是引入的cordova.js檔案
<script type="text/javascript" src="cordova.js"></script>
這句程式碼咋眼看上去沒什麼問題,由於我做專案的時候出現了一點問題,我懷疑是 cordova.js 沒載入導致的,所以在找這句程式碼的時候才發現問題來了。
這個是 www 目錄下的檔案
忽視 .DS_Store 這個是mac系統的檔案,與cordova無關,與專案無關
可以看到<script type="text/javascript" src="js/index.js"></script>這句程式碼引入的index.js是沒有任何問題的。
可是!!!我的cordova.js檔案呢???引入了一個沒有的檔案???
最終查出來,這個cordova.js檔案他是會根據不同的平臺而形成不同的cordova.js檔案的。。。吐血。。。
可以看到,我最終生成的iOS平臺下的目錄
其他東西看不懂沒關係,看到 www 目錄下就好了,index.html 同級下生成了 cordova.js 檔案了。
所以,如果遇到這個問題,別糾結這個檔案為什麼不存在了。
index.js
先看程式碼
var app = { // Application Constructor initialize: function() { document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); }, // deviceready Event Handler // // Bind any cordova events here. Common events are: // 'pause', 'resume', etc. onDeviceReady: function() { this.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } };
也不復雜,就一個物件,裡面有幾個方法罷了。
一開始呼叫 app.initialize() 方法,那就看這個方法做了什麼,簡單來說,新增一個事件繫結,當裝置準備好之後呼叫 onDeviceReady 方法,而在這個方法內呼叫一些事件繫結而已了,一般在這裡做的事情就判斷一下我們插入的外掛是否已經啟用,以及做外掛對應的事情了。
大概整個cordova專案就是這樣的了,接下來總結一下Ionic的專案基本結構,over。