집 > 기사 > 웹 프론트엔드 > HTML5plus 모바일 애플리케이션 개발 사례 공유

HTML5plus 모바일 애플리케이션 개발 사례 공유

小云云원래의: 2018-02-08 15:23:133109검색

HTML5plusDCloud 회사는 전통적인 웹 기술을 사용하여 모바일 애플리케이션을 개발하기 위한 솔루션을 제공합니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로 HTML5plus 모바일 애플리케이션의 개발 사례를 여러분과 공유합니다.

향상된 버전의 모바일 브라우저 엔진으로 HTML5를 기본 수준으로 구현했습니다!

제품 슬로건에는 항상 과장된 요소가 있으므로 이러한 세부 사항에 주의하지 마세요.

Tips

HTML5plus는 이름이 길어서 HTML5+, 줄여서 5+라고도 합니다.
이 엔진을 사용하여 개발된 모바일 애플리케이션을 5+App이라고도 합니다.
관련 SDK를 5+SDK라고 합니다.

사용방법

Runtime

즉, DCloud사의 또 다른 제품인 HBuilder를 이용하여 직접 개발 및 디버깅을 할 수 있습니다.

SDK

5+SDK를 기본 애플리케이션에 통합하면 애플리케이션에서 확장된 JS API를 사용할 수 있습니다.

Difference

런타임 방식은 로컬 패키징 환경을 구축할 필요 없이 DCloud에서 제공하는 클라우드 패키징을 직접 사용할 수 있습니다.
런타임 메서드에는 기본 개발을 마스터하는 능력이 필요하지 않으며 확장 API를 합리적으로 사용하면 됩니다.
SDK 방식은 더 많은 요구 사항을 충족할 수 있지만 기본 개발 능력을 마스터해야 합니다.

런타임 방식을 간단히 이해하면 개발자가 네이티브 애플리케이션의 기본 부분을 직접 개발할 필요가 없습니다. 개발자는 클라우드 패키징을 위해 애플리케이션 리소스만 제출하면 됩니다.
SDK 방식이 다릅니다. 이 경우 5+SDK는 원래 네이티브 애플리케이션 기반을 기반으로 확장됩니다. 따라서 개발자는 자신만의 기본 개발 환경을 구축하고 일부 기본 개발 작업을 수행해야 합니다.

기본 아키텍처

공식 문서에 따르면 Android 플랫폼 타사 플러그인 개발 지침은 대략 3계층 구조로 나뉩니다. 이해를 돕기 위해 설명을 네 부분으로 확장했습니다.

Webview

는 간단한 브라우저로 이해하시면 되는데, HTML, CSS, JavaScript가 모두 여기에 있습니다.

plus

이 부분은 Webview에 있습니다. 원래 브라우저 환경을 기반으로 확장 프로그램에서 기본 함수의 API를 호출할 수 있습니다. 이러한 API는 모두 window.plus 개체에 있습니다. window.plus 这个对象里面。

JS Bridge

负责连接 JavaScript 层与 Native 层。

接收 JavaScript 层传发过来的请求，通知 Native 层做出相应的响应。
接收 Native 层响应的结果，通知 JavaScript 层接收结果。

Native

即 Android 和 iOS，也是 HTML5plus 的核心关键部分。

一次调用执行的过程

以获取应用版本号为例

plus.runtime.version;

JS 层调用 plus.runtime.version
JS Bridge
는 JavaScript 레이어와 Native 레이어를 연결하는 역할을 담당합니다.
JavaScript 레이어에서 요청을 받고 그에 따라 응답하도록 네이티브 레이어에 알립니다.
Native 레이어로부터 응답 결과를 받고 JavaScript 레이어에 결과를 받도록 알립니다.
Native
는 Android 및 iOS이며 HTML5plus의 핵심 핵심 부분이기도 합니다.

원콜 실행 프로세스

애플리케이션 버전 번호를 예로 들어보겠습니다

rrreee

JS 레이어는 plus.runtime.version을 호출하고 Webview는 JS Bridge에 대한 요청을 시작합니다.

JS Bridge는 요청을 받고 네이티브 레이어에 애플리케이션 버전 번호 정보를 읽도록 알립니다.

Native 레이어가 실행되어 결과를 얻고, 해당 결과를 JS Bridge 레이어에 알립니다.
JS Bridge는 Native 레이어에서 해당 결과를 가져와 해당 Webview 결과 정보를 알려줍니다.
JS 레이어는 애플리케이션의 버전 정보를 얻습니다.
Comment on

개인적으로는 모든 제품, 회사마다 고유의 디자인 컨셉과 사업 전략이 있다고 생각합니다. 사용자마다 요구 사항과 의견이 항상 다릅니다.

따라서 기술을 선택할 때 자신의 요구 사항과 조사 중인 제품 정보를 이해해야 합니다. DCloud 커뮤니티에는 "왜 XXX API가 없나요", "XXX SDK를 통합하지 않는 이유", "네이티브 개발 방법을 모르겠는데 공식이 XXX API를 확장해줬으면 좋겠습니다" 등의 게시물이 자주 올라옵니다. 나타나다. 이러한 문제의 구체적인 이유에 대해서는 모든 사람이 각자의 이해를 갖고 있으므로 여기서는 논의하지 않습니다.

기술선정시 직접 해보는게 가장 좋습니다. 제품 공급업체가 최선의 답변을 제공할 것이라고 기대하지 마십시오. 왜냐하면 그들은 어리석게도 사용자를 밀어내지 않을 것이기 때문입니다.

이제 다른 개발자가 기술을 선택할 때 참고할 수 있도록 개인적인 경험과 통찰력을 공유하겠습니다.
장점
학습 비용이 저렴하며 기본 웹 개발 기능을 마스터하면 시작할 수 있습니다.
클라우드 패키징을 사용하면 패키징 처리를 위해 Android 및 iOS 개발 환경을 로컬로 구축할 필요가 없습니다. 🎜🎜🎜🎜코드 세트는 몇 가지 호환성 처리만으로 Android 및 iOS용 두 개의 패키지로 컴파일될 수 있습니다. 🎜🎜🎜🎜기대하지 않았는데 토론에 추가하겠습니다. 🎜🎜🎜🎜Inadequacy🎜🎜🎜🎜plus.ModuleName.* 제공되는 API는 제한적입니다. Native.js라는 제품이 있지만 특정 네이티브 개발 기능이 필요합니다. 🎜🎜🎜🎜휴대폰 자체 Webview에 의존하므로 일부 휴대폰에서는 성능이 이상적이지 않습니다. 이는 특정 비즈니스 제품에 일정한 영향을 미칩니다. 🎜🎜🎜🎜1번 항목부터 계속해서 특정 기능을 구현하려면 개발자가 확장을 위해 SDK를 통합해야 합니다. 예를 들어 Bluetooth, 애플리케이션 백그라운드 지속성 등이 있습니다. 이를 위해서는 개발자에게 기본 개발 기능도 필요합니다. 🎜
호환성 문제로 인해 일부 기능이 완전히 구현되지 않았습니다. 예를 들어 바탕 화면 아이콘의 모서리 아이콘 등입니다. 물론 Android는 심각하게 단편화되어 있으며 일부 단점은 이해할 수 있습니다.
문서 내용이 일부 위치에서 충분히 명확하게 설명되지 않았습니다. 그리고 문서의 레이아웃이 조금 이상합니다.
저는 지금까지 다른 함정을 접한 적이 없습니다. 어쩌면 아직 익숙하지 않은 것일 수도 있습니다.

더 적합한 범위

포괄적인 공식 사례 전시 및 개인 개발 경험. 요약하자면, 5+ 앱 개발은 다음과 같은 상황이나 제품에 더 적합합니다:

신속하게 애플리케이션을 출시해야 하는 스타트업 회사.
뉴스정보(36Kr), 전자상거래(HiMall), 콘텐츠 공유(Fengqiaoju Flowers), 테이크아웃 등 대부분의 O2O 비즈니스 상품 등
핵심 비즈니스 기능은 특정 기본 기능에 의존하지 않습니다.
일부 엔터프라이즈 애플리케이션은 특정 요구 사항에 따라 결정될 수도 있습니다.

권장하지 않는 상황

일반화할 수 없는 상황도 있으므로 구체적인 상황을 토대로 설명하겠습니다.

애플리케이션에서 사용자 정의 지도 선 그리기 구현 필요성, 데이터 통신을 위한 Bluetooth 모듈 필요성 등과 같은 특정 기본 기능에 크게 의존합니다.
핵심 비즈니스에는 IM(인스턴트 메시징)이 포함되며 타사 JS 버전 SDK를 사용하고 싶지 않습니다.
짧은 동영상 녹화, 사진 편집, 동영상 편집 등 파일 읽기 및 쓰기가 필요합니다.
애플리케이션 백그라운드 지속성, 푸시 서비스 지속성 등과 같은 "불량" 기능이 더 많이 있습니다.
스크린샷 금지 등 애플리케이션 권한을 제어합니다. 이는 기본 레이어에서만 처리할 수 있으며 Android 호환성을 알고 있습니다.

위의 많은 상황은 네이티브 레이어 개발을 통해 해결해야 합니다. 물론 5개 이상의 SDK를 동시에 통합할 수 있으며 관련 확장 API를 계속 사용할 수 있습니다.

유사 제품

cordova
apicloud
appcan
ionic
weex
react Native

그것이 제가 지금까지 배운 전부입니다. 일부 제품은 거의 사용해보지 않았으며, 일부 제품은 전혀 경험해 본 적이 없으므로 여기서는 비교나 과도한 언급을 하지 않겠습니다.

추가:

HBuilder는 IDE이자 실제 머신 디버깅을 위한 기반의 이름이기도 합니다. 이 두 가지가 함께 5개 이상의 앱을 개발하기 위한 환경과 도구입니다.
HTML5plus에는 많은 이름이 있습니다. DCloud 공식 웹사이트에는 5+Runtime이 나와 있습니다. JS API를 확장하고 JS가 기본 함수를 호출할 수 있도록 하는 일을 담당합니다.
MUI는 모바일 개발을 위한 UI 프레임워크로 종종 오해되는 개발을 용이하게 하기 위해 HTML5plus와 관련된 여러 가지 방법을 캡슐화합니다. 그러나 이는 실제로는 UI 프레임워크일 뿐이며 기본 기능을 호출하는 것은 이와 아무 관련이 없습니다.