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的介绍就讲完了，可能你们还有疑问，欢迎留言讨论。