HTML5 하이브리드 개발은 네이티브(프로그래밍 언어)와 H5(웹 언어) 기술을 모두 사용하여 애플리케이션을 개발하는 것을 말하며, 하이브리드 개발은 네이티브 코드 부분이 플러그인 등을 사용하여 서로의 장단점을 배우는 개발 모델입니다. H5용 컨테이너를 제공하기 위한 프레임워크입니다. 프로그램은 주로 비즈니스 구현 및 인터페이스 표시가 모두 H5 관련 기술을 사용하여 구현됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
현재 시장에는 네이티브 앱, 웹 앱(예: HTML5) 및 하이브리드 앱의 세 가지 유형의 주류 앱이 있습니다. 해당 맞춤형 개발은 네이티브 개발, H5 개발 및 하이브리드 개발입니다.
하이브리드 개발이란 앱 상품 개발 시 효율성을 높이고 비용을 절감하기 위해 네이티브 개발 기술과 H5 개발 기술을 활용하는 하이브리드 애플리케이션을 말합니다. 평신도의 관점에서 이것은 웹 페이지 언어와 프로그래밍 언어를 모두 사용하여 개발된 웹 페이지 모델입니다. 일반적으로 "H5 클라우드 웹 사이트 + APP 애플리케이션 클라이언트"의 두 부분으로 구성됩니다.
하이브리드 개발은 서로의 장점을 학습하고 단점을 보완하는 개발 모델입니다. 네이티브 코드 부분은 플러그인이나 기타 프레임워크를 사용하여 H5용 컨테이너를 제공하며 프로그램의 인터페이스 표시는 H5를 사용하여 구현됩니다. 관련 기술. 많은 앱이 하이브리드 개발 모델을 사용하여 개발됩니다.
장점:
1. 높은 개발 효율성과 시간 절약. 기본적으로 동일한 코드 세트를 Android와 IOS에서 사용할 수 있습니다.
2. 버전을 업그레이드할 때마다 서버 측에서만 업그레이드하면 되므로 업데이트 및 배포가 더 편리합니다. 검토를 위해 App Store에 업로드합니다.
3. 코드 유지 관리가 쉽고, 제품 비용이 절약됩니다.
4. 오프라인에서 실행할 수 있습니다.
단점:1. 기능/인터페이스를 맞춤 설정할 수 없습니다. 모든 콘텐츠가 고정되어 있으며 인터페이스를 변경하거나 기능을 추가할 수 없습니다.
2. 느린 로딩/높은 네트워크 요구 사항: 혼합된 앱 데이터를 로딩해야 합니다. 서버에서 각 페이지를 다시 다운로드해야 하므로 열기 속도가 느리고, 네트워크 사용량이 높으며, 버퍼링 시간이 길고, 사용자에게 혐오감을 주기 쉽습니다.
3. 보안이 상대적으로 낮습니다. 최신 휴대폰 시스템은 보안이 취약하고, 네트워크가 너무 빨리 발전하고, 실시간 업데이트와 정기적인 검사가 이루어지지 않으면 쉽게 감염될 수 있습니다. 허점을 만들고 직접적인 경제적 손실을 초래합니다.
4. 네이티브 개발과 H5 개발을 모두 이해하는 고급 인력은 찾기 어렵습니다.
하이브리드 APP 원칙하이브리드 APP에는 일반적으로 대부분의 인터페이스 개발 및 비즈니스 로직을 담당하는 프런트 엔드가 있고, 네이티브는 프런트 엔드가 호출할 네이티브 기능을 캡슐화하는 역할을 담당합니다. WebView를 통신 매체로 사용하여 웹 개발 속도가 빠르고 강력한 기본 기능을 갖습니다.
프런트엔드 개발자의 관점에서 하이브리드 애플리케이션은 단순히 프런트엔드 페이지를 특수한 브라우저 환경에서 실행할 수 있도록 하는 것으로 이해될 수 있으며, 이 환경은 일반 Web API 외에도 다양한 추가 기능을 제공합니다. 휴대폰에서 직접 호출할 수 있습니다.
네이티브 개발자의 관점에서 보면 하이브리드 애플리케이션은 실제로 네이티브로 개발된 앱 셸입니다. 이 셸은 네이티브 기능을 여러 API에 캡슐화하여 WebView에 삽입한 다음 프런트엔드 페이지를 앱에 패키징하여 사용됩니다. 앱이 시작되면 WebView는 프런트엔드 페이지를 로드하고 나머지는 프런트엔드에 남겨집니다.
웹 페이지는 iOS 및 Android와 상호 작용합니다(원리)웹 페이지는 iOS 및 Android와 상호 작용합니다(원리)
iOS 가로채기 요청
// 继承类MyURLProtocol，子类NSURLProtocol // MyURLProtocol.h文件 #import <Foundation/Foundation.h> NS_ASSUME_NONNULL_BEGIN @interface MyURLProtocol: NSURLProtocol @end로그인 후 복사// MyURLProtocol.m文件 #import "MyURLProtocol.h" @implementation MyURLProtocol // 手机app是否可以加载请求 + (BOOL)canInitWithRequest:(NSURLRequest *)request{ //拦截到请求后，获取请求的字符串 NSString *path = request.URL.absoluteString; // 判断字符串是否以协商好的虚假协议开头（如emma://开头） if([path hasPrefix:@"emma://"]){ // 这是个假请求 // 获取该请求真实目的 NSString *action = [path substringFromIndex:7]; // 该文件不能调用一些原生功能，需要装有webview的视图文件才行，所以要将该请求字段传给视图文件 // 文件间不能通信，用发布订阅（ios自带一个发布订阅） if([action isEqualToString:@"captureImage"]){ // 发送消息，拍照 [[NSNotificationCenter defaultCenter] postNotificationName:@"captureImage" object:nil userInfo:nil]; } // 拦截掉该请求 return NO; } else { // 真请求 // 允许该请求通过 return YES; } } @end로그인 후 복사html이 가짜를 보냅니다. request// 装有webview的页面（文件） #import "MyURLProtocol.h" // 注册MyURLProtocol，可以实现拦截 [NSURLProtocol registerClass:[MyURLProtocol class]]; // 订阅消息，拍照的消息 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleCaptureImage) name:@"captureImage" object:nil]; // 订阅拍照消息的处理函数 -(void)handleCaptureImage{ // 拍照的操作 }로그인 후 복사
<!-- // HTML文件发送假请求 --> <a href="emma://captureImage">拍照</a> <a href="emma://openweChart">打开微信</a> <a href="emma://scan">扫一扫</a>
// js文件发送假请求 window.location.href = 'emma://captureImage';
ios, android는 웹 페이지에 값을 전달합니다
먼저 결과를 얻기 위해 웹 페이지에 콜백 함수를 준비합니다
네이티브가 웹 페이지에 값을 전달해야 할 때, 웹 페이지에 값을 전달해야 하는 경우 JS 코드를 동적으로 삽입합니다. 웹 페이지를 열면 js 코드는 콜백 함수를 호출하는 코드입니다
web code
import React, { useState } from 'react'
function WebView() {
const [image, setimage] = useState('');
const btnAction = () => {
// 发送一个假的请求，触发原生
window.location.href = 'emma://captureImage';
// 在window设置了一个回调方法（模块化开发，ios只能找到window全局作用域，所以只能挂在window上)
window.onCaptureImageCallback = (value) => {
setimage(value)
}
}
return (
<div>
<button onClick={btnAction}>拍照</button>
<img src={image} />
</div>
)
}ios code
// webview的文件 // 需要将webview提升成全局变量（挂载webview的函数和处理发布订阅事件的函数是两个作用域） @property (strong, nonatomic) WKWebView *webview; // 事件处理函数中 // 向窗口注入js代码 NSString *jsMethod = [NSString stringWithFormat:@"window.onCaptureImageCallback('%@')", @"需要传给网页的值"]; [self.webview evaluateJavaScript:jsMethod completionHandler:nil];
확장 지식: 네이티브 개발과 Web APP(HTML5) 개발의 장단점
네이티브 개발네이티브 개발(Native App Development)은 Android, IOS 등의 모바일 플랫폼에서 앱 개발을 위해 공식적으로 제공되는 개발 언어, 개발 라이브러리, 개발 도구를 사용하는 것입니다. 예를 들어 Android는 Java, Eclipse, Android Studio를 사용하고, IOS는 개발을 위해 Objective-C와 Xcode를 사용합니다.
간단히 말하면 토착개발은 집을 짓는 것과 같습니다. 먼저 기초를 놓은 다음 바닥 기둥을 붓고, 집의 구조, 벽돌과 타일, 철근 콘크리트, 회로 라우팅 등을 모두 신중하게 설계합니다. 기본 앱의 경우에도 마찬가지입니다. 모든 페이지, 모든 기능, 모든 효과, 모든 로직 및 모든 단계는 모두 코드로, 레이어별로, 섹션별로 작성됩니다.
장점:
1. 휴대폰의 모든 기능(예: GPS, 카메라 등)에 액세스하여 가장 완벽한 기능을 구현할 수 있습니다.
2. 빠른 실행 속도, 고성능 및 뛰어난 사용자 경험;
3. 많은 그래픽 및 애니메이션 지원, 지연 없음, 빠른 응답 4. 높은 호환성, 각 코드는 프로그래머에 의해 신중하게 설계되었으며 일반적으로 충돌이 없으며 바이러스 및 허점; 5 장치에서 제공하는 인터페이스를 사용하는 것이 더 빠르며 처리 속도에 이점이 있습니다. 단점: 1. 개발 시간이 길며 가장 빠른 경우 약 3개월, 가장 느린 경우 약 5개월 내에 완료할 수 있습니다. 2 생산 비용이 비싸고 비용이 많이 듭니다.3. 기본 앱, Android 및 IOS를 별도로 개발해야 하며 동일한 로직과 인터페이스를 두 세트로 작성해야 합니다.
4. 콘텐츠 제한. 사용자는 다운로드가 완료될 때까지 기다려야 앱을 열고 새 버전을 얻을 수 있습니다. 버전 관리 시 애플리케이션 업데이트를 다시 다운로드해야 합니다.
웹앱(HTML5) 개발HTML5 애플리케이션 개발은 웹 기술을 이용한 앱 개발입니다. 모바일 브라우저에서 열 수 있는 웹사이트를 웹앱이라고 합니다. 웹 기술 자체는 디스플레이와 사용자 상호 작용을 위한 브라우저의 지원이 필요하므로 주로 사용되는 기술은 HTML, CSS, Javascript 및 jQuery, Vue, React와 같은 JS 프레임워크입니다. 장점:
1. 다양한 장치를 지원하며 작성된 코드는 Android, IOS 및 Windows에서 동시에 실행될 수 있습니다.
2.
3. 콘텐츠 제한이 없습니다. 4. 큰 텍스트 섹션(예: 뉴스, 전략 등)과 다양한 형식(예: 굵은 글꼴)이 있는 페이지를 표시하는 데 적합합니다. 5. 최신 버전(자동 업데이트, 사용자가 수동 업데이트할 필요 없음) 단점: 1. H5 모바일 애플리케이션은 장치 하드웨어 및 오프라인 저장소에 직접 액세스할 수 없으므로 경험 및 성능에 큰 제한이 있습니다. 2. 3. 제한된 기능 4. 앱 응답 속도가 느리고 페이지 전환 속도가 낮습니다. 6. 7. 휴대폰 하드웨어(카메라, 마이크 등)를 호출할 수 없습니다. 관련 추천: "html 비디오 튜토리얼
"위 내용은 HTML5 하이브리드 개발이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
