一起探讨关于html5混合开发的相关问题

本文和大家一起探讨关于html5混合开发的相关问题，html5混合开发是指同时采用原生（程序语言）与H5（Web语言）技术来开发应用；混合开发是一种取长补短的开发模式，原生代码部分利用插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的技术进行实现的。

本文适用于windows7系统、HTML5版、Dell G3电脑。

一起探讨关于html5混合开发的相关问题

在开始之前，我们有必要先来了解一下目前市场上主流的APP，他们大致可分为三种，即为原生APP、Web APP（即HTML5）和混合APP，相对应的定制开发就是原生开发、H5开发和混合开发。以下是混合开发的含义：

混合开发指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，同时采用网页语言和程序语言进行开发，通常由“H5云网站+APP应用客户端”两部份构成。

混合开发是一种取长补短的开发模式，原生代码部分利用插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的技术进行实现的。很多APP都是利用混合开发模式而成的。

优点：

1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；

2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；

3、代码维护方便、版本更新快，节省产品成本；

4、比web版实现功能多；

5、可离线运行。

缺点：

1、功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；

2、加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，容易让用户反感；

3、安全性比较低：代码都是以前的老代码，不能很好地兼容最新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；

4、既懂原生开发又懂H5开发的高端人才难找。

混合APP原理

混合APP通常由前端负责大部分界面开发和业务逻辑，原生负责封装原生功能供前端调用，二者以 WebView 作为媒介建立通信，从而既拥有 Web 开发的速度优势，又能拥有强大的原生能力。

从一个前端开发者的角度来看，混合应用可以简单地理解为让前端页面跑在一个特殊的浏览器环境里，这个环境除了常规 Web API之外，还额外提供了很多可以直接调用手机原生能力的 API。

从一个原生开发者的角度来看，混合应用其实就是一个原生开发的 App 外壳，这个外壳将原生功能封装成很多 API 并注入到 WebView 里，然后将前端页面打包进 App，App 启动时用 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发送假请求

<!-- // 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网页

先在网页上准备一个获得结果的回调函数

当原生需要传值给网页时，向打开网页的窗口动态插入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];

扩展知识：原生开发和Web APP (HTML5）开发的优缺点

原生开发

原生开发（Native App开发），是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode进行开发。

通俗点来讲，原生开发就像盖房子一样，先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等，都是经过精心的设计。原生APP也一样：通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来，一层层，一段段全用代码写出来。

优点：

1、可访问手机所有功能（如GPS、摄像头等）、可实现功能最齐全；

2、运行速度快、性能高，绝佳的用户体验；

3、支持大量图形和动画，不卡顿，反应快；

4、兼容性高，每个代码都经过程序员精心设计，一般不会出现闪退的情况，还能防止病毒和漏洞的出现；

5、比较快捷地使用设备端提供的接口，处理速度上有优势。

缺点：

1、开发时间长，快则3个月左右完成，慢则五个月左右；

2、制作费用高昂，成本较高；

3、可移植性比较差，一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套；

4、内容限制（App Store限制）；

5、必须等下载完毕用户才可以打开，获得新版本时需重新下载应用更新。

Web APP (HTML5）开发

HTML5应用开发，是利用Web技术进行的App开发，可以在手机端浏览器里面打开的网站就称之为webapp。Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。

优点：

1、支持设备范围广，可以跨平台，编写的代码可以同时在Android、IOS、Windows上运行；

2、开发成本低、周期短；

3、无内容限制；

4、适合展示有大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样）的页面；

5、用户可以直接使用最新版本（自动更新，不需用户手动更新）。

缺点：

1、由于Web技术本身的限制，H5移动应用不能直接访问设备硬件和离线存储，所以在体验和性能上有很大的局限性；

2、对联网要求高，离线不能做任何操作；

3、功能有限；

4、APP反应速度慢，页面切换流畅性较差；

5、图片和动画支持性不高；

6、用户体验感较差；

7、无法调用手机硬件（摄像头、麦克风等）。

关于html5混合开发的相关问题就探讨到这里啦，翼速网络应用平台内有更多相关内容，欢迎查阅！