混合開發 Hybird Cordova PhoneGap web 跨平臺 MD

時間  2019-12-18
標籤 混合 開發 hybird cordova phonegap web 跨平臺 欄目 Cordova 简体版
原文   原文鏈接
Markdown版本筆記 個人GitHub首頁 個人博客 個人微信 個人郵箱
MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com

混合開發 Hybird Cordova PhoneGap web 跨平臺 MDjavascript

目錄

目錄
Cordova 簡介
官網介紹
W3C上的介紹
特色、優缺點
體系結構
基本原理
PhoneGap 簡介
PhoneGap 簡介
PhoneGap 和 Cordova 的關係
PhoneGap 和 Cordova 如何選
零基礎案例
Cordova 環境搭建
環境檢查
配置 Node.js 環境
安裝 Cordova
項目編寫
建立項目
添加或移除平臺
添加和刪除插件
編寫web頁面
編譯調試
cordova 經常使用命令
源碼結構簡要分析
文件目錄結構
核心代碼
清單文件
其餘相關源碼

Cordova 簡介

官網
中文網
W3C
cordova-android html

官網介紹

關鍵詞：java

  • 使用HTML, CSS & JS進行移動App開發
  • 多平臺(Android、iOS、wp)共用一套代碼，Target multiple platforms with one code base
  • 免費開源，Free and open source
  • 跨平臺重用代碼，Reusable code across platforms
  • 支持離線場景應用，Support for offline scenarios
  • 訪問設備原生API，Access native device APIs

Cordova包裝你的HTML/JavaScript app到原生app容器[container]中，可讓你訪問每一個平臺設備的功能。這些功能經過統一的[unified] JavaScript API 提供，讓你輕鬆的編寫一組代碼運行在幾乎市面上的全部手機和平板上，並能夠發佈到相應的app商城中。node

Apache Cordova是一個開源移動開發框架，它容許您使用標準的Web技術，如HTML5，CSS3和JavaScript進行跨平臺[cross-platform]開發。應用程序在針對每一個平臺的包裝[wrappers]內執行，並依賴符合標準的API綁定來訪問每一個設備的功能[capabilities]，如傳感器，數據，網絡狀態等。android

適用Apache Cordova的人羣:ios

  • 移動應用開發者，想擴展[extend]一個應用的使用平臺，而不經過每一個平臺的語言和工具集從新實現。
  • web開發者，想包裝部署[deploy]本身的web App將其分發[distribution]到各個應用商店門戶。
  • 移動應用開發者，有興趣經過混合[mixing]原生應用組件和WebView接觸設備級API，或者你想開發一個原生和WebView組件之間的插件接口。

W3C上的介紹

Cordova 是用於使用HTML，CSS和JS構建移動應用的平臺。咱們能夠認爲Cordova是一個容器，用於將咱們的網絡應用程序與本機移動功能鏈接。默認狀況下，Web應用程序不能使用本機移動功能。這就是Cordova進來的地方。它爲網絡應用和移動設備之間的鏈接提供了橋樑。 經過使用cordova，咱們可使混合移動應用程序，可使用攝像頭，地理位置，文件系統和其餘本地移動功能。 git

適用人羣：但願瞭解移動開發的HTML，CSS和JavaScript開發人員。
學習前提：須要熟悉HTML，CSS和JavaScript。 程序員

特色、優缺點

時下流行的移動Web應用可分爲三種：原生應用、Web應用和混合型應用。github

  • 原生應用：經過各類應用市場安裝，採用平臺特定語言開發。
  • Web應用：經過瀏覽器訪問，採用Web技術開發。
  • 混合型應用：經過各類應用市場安裝，但採用Web技術開發。它雖然看上去是一個原生應用，但裏面訪問的其實是一個Web應用。

Cordova 就是混合型應用。web

優勢：

  • 跨平臺，開發成本低(相同的代碼只需針對不一樣平臺進行編譯就能實如今多平臺的分發)
  • 開發速度快，學習成本低(可讓衆多Web開發人員幾乎零成本地轉型成移動應用開發者)(其實也不是很快，手機上的頁面調整會很坑)
  • 插件多，可自定義插件(可經過包裝好的接口調用大部分經常使用的系統API，通常仍是要原生開發人員寫插件)
  • 發展早，社區資源豐富(Cordova是混合型框架中的佼佼者)
  • 迭代更新容易(基於Web)
  • 支持離線模式

缺點(就一個字：卡)：

  • 沒法突破WebView性能瓶頸，用戶體驗差
  • 手機瀏覽器的渲染能力有限，致使APP會卡
  • 間隔的層次比較多，調用硬件的速度會慢一些
  • 調試不方便，既不像原生那麼好調試，也不像純web那種調試
  • 跨瀏覽器兼容性可能會產生不少問題，測試和優化可能須要不少時間，由於咱們須要覆蓋大量的設備和操做系統。
  • 某些插件與不一樣的設備和平臺存在兼容性問題，還有一些Cordova尚不支持的本機API。

你須要瞭解的：

  • phonegap和cordova的區別：他們之間沒有區別，在被收購以前叫phonegap，被收購後叫cordova
  • phonegap能作什麼：它是一個橋樑，能讓網頁能夠調用手機的硬件，沒有別的用處了。
  • 有什麼東西phonegap作不了只能原生作：網頁上用JS調用phonegap，phonegap調用原生代碼，原生代碼調用手機硬件，因此理論上說，原生能夠作的phonegap均可以作。能夠用原生的寫插件，用phonegap調用。

總結：其實phonegap不是想象中的那麼好用，作一些簡單的增刪改查APP仍是能夠的，若是你的公司剛起步或者不想請高價開發人員，而APP又比較簡單，那你就選它吧。

體系結構

cordova應用程序有幾個組件。下圖顯示了cordova應用程序體系結構的high-level視圖。
架構圖

從圖中，咱們能夠看到它提供了Web APP、WebView、Cordova Plugins。

Web APP
這是存放[resides]應用程序代碼的部分。應用程序的實現是經過web頁面，默認的本地文件名稱是index.html，這個本地文件引用 CSS,JavaScript,images，media files和其餘運行須要的資源。應用程序執行在原生應用包裝的WebView中，這個原生應用是你分發到 app stores 中的。

此容器有一個很是關鍵的config.xml文件，該文件提供有關應用程序的信息，並指定影響其工做的參數，例如它是否響應方向轉換[orientation shifts]。

WebView
Cordova啓用的WebView能夠給應用提供完整用戶訪問界面[entire user interface]。在一些平臺中，他也能夠做爲一個組件給大的、混合[hybrid]應用，這些應用混合[mixes] Webview 和原生的應用組件。

Cordova Plugins
插件是Cordova生態[ecosystem]的重要組成部分。他提供了Cordova和原生組件相互通訊的接口，並綁定到了標準的設備API上，這使你可以經過JavaScript調用原生代碼。

Apache Cordova項目維護了一組名爲Core Plugins的插件。這些核心插件爲您的應用程序提供訪問設備功能，如電池，相機，聯繫人等。

除了核心插件以外，還有一些第三方插件能夠提供額外的綁定(不必定全部平臺上都提供的這些功能)。您可使用插件搜索或npm搜索Cordova插件。您還能夠開發本身的插件，例如，可能須要插件才能在Cordova和自定義native組件之間進行通訊。

注意：建立Cordova項目時，它沒有任何插件。這是新的默認行爲。您須要的任何插件，甚至是核心插件，都必須明確添加。
注意：Cordova不提供任何 UI widgets 或 MV* 框架。Cordova僅提供能夠執行的 runtime。若是您但願使用 UI widgets 或 MV* 框架，則須要選擇它們並將它們包含在您的應用程序中。

基本原理

參考

iOS：【webView:shouldStartLoadWithRequest:navigationType:】
Android：【public void addJavascriptInterface (Object object, String name)】

第一個是 iOS 上 UIWebView 將要開始跳轉地址的時候被調用，進而根據傳入的地址做出反應。
第二個是 Android 上用於使一個 Java 對象能夠在 JS 中被訪問，並調用其方法。
這就開啓了兩個平臺上 JS 和原生代碼之間的溝通窗口，這就是原理。

Cordova 在這個基礎上構建了完善的一套體系，讓咱們能夠以一種簡單標準的流程寫 Hybird 應用，它來負責這個 JS 與原生代碼的溝通工做。

到這看得出，其實原生代碼是避不開的，想要利用系統的各項功能必需要寫對應不一樣系統支持的不一樣語言的原生代碼。但有不少寫 Cordova 的程序員不懂這些也能寫出東西來，靠的就是豐富的插件。

隨便找一個 Cordova 插件，目錄結構打開，大體是這樣： 

xxx@xxx:~/.../cordova-plugin-device
> tree

├── README.md
├── package.json
├── plugin.xml
├── src
│ ├── android
│ │ └── Device.java
│ ├── ios
│ │ ├── CDVDevice.h
│ │ └── CDVDevice.m
│ ├── ...
│ └── wp
│ └── Device.cs
└── www
    └── device.js

看到 src 文件夾底下的 ios、android、wp 這些文件夾了麼，裏面裝的就是各個平臺上的原生代碼。用打包工具 build 的時候，就會對應的幫你複製到各個平臺的項目文件夾去，並作好配置。

好比我寫一個調用攝像頭拍照片的插件，支持 android 與 iOS 兩個平臺，我就要針對這兩個平臺編寫兩份完成一樣功能的原生代碼，而後給一個統一的 JS 接口，由 Cordova 把這個接口暴露給寫 Cordova 應用的人。他們就能夠只用 JS 完成我寫的插件承諾可以作到的功能，也就是拍一張照片。

也就是說 Cordova 寫的應用理論上能夠作到任何原生應用能作到的功能，而不是不少人誤解的「侷限很大」，確實是有侷限，但不是侷限在可能性上。

雖然只使用用上面提到的兩個接口也可讓你作到這裏說的使用 JS 調用原平生臺功能，但 Cordova 把這個過程簡化、標準化，甚至生態化了。豐富的插件、活躍的社區還有詳盡的文檔，這些都極大方便了 Hybird 應用的開發過程。就好像只用 1010 能夠構建整個互聯網，但咱們仍然須要操做系統同樣。

PhoneGap 簡介

官網
GitHub

PhoneGap 簡介

PhoneGap是一個採用HTML，CSS和JavaScript的技術，建立移動跨平臺移動應用程序的快速開發平臺。它使開發者可以在網頁中調用IOS，Android等智能手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap擁有豐富的插件能夠調用。

PhoneGap本來由Nitobi公司開發，如今由Adobe擁有。

PhoneGap目前支持的操做系統包含:蘋果的iOS，谷歌的Android，RIM的Blackberry，惠普的WebOS，微軟的Windows Phone，塞班公司的Symbian以及三星的bada。

  • Build amazing mobile apps powered by open web tech.
  • 重用現有的Web開發技能，快速製做使用HTML，CSS和JavaScript構建的混合[hybrid]應用程序。 使用單一代碼庫爲多個平臺建立應用，所以不管您的用戶使用的是什麼設備，您均可以覆蓋到他們。
  • PhoneGap Build消除了編譯PhoneGap應用程序的痛苦。直接獲取能夠發佈到應用商店的應用程序，而無需頭痛的去維護原生SDK。咱們的PhoneGap Build服務經過在雲中進行編譯來爲您完成工做。

PhoneGap 和 Cordova 的關係

Cordova是PhoneGap貢獻給Apache後的開源項目，是從PhoneGap中抽離出的核心代碼，是驅動PhoneGap的核心引擎。有點相似Webkit和Google Chrome的關係。

淵源就是：早在2011年10月，Adobe收購了Nitobi Software和它的PhoneGap產品，而後宣佈這個移動Web開發框架將會繼續開源，並把它提交到Apache Incubator，以便徹底接受Apache Software Foundation的管治。固然，因爲Adobe擁有了PhoneGap商標，因此開源組織的這個PhoneGap v2.0版產品就改名爲Apache Cordova。

Cordova名字的由來：
PhoneGap 由一個叫 Nitobi 的公司發起 ，曾經更名爲 Callback，接着又更名爲 Cordova，由於 Nitobi 的辦公地點曾設在在一條叫 Cordova 的街道。

PhoneGap 和 Cordova 如何選

就目前來看，cordova是一個移動應用開發框架，你基於這個東西能夠用網頁代碼作出APP。

Phonegap Build是一個在線打包工具，你把使用cordova寫好的項目給Phonegap Build，Phonegap Build 就會在線打包成App。

目前你們所說的Phonegap，其實指的都是cordova，而那個真正被Adobe收購了的Phonegap，如今是Phonegap Build 和 cordova 的合體。

簡單來講，就是看你需不須要Phonegap Build的功能，或者說需不須要在線打包，須要就是用Phonegap，不然直接使用cordova便可。

PhoneGap build is a Build Service allows you to build and package you app in cloud。

零基礎案例

Cordova 環境搭建

環境檢查

JDK
打開cmd，輸入java -version和javac -version，能夠看到打印的Java和Javac版本信息。若是沒有，請配置java環境變量。

Git
打開cmd，輸入git --version，能夠看到打印的Git版本信息。若是沒有，請配置Git環境變量。

adb
打開cmd，輸入adb --version，能夠看到打印的adb版本信息。若是沒有，請配置adb環境變量。

Node.js
打開cmd，輸入node -v和npm -v，能夠看到打印的Node和npm版本信息。若是沒有，請配置Node環境變量。

配置 Node.js 環境

下載、安裝

  • 下載 Node.js，你能夠根據不一樣平臺系統選擇你須要的Node.js安裝包。
  • 選擇Windows 安裝包，例如 node-v10.11.0-x64
  • 安裝一路下一步便可，其中在下圖的地方，點擊樹形圖標來選擇你須要的安裝模式 ,默認如下四項都會安裝：
    mark
    mark

新版的Node.js已自帶npm，安裝Node.js時會一塊兒安裝，npm的做用就是對Node.js依賴的包進行管理，也能夠理解爲用來安裝/卸載Node.js須要裝的東西。

檢測環境是否成功

  • 檢測PATH環境變量是否配置了Node.js：查看【path】中是否包含Node所在的路徑
  • 查看node的版本：【node -v】或【node --version】
  • 查看自帶的npm的版本：【npm -v】或【npm --version】

設置默認路徑
默認在執行相似：npm install express [-g]的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，
修改安裝模塊所在路徑和緩存路徑

npm config set prefix "C:\_Web\node.js\node_global"
npm config set cache "C:\_Web\node.js\node_cache"

設置系統變量和用戶變量
在【系統變量】下新建【NODE_PATH】，輸入【C:_Web\node.js\node_global\node_modules】，將【用戶變量】下的【Path】的【C:\Users\baiqi\AppData\Roaming\npm】修改成【C:_Web\node.js\node_global】

配置完後，安裝個module測試下，咱們就安裝最經常使用的express模塊：【npm install express -g】
-g是全局安裝的意思，安裝後發現express模塊安裝在剛纔配置的全局模塊路徑【C:_Web\node.js\node_global\node_modules\express】中，若是不加 參數 -g ，則會安裝在當前路徑下。
mark

安裝 Cordova

全局安裝 Cordova

npm install cordova –g

mark

中途若會出現「Error: shasum check failed for」 錯誤，多數是由於網絡問題致使下載插件包失敗，能夠重試幾回。

項目編寫

建立項目

經過 cd/d 命令定位到要建立的cordova項目所在的目錄，執行如下命令：cordova create 文件夾名 包名 應用名，例如：cordova create hello com.bq.test helloWorld
mark

目錄簡介：

  • hooks：自定義擴展功能，存放自定義cordova命令的腳本文件。每一個project命令均可以定義before和after的Hook，好比：before_build、after_build。
  • platforms：平臺目錄，各自的平臺代碼就放在這裏，能夠放平臺專屬的代碼。
  • plugins：插件目錄，安裝的插件會放在這裏。
  • www：最重要的目錄，存放項目主題的HTML5和JS代碼的目錄。app一開始打開的就是這個目錄中index.html文件。
  • config.xml：Cordova的核心配置信息，好比：項目使用了哪些插件、應用圖標icon和啓動頁面SplashScreen，修改app的版本，名字等信息，還有平臺的配置。

添加或移除平臺

  • 經過 cd 命令定位到項目目錄，執行cordova platforms ls命令檢查你電腦支持的平臺。
    mark

  • 若是包含你要添加的平臺，則能夠經過執行cordova platform add android命令添加須要的平臺。
    mark

  • 能夠經過輸入cordova platforms rm android移除對相應平臺的支持。

  • 能夠經過@版本號，來添加不一樣版本的android平臺，如cordova platforms add android@6.0

添加和刪除插件

  • 先到這裏去 搜索插件，記錄下插件的名稱
    mark

  • 而後添加插件：cordova plugin add cordova-plugin-camera

  • 刪除插件：cordova plugin rm cordova-plugin-camera，使用rm和remove均可以

  • 查看當前安裝了哪些插件：cordova plugin list
    mark

這裏的列表應該與文件目錄的列表相同：
mark

編寫web頁面

一個簡單的主頁是這樣的：

<!DOCTYPE html>
<html>

    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            var destinationType;
            document.addEventListener("deviceready", onDeviceReady, false);
            //Cordova加載完成會觸發
            function onDeviceReady() {
                destinationType = navigator.camera.DestinationType;
            }
            //拍照
            function getPhoto() {
                //拍照並獲取Base64編碼的圖像（quality : 存儲圖像的質量，範圍是[0,100]）
                navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                    quality: 50,
                    destinationType: destinationType.DATA_URL
                });
            }
            //拍照成功
            function onPhotoDataSuccess(imageData) {
                console.log(imageData);
                var image = document.getElementById('image');
                image.style.display = 'block';
                image.src = "data:image/jpeg;base64," + imageData;
            }
            //拍照失敗
            function onFail(message) {
                alert('拍照失敗: ' + message);
            }
        </script>
    </head>

    <body style="margin:0;padding:0">
        <button style="font-size:23px;" onclick="getPhoto();">getPhoto</button> <br>
        <img style="display:none;width:100%;height:100%;" id="image" src="" />
    </body>

</html>

裏面有一個按鈕和一個顯示圖片的控件，點擊按鈕後能夠經過相機拍照並獲取圖片，在返回時將圖片顯示在控件上。

編譯調試

在命令窗口執行編譯調指定平臺的應用：cordova build android
mark

mark

完成後就在 \platforms\android\app\build\outputs\apk\debug 目錄下生成了咱們須要的Android安裝包。
mark

cordova 經常使用命令

經常使用的幾個命令：

  • cordova create <工程路徑> <包名> <工程名> //建立cordova工程
  • cordova install android //將編譯好的應用程序安裝到模擬器上
  • cordova emulate android //在模擬器上運行（前提是建立好AVD）
  • cordova serve android //在瀏覽器運行
  • cordova build android //打包cordova項目到android平臺
  • cordova run android //編譯和運行項目，鏈接手機並打開usb調試時會在build後自動安裝到真機
  • cordova plugin add <插件徹底限定名> //給項目添加插件
  • cordova plugin remove <插件徹底限定名> //刪除插件。
  • cordova plugin list //查看插件列表。
  • cordova platforms add android //添加平臺支持。

源碼結構簡要分析

文件目錄結構

咱們發現，經過 cordova 建立的Android項目和咱們經過AndroidStudio建立的項目基本同樣，好比文件目錄結構：

咱們甚至能夠直接使用 AndroidStudio 打開並構建此項目。

固然因爲一些配置的緣由可能沒法直接運行，可是稍微改一點點東西就能夠運行了。我就改了兩個地方：

  • 刪除 \platforms\android\app\src\main\res\xml
  • 按照AndroidStudio的提示更新了gradle版本

這個項目我放在了這個GitHub倉庫 中。

mark

核心代碼

public class MainActivity extends CordovaActivity
public class CordovaActivity extends Activity

protected CordovaWebView appView = new CordovaWebViewImpl(makeWebViewEngine());

onCreate() ->  loadUrl(launchUrl);
onDestroy() -> appView.handleDestroy();

setContentView(appView.getView());

清單文件

<?xml version='1.0' encoding='utf-8'?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.bq.test"【包名】
          android:hardwareAccelerated="true"【硬件加速】
          android:versionCode="10000"【版本號，版本碼】
          android:versionName="1.0.0">

    【支持的屏幕】
    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"
        android:xlargeScreens="true"/>

    【權限：網絡、寫SD卡】
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    【支持的SDK版本】
    <uses-sdk
        android:minSdkVersion="19"
        android:targetSdkVersion="27"/>

    【application】
    <application
        android:hardwareAccelerated="true"【硬件加速】
        android:icon="@mipmap/icon"
        android:label="@string/app_name"
        android:supportsRtl="true">

        【入口activity】
        <activity
            android:name="MainActivity"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
            android:label="@string/activity_name"
            android:launchMode="singleTop"
            android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
            android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

        【適配7.0的文件權限】
        <provider
            android:name="org.apache.cordova.camera.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/camera_provider_paths"/>
        </provider>
    </application>

</manifest>

其餘相關源碼

其配置的 FileProvider

<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-path name="external_files" path="."/>
</paths>

settings.gradle：

include ":"
include ":CordovaLib"
include ":app"

app 模塊的 build.gradle 的部分代碼：

apply plugin: 'com.android.application'

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

dependencies {
    implementation fileTree(dir: 'libs', include: '*.jar')
    implementation(project(path: ":CordovaLib"))
    compile "com.android.support:support-v4:24.1.1+"
}

CordovaLib 的 build.gradle 的部分代碼：

apply plugin: 'com.android.library'
apply plugin: 'com.github.dcendents.android-maven'
apply plugin: 'com.jfrog.bintray'

至此，經過 Cordova 的一個完整的演示成功完成了。

2018-10-15

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程