Android项目实践系列(三) －细谈PhoneGap （整合篇）

前言

---

  相信大家对大名鼎鼎的 PhoneGap 略有所闻了吧，至于它的强大我就不详细介绍了，大家可以在网上搜索一下。这里我想着重强调下 PhoneGap 提供了Android, iPhone, Palm, 和 Blackberry 平台的原生包装软件(Wrapper)，让行动网页可以被包装成原生软件的样子，而不需要透过浏览器作为入口。

  本文章将会从应用的角度探讨如何使用PhoneGap以及如何使用PhoneGap的第三方插件。

  我将会介绍PhoneGap的第三方插件ChildBrowser。

项目实践

---

项目准备：

    0. Android开发环境(Eclipse + ADT + AndroidSDK + ...)

    1. 下载 好 PhoneGap 所需要的包(cordova-2.1.0.jar, cordova-2.1.0.js, xml/config.xml)

    2. 下载 好 PhoneGap 的第三方插件 ChildBrowser 所需要的文件（childbrowser.js, ChildBrowser.java, ...）

项目说明：

   该项目中，我首先创建一个Android Project - Android-PhoneGap，将 PhoneGap 整合进去，然后将 ChildBrowser 整合到项目中，最后定制一个 AppShell 插件。

创建Android-PhoneGap项目

---

  此章节我就不详细介绍了，你可以参考 官方教程

  创建后的结构图如下

  App.java

 1 public class App extends DroidGap {
 2 
 3     @Override
 4     public void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.app_layout);
 7         super.loadUrl("file:///android_asset/www/test.html");
 8     }
 9 
10 }

  需要强调以下几点：

    1. App 需要继承 DroidGap, super.loadUrl("file:///android_asset/www/test.html");同样可以load HTTP resources

    2. 将 cordova-2.1.0.js 拷贝到 assets/www 文件夹中

    3. 将 cordova-2.1.0.jar 拷贝到 libs 文件夹中

    4. 将xml/config.xml拷贝到 res 文件夹中

整合 PhoneGap 的第三方插件 ChildBrowser 到项目

---

  1. 在 Android-PhoneGap 项目src下创建包 com.cc.mobile.phonegap.plugins ，将 \ChildBrowser\2.0.0\src\com\phonegap\plugins\childBrowser 文件夹中的 ChildBrowser.java 拷贝到里面

  2. 在 Android-PhoneGap 项目assets下创建 plugins 文件夹， 将 \ChildBrowser\2.0.0\www目录下的 childbrowser.js 文件拷贝到里面，同样将childbrowser目录下的三张图片拷贝下

  3. 在 xml\config.xml 文件中，加如以下信息

<plugin name="ChildBrowser" value="com.cc.mobile.phonegap.plugins.ChildBrowser"></plugin>

  整合后的效果图如下

  整合后的 res/xml/config.xml文件

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <!--
 3        Licensed to the Apache Software Foundation (ASF) under one
 4        or more contributor license agreements.  See the NOTICE file
 5        distributed with this work for additional information
 6        regarding copyright ownership.  The ASF licenses this file
 7        to you under the Apache License, Version 2.0 (the
 8        "License"); you may not use this file except in compliance
 9        with the License.  You may obtain a copy of the License at
10 
11          http://www.apache.org/licenses/LICENSE-2.0
12 
13        Unless required by applicable law or agreed to in writing,
14        software distributed under the License is distributed on an
15        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16        KIND, either express or implied.  See the License for the
17        specific language governing permissions and limitations
18        under the License.
19 -->
20 <cordova>
21     <!--
22     access elements control the Android whitelist.
23     Domains are assumed blocked unless set otherwise
24      -->
25 
26     <access origin="http://127.0.0.1*"/> <!-- allow local pages -->
27 
28     <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
29     <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
30     <access origin=".*"/>
31 
32     <log level="DEBUG"/>
33     <preference name="useBrowserHistory" value="false" />
34     <preference name="exit-on-suspend" value="false" />
35 <plugins>
36     <plugin name="App" value="org.apache.cordova.App"/>
37     <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
38     <plugin name="Device" value="org.apache.cordova.Device"/>
39     <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
40     <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
41     <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
42     <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
43     <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
44     <plugin name="File" value="org.apache.cordova.FileUtils"/>
45     <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
46     <plugin name="Notification" value="org.apache.cordova.Notification"/>
47     <plugin name="Storage" value="org.apache.cordova.Storage"/>
48     <plugin name="Temperature" value="org.apache.cordova.TempListener"/>
49     <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
50     <plugin name="Capture" value="org.apache.cordova.Capture"/>
51     <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
52     <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
53     <plugin name="Echo" value="org.apache.cordova.Echo" />
54     
55     <!-- Start Customized plugins -->
56     <plugin name="ChildBrowser" value="com.cc.mobile.phonegap.plugins.ChildBrowser"></plugin>
57 </plugins>
58 </cordova>

  如此即整合完毕。

后续

---

  下面章节，我将详细介绍如何使用PhoneGap进行实际开发，以及如何使用ChildBrowser插件以及如何定制自己的第三方插件。

文章参考链接

---

http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

http://www.inside.com.tw/2010/08/15/phonegap-eliminates-the-gap-between-mobile-web-and-native-app

http://www.inside.com.tw/2011/01/29/hello-inside-phonegap

 

作者信息：

QQ: 1321518080

Email: hucaijun520.ok@163.com