文章目錄
- 一、混合開發是什么？
- 二、web網頁和ios，android進行互動(原理)
- web網頁和ios，android進行互動(原理)
一、混合開發是什么？
混合開發，是指在開發一款App產品的時候，為了提高效率、節省成本而利用原生與H5的開發技術的混合應用，通俗點來說，這就是網頁的模式，通常由“H5云網站+APP應用客戶端”兩部份構成，
混合開發是一種取長補短的開發模式，原生代碼部分利用插件或者其它框架為H5提供容器，程式主要的業務實作、界面展示都是利用與H5相關的技術進行實作的，很多APP都是利用混合開發模式而成的，
二、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 = '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];
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/231465.html
標籤：其他