0
点赞
收藏
分享

微信扫一扫

phoneGap+android学习之搭建环境

zhongjh 2023-07-28 阅读 79


Install



To Install 3.3: Ensure that you have NodeJS installed, then open your commandline and run the following:



C:\> npm install -g phonegap



Once installation completes, you can invoke phonegap on command line for further help.



Usage



$ phonegap create my-app
$ cd my-app
$ phonegap run android

Learn more at docs.phonegap.com


PhoneGap是一个开发跨平台的html5本地化程序的平台,通过它可以把网页变为各种平台上的应用程序

1.下载phoneGap


到官网下载: http://phonegap.com/



我下载的版本是1.5



2.浏览在下载完的zip包





在包中我找到android的lib,我用android也是迫于没有苹果机



3.我在系统里已经安装好了eclipse3.6和android3.1



4.新建工程


在eclipse里新建工程





下一步





创建的android项目版本可以是更低一些我看了一下它自带的例子是5



点击finish



5.加入phoneGap包



1)创建



  #这个用于放cordova-1.5.0.jar



#这个用于放cordova-1.5.0.js





点击项目右键属性->java build path->libraties-> add jars






把解压出来的android目录下的xml包放到/res下







cordova.xml:


点击(此处)折叠或打开


1. <</span>?xml version="1.0" encoding="utf-8"?>
2. <</span>cordova>
3.    <</span>access origin="http://127.0.0.1*"/>
4.    <</span>log level="DEBUG"/>
5. <</span>/cordova>


plugins.xml:



点击(此处)折叠或打开

1. <</span>?xml version="1.0" encoding="utf-8"?>
2. <</span>plugins>
3.    <</span>plugin name="App" value="org.apache.cordova.App"/>
4.    <</span>plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
5.    <</span>plugin name="Device" value="org.apache.cordova.Device"/>
6.    <</span>plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
7.    <</span>plugin name="Compass" value="org.apache.cordova.CompassListener"/>
8.    <</span>plugin name="Media" value="org.apache.cordova.AudioHandler"/>
9.    <</span>plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
10.    <</span>plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
11.    <</span>plugin name="File" value="org.apache.cordova.FileUtils"/>
12.    <</span>plugin name="Network Status" value="org.apache.cordova.NetworkManager"/>
13.    <</span>plugin name="Notification" value="org.apache.cordova.Notification"/>
14.    <</span>plugin name="Storage" value="org.apache.cordova.Storage"/>
15.    <</span>plugin name="Temperature" value="org.apache.cordova.TempListener"/>
16.    <</span>plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
17.    <</span>plugin name="Capture" value="org.apache.cordova.Capture"/>
18.    <</span>plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
19. <</span>/plugins>


6.开始开发



可以参考自带的example



1)首先把activity类进行修改



点击(此处)折叠或打开


1. package com.yifangyou.hellophonegap;
2. 
3. import android.os.Bundle;
4. import org.apache.cordova.*;
5. public class HelloPhoneGap extends DroidGap {
6.    
7.    @Override
8.    public void onCreate(Bundle savedInstanceState)
9.    {
10.        super.onCreate(savedInstanceState);
11.        //加载assets/www目录下的的index.html
12.        super.loadUrl("file:///android_asset/www/index.html");
13.    }
14. }


编辑assets/www/index.html



点击(此处)折叠或打开



你好 PhoneGap



点击(此处)折叠或打开

1. <</span>?xml version="1.0" encoding="utf-8"?>
2. <</span>manifest xmlns:android="http://schemas.android.com/apk/res/android" android:windowSoftInputMode="adjustPan"
3.      package="com.yifangyou.hellophonegap" android:versionName="1.1" android:versionCode="5">
4.    <</span>uses-sdk android:minSdkVersion="8" />
5.    <</span>supports-screens
6.        android:largeScreens="true"
7.        android:normalScreens="true"
8.        android:smallScreens="true"
9.        android:resizeable="true"
10.        android:anyDensity="true"
11.        />
12. 
13.    <</span>uses-permission android:name="android.permission.CAMERA" />
14.    <</span>uses-permission android:name="android.permission.VIBRATE" />
15.    <</span>uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
16.    <</span>uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
17.    <</span>uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
18.    <</span>uses-permission android:name="android.permission.INTERNET" />
19.    <</span>uses-permission android:name="android.permission.RECEIVE_SMS" />
20.    <</span>uses-permission android:name="android.permission.RECORD_AUDIO" />
21.    <</span>uses-permission android:name="android.permission.RECORD_VIDEO"/>
22.    <</span>uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
23.    <</span>uses-permission android:name="android.permission.READ_CONTACTS" />
24.    <</span>uses-permission android:name="android.permission.WRITE_CONTACTS" />
25.    <</span>uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
26.    <</span>uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
27.    <</span>uses-permission android:name="android.permission.GET_ACCOUNTS" />
28.    <</span>uses-permission android:name="android.permission.BROADCAST_STICKY" />
29. 
30.    <</span>uses-feature android:name="android.hardware.camera" />
31.    <</span>uses-feature android:name="android.hardware.camera.autofocus" />
32.    <</span>application android:icon="@drawable/icon" android:label="@string/app_name"
33.        android:debuggable="true">
34.        <</span>activity android:name=".HelloPhoneGap" android:label="@string/app_name"
35.                 android:configChanges="orientation|keyboardHidden">
36.            <</span>intent-filter>
37.                <</span>action android:name="android.intent.action.MAIN" />
38.                <</span>category android:name="android.intent.category.LAUNCHER" />
39.            <</span>/intent-filter>
40.        <</span>/activity>
41.        <</span>activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name"
42.                 android:configChanges="orientation|keyboardHidden">
43.            <</span>intent-filter>
44.            <</span>/intent-filter>
45.        <</span>/activity>
46.    <</span>/application>
47. <</span>/manifest>


1)创建设备



点击创建设备按钮


屏幕小的电脑,可以选择400屏幕的


2)运行



点击项目右键run as -> run configuration



选择新创建的设备


运行效果



phoneGap+android学习之搭建环境_apache

中文乱码,估计是html没有设置语言的问题或者是index.html的编码问题


改了一下文件编码


把index.html改为


点击(此处)折叠或打开

1. <</span>!DOCTYPE HTML lang="zh-CN">
2. <</span>head>
3. <</span>title>你好 PhoneGap<</span>/title>
4. <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <</span>script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"><</span>/script>
6. <</span>/head>
7. <</span>body>
8. <</span>h1>你好 PhoneGap<</span>/h1>
9. <</span>/body>
10. <</span>/html>


正常啦


环境搭好了

phoneGap+android学习之搭建环境_apache


今天到这里了,下次继续

举报

相关推荐

0 条评论