【quickhybrid】Android端的專案實現

dailc發表於2019-02-21

前言

前文中就有提到，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/中，入口頁面預設會載入它，也可以直接看原始碼

返回根目錄

【quickhybrid】如何實現一個Hybrid框架

原始碼

github上這個框架的實現

quickhybrid/quickhybrid

【quickhybrid】JS端的專案實現
2017-12-28
UIJS
【quickhybrid】JSBridge的實現
2017-12-25
UIJS
Android開源mvp專案,實現玩Android客戶端
2019-02-22
AndroidMVP客戶端
【quickhybrid】API多平臺支撐的實現
2017-12-25
UIAPI
Android客戶端專案元件化實踐
2019-03-03
Android客戶端元件化
Android 專案重構之路：實現篇
2015-11-19
Android
WanJetpack專案：用Jetpack實現玩Android，追求最官方的實現方式
2021-08-09
JetpackAndroid
Android 專案實戰--手機衛士（實現splash）
2016-09-23
Android
Android-TCP客戶端的實現
2018-01-16
AndroidTCP客戶端
Git命令實現Android專案初次上傳到Git
2018-08-06
GitAndroid
聊聊springboot專案如何實現自定義actuator端點
2021-09-25
Spring Boot
Flask後端開發(二) - 功能實現和專案總結
2023-10-30
Flask後端
Android端“被擠下線”功能的實現
2017-12-14
Android
Android實現Thrift服務端與客戶端
2017-08-12
Android服務端客戶端
【專案原始碼】- 【區域網聊天】android實現區域網聊天 - UDP實現
2016-05-03
原始碼AndroidUDP
Android MVP模式專案實戰
2018-06-13
AndroidMVP模式
專案如何實現限流？
2022-07-14
如何實現專案管理
2022-05-22
專案管理
分享一個完整的社群專案(Android端加後臺)
2019-03-04
Android
JWT 實現 Laravel 認證（前後端分離專案必備）
2021-02-09
JWTLaravel後端
android實踐專案七自定義的Spinner
2016-04-20
Android
Angular專案中共享模組的實現
2018-05-21
Angular
用hibernate實現的小專案
2004-06-02
MVP在Android專案中的簡單體現
2017-02-08
MVPAndroid
Android元件化實踐專案分享
2019-03-06
Android元件化
實戰react技術棧+express前後端部落格專案（5）-- 前後端實現登入功能
2017-10-10
ReactExpress後端
[Android]後端之路--intellij IDEA Maven專案的搭建（1）
2018-06-21
Android後端IntelliJIdeaMaven
Django + Taro 前後端分離專案實現企業微信登入
2022-04-06
Django後端
玩Android客戶端，一款Android開源小專案
2018-02-23
Android客戶端
前後端分離專案實踐分析
2017-11-14
後端
React專案實現匯出PDF的功能
2022-06-06
React
DDD專案現在實施的問題
2012-12-18
現有Android專案中整合Flutter/Flutter混合開發實戰（一）
2019-02-26
AndroidFlutter
使用Vitamio開源專案在Android實現播放網路視訊
2015-05-29
Android
得物複雜 C 端專案的重構實踐
2022-06-23
Android專案實戰之高仿網易雲音樂專案介紹
2019-03-03
Android
Android專案實戰（三）：實現第一次進入軟體的引導頁
2018-04-29
Android
Django+Vue.js搭建前後端分離專案 web前後端分離專案實踐
2017-11-01
DjangoVue.js後端Web