html5混合開發(fā)指的是什么

這篇“html5混合開發(fā)指的是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5混合開發(fā)指的是什么”文章吧。

html5混合開發(fā)是指同時采用原生（程序語言）與H5（Web語言）技術(shù)來開發(fā)應(yīng)用；混合開發(fā)是一種取長補(bǔ)短的開發(fā)模式，原生代碼部分利用插件或者其它框架為H5提供容器，程序主要的業(yè)務(wù)實現(xiàn)、界面展示都是利用與H5相關(guān)的技術(shù)進(jìn)行實現(xiàn)的。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

目前市場上主流的APP分為三種：原生APP、Web APP（即HTML5）和混合APP三種，相對應(yīng)的定 制開發(fā)就是原生開發(fā)、H5開發(fā)和混合開發(fā)。

混合開發(fā)是什么？

混合開發(fā)，是指在開發(fā)一款A(yù)pp產(chǎn)品的時候，為了提高效率、節(jié)省成本而利用原生與H5的開發(fā)技術(shù)的混合應(yīng)用。通俗點來說，這就是網(wǎng)頁的模式，同時采用網(wǎng)頁語言和程序語言進(jìn)行開發(fā)，通常由“H5云網(wǎng)站+APP應(yīng)用客戶端”兩部份構(gòu)成。

混合開發(fā)是一種取長補(bǔ)短的開發(fā)模式，原生代碼部分利用插件或者其它框架為H5提供容器，程序主要的業(yè)務(wù)實現(xiàn)、界面展示都是利用與H5相關(guān)的技術(shù)進(jìn)行實現(xiàn)的。很多APP都是利用混合開發(fā)模式而成的。

優(yōu)點：

1、開發(fā)效率高，節(jié)約時間。同一套代碼Android和IOS基本上都可使用；

2、更新和部署比較方便，每次升級版本只需要在服務(wù)器端升級即可，不再需要上傳到App Store進(jìn)行審核；

3、代碼維護(hù)方便、版本更新快，節(jié)省產(chǎn)品成本；

4、比web版實現(xiàn)功能多；

5、可離線運(yùn)行。

缺點：

1、功能/界面無法自定：所有內(nèi)容都是固定的，不能換界面或增加功能；

2、加載緩慢/網(wǎng)絡(luò)要求高：混合APP數(shù)據(jù)需要全部從服務(wù)器調(diào)取，每個頁面都需要重新下載，因此打開速度慢，網(wǎng)絡(luò)占用高，緩沖時間長，容易讓用戶反感；

3、安全性比較低：代碼都是以前的老代碼，不能很好地兼容最新手機(jī)系統(tǒng)，且安全性較低，網(wǎng)絡(luò)發(fā)展這么快，病毒這么多，如果不實時更新，定期檢查，容易產(chǎn)生漏洞，造成直接經(jīng)濟(jì)損失；

4、既懂原生開發(fā)又懂H5開發(fā)的高端人才難找。

混合APP原理

混合APP通常由前端負(fù)責(zé)大部分界面開發(fā)和業(yè)務(wù)邏輯，原生負(fù)責(zé)封裝原生功能供前端調(diào)用，二者以 WebView 作為媒介建立通信，從而既擁有 Web 開發(fā)的速度優(yōu)勢，又能擁有強(qiáng)大的原生能力。

從一個前端開發(fā)者的角度來看，混合應(yīng)用可以簡單地理解為讓前端頁面跑在一個特殊的瀏覽器環(huán)境里，這個環(huán)境除了常規(guī) Web API之外，還額外提供了很多可以直接調(diào)用手機(jī)原生能力的 API。

從一個原生開發(fā)者的角度來看，混合應(yīng)用其實就是一個原生開發(fā)的 App 外殼，這個外殼將原生功能封裝成很多 API 并注入到 WebView 里，然后將前端頁面打包進(jìn) App，App 啟動時用 WebView 加載前端頁面，剩下的就全交給前端了。

web網(wǎng)頁和ios，android進(jìn)行交互(原理)

web網(wǎng)頁和ios，android進(jìn)行交互(原理)

• web網(wǎng)頁調(diào)用ios和android

• web頁面發(fā)送一個假的請求， ios，android攔截請求，解析是真請求還是假請求

• 真請求放行

• 假請求攔截，解析出真實的功能需求字段，

• 通過發(fā)布訂閱，傳遞給相應(yīng)文件，做出相應(yīng)的操作

發(fā)送一個假請求，讓原生開發(fā)攔截(該加請求的url路勁需要和ios，android設(shè)置的保持一致)
ios攔截請求

// 繼承類MyURLProtocol，子類NSURLProtocol
// MyURLProtocol.h文件
#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN
@interface MyURLProtocol: NSURLProtocol



@end

// MyURLProtocol.m文件
#import "MyURLProtocol.h"
@implementation MyURLProtocol

// 手機(jī)app是否可以加載請求
+ (BOOL)canInitWithRequest:(NSURLRequest *)request{
    
    //攔截到請求后，獲取請求的字符串
    NSString *path = request.URL.absoluteString;
    
    // 判斷字符串是否以協(xié)商好的虛假協(xié)議開頭（如emma://開頭）
    if([path hasPrefix:@"emma://"]){
        // 這是個假請求
        // 獲取該請求真實目的
        NSString *action = [path substringFromIndex:7];
        
        // 該文件不能調(diào)用一些原生功能，需要裝有webview的視圖文件才行，所以要將該請求字段傳給視圖文件
        // 文件間不能通信，用發(fā)布訂閱（ios自帶一個發(fā)布訂閱）
        if([action isEqualToString:@"captureImage"]){
            // 發(fā)送消息，拍照
            [[NSNotificationCenter defaultCenter] postNotificationName:@"captureImage" object:nil userInfo:nil];
        }
        
        // 攔截掉該請求
        return NO;
    } else {
        // 真請求
        // 允許該請求通過
        return YES;
    }
}
    
@end

// 裝有webview的頁面（文件）
#import "MyURLProtocol.h"

// 注冊MyURLProtocol，可以實現(xiàn)攔截
[NSURLProtocol registerClass:[MyURLProtocol class]];

// 訂閱消息，拍照的消息
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleCaptureImage) name:@"captureImage" object:nil];

// 訂閱拍照消息的處理函數(shù)
-(void)handleCaptureImage{
    // 拍照的操作
}

html發(fā)送假請求

<!-- // HTML文件發(fā)送假請求 -->
<a href="emma://captureImage">拍照</a>
<a href="emma://openweChart">打開微信</a>
<a href="emma://scan">掃一掃</a>

// js文件發(fā)送假請求
window.location.href = 'emma://captureImage';

ios，android傳值給web網(wǎng)頁

先在網(wǎng)頁上準(zhǔn)備一個獲得結(jié)果的回調(diào)函數(shù)

當(dāng)原生需要傳值給網(wǎng)頁時，向打開網(wǎng)頁的窗口動態(tài)插入js代碼，這段js代碼就是調(diào)用回調(diào)函數(shù)的代碼

web代碼

import React, { useState } from 'react'
function WebView() {
 const [image, setimage] = useState('');
 
 const btnAction = () => {
     // 發(fā)送一個假的請求，觸發(fā)原生
      window.location.href = 'emma://captureImage';
      
      // 在window設(shè)置了一個回調(diào)方法（模塊化開發(fā)，ios只能找到window全局作用域，所以只能掛在window上)
      window.onCaptureImageCallback = (value) => {
          setimage(value)
      }
 }
 
 return (
 	<div>
     	<button onClick={btnAction}>拍照</button>
         <img src={image} />
     </div>
 )
}

ios代碼

// webview的文件
// 需要將webview提升成全局變量（掛載webview的函數(shù)和處理發(fā)布訂閱事件的函數(shù)是兩個作用域）
@property (strong, nonatomic) WKWebView *webview;

// 事件處理函數(shù)中
// 向窗口注入js代碼
NSString *jsMethod = [NSString stringWithFormat:@"window.onCaptureImageCallback('%@')", @"需要傳給網(wǎng)頁的值"];
[self.webview evaluateJavaScript:jsMethod completionHandler:nil];

擴(kuò)展知識：原生開發(fā)和Web APP (HTML5）開發(fā)的優(yōu)缺點

原生開發(fā)

原生開發(fā)（Native App開發(fā)），是在Android、IOS等移動平臺上利用官方提供的開發(fā)語言、開發(fā)類庫、開發(fā)工具進(jìn)行App開發(fā)。比如Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode進(jìn)行開發(fā)。

通俗點來講，原生開發(fā)就像蓋房子一樣，先打地基然后澆地梁、房屋結(jié)構(gòu)、一磚一瓦、鋼筋水泥、電路走向等，都是經(jīng)過精心的設(shè)計。原生APP也一樣：通過代碼從每個頁面、每個功能、每個效果、每個邏輯、每個步驟全部用代碼寫出來，一層層，一段段全用代碼寫出來。

優(yōu)點：

1、可訪問手機(jī)所有功能（如GPS、攝像頭等）、可實現(xiàn)功能最齊全；

2、運(yùn)行速度快、性能高，絕佳的用戶體驗；

3、支持大量圖形和動畫，不卡頓，反應(yīng)快；

4、兼容性高，每個代碼都經(jīng)過程序員精心設(shè)計，一般不會出現(xiàn)閃退的情況，還能防止病毒和漏洞的出現(xiàn)；

5、比較快捷地使用設(shè)備端提供的接口，處理速度上有優(yōu)勢。

缺點：

1、開發(fā)時間長，快則3個月左右完成，慢則五個月左右；

2、制作費(fèi)用高昂，成本較高；

3、可移植性比較差，一款原生的App，Android和IOS都要各自開發(fā)，同樣的邏輯、界面要寫兩套；

4、內(nèi)容限制（App Store限制）；

5、必須等下載完畢用戶才可以打開，獲得新版本時需重新下載應(yīng)用更新。

Web APP (HTML5）開發(fā)

HTML5應(yīng)用開發(fā)，是利用Web技術(shù)進(jìn)行的App開發(fā)，可以在手機(jī)端瀏覽器里面打開的網(wǎng)站就稱之為webapp。Web技術(shù)本身需要瀏覽器的支持才能進(jìn)行展示和用戶交互，因此主要用到的技術(shù)是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。

優(yōu)點：

1、支持設(shè)備范圍廣，可以跨平臺，編寫的代碼可以同時在Android、IOS、Windows上運(yùn)行；

2、開發(fā)成本低、周期短；

3、無內(nèi)容限制；

4、適合展示有大段文字（如新聞、攻略等），且格式比較豐富（如加粗，字體多樣）的頁面；

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

缺點：

1、由于Web技術(shù)本身的限制，H5移動應(yīng)用不能直接訪問設(shè)備硬件和離線存儲，所以在體驗和性能上有很大的局限性；

2、對聯(lián)網(wǎng)要求高，離線不能做任何操作；

3、功能有限；

4、APP反應(yīng)速度慢，頁面切換流暢性較差；

5、圖片和動畫支持性不高；

6、用戶體驗感較差；

7、無法調(diào)用手機(jī)硬件（攝像頭、麥克風(fēng)等）。

以上就是關(guān)于“html5混合開發(fā)指的是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。