有了phonegap你还android吗?

第一章 phonegap介绍

1.1 什么是phonegap

PhoneGap是一个自由开放源码的开发工具和框架,允许利用HTML + JavaScript + CSS的强大功能在多个手机平台上开发程序,开发出来的程序经过在各自的平台上编译形成独立的安装程序。使程序看起来和native的程序一样。

1.2 PhoneGap的优势和劣势

优势:

l  跨平台:一次开发,多个平台共用。现主要包括了android,iOS,Apple iOS, Google Android, Palm, Symbian, BlackBerry 等。WP7等平台也在逐步兼容中。

l  降低开发门槛。对于很多WEB开发人员来说,熟悉Objective-C语言和Java语言都是比较痛苦的事情。有了PhoneGap就不用担心这些了。用熟悉的Web前端技术就可以开发出很专业的手机应用程序。

l  提供强大的硬件访问控制。比起传统的Web程序,PhoneGap提供了一些列的JS 的类,可以直接访问硬件。比如加速,相机,指南针,GPS,文件访问等,可以让你用JS方便地调用系统的硬件。以弥补传统Web程序的一块错误。

l  方便的安装和使用。PhoneGap的架构很复杂,但对于大多数开发者来说,只用很简单的配置就可以搭好环境。只用专注写好自己的Web页面,拷贝进去就可以了。

劣势:

l  运行速度慢:程序的载入和UI界面的反应都比原生的程序慢,因为它实际上还是在展示Web页面,所以载入、页面刷新等肯定是需要一定时间的。

l  不适合部分程序。如果你的程序需要3D功能,或者对界面刷新有较高的要求,这样的程序现在来说还只是用原生的语言会比较好。

1.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

1.4 PHONEGAP的得力助手

开发PhoneGap的程序,jQuery Mobile不是必备,但是有了jQuery Mobile,可以使你的程序美观很多。

jQuery Mobile其实是一堆的样式集和JAVA事件。比如写一个按钮,iOS和android的是不同的,用HTML做出来的往往很丑。一般的处理方式是重新定义按钮的样式,使它变得更像手机平台上的按钮。jQuery Mobile为你提供了这一套框架,你可以通过很简单的属性设置就可以做出跟手机平台下车差不多的按钮,相当方便。

详情可以参考:http://jquerymobile.com/

也可以使用Sencha Touch,界面没的说,也是非常不错的选择

详情可参考:http://www.sencha.com/

第二章 快速开始

2.1 快速开始

官方的使用教程是

http://phonegap.com/start#android

这里只是简单的翻译了一下

2.1.1 选择平台

我选的是android

也可以直接看视频操作

2.1.2 环境需求及安装

Eclipse 3.4+

Download and install Eclipse Classic

Download and install Android SDK

Download and install ADT Plugin

Download the latest copy of PhoneGap and extract its contents. We will be working with the Android directory.

上边三个是android的基本环境,下边的是phonegap所需的sdk包。

2.1.3 设置工程

创建android工程,选择

创建完成后在根目录下创建两个新目录

  • /libs
  • /assets/www

然后到phonegap目录的android目录下拷贝

phonegap-1.3.0.js到 /assets/www

拷贝phonegap-1.3.0.jar到/libs

拷贝xml文件夹下的内容到/res目录下

修改完的目录结构如下

将主Activity的继承关系修改为DroidGap,并且将jar包的引用导入工程中。

将setContentView(R.layout.main);修改为

super.loadUrl("file:///android_asset/www/index.html");

右键打开AndroidManifest.xml

把下面的内容贴到version name下边

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="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.READ_PHONE_STATE" /> <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.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" />

添加完后xml中的内容如下,如果有对不上的可以手动添加

我修改后的xml文件内容如下

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tgyt.phonegap"
    android:versionCode="1"
    android:versionName="1.0" >
    <supports-screens
     android:largeScreens="true"
     android:normalScreens="true"
     android:smallScreens="true"
     android:resizeable="true"
     android:anyDensity="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.READ_PHONE_STATE" />
    <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.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.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    <uses-feature android:name="android.hardware.comera" />
    <uses-feature android:name="android.hardware.comera.autofocus" />
    <uses-sdk android:minSdkVersion="8" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".HellophonegapActivity" android:configChanges="orientation|keyboardHidden">
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:label="@string/app_name"
            android:name="com.phonegap.DroidGap" android:configChanges="orientation|keyboardHidden">
            <intent-filter >
            </intent-filter>
        </activity>
    </application>
</manifest>

运行android程序,就可以看到如下的界面

第三章 PhoneGap架构基础及工作原理

3.1 PhoneGap能做什么?

3.1.1 基于Web技术开发移动设备客户端应用

用您熟悉的JavaScript、HTML技术,或者结合移动Web UI框架jQuery Mobile、Sencha Touch 开发跨平台移动客户端。

3.1.2 用PhoneGap访问设备本地API

提供跨平台设备访问能力,以下列出访问设备部分功能,本系列专题在以后文章中详解使用方法。

ACCELEROMETER(重力感应)

CAMERA(摄像机)

COMPASS(指南针)

CONTACTS(通讯录)

FILE(文件)

GEOLOCATION(地理定位)

MEDIA(媒体)

NETWORK(网络)

NOTIFICATION (通知)

STORAGE(Sqlite数据库存储)

3.1.3 发布您的程序到不同移动平台

PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力,但是其工作原理并不神秘,下面以iPhone和Android平台为例进行分析。

iPhone和Android平台共同点是都有内置的WebView组件,其具备两个特性:

1、WebView组件实质是移动设备的内置浏览器

WebView这个内置浏览器特性是Web能被打包成本地客户端的基础,可方便的用HTML5、CSS3页面布局,这是移动Web技术的优势相对于原生开发。

2、WebView提供Web和设备本地API双向通信的能力

PhoneGap针对不同平台的WebView做了扩展和封装,使WebView这个组件变成可访问设备本地API的强大浏览器,所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

明白以上两个特性,参照下面PhoneGap与设备本地API通信图,一个成熟的PhoneGap技术客户端运行状况如下:

应用运行在WebView组件上 —》 通过PhoneGap在各平台的扩展 —》 最终访问设备本地资源

看了上面的介绍你还在等什么,一起phonegap吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SEO

SEO新手必知50个SEO术语词解释

462120
来自专栏极客猴

搭建手机抓包环境

智能手机的普及,这使得移动互联网成为另一个流量巨头。越来越多的公司也会转而直接提供 App 来展示内容。例如微信以及其生态(微信公众号、小程序)、抖音等。这也说...

37720
来自专栏求索之路

教你用android玩冲顶大会——实现几个小时的财务自由

最近答题类app比较火,玩了几把之后想到为什么不用技术来查找答案呢?因此搞了一款辅助app,能够帮助大家直接搜索答案.经过两天的开发和三天的测试,终于让我的冲...

33060
来自专栏伪君子的梦呓

不用 ps 都可以获得双色调图片

16960
来自专栏吴裕超

浅析前端渲染与服务端渲染

背景知识:   「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;   「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA ...

1.1K40
来自专栏狮乐园

高级 Angular 组件模式 (1)

Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的an...

10320
来自专栏微信小程序开发

小程序授权逻辑如何更改为button形式

61990
来自专栏iOSDevLog

Unity 3D 开发《王者荣耀》:英雄攻击创建按钮源码:https://github.com/iOSDevLog/ArenaOfValor

49960
来自专栏DeveWork

Google Fonts导致WordPress 速度问题的三个解决方案

本来实在是不想写这个的,因为相关方法在圈子里面已经烂大街了。但无奈,一些客户将近期的Google Fonts导致 WordPress 打开速度慢的现象归咎于我的...

32690
来自专栏一“技”之长

iOS开发之BusinessChat框架使用 原

      BusinessChat是iOS11.3后引入的新框架,这个框架配合iMessage应用将商家与用户更加紧密的结合起来,并且为商家提供了另外一种非常...

21820

扫码关注云+社区

领取腾讯云代金券