html5ハイブリッド開発とは

html5 ハイブリッド開発とは、ネイティブ (プログラミング言語) と H5 (Web 言語) テクノロジーの両方を使用してアプリケーションを開発することを指します。ハイブリッド開発は、互いの長所を学習する開発モデルであり、ネイティブ コード部分はプラグインを使用します。 H5 コンテナを提供するための ins またはその他のフレームワーク、プログラムの主要なビジネス実装およびインターフェイス表示はすべて H5 関連テクノロジを使用して実装されます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

現在、市場にはネイティブ APP、Web APP (つまり HTML5)、ハイブリッド APP の 3 つの主流 APP があり、対応するカスタマイズ開発はネイティブ開発、H5 開発、ハイブリッド開発です。

#ハイブリッド開発とは何ですか?

ハイブリッド開発とは、アプリ製品の開発時の効率を向上させ、コストを節約するために、ネイティブ開発テクノロジと H5 開発テクノロジを使用するハイブリッド アプリケーションを指します。平たく言えば、これは Web ページ言語とプログラミング言語の両方を使用して開発された Web ページのモデルであり、通常は「H5 クラウド Web サイト APP アプリケーション クライアント」の 2 つの部分で構成されます。

ハイブリッド開発は、互いの長所から学び、短所を補う開発モデルです。ネイティブ コード部分は、プラグインまたは他のフレームワークを使用して、H5 のコンテナーを提供します。メインのビジネス実装とインターフェイス表示は、プログラムは H5 関連テクノロジーを使用して実装されます。多くのアプリはハイブリッド開発モデルを使用して開発されています。

利点:

1. 高い開発効率と時間の節約。基本的に同じコード セットを Android と IOS の両方で使用できます;

2. 更新と展開がより便利です. バージョンをアップグレードするたびに、サーバー側でのみアップグレードする必要があります。レビューのために App Store にアップロードする必要はなくなりました。

3. コードのメンテナンスは便利で、バージョンの更新は速く、製品コストは節約されます。

##4. さらに多くの機能があります。 Web 版よりも機能が充実しています;

5. オフラインで実行できます。

欠点:

1. 機能/インターフェースをカスタマイズできない: すべての内容が固定されており、インターフェースの変更や機能の追加はできません。 2、読み込みが遅い/高いネットワーク要件: すべてのハイブリッド APP データをサーバーから取得する必要があり、各ページを再度ダウンロードする必要があるため、開く速度が遅く、ネットワーク使用量が多く、バッファリング時間が長くなります。

3. 比較的安全性が低い: コードはすべて過去の古いコードであり、最新の携帯電話システムとの互換性が低く、安全性が低いです。高速であり、ウイルスが非常に多い。リアルタイムで更新され、定期的にチェックされていない場合、抜け穴が簡単にできてしまい、直接的な経済損失を引き起こす;

4. ハイエンドの人材を見つけるのが難しいネイティブ開発と H5 開発の両方を理解している人。

ハイブリッド APP の原則

ハイブリッド APP には、通常、インターフェイス開発とビジネス ロジックの大部分を担当するフロントエンドがあり、ネイティブ アプリケーションはフロントエンドが呼び出すネイティブ関数をカプセル化する役割を担っており、この 2 つは通信を確立する媒体として WebView を使用するため、Web 開発の速度上の利点と強力なネイティブ機能が得られます。 フロントエンド開発者の観点から見ると、ハイブリッド アプリケーションは、フロントエンド ページを特別なブラウザ環境で実行できるようにするものとして単純に理解できます。この環境では、通常の Web API に加えて、多くの機能も提供されます。さらに、携帯電話のネイティブ機能の API を直接呼び出すことができます。

ネイティブ開発者の観点から見ると、ハイブリッド アプリケーションは実際にはネイティブに開発された App Shell です。このシェルは、ネイティブ関数を多くの API にカプセル化して WebView に挿入し、フロントエンド ページをアプリにパッケージ化します。アプリが起動すると、WebView を使用してフロントエンド ページが読み込まれ、残りはフロントエンドに任せられます。

Web ページは ios および android と対話します (原則)

##Web ページは ios および android と対話します (原則)

Web ページが ios と android を呼び出します

• Web ページが偽のリクエストを送信し、ios と android がリクエストをインターセプトし、解析が行われます。真のリクエストまたは偽のリクエスト

• 真のリクエストは解放されます
  • 偽のリクエストは傍受され、実際の機能要件フィールドが解析されます。

  • パブリッシュしてサブスクライブし、対応するファイルに渡し、対応する操作を実行します

  • ##偽のリクエストを送信し、ネイティブ開発にそれをインターセプトさせます (リクエストの URL パスは 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

// 装有webview的页面（文件）
#import "MyURLProtocol.h"

// 注册MyURLProtocol，可以实现拦截
[NSURLProtocol registerClass:[MyURLProtocol class]];

// 订阅消息，拍照的消息
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleCaptureImage) name:@"captureImage" object:nil];

// 订阅拍照消息的处理函数
-(void)handleCaptureImage{
    // 拍照的操作
}

html 偽のリクエストを送信します

<!-- // HTML文件发送假请求 -->
<a href="emma://captureImage">拍照</a>
<a href="emma://openweChart">打开微信</a>
<a href="emma://scan">扫一扫</a>

// js文件发送假请求
window.location.href = 'emma://captureImage';

ios、android は Web Web ページに値を渡します

最初に結果を取得するために Web ページ上にコールバック関数を準備します

ネイティブが値を Web ページに渡す必要がある場合Web ページを開くと、Web ページを開くウィンドウに JS コードが動的に挿入されます。この JS コードは、コールバック関数を呼び出すためのものです。 code

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) 開発の長所と短所

ネイティブ開発ネイティブ開発開発（ネイティブアプリ開発）とは、AndroidやIOSなどのモバイルプラットフォーム上で公式に提供されている開発言語や開発クラス、アプリ開発のためのライブラリや開発ツールを利用することです。たとえば、Android は Java、Eclipse、Android Studio を使用し、IOS は開発に Objective-C と Xcode を使用します。

ネイティブ開発は、簡単に言うと家を建てるようなもので、基礎を据えてから床の梁を流し込み、家の構造、レンガやタイル、鉄筋コンクリート、回路の引き回しなど、すべてが慎重に行われます。設計。ネイティブ APP についても同様です。すべてのページ、すべての機能、すべてのエフェクト、すべてのロジック、およびすべてのステップが、レイヤーごと、セクションごとにコードで記述されます。

利点:

1. 携帯電話のすべての機能 (GPS、カメラなど) にアクセスでき、最も完全な機能を実現します;

2. 高速実行速度と高性能、優れたユーザー エクスペリエンス;

3. 多数のグラフィックスとアニメーションをサポート、遅延なし、高速応答;

4. 高い互換性、各コードは慎重に設計されています。クラッシュがなく、ウイルスや脆弱性の出現も防ぐことができます;

5. デバイスが提供するインターフェイスを比較的早く使用できるため、処理速度の点で有利です。

デメリット:

1. 開発期間が長く、完成までに早いもので約 3 か月、遅いものでも約 5 か月かかります;

2. 制作コストがかかる;

#3. 移植性が比較的悪い. Android 用と IOS 用にネイティブ アプリを別々に開発する必要がある. 同じロジックとインターフェイスを 2 セット記述する必要がある;

4. コンテンツの制限 (App Store の制限);

5. ユーザーはダウンロードが完了するまで待ってから開く必要があります。新しいバージョンを入手する場合は、アプリケーションのアップデートを再度ダウンロードする必要があります。

Web APP (HTML5) 開発

HTML5 アプリケーション開発とは、Web 技術を利用したアプリ開発のことで、モバイルブラウザで開くことができる Web サイトを Web アプリと呼びます。 Web テクノロジー自体は、表示とユーザー操作のためのブラウザーのサポートを必要とするため、主に使用されるテクノロジーは、HTML、CSS、JavaScript、および jQuery、Vue、React などの JS フレームワークです。

利点:

1. 幅広いデバイスをサポートし、クロスプラットフォームに対応できます。記述されたコードは、Android、IOS、Windows で同時に実行できます。

2. 開発コストが低く、サイクルが短い;

3、コンテンツ制限なし;

4、大きなテキスト段落 (ニュース、戦略など) の表示に適しています。形式は比較的豊富です (太字、多様なフォントなど) Page;

5. ユーザーは最新バージョンを直接使用できます (自動的に更新され、ユーザーが手動で更新する必要はありません)。

欠点:

1. Web テクノロジー自体の制限により、H5 モバイル アプリケーションはデバイス ハードウェアやオフライン ストレージに直接アクセスできないため、エクスペリエンスとパフォーマンスに大きな制限があります。

2. 高いインターネット要件、オフラインでは操作ができない;

3. 機能が制限されている;

4. アプリの応答速度が遅く、ページ切り替えの流暢性が低い;

5. 写真やアニメーションのサポートは高くありません;

6. ユーザー エクスペリエンスは劣ります;

7. 携帯電話のハードウェア (カメラ、マイクなど)呼び出すことはできません。

関連する推奨事項:「

html ビデオ チュートリアル」

以上がhtml5ハイブリッド開発とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。