1.ハイブリッド開発とは何ですか？

ハイブリッド開発とは、アプリ製品を開発する際の効率を向上させ、コストを節約するために、ネイティブおよびH5開発テクノロジーを使用するハイブリッドアプリケーションを指します。素人の言葉で言えば、これはWebページモデルであり、通常は「H5クラウドWebサイト+ APPアプリケーションクライアント」で構成されます。

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

2. Webページとiosおよびandroidの間の相互作用（原則）

Webページとiosおよびandroid間の相互作用（原則）

Webページはiosとandroidを呼び出します
Webページは偽のリクエストを送信し、ios、androidはリクエストを傍受し、それが本物のリクエストであるか偽のリクエストであるかを解決します
1. 本当にリリースをリクエストする
2. 偽のリクエストインターセプト、実際の機能要件フィールドの解析、
3. 公開とサブスクライブを通じて、対応するファイルに渡し、対応する操作を行います

偽のリクエストを送信し、ネイティブ開発にインターセプトさせます（リクエストの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ページを開くウィンドウにjsコードを動的に挿入します。このjsコードは、コールバック関数を呼び出すコード
Webコードです。

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コード

// webview的文件
// 需要将webview提升成全局变量（挂载webview的函数和处理发布订阅事件的函数是两个作用域）
@property (strong, nonatomic) WKWebView *webview;

// 事件处理函数中
// 向窗口注入js代码
NSString *jsMethod = [NSString stringWithFormat:@"window.onCaptureImageCallback('%@')", @"需要传给网页的值"];
[self.webview evaluateJavaScript:jsMethod completionHandler:nil];

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

記事ディレクトリ

1.ハイブリッド開発とは何ですか？

2. Webページとiosおよびandroidの間の相互作用（原則）

Webページとiosおよびandroid間の相互作用（原則）

おすすめ