Apakah pembangunan hibrid html5

Pembangunan hibrid HTML5 merujuk kepada penggunaan kedua-dua teknologi asli (bahasa pengaturcaraan) dan H5 (Bahasa Web) untuk membangunkan aplikasi pembangunan hibrid ialah model pembangunan yang belajar daripada kekuatan dan kelemahan masing-masing, dan bahagian kod asli digunakan pemalam atau rangka kerja lain untuk menyediakan Bekas H5, pelaksanaan perniagaan utama dan paparan antara muka program semuanya dilaksanakan menggunakan teknologi berkaitan H5.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Pada masa ini, terdapat tiga APP arus perdana di pasaran: APP asli, APP Web (iaitu HTML5) dan APP hibrid Pembangunan tersuai yang sepadan ialah pembangunan asli, pembangunan H5 dan pembangunan hibrid.

Apakah pembangunan hibrid?

Pembangunan hibrid merujuk kepada aplikasi hibrid yang menggunakan teknologi pembangunan asli dan H5 untuk meningkatkan kecekapan dan menjimatkan kos apabila membangunkan produk Aplikasi. Dalam istilah orang awam, ini ialah model halaman web, yang dibangunkan menggunakan bahasa halaman web dan bahasa pengaturcaraan Ia biasanya terdiri daripada dua bahagian: "Klien aplikasi APP laman web awan H5".

Pembangunan hibrid ialah model pembangunan yang belajar daripada kekuatan masing-masing dan melengkapkan kelemahannya Bahagian kod asli menggunakan pemalam atau rangka kerja lain untuk menyediakan bekas untuk H5 pelaksanaan perniagaan dan paparan antara muka program dilaksanakan menggunakan teknologi berkaitan H5. Banyak aplikasi dibangunkan menggunakan model pembangunan hibrid.

Kelebihan:

1. Set kod yang sama pada asasnya boleh digunakan pada Android dan IOS; ia ke App Store untuk semakan; . Boleh dijalankan di luar talian.

Kelemahan:

1 Fungsi/antara muka tidak boleh disesuaikan: semua kandungan tetap, dan antara muka tidak boleh ditukar atau fungsi ditambahkan; 2 , Pemuatan perlahan/keperluan rangkaian tinggi: Semua data APP hibrid perlu diambil dari pelayan, dan setiap halaman perlu dimuat turun semula, jadi kelajuan pembukaan adalah perlahan, penggunaan rangkaian adalah tinggi, dan masa penimbalan adalah panjang, yang boleh menjijikkan pengguna dengan mudah;

3. Keselamatan yang agak rendah: Kod ini adalah semua kod lama dari masa lalu, yang tidak serasi dengan sistem telefon mudah alih terkini, dan mempunyai keselamatan yang rendah cepat dan terdapat begitu banyak virus Jika ia tidak dikemas kini dalam masa nyata dan diperiksa secara berkala, ia adalah mudah untuk mencipta kelemahan, menyebabkan kerugian ekonomi secara langsung yang memahami kedua-dua pembangunan asli dan pembangunan H5.

Prinsip Apl Hibrid

APP Hibrid biasanya mempunyai bahagian hadapan yang bertanggungjawab untuk kebanyakan pembangunan antara muka dan logik perniagaan, dan yang asli bertanggungjawab untuk merangkum fungsi asli untuk bahagian hadapan untuk memanggil Kedua-duanya menggunakan WebView sebagai medium untuk mewujudkan komunikasi, dengan itu mempunyai kelebihan kelajuan pembangunan Web dan keupayaan asli yang berkuasa.

Dari perspektif pembangun bahagian hadapan, aplikasi hibrid secara ringkas boleh difahami sebagai membenarkan halaman hujung hadapan berjalan dalam persekitaran penyemak imbas khas, selain daripada API Web biasa, persekitaran ini juga menyediakan banyak tambahan Anda boleh menghubungi terus API keupayaan asal telefon mudah alih.

Dari perspektif pembangun asli, aplikasi hibrid sebenarnya ialah cangkerang Aplikasi yang dibangunkan secara asli Cangkang ini merangkum fungsi asli ke dalam banyak API dan menyuntiknya ke dalam WebView, dan kemudian membungkus halaman hujung hadapan ke dalam Apl. . Apabila apl dimulakan, WebView digunakan untuk memuatkan halaman hadapan dan selebihnya dibiarkan ke bahagian hadapan.

Halaman web berinteraksi dengan ios dan android (prinsip)

Halaman web berinteraksi dengan ios dan android (prinsip)

Halaman web memanggil ios dan android

Halaman web menghantar permintaan palsu, ios dan android memintas permintaan dan menghuraikannya menjadi permintaan sebenar Atau adakah ia permintaan palsuPermintaan benar dikeluarkan

• Permintaan palsu dipintas dan medan keperluan fungsi sebenar dihuraikan,

• Terbitkan dan langgan, hantar ke fail yang sepadan dan lakukan operasi yang sepadan

  • Hantar permintaan palsu untuk pembangunan asli memintas (laluan URL permintaan perlu konsisten dengan tetapan ios dan android)

    ios memintas permintaan

  html menghantar permintaan palsu

ios, nilai pas android ke halaman web

Mula-mula sediakan fungsi panggil balik pada halaman web untuk mendapatkan hasilnya

Apabila orang asli perlu menghantar nilai ke halaman web, buka halaman web Tetingkap secara dinamik memasukkan kod js ini ialah kod yang memanggil fungsi panggil balik

// 继承类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

kod web

// 装有webview的页面（文件）
#import "MyURLProtocol.h"

// 注册MyURLProtocol，可以实现拦截
[NSURLProtocol registerClass:[MyURLProtocol class]];

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

// 订阅拍照消息的处理函数
-(void)handleCaptureImage{
    // 拍照的操作
}

.

kod ios

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

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

Pengetahuan yang diperluas: Kelebihan dan keburukan pembangunan asli dan pembangunan Apl Web (HTML5)

Pembangunan asli

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>
 )
}

Pembangunan asli (Pembangunan Apl Asli), ialah Gunakan bahasa pembangunan yang disediakan secara rasmi, perpustakaan pembangunan dan alatan pembangunan untuk pembangunan Apl pada platform mudah alih seperti Android dan IOS. Sebagai contoh, Android menggunakan Java, Eclipse dan studio Android IOS menggunakan Objective-C dan Xcode untuk pembangunan.

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

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

Ringkasnya, pembangunan asli adalah seperti membina rumah, asas diletakkan terlebih dahulu dan kemudian rasuk lantai dituangkan dengan teliti direka. Perkara yang sama berlaku untuk APP asli: setiap halaman, setiap fungsi, setiap kesan, setiap logik dan setiap langkah semuanya ditulis dalam kod, lapisan demi lapisan dan bahagian demi bahagian.

Kelebihan:

1 Boleh mengakses semua fungsi telefon bimbit (seperti GPS, kamera, dll.), mencapai fungsi yang paling lengkap

2 kelajuan berjalan dan pengalaman pengguna yang sangat baik; pengaturcara, secara amnya Tidak akan berlaku ranap sistem, dan ia juga boleh menghalang kemunculan virus dan kelemahan;

Kelemahan:

1 Masa pembangunan adalah panjang, paling cepat adalah kira-kira 3 bulan untuk disiapkan, dan yang lambat adalah kira-kira lima bulan; adalah tinggi dan kosnya tinggi ;

3 Kemudahalihan agak lemah Apl asli mesti dibangunkan secara berasingan untuk Android dan IOS, dan dua set logik dan antara muka yang sama mesti ditulis

4. Sekatan kandungan ( sekatan App Store);

5.

Pembangunan Apl Web (HTML5)

Pembangunan aplikasi HTML5 ialah Pembangunan aplikasi menggunakan teknologi Web Tapak web yang boleh dibuka dalam penyemak imbas mudah alih dipanggil untuk aplikasi web. Teknologi web sendiri memerlukan sokongan pelayar untuk paparan dan interaksi pengguna, jadi teknologi utama yang digunakan ialah HTML, CSS, Javascript, dan rangka kerja JS seperti jQuery, Vue, dan React.

Kelebihan:

1 Menyokong pelbagai jenis peranti dan boleh merentas platform Kod yang ditulis boleh dijalankan pada Android, IOS dan Windows pada masa yang sama 🎜>2. Kos pembangunan rendah , kitaran pendek;

3.

4 formatnya agak kaya (seperti fon tebal, pelbagai) halaman

5. Pengguna boleh terus menggunakan versi terkini (kemas kini secara automatik, tidak perlu pengguna mengemas kini secara manual).

Kelemahan:

1 Disebabkan oleh keterbatasan teknologi Web itu sendiri, aplikasi mudah alih H5 tidak boleh mengakses perkakasan peranti dan storan luar talian secara langsung, jadi terdapat had besar dalam pengalaman dan prestasi

2. Keperluan Internet yang tinggi, tiada operasi boleh dilakukan di luar talian

3

4 🎜>5. Sokongan untuk gambar dan animasi tidak tinggi; dipanggil.

Cadangan berkaitan: "

tutorial video html

"

Atas ialah kandungan terperinci Apakah pembangunan hibrid html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!