첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:49:351645검색
PhoneGap은 HTML5를 사용하여 로컬 API 인터페이스를 쉽게 호출하고 애플리케이션을 스토어에 게시할 수 있는 애플리케이션 개발 플랫폼입니다. 관계자들은 저비용, 짧은 개발 주기, 경량 등의 장점이 있다고 말합니다. 아직 이를 입증할 수 없으므로 무시하겠습니다. 그러나 크로스 플랫폼이 있는데 이는 분명한 장점입니다. HTML5 JavaScript 모드를 사용하여 애플리케이션을 개발하기 때문입니다. PhoneGap은 JavaScript를 사용하여 여러 주요 플랫폼(Andriod, IOS, WP8/7, WINRT) 등의 로컬 API를 균일하게 캡슐화합니다. . 이 경우 한 플랫폼에서 다른 플랫폼으로 이식할 때 HTML 코드와 JS를 그대로 가져와 패키징하면 됩니다. PhoneGap은 나중에 Adobe에 인수되어 오픈 소스 커뮤니티에 기여되었으며 현재는 Apache에 의해 관리되고 cordova로 이름이 변경되었습니다.
어제의 html5 드로잉보드를 모바일 기기로 포팅하기 위해 폰갭 플랫폼을 이용하기로 했기 때문에 한 면만 작성하고 실행하면 됩니다.
오늘은 Android에서 PhoneGap 환경을 설정해보겠습니다.
1. 폰갭 다운로드
http://phonegap.com/download/#autodownload
압축을 풀고 lib/android 디렉토리를 찾으세요.
2. Eclipse에서 일반 프로젝트와 동일한 새로운 Android 프로젝트를 생성합니다.
3. 자산 디렉토리에 "www"라는 새 폴더를 만듭니다.
lib/android 디렉토리에 있는 cordova-2.6.0.js를 이 디렉토리에 복사하세요. cordova-2.6.0.jar을 libs 디렉터리에 복사합니다.
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857104.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
4. www 디렉토리에 새로운 html 파일 index.html을 만듭니다. 여기에 인터페이스가 생성됩니다.
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857105.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
색인의 코드는 다음과 같습니다.
< ;!doctype html>
HTML5Paint
5. lib/android 디렉터리를 복사합니다. 전체 xml 폴더를 res
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857106.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
6. AndroidManifest.xml을 수정하여 사용자 권한 추가
@Override }
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true "
android:resizeable="true"
android:anyDensity="true"
/>
7.修改MainAcivity.java
공개 클래스 MainActivity는 DroidGap을 확장합니다. {
public void onCreate(Bundle saveInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
8.build一下会有错误，这是因为face前的cordova-2.6.0.jar没有添加到buildpath리면去。添加buildpath。
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857107.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
继续build就过了。
最后run一下：
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857108.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
%20_html5%20%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC%20%EA%B8%B0%EC%88%A0%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85s/article/201305/201305030857109.png "첫 번째 PhoneGap(cordova) _html5 튜토리얼 기술을 기반으로 애플리케이션에 대한 자세한 설명")
这样一个phonegap은 Andriod에서 고정적으로 사용합니다.