Directorio de artículos
1. ¿Qué es el desarrollo híbrido?
El desarrollo híbrido se refiere a una aplicación híbrida que utiliza tecnologías de desarrollo nativas y H5 para mejorar la eficiencia y ahorrar costos al desarrollar un producto de aplicación. En términos sencillos, este es el modelo de página web, que generalmente consta de dos partes: "Sitio web en la nube H5 + Cliente de aplicación APP".
El desarrollo híbrido es un modelo de desarrollo que aprende de las fortalezas de los demás. El código nativo utiliza complementos u otros marcos para proporcionar contenedores para H5. La implementación comercial principal y la visualización de la interfaz del programa se implementan mediante tecnologías relacionadas con H5. Muchas aplicaciones se crean utilizando modelos de desarrollo híbridos.
2. Interacción entre páginas web e ios y android (principio)
Interacción entre páginas web e ios y android (principio)
- página web llama a ios y android
- La página web envía una solicitud falsa, ios, android intercepta la solicitud y resuelve si es una solicitud real o una solicitud falsa
- Realmente solicita la liberación
- Interceptación de solicitudes falsas, analizar los campos de requisitos funcionales reales,
- Mediante publicar y suscribirse, pasar al archivo correspondiente, realizar la operación correspondiente
Envíe una solicitud falsa y deje que el desarrollo nativo la intercepte (la ruta URL de la solicitud debe ser coherente con la configuración de ios y android)
ios intercepta la solicitud
// 继承类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 enviar solicitud falsa
<!-- // HTML文件发送假请求 -->
<a href="emma://captureImage">拍照</a>
<a href="emma://openweChart">打开微信</a>
<a href="emma://scan">扫一扫</a>
// js文件发送假请求
window.location.href = 'emma://captureImage';
ios y android pasan valores a las páginas web.
Primero, prepare una función de devolución de llamada en la página web para obtener los resultados.
Cuando sea necesario pasar el valor original a la página web, inserte dinámicamente el código js en la ventana que abre la página web. Este código js es el código
web que llama a la función de devolución de llamada.
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>
)
}
código ios
// webview的文件
// 需要将webview提升成全局变量(挂载webview的函数和处理发布订阅事件的函数是两个作用域)
@property (strong, nonatomic) WKWebView *webview;
// 事件处理函数中
// 向窗口注入js代码
NSString *jsMethod = [NSString stringWithFormat:@"window.onCaptureImageCallback('%@')", @"需要传给网页的值"];
[self.webview evaluateJavaScript:jsMethod completionHandler:nil];