首頁 > 文章 > web前端 > html5混合開發是什麼

html5混合開發是什麼

青灯夜游原創: 2022-05-30 16:26:452487瀏覽

html5混合開發是指同時採用原生（程式語言）與H5（Web語言）技術來開發應用；混合開發是一種取長補短的開發模式，原生程式碼部分利用外掛程式或其它框架為H5提供容器，程式主要的業務實現、介面展示都是利用與H5相關的技術進行實現的。

html5混合開發是什麼

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

目前市場上主流的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
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 = &#39;emma://captureImage&#39;;

ios，android傳值給web網頁

先在網頁上準備一個獲得結果的回呼函數

當原生需要傳值給網頁時，向開啟網頁的視窗動態插入js程式碼，這段js程式碼就是呼叫回調函數的程式碼

web程式碼

import React, { useState } from &#39;react&#39;
function WebView() {
 const [image, setimage] = useState(&#39;&#39;);
 
 const btnAction = () => {
     // 发送一个假的请求，触发原生
      window.location.href = &#39;emma://captureImage&#39;;
      
      // 在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(&#39;%@&#39;)", @"需要传给网页的值"];
[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混合開發是什麼

混合開發是什麼？

web網頁和ios，android互動(原理)

相關文章