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檔案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