What is html5 hybrid development

html5 hybrid development refers to using both native (programming language) and H5 (Web language) technologies to develop applications; hybrid development is a development model that learns from each other's strengths, and the native code part uses plug-ins or other frameworks to provide H5 Containers, the main business implementation and interface display of the program are all implemented using H5-related technologies.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Currently, there are three mainstream APPs on the market: native APP, Web APP (i.e. HTML5) and hybrid APP. The corresponding customized development is native development, H5 development and hybrid development.

What is hybrid development?

Hybrid development refers to a hybrid application that uses native and H5 development technologies in order to improve efficiency and save costs when developing an App product. In layman's terms, this is the model of a web page, which is developed using both web page language and programming language. It usually consists of two parts: "H5 cloud website APP application client".

Hybrid development is a development model that learns from each other's strong points and offsets its weaknesses. The native code part uses plug-ins or other frameworks to provide containers for H5. The main business implementation and interface display of the program are implemented using H5-related technologies. Many apps are developed using a hybrid development model.

Advantages:

1. High development efficiency and time saving. The same set of codes can basically be used on both Android and IOS;

2. It is more convenient to update and deploy. Every time you upgrade the version, you only need to upgrade it on the server side, and you no longer need to upload it to the App Store for review;

3. Code maintenance is convenient, version updates are fast, and product costs are saved;

4. It has more functions than the web version;

5. It can be run offline.

Disadvantages:

1. Function/interface cannot be customized: all content is fixed, and the interface cannot be changed or functions added;

2 , Slow loading/high network requirements: All hybrid APP data needs to be retrieved from the server, and each page needs to be downloaded again, so the opening speed is slow, the network usage is high, and the buffering time is long, which can easily disgust users;

3. Relatively low security: The codes are all old codes from the past, which are not well compatible with the latest mobile phone systems, and have low security. The network is developing so fast and there are so many viruses. If it is not updated in real time and checked regularly, it is easy to create loopholes. , causing direct economic losses;

4. It is difficult to find high-end talents who understand both native development and H5 development.

Hybrid APP Principle

Hybrid APP usually has the front-end responsible for most of the interface development and business logic, and the native is responsible for encapsulating the native functions for the front-end to call. The two use WebView as a medium to establish communication, thus having the speed advantage of Web development and powerful native capabilities.

From the perspective of a front-end developer, hybrid applications can be simply understood as allowing the front-end page to run in a special browser environment. In addition to the regular Web API, this environment also provides many additional You can directly call the API of the mobile phone's native capabilities.

From the perspective of a native developer, a hybrid application is actually a natively developed App shell. This shell encapsulates native functions into many APIs and injects them into WebView, and then packages the front-end pages into the App. When the app starts, WebView is used to load the front-end page, and the rest is left to the front-end.

Web pages interact with ios and android (principle)

##Web pages interact with ios and android (principle)

• The web page calls ios and android

• The web page sends a fake request, ios and android intercept the request, and the parsing is a true request Or a fake request
  • True request is released

  • Fake request is intercepted and the real functional requirement field is parsed,

  • Publish and subscribe, pass it to the corresponding file, and perform corresponding operations

Send a fake request and let the native development intercept it (the The URL path of the request needs to be consistent with the ios and android settings)

ios intercepts the request

// 继承类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 sends a fake 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 passes the value to the web Web page

First prepare a callback function on the web page to obtain the result

When the native needs to pass a value to the web page, js code is dynamically inserted into the window that opens the web page. This js code is to call the callback Function 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];

Extended knowledge: advantages and disadvantages of native development and Web APP (HTML5) development

Native development

Native development (Native App development) is the use of officially provided development languages ​​and development classes on mobile platforms such as Android and IOS. Libraries and development tools for App development. For example, Android uses Java, Eclipse, and Android studio; IOS uses Objective-C and Xcode for development.

To put it simply, native development is like building a house. The foundation is laid first and then the floor beams are poured. The structure of the house, bricks and tiles, reinforced concrete, circuit routing, etc. are all carefully designed. The same goes for native APPs: every page, every function, every effect, every logic, and every step is all written in code, layer by layer, and section by section.

Advantages:

1. Can access all functions of the mobile phone (such as GPS, camera, etc.), achieving the most complete functions;

2. Fast running speed and high performance. Excellent user experience;

3. Supports a large number of graphics and animations, no lag, fast response;

4. High compatibility, each code is carefully designed by programmers, generally There will be no crashes, and it can also prevent the emergence of viruses and vulnerabilities;

5. Use the interface provided by the device relatively quickly, which has an advantage in processing speed.

Disadvantages:

1. The development time is long, the fastest is about 3 months to complete, and the slow is about five months;

2. The production cost is high and the cost is high ;

3. The portability is relatively poor. A native App must be developed separately for Android and IOS. Two sets of the same logic and interface must be written;

4. Content restrictions ( App Store restrictions);

5. Users must wait until the download is complete before they can open it. When obtaining a new version, they need to download the application update again.

Web APP (HTML5) development

HTML5 application development is an App development using Web technology. A website that can be opened in a mobile browser is called for webapp. Web technology itself requires the support of a browser for display and user interaction, so the main technologies used are HTML, CSS, Javascript, and JS frameworks such as jQuery, Vue, and React.

Advantages:

1. Supports a wide range of devices and can be cross-platform. The code written can run on Android, IOS, and Windows at the same time;

2. Low development cost , short cycle;

3, no content restrictions;

4, suitable for displaying large paragraphs of text (such as news, strategies, etc.), and the format is relatively rich (such as bold, diverse fonts) Page;

5. Users can directly use the latest version (automatically updated, no need for users to manually update).

Disadvantages:

1. Due to the limitations of Web technology itself, H5 mobile applications cannot directly access device hardware and offline storage, so there are great limitations in experience and performance;

2. High networking requirements, no operations can be done offline;

3. Limited functions;

4. APP response speed is slow and page switching fluency is poor;

5. The support for pictures and animations is not high;

6. The user experience is poor;

7. The mobile phone hardware (camera, microphone, etc.) cannot be called.

Related recommendations: "html video tutorial"

The above is the detailed content of What is html5 hybrid development. For more information, please follow other related articles on the PHP Chinese website!