PhoneGap介紹及簡單部署

時間  2019-11-25
標籤 phonegap 介紹 簡單 部署 简体版
原文   原文鏈接

　1、什麼是PhoneGap：javascript

　　PhoneGap是一個自由開放源碼的開發工具和框架，容許利用HTML + JavaScript + CSS的強大功能在多個手機平臺上開發程序,開發出來的程序通過在各自的平臺上編譯造成獨立的安裝程序。使程序看起來和native的程序同樣。html

　2、PhoneGap的優點和劣勢：前端

　　優點：java

　　　　l  跨平臺：一次開發，多個平臺共用。現主要包括了android，iOS，Apple iOS, Google Android, Palm, Symbian, BlackBerry 等。WP7等平臺也在逐步兼容中。jquery

　　　　l  下降開發門檻。對於不少WEB開發人員來講，熟悉Objective-C語言和Java語言都是比較痛苦的事情。有了PhoneGap就不用擔憂這些了。用熟悉的Web前端技術就能夠開發出很專業的手機應用程序。android

　　　　l  提供強大的硬件訪問控制。比起傳統的Web程序，PhoneGap提供了一些列的JS 的類，能夠直接訪問硬件。好比加速，相機，指南針，GPS，文件訪問等，可讓你用JS方便地調用系統的硬件。以彌補傳統Web程序的一塊錯誤。數據庫

　　　　l  方便的安裝和使用。PhoneGap的架構很複雜，但對於大多數開發者來講，只用很簡單的配置就能夠搭好環境。只用專一寫好本身的Web頁面，拷貝進去就能夠了。　　express

　　劣勢：apache

　　　　l  運行速度慢：程序的載入和UI界面的反應都比原生的程序慢，由於它實際上仍是在展現Web頁面，因此載入、頁面刷新等確定是須要必定時間的。網絡

　　　　l  不適合部分程序。若是你的程序須要3D功能，或者對界面刷新有較高的要求，這樣的程序如今來講還只是用原生的語言會比較好。

　3、PHONEGAP開發須要的基本知識：

　　l  HTML：作爲最基本的Web開發，HTML知識必不可少。如今不少移動終端已經支持HTML5了，因此最好學會HTML5相關的知識；

　　l  CSS：定義的頁面的樣式等等，不用CSS，你的頁面會很難控制定位和樣式等等。建議能掌握CSS3的相關知識，能寫出更好的界面；

　　l  JavaScript：後臺的交互都由JavaScript實現，讀寫數據庫，載入Google Map等等；

　　l  PhoneGap的類庫：都是JavaScript的庫，使用很簡單，有詳細文檔，能夠參考官網：http://docs.phonegap.com/

　　l  基本的平臺知識：好比要作iPhone的程序，就要知道XCode怎麼安裝，怎麼編譯，怎麼獲取受權證書，真機調試等等，要作android程序就要會搭建Ecllipse開發環境等等。會簡單使用這些平臺後，就能夠安裝PhoneGap的平臺了，能夠參　　　　　　

　　  考：http://www.phonegap.com/start

　4、jQuery Mobile：PHONEGAP的得力助手：

　　開發PhoneGap的程序，jQuery Mobile不是必備，可是有了jQuery Mobile，可使你的程序美觀不少。

　　jQuery Mobile實際上是一堆的樣式集和JAVA事件。好比寫一個按鈕，iOS和android的是不一樣的，用HTML作出來的每每很醜。通常的處理方式是從新定義按鈕的樣式，使它變得更像手機平臺上的按鈕。jQuery Mobile爲你提供了這一套框架，你能夠經過很簡單的屬性設置就能夠作出跟手機平臺下車差很少的按鈕，至關方便。詳情能夠參考：http://jquerymobile.com/

　　注：以上轉載至：http://blog.sina.com.cn/s/blog_4cdc44df0100uuiq.html（在此對博主表示深深的謝意，感謝博主細心的總結。麼麼噠~~）　　

 　　相信經過上面的介紹，你們對於PhoneGap已經有了必定的認識，下面我將帶領你們經過實現一個最簡單的事例來幫助你們對PhoenGap的認識。

　　工欲善其事，必先利其器。開發PhoneGap程序也同樣，咱們第一步須要作的是，下載最新版的PhoneGap，下載地址：http://phonegap.com/install/，下載後無需安裝，PhoneGap直接解壓即可以使用。PhoenGap官網提供了安裝視頻，可是不知道是網絡緣由仍是什麼狀況，根本打不開。下載好咱們的PhoneGap後，接下來我就開始進入咱們的事例的實現。

　　PhoneGap的開發和咱們的Android開發十分類似，咱們首次須要作的和以前的項目同樣，咱們打開eclipse，建立一個工程，和咱們以前建立工程同樣，建立好咱們的工程以後下面咱們一塊兒來配置開發環境。

　　先給你們看一下咱們的目錄結構：

　　

　　從上面的目錄結構，你們不難看出，咱們今天的重頭戲部分就在於assets文件夾。這個文件夾中的內容從何而來，就在咱們第一步下載的PhoneGap中，咱們解壓咱們下載好的壓縮包，由於咱們今天的講解是針對Android平臺開發，因此咱們在解壓文件中找到Android文件夾，在這個文件夾中，有咱們須要的兩個文件：cordova-2.8.1.jar和cordova.js，固然個人項目中引入的比較多，實際開發中，前兩個是必須的，剩餘的你們根據本身的開發須要進行增長。具體的操做：將cordova.js拷貝到assets下www文件夾中，將cordova-2.8.1.jar拷貝到libs文件夾下，而後記得將這個jia包導入到工程中。具體的操做：選擇工程，右鍵單擊選擇properties，以後的請看下圖：

　　

　　到這裏咱們的大工已經完成三分之二，下面咱們來完成最後的一點：

　　新建一個index.html文件，並將其拷貝到assets下www文件夾中：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 應用程序</title>
<script src="js/cordova-2.7.0.js" type="text/javascript"></script>
</head> 
<body> 

<h1>個人第一個PhoneGap程序</h1>

</body>
</html>

　　下一步修改咱們的主Activity代碼：

import android.os.Bundle;
//import android.app.Activity;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        super.loadUrl("file:///android_asset/www/index.html");
    }

}

　　接下來咱們須要在AndroidMainfest.xml文件中添加一些權限聲明：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloword"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"
        android:xlargeScreens="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.helloword.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

　　到這裏咱們的項目基本已經完成，你們運行應該能夠在模擬器上出現下面的內容：

　　

　　不過如今還不能說完成了配置，咱們還須要在res文件下添加一個xml文件夾，在裏面添加一個config.xml（無需改動，直接拷貝便可）：

<?xml version="1.0" encoding="utf-8"?>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<cordova>
    <!--
    access elements control the Android whitelist.
    Domains are assumed blocked unless set otherwise
     -->

    <access origin="http://127.0.0.1*"/> <!-- allow local pages -->

    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
    <access origin=".*"/>

    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <log level="DEBUG"/>
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    <plugin name="Echo" value="org.apache.cordova.Echo" />
    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
    <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>

　　到這裏咱們本篇關於phoneGap的介紹就講完了，可能你們還有疑問，歡迎留言討論。

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