Qu'est-ce que le développement hybride HTML5

Le développement hybride HTML5 fait référence à l'utilisation des technologies natives (langage de programmation) et H5 (langage Web) pour développer des applications ; le développement hybride est un modèle de développement qui apprend des forces et des faiblesses de chacun. La partie code natif utilise des plug-ins ou autres. frameworks pour fournir des conteneurs pour H5. Le programme principalement La mise en œuvre commerciale et l'affichage de l'interface sont tous implémentés à l'aide de technologies liées à H5.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Il existe actuellement trois types d'applications grand public sur le marché : les applications natives, les applications Web (c'est-à-dire HTML5) et les applications hybrides. Le développement personnalisé correspondant est le développement natif, le développement H5 et le développement hybride.

Qu'est-ce que le développement hybride ?

Le développement hybride fait référence à une application hybride qui utilise les technologies de développement natives et H5 afin d'améliorer l'efficacité et de réduire les coûts lors du développement d'un produit d'application. En termes simples, il s'agit d'un modèle de page Web développé à l'aide d'un langage de page Web et d'un langage de programmation. Il se compose généralement de deux parties : "Site Web cloud H5 + client d'application APP".

Le développement hybride est un modèle de développement qui apprend des forces de chacun et complète ses faiblesses. La partie code natif utilise des plug-ins ou d'autres frameworks pour fournir des conteneurs pour H5. La mise en œuvre commerciale principale et l'affichage de l'interface du programme sont implémentés à l'aide de H5. -technologies liées. De nombreuses applications sont développées à l’aide d’un modèle de développement hybride.

Avantages :

1. Haute efficacité de développement et gain de temps. Le même ensemble de codes peut essentiellement être utilisé sur Android et IOS ;

2. Il est plus pratique de mettre à jour et de déployer la version, il vous suffit de la mettre à niveau côté serveur, et ce n'est pas nécessaire. pour le télécharger sur l'App Store pour examen ;

3. Code Maintenance facile, mises à jour de version rapides, économie des coûts du produit ;

4. Plus de fonctions que la version Web

5.

Inconvénients :

1. La fonction/l'interface ne peut pas être personnalisée : tout le contenu est fixe et l'interface ne peut pas être modifiée ni les fonctions ajoutées.

2. Chargement lent/exigences réseau élevées : des données d'application mixtes doivent être chargées ; depuis le serveur Chaque page doit être téléchargée à nouveau, donc la vitesse d'ouverture est lente, l'utilisation du réseau est élevée, le temps de mise en mémoire tampon est long et il est facile de dégoûter les utilisateurs

3. sont tous d'anciens codes du passé et ne sont pas bien compatibles. Le dernier système de téléphonie mobile a une faible sécurité. Le réseau se développe très rapidement et il y a tellement de virus. S'il n'est pas mis à jour en temps réel et vérifié régulièrement, c'est facile. pour produire des failles et causer des pertes économiques directes ;

4. Les personnes haut de gamme qui comprennent à la fois le développement natif et le développement H5 sont difficiles à trouver.

Principe de l'application hybride

L'application hybride a généralement le front-end responsable de la plupart du développement de l'interface et de la logique métier, et le natif est responsable de l'encapsulation des fonctions natives pour que le front-end appelle les deux. utilisez WebView comme moyen pour établir la communication, bénéficiant ainsi de la rapidité du développement Web et de solides capacités natives.

Du point de vue d'un développeur front-end, les applications hybrides peuvent être simplement comprises comme permettant à la page front-end de s'exécuter dans un environnement de navigateur spécial. En plus de l'API Web standard, cet environnement fournit également de nombreuses fonctionnalités supplémentaires qui peuvent. être directement appelé sur le téléphone mobile. API de capacité native.

Du point de vue d'un développeur natif, une application hybride est en fait un shell d'application développé de manière native. Ce shell encapsule les fonctions natives dans de nombreuses API et les injecte dans WebView, puis emballe la page frontale dans l'application, qui est utilisée. lorsque l'application démarre, WebView charge la page frontale et le reste est laissé au front-end. Les pages Web interagissent avec iOS et Android (principe) , iOS, Android interceptent les demandes, analysent s'il s'agit de vraies demandes ou de fausses demandes

Les vraies demandes sont libérées

Les fausses demandes sont interceptées et les champs d'exigences fonctionnelles réelles sont analysés,

passés aux fichiers correspondants , effectuez les opérations correspondantes

• Envoyer une fausse demande de développement natif pour intercepter (le chemin URL de la demande doit être cohérent avec les paramètres ios et android)
  demande d'interception 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 envoie un faux request

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

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

  • ios, Android transmet la valeur à la page Web
    Préparez d'abord une fonction de rappel sur la page Web pour obtenir le résultat
  • Lorsque le natif a besoin de transmettre la valeur à la page Web, insérez dynamiquement le code js dans la fenêtre qui ouvre la page Web, ceci Le code js est le code qui appelle la fonction de rappel
    code 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>
   )
  }

  code ios

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

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

Connaissances approfondies : les avantages et les inconvénients du développement natif et du développement Web APP (HTML5)

développement natif

le développement natif (développement d'applications natives) est l'utilisation de langages de développement, de bibliothèques de développement et d'outils de développement officiellement fournis pour le développement d'applications sur des plates-formes mobiles telles qu'Android et IOS. Par exemple, Android utilise Java, Eclipse et Android Studio ; IOS utilise Objective-C et Xcode pour le développement.

Pour faire simple, le développement natif, c'est comme construire une maison. Les fondations sont d'abord posées puis les poutres du plancher sont coulées. La structure de la maison, les briques et les tuiles, le béton armé, le tracé des circuits, etc. sont tous soigneusement conçus. Il en va de même pour les applications natives : chaque page, chaque fonction, chaque effet, chaque logique et chaque étape sont tous écrits dans le code, couche par couche, section par section.

Avantages :

1. Peut accéder à toutes les fonctions du téléphone mobile (telles que le GPS, l'appareil photo, etc.), obtenant les fonctions les plus complètes ;

2.

3. Prend en charge un grand nombre de graphiques et d'animations, pas de décalage, réponse rapide ;

4. Haute compatibilité, chaque code est soigneusement conçu par les programmeurs, il n'y aura généralement pas de crash, et il peut également empêcher l'émergence de virus et failles ;

5 , il est plus rapide d'utiliser l'interface fournie par l'appareil, ce qui présente des avantages en termes de vitesse de traitement.

Inconvénients :

1. Le temps de développement est long, il peut être réalisé en environ 3 mois au plus rapide et environ cinq mois au plus lent

2 Le coût de production est élevé et le coût est élevé ;

3. La portabilité est relativement mauvaise. Une application native, Android et IOS doivent être développées séparément, et la même logique et la même interface doivent être écrites en deux ensembles ;

4. Restrictions de contenu (restrictions de l'App Store) ; Les utilisateurs doivent attendre la fin du téléchargement avant de pouvoir l'ouvrir et obtenir du nouveau contenu. Vous devez retélécharger la mise à jour de l'application lors de la gestion des versions.

Développement d'applications Web (HTML5)

Le développement d'applications HTML5 est le développement d'applications utilisant la technologie Web. Un site Web qui peut être ouvert dans un navigateur mobile est appelé une application Web. La technologie Web elle-même nécessite la prise en charge d'un navigateur pour l'affichage et l'interaction de l'utilisateur. Les principales technologies utilisées sont donc les frameworks HTML, CSS, Javascript et JS tels que jQuery, Vue et React. Avantages :

1. Prend en charge une large gamme d'appareils et peut être multiplateforme. Le code écrit peut s'exécuter simultanément sur Android, IOS et Windows ;

2.

3. Aucune restriction de contenu ;

4. Convient pour l'affichage de pages contenant de grandes sections de texte (comme des actualités, des stratégies, etc.) et des formats riches (comme des polices grasses et diverses) ; la dernière version (mise à jour automatique, aucune mise à jour manuelle requise par l'utilisateur).

Inconvénients : 

1. En raison des limitations de la technologie Web elle-même, les applications mobiles H5 ne peuvent pas accéder directement au matériel de l'appareil et au stockage hors ligne, il existe donc de grandes limitations en termes d'expérience et de performances.

2. effectuer des opérations ;

3. Fonctions limitées ;

4. La vitesse de réponse de l'application est lente et le changement de page est médiocre

. 7. Le matériel du téléphone mobile (caméra, microphone, etc.) ne peut pas être appelé.

Recommandations associées : "

Tutoriel vidéo HTML

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!