html5ハイブリッド開発とは

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

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

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

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

利点:

##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 がリクエストをインターセプトし、解析が行われます。真のリクエストまたは偽のリクエスト

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

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

  • ##偽のリクエストを送信し、ネイティブ開発にそれをインターセプトさせます (リクエストの 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文件发送假请求 -->
<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. 制作コストがかかる;

Web APP (HTML5) 開発

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

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