【quickhybrid】iOS端的項目實現

標籤：camera   class   eva   複雜   with   link   app   系統   oca   

前言

18年元旦三天內和朋友突擊了下，勉強是將雛形做出來了，後續的API慢慢完善。（當然了，主力還是那個朋友，本人只是初涉iOS，勉強能看懂，修修改改而已）

大致內容如下：

• JSBridge核心互動部分

• ui、page等部分常用API的實現（其它慢慢完善）

• 組件（自訂）API拓展的實現

• API的許可權校正僅預留了一個入口，類比最簡單的實現

• 其它如離線資源載入更新，底層最佳化等機制暫時不提供

項目的結構

這個項目中，為了方便，就沒有分成多個靜態庫了（事實上是可以這樣做的），而是全部都放在一個項目中

整體目錄結構如下：

quickhybrid-ios    |- AppDelegate          // 應用入口，分發進入對應的viewcontroller    |- core                 // 核心工具類，放一些通用工具類    |   |- ui    |   |- util    |   |- ...    |- quickhybrid          // JSBridge實現的核心代碼，定製viewcontroller，實現API等    |   |- WebViewJavascriptBridge    |   |- basecore    |   |- quickcore    |   |- api

代碼架構

和Android一樣，仍然是簡單的三次架構：底層核心工具類->JSBridge橋接實現->app應用實現

其中，core和jsbridge有必要的話可以打包成靜態庫

core    |- ui                           // 一些UI效果的定義與實現    |- util                         // 通用工具類    quickhybird    |- WebViewJavascriptBridge      // 第三方開源的jsbridge實現，裡面進行了修改    |- basecore                     // 定義基類viewcontroller    |- quickcore                    // 定義quickhybrid中的viewcontroller實現    |- api                          // 定義API，開放原生功能給H5    應用內    |- AppDelegate                  // 應用入口，分發進入對應的viewcontroller    |- MainViewController           // 入口介面    |- TestPayApi                   // 定義的一個測試支付組件（自訂）API    |- qhjsmodules.plist            // 內部定義模組的別名於路徑關係的設定檔

許可權配置

iOS可以直接在info.plist中配置許可權，譬如

    <key>NSAppTransportSecurity</key>    <dict>        <key>NSAllowsArbitraryLoads</key>        <true/>    </dict>    <key>NSCameraUsageDescription</key>    <string>是否允許應用使用網路攝影機？</string>    <key>NSLocationWhenInUseUsageDescription</key>    <string>是否允許應用使用定位功能</string>    <key>NSMicrophoneUsageDescription</key>    <string>是否允許應用使用麥克風？</string>    <key>NSPhotoLibraryUsageDescription</key>    <string>是否允許訪問相簿</string>    <key>UIFileSharingEnabled</key>    ...

應用配置

Bundle Identifier: com.quickhybrid.quickhybriddemoVersion: 1.0.0Deployment Target: 11.2（預設最新調試）Devices: UniversalSigning: none

相比Android中一堆複雜的配置，iOS中無疑簡單很多，直接用最新系統調試即可。。。

這裡，到目前位置，這個項目還有很多API沒有實現，後續預計是會引入部分靜態庫的。

當然，如果想要引入靜態庫，也很簡單，直接如下：

項目配置->Build Phases->Link Binary With Libraries->+（添加）->然後需要用到的地方import即可

整個過程非常的輕鬆愉快。

一些關鍵代碼

代碼方面，也無法一一全部說明，這裡僅列舉一些比較重要的步驟實現，其餘可參考源碼

UA約定

前面的JS項目中就已經有提到UA約定，就是在載入對於webview時，統一在webview中加上如下UA標識

// 擷取預設UANSString *defaultUA = [[UIWebView new] stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];        NSString *version = @"1.0.0";        NSString *customerUA = [defaultUA stringByAppendingString:[NSString stringWithFormat:@" QuickHybridJs/%@", version]];        [[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent":customerUA}];

監聽JSBridge的觸發

在建立webview時，QHBaseWebLoader裡建立代理監聽

    // 建立webView容器    WKWebViewConfiguration *webConfig = [[WKWebViewConfiguration alloc] init];    WKUserContentController *userContentVC = [[WKUserContentController alloc] init];    webConfig.userContentController = userContentVC;    WKWebView *wk = [[WKWebView alloc] initWithFrame:CGRectZero configuration:webConfig];        [self.view addSubview:wk];    self.wv = wk;    self.wv.navigationDelegate = self;    self.wv.UIDelegate = self;    self.wv.translatesAutoresizingMaskIntoConstraints = NO;        ...          self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.wv];    [self.bridge setWebViewDelegate:self];        [self.wv.configuration.userContentController addScriptMessageHandler:self.bridge name:@"WKWebViewJavascriptBridge"];

然後h5中通過以下調用：

window.webkit.messageHandlers.WKWebViewJavascriptBridge.postMessage(...);

然後WKWebViewJavascriptBridge內部，接受傳遞的資訊，並自行解析

#pragma mark - WKScriptMessageHandler- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {    if ([message.name isEqualToString:@"WKWebViewJavascriptBridge"]) {        [self excuteMessage:message.body];    }}

其它

iOS中還有一點和Android不同就是，很多標準的HTML5內容無需額外相容（譬如fileinput檔案選擇等）

其它內容，和Android實現中提到的一樣，這裡就不再贅述了，可以直接參考源碼

另外，後續如果繼續有容器最佳化等操作，也會單獨整理，加入本系列。

前端頁面樣本

為了方便，直接整合到了res/中，入口頁面預設會載入它，也可以直接看源碼

返回根目錄

• 【quickhybrid】如何?一個Hybrid架構

源碼

github上這個架構的實現

quickhybrid/quickhybrid

【quickhybrid】iOS端的項目實現