【quickhybrid】Android端的項目實現

来源:https://www.cnblogs.com/dailc/archive/2017/12/29/8142641.html
-Advertisement-
Play Games

前言 前文中就有提到，Hybrid模式的核心就是在原生，而本文就以此項目的Android部分為例介紹Android部分的實現。 提示，由於各種各樣的原因，本項目中的Android容器確保核心交互以及部分重要API實現，關於底層容器優化等機制後續再考慮完善。 大致內容如下： JSBridge核心交互部 ...


前言

前文中就有提到，Hybrid模式的核心就是在原生，而本文就以此項目的Android部分為例介紹Android部分的實現。

提示，由於各種各樣的原因，本項目中的Android容器確保核心交互以及部分重要API實現，關於底層容器優化等機制後續再考慮完善。

大致內容如下：

  • JSBridge核心交互部分

  • ui、page、navigator等部分常用API的實現

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

  • 容器h5支撐的部分完善（如支持fileinput文件選擇，地理定位等-預設不生效的）

  • API的許可權校驗僅預留了一個入口，模擬最簡單的實現

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

項目的結構

基於AndroidStudio的項目，為了便於管理，稍微分成了幾個模塊，
而且由於主要精力已經偏移到了JS前端，已經不想再花大力氣重構Android代碼了，
因此僅僅是將代碼從業務中抽取出來，留下了一些稍微精簡的代碼（也不是特別精簡）。

所以如果發現代碼風格，規範等不太合適，請先將就著。

整體目錄結構如下：

quickhybrid-android
    |- app                  // application，應用主程式
    |   |- api/PayApi       // 拓展了一個組件API
    |   |- MainActivity     // 入口頁面
    |- core                 // library，核心工具類模塊，放一些通用工具類
    |   |- baseapp
    |   |- net
    |   |- ui
    |   |- util
    |- jsbridge             // library，JSBridge模塊，混合開發的核心實現
    |   |- api
    |   |- bean
    |   |- bridge
    |   |- control
    |   |- view

代碼架構

簡單的三次架構：底層核心工具類->JSBridge橋接實現->app應用實現

core
    |- application                  // 應用流程式控制制，Activity管理，崩潰日誌等
    |- baseapp                      // 一些基礎Activity，Fragment的定義
    |- net                          // 網路請求相關
    |- ui                           // 一些UI效果的定義與實現
    |- util                         // 通用工具類
    
jsbridge
    |- api                          // 定義API，開放原生功能給H5
    |- bean                         // 放一些實體類
    |- bridge                       // 橋接的定義以及核心實現
    |- control                      // 控制類，包括回調控制，頁面載入控制，文件選擇控制等
    |- view                         // 定義混合開發需要的webview和fragment實現
    
app
    |- api                          // 拓展項目需要的自定義組件API
    |- AppApplication.java          // 應用的控制
    |- MainActivity.java            // 入口界面的控制

許可權配置

原生應用中，不可逃避的就是打包後的許可權問題，沒有許可權，很多功能都使用不了，
簡單起見，這裡將應用中用的許可權都列了出來（基於多種考慮，並沒有遵循最小原則）

<!-- ===============================許可權配置聲明=============================== -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <uses-permission android:name="android.permission.READ_CALL_LOG" />
    <uses-permission android:name="android.permission.SEND_SMS" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.READ_LOGS" />
    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.READ_OWNER_DATA" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.READ_PROFILE" />

註意，6.0之上需要動態許可權，請確保已經給應用開了對應的許可權

Gradle配置

AndroidStudio中項目要正確運行起來，需要有一個正確的Gradle配置。

這裡也就幾個關鍵性的配置作說明，其餘的可以參考源碼

gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-4.2.1-all.zip

如果遇到gradle編譯不動，可以像上述一樣，把這個文件的gradle版本修改為本地用的版本
（否則的話，沒有科學上網就很有可能卡住）

setting.gradle

include ':app', ':jsbridge', ':core'

裡面很簡單，就是一行代碼，將三個用到的模塊都引用進來

build.gradle（core）

僅挑選了部分進行說明

apply plugin: 'com.android.library'

android {
    compileSdkVersion 25

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ...
    }
    ...
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:support-v4:25.3.1'
    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.jakewharton:butterknife:8.6.0'
    compile 'com.google.code.gson:gson:2.8.0'
    compile 'com.journeyapps:zxing-android-embedded:3.5.0'
    compile 'com.liulishuo.filedownloader:library:1.5.5'
    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
    compile 'me.iwf.photopicker:PhotoPicker:0.9.10@aar'
    compile 'com.github.bumptech.glide:glide:4.1.1'
    ...
}

上述的關鍵信息有幾點：

  • apply plugin: 'com.android.library'代表是模塊而不是主應用

  • minSdkVersion 16代表最低相容4.1的版本

  • targetSdkVersion 25是編譯版本，targetSdkVersion 22提供向前相容的作用，22時不需要動態許可權，
    主要作用是某些API在不同版本中使用不一樣，或者根本就在低版本中沒有。

  • versionName和versionCode進行版本控制

  • dependencies中是依賴信息，首先compile fileTree添加了libs下的所有離線依賴（裡面有離線依賴包），
    然後compile一些必須的依賴（譬如用到了gson，自動註解，文件下載等等）

為什麼這裡沒用implementation添加依賴，而是用compile？因為implementation不具有傳遞性，這樣引用core的jsbridge就用不到了，
而我們需要確保jsbridge中也用到，所以就用了compile。

build.gradle（jsbridge）

一部分類似的代碼就沒有貼出來了

apply plugin: 'com.android.library'

...

dependencies {
    implementation project(':core')
    ...
}

這裡和core不同之處在於，內部依賴於core模塊，使用了implementation project，
這樣在jsbridge內部就能使用core的源碼了。

需要註意的是，implementation不具有傳遞性（core只會暴露給jsbridge，不會傳遞下去）

build.gradle（app）

一部分類似的代碼就沒有貼出來了

apply plugin: 'com.android.application'

android {
    defaultConfig {
        applicationId "com.quick.quickhybrid"
        versionCode 1
        versionName "1.0"
    }
   ...
}

dependencies {
    implementation project(':core')
    implementation project(':jsbridge')
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    // butterknife8.0+版本支持控制項註解必須在可運行的model加上
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.6.0'
    ...
}

與之前相比，有幾點關鍵信息

  • apply plugin: 'com.android.application'代表是主應用而不是模塊

  • applicationId定義了應用id

  • 同樣有自己的版本控制，但是註意，這裡是容器版本號，前面的如jsbridge中是quick的版本號，有區別的

  • implementation依賴了前面兩個模塊，同時，後面引入了應用中可能需要的依賴

  • annotationProcessor 'com.jakewharton:butterknife-compiler:8.6.0'，這行代碼是為了使得butterknife自動註解生效的配置

targetSdkVersion說明

配置中使用的版本是22，因為在這個版本以上會有動態許可權問題，比較麻煩，需要更改部分邏輯。因此就暫時未修改了。

譬如操作私有文件的許可權問題等等

一些關鍵代碼

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

UA約定

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

WebSettings settings = getSettings();
String ua = settings.getUserAgentString();
// 設置瀏覽器UA,JS端通過UA判斷是否屬於Quick環境
settings.setUserAgentString(ua + " QuickHybridJs/" + BuildConfig.VERSION_NAME);

一些關鍵的webview設置

// 設置支持JS
settings.setJavaScriptEnabled(true);
// 設置是否支持meta標簽來控制縮放
settings.setUseWideViewPort(true);
// 縮放至屏幕的大小
settings.setLoadWithOverviewMode(true);
// 設置內置的縮放控制項（若SupportZoom為false，該設置項無效）
settings.setBuiltInZoomControls(true);
// 設置緩存模式
// LOAD_DEFAULT 根據HTTP協議header中設置的cache-control屬性來執行載入策略
// LOAD_CACHE_ELSE_NETWORK 只要本地有無論是否過期都從本地獲取
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setDomStorageEnabled(true);
// 設置AppCache 需要H5頁面配置manifest文件(官方已不推介使用)
String appCachePath = getContext().getCacheDir().getAbsolutePath();
settings.setAppCachePath(appCachePath);
settings.setAppCacheEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 強制開啟android webview debug模式使用Chrome inspect(https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)
    WebView.setWebContentsDebuggingEnabled(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    CookieManager.getInstance().setAcceptThirdPartyCookies(this, true);
}

上述的一系列配置下去才能讓H5頁面的大部分功能正常開啟，如localstorage，cookie，viewport，javascript等

支持H5地理定位

在繼承WebChromeClient的QuickWebChromeClient中

    @Override
    public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
        callback.invoke(origin, true, false);
        super.onGeolocationPermissionsShowPrompt(origin, callback);
    }

需要重新才支持地理定位，否則純h5定位無法獲取地理位置（或者被迫使用了網路定位）

支持文件選擇

同樣在繼承WebChromeClient的QuickWebChromeClient中

    /**
     * Android 4.1+適用
     *
     * @param uploadMsg
     * @param acceptType
     * @param capture
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        loadPage.getFileChooser().showFileChooser(uploadMsg, acceptType, capture);
    }

    /**
     * Android 5.0+適用
     *
     * @param webView
     * @param filePathCallback
     * @param fileChooserParams
     * @return
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        loadPage.getFileChooser().showFileChooser(webView, filePathCallback, fileChooserParams);
        return true;
    }

上述的操作是主動監聽文件的選擇，然後自動調用原生中的處理方案，譬如彈出一個通用的選擇框，進行選擇等。
如果不實現，無法正常通過FileInput選擇文件，而實際上，FileInput又是一個很常用的功能。

監聽JSBridge的觸發

同樣在繼承WebChromeClient的QuickWebChromeClient中

    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        result.confirm(JSBridge.callJava(loadPage.getFragment(), message,loadPage.hasConfig()));
        return true;
    }

為了方便，直接使用onJsPrompt來作為交互通道，前文中也相應提到過

其它

在直接提供API前，還有很多需要做的基礎工作，譬如瀏覽歷史記錄管理，監聽附件下載，頁面載入報錯處理等等，這裡不再贅述，可以直接參考源碼

最後，關於一些JSBridge實現，API實現，由於本系列的其它文中或多或少都已經提到，這裡就不再贅述了，可以直接參考源碼

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

前端頁面示例

為了方便，直接集成到了app/assets/中，入口頁面預設會載入它，也可以直接看源碼

返回根目錄

源碼

github上這個框架的實現

quickhybrid/quickhybrid


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle和MySQL差異總結
    常用功能差異 1. 鎖差異 ： • Oracle鎖加在數據塊上 • InnoDB 是在索引上加鎖，所以MySQL鎖的粒度沒有Oracle 精細。 2. 導入導出 ： • Oracle採用EXP /IMP ，EXPDP/IMPDP導入導出。 • MySQL採用mysqldump導出，導入可以採用管道或 ...
  • InfluxDB源碼目錄結構解析
    操作系統 ： CentOS7.3.1611_x64 go語言版本：1.8.3 linux/amd64 InfluxDB版本：1.1.0 influxdata主目錄結構 目錄解析說明： influxdb 為源碼的主目錄 influxql 實現了InfluxDB查詢語言的解析器（源碼主目錄裡面引用的是i ...
  • 深度學習在文本分類中的應用
    近期閱讀了一些深度學習在文本分類中的應用相關論文（ " 論文筆記 " )，同時也參加了CCF 大數據與計算智能大賽（BDCI）2017的一個文本分類問題的比賽：讓AI當法官，並取得了最終評測第四名的成績(比賽的具體思路和代碼參見 " github項目repo " )。因此，本文總結了文本分類相關的深 ...
  • 一、 kettle開發、上線常見問題以及防錯規範步驟
    此篇說明對應的kettle版本是6.1，實際使用時7.x應該也是一樣的。 一、 kettle開發流程（規範步驟，防止出錯） (一) Kettle設置檢查 如果不加一下配置項，數據轉換後中文會出現亂碼，很難處理。 本地連接資源庫：配置項 defaultFetchSize 500 useCursorFe ...
  • MySQL處理高併發，防止庫存超賣
    一般電子商務網站都會遇到如團購、秒殺、特價之類的活動，而這樣的活動有一個共同的特點就是訪問量激增、上千甚至上萬人搶購一個商品。然而，作為活動商品，庫存肯定是很有限的，如何控制庫存不讓出現超買，以防止造成不必要的損失是眾多電子商務網站程式員頭疼的問題，這同時也是最基本的問題。 ...
  • Hive Getting Started補充
    配置管理概述 Hive從<install-dir>/conf/hive-default.xml中讀取它的預設配置 Hive配置目錄的位置可以通過設置HIVE_CONF_DIR環境變數的值來改變 配置變數可以被改變，通過<install-dir>/conf/hive-site.xml中重新定義（PS： ...
  • oracle 中的exists
    大家好，第一次發文章。以後會多多記錄自己的點滴生活。多積累，多學習。 今天給大家分享一篇自己學的的 oracle 中的 exists 用法，如有遺漏，錯誤和疏忽。請大家多多包涵，指正。 Where exists 首先，從網上查詢了很多資料。意思大致如下。 exists 返回值只是標記或者說一個標識的 ...
  • oracle創建表空間及用戶
    drop user username cascade; select username, sid, serial# from v$session WHERE USERNAME=username; alter system kill session 'sid,serial#' 3.如果想要保險起見就先 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類