HTML5Plus 모바일 애플리케이션 공유-H5 튜토리얼-php.cn

HTML5Plus 모바일 애플리케이션 공유

小云云

풀어 주다： 2018-02-10 14:18:00

원래의

3011명이 탐색했습니다.

HTML5Plus 모바일 애플리케이션이란 무엇입니까? 5+App이라고 불리는 HTML5 Plus 모바일 앱은 휴대폰에서 실행되는 HTML, JS, CSS를 기반으로 작성된 앱입니다. 네이티브 앱과 동일한 강력한 기능과 성능을 달성하기 위해 확장된 JS API를 사용합니다.

간단히 말하면 웹 개발 기술을 사용하여 기본 모바일 애플리케이션을 개발합니다.

5+앱과 모바일 웹

5+앱과 모바일 웹 개발에 사용되는 관련 기술은 일반적으로 동일하지만 둘 사이의 차이점은 여전히 분명합니다.

5+App은 C/S이고, Web은 B/S입니다.
5+App은 독립적인 클라이언트이며 애플리케이션 리소스는 일반적으로 정적 파일만 될 수 있습니다. PHP 및 JSP와 같은 서버 템플릿에는 이를 처리할 파서가 없습니다.
5+App은 기본 모바일 애플리케이션인 apk 및 ipa 접미사가 포함된 패키지로 패키지됩니다.
window.plus 5+런타임 엔진을 사용하는 확장 API. 일반 브라우저는 이 엔진을 통합하지 않으며 웹 개발에서는 일반적으로 이러한 API를 사용할 수 없습니다.

준비

개발 도구

HBuilder에는 5개 이상의 앱을 위한 개발 환경이 내장되어 있으므로 먼저 이 IDE를 다운로드해야 합니다.

계정 등록

HBuilder를 다운로드하고 압축을 푼 후 IDE를 시작하세요. 처음 사용하는 경우 애플리케이션과 커뮤니티 활동을 쉽게 관리할 수 있도록 계정을 등록해야 합니다.

Devices

iOS 장치나 Mac OS 시스템이 없기 때문에 이 시리즈의 공유에서는 Windows 시스템에서 Android 애플리케이션 개발을 예로 사용합니다.

컴퓨터와 휴대폰. 휴대폰은 Android 4.4 이상을 권장하며 에뮬레이터는 권장하지 않습니다. USB 케이블도 필요하며, 물론 HBuilder는 WiFi 디버깅도 지원합니다.

첫 번째 5+앱

새 애플리케이션

HBuilder를 시작하고 로그인하세요.
Menu -> New -> Mobile App
템플릿은 당분간 조정할 필요가 없습니다. "HelloWorld"를 입력하고 완료를 클릭하세요.

index.html

애플리케이션의 진입 페이지는 웹의 진입 페이지와 개념적으로 유사합니다. 기본값은 응용 프로그램 루트 디렉터리의 index.html이며 조정할 수 있습니다.

manifest.json

5+App 구성 파일, 애플리케이션 정보를 구성하는 데 사용됩니다. HBuilder는 이 파일에 대해 특별한 처리를 수행하고 시각적 편집 인터페이스를 제공합니다.

애플리케이션 정보

애플리케이션 이름: 휴대폰 바탕화면에 표시되는 애플리케이션의 이름입니다.
appid: 5+앱 생성 시 할당되는 부분이므로 수정하지 마세요. iOS의 AppID나 다른 타사 플랫폼의 appid와 혼동하지 마세요.
버전 번호: 애플리케이션 버전 번호
페이지 항목: 홈페이지에 있는 페이지로 수정이 가능합니다.
애플리케이션 설명: 애플리케이션 정보를 간략하게 설명합니다.

아이콘 구성

은 애플리케이션의 로고를 따라 사양에 맞는 사진을 만든 다음 한 번의 클릭으로 대체 로고를 생성합니다.

시작 사진

플래시 사진은 애플리케이션이 시작될 때의 자리 표시자 사진이고 WeChat은 달입니다.
시작 옵션: 일반적으로 기본 옵션을 사용하고 필요에 따라 조정합니다.
그림 설정: 필요에 따라 해당 크기의 png 그림을 만들고 구성을 선택합니다.

SDK 구성

일부 타사 SDK 기능을 사용하는 경우 해당 정보를 구성해야 합니다.
SDK 입력해야 하는 정보를 활성화하고 해당 타사 오픈 플랫폼으로 이동하여 등록하면 됩니다.

모듈 권한 구성

일부 모듈을 활성화하려면 권한 구성이 필요합니다

페이지 참조 관계

잘 모르겠으니 매뉴얼만 읽어보세요.

코드 보기

구성의 소스 코드 부분이며 모든 구성이 시각적 편집 보기를 제공하는 것은 아닙니다.

실제 장치에서 실행

휴대폰을 컴퓨터에 연결하면 HBuilder가 자동으로 컴퓨터에 연결된 장치를 감지합니다. 메뉴 -> 실행 -> 실제 장치에서 실행하려면 장치를 선택하세요. 디버깅 베이스 HBuilder가 처음으로 설치됩니다. HBuilder IDE 버전이 변경되면 실제 시스템 작동은 HBuilder 베이스의 이전 버전을 덮어쓰게 됩니다.

Debugging

페이지 스타일로, 디버깅을 위해 컴퓨터의 Chrome 브라우저 모바일 모드를 사용하는 것이 좋습니다.
안드로이드 기기가 실행되면 파일을 수정하고 저장할 때마다 휴대폰에 있는 베이스가 코드를 동기화합니다.
Android는 디버깅을 위해 Chrome RemoteDebugging을 계속 사용할 수 있지만 Android 4.4 이상의 기기가 필요하며 처음으로 방화벽을 우회해야 합니다.

Call 5+API

간단히 확장 API 로딩 완료 이벤트 콜백을 캡슐화

var plusReady = function(callback) {
  if(window.plus) {
    callback();
  } else {
    document.addEventListener('plusready', callback);
  }
};

로그인 후 복사

그 다음, 현재 기기 연결의 네트워크 타입을 읽어 페이지에 출력합니다.

plusReady(function() {
  var netType = plus.networkinfo.getCurrentType();
  document.write('当前网络类型为：' + netType);
});

로그인 후 복사

실제 머신에서 실행하면 WiFi 네트워크 환경인 "현재 네트워크 유형은 3" 페이지에서 내용을 볼 수 있습니다.

Packaging

manifest.json의 정보가 올바른지 확인하세요
로고 및 스플래시 이미지가 구성되지 않은 경우 기본 HBuilder 관련 이미지가 사용됩니다.
메뉴 -> 출시 -> 클라우드 패키징 - 기본 설치 패키지 만들기
Android 인증서는 DCloud에서 제공하는 기성품을 사용하든, 생성하든 비교적 동일합니다. 당신 자신.
패키지 이름은 안드로이드 패키지 이름의 형식 사양을 엄격히 준수해야 하며 임의로 작성하지 마십시오. 여기에서 조정하고 com.helo.html5plus로 변경하세요.
구성 정보에 오류가 있는 경우 메시지가 표시되며 계속하기 전에 올바르게 수정해야 합니다.
모든 것이 올바른 후 "패키지"를 클릭하고 기다리세요.
패키징이 완료되면 해당 디렉토리에 자동으로 다운로드됩니다.