CCMobile與安卓、IOS整合過程中的問題與解決方案

前言：

         CCMobile（2019版本）是CCFlow&JFlow 的一款移動端審批的產品。系統基於mui框架開發，是一款可以相容Android與IOS的移動端工作流審批系統。由於CCMobile僅僅侷限於移動端的流程審批，所以在其他辦公功能方面很少，這時可能就需要在原始碼上開發或者與其他APP進行整合。

         由於Mui是一款h5的框架，並不是原生的，所以在與原生APP整合時，會出現一些問題，主要集中在附件上傳下載、螢幕相容等。本文章，將具體描述與其他APP進行整合時出現的問題以及解決方法。

與IOS進行整合                                  

1.主要問題彙總

         與IOS進行整合時，主要有3個問題，即：返回（關閉）、全面屏與劉海屏樣式相容、附件上傳與下載。

2.返回（關閉）

         IOS作業系統不同於Android，不像Android具有back鍵。Android點選back鍵時，可以順序返回，直到返回首頁。IOS則沒有，如果從原生跳轉到CCMobile，IOS是不可能在CCMobile中返回到APP首頁的，只能結束APP，重新開啟。所以，我們在CCMobile的首頁中，新增返回（關閉）按鈕，點選後，可以關閉CCMobile，直接返回到APP指定的頁面。

         在CCMobile中，我們約定了一個返回（關閉）的呼叫方法，通過呼叫IOS原生方法，實現關閉（返回），呼叫程式碼如下：

                   window.webkit.messageHandlers.backAction.postMessage("backActionStr");

這句程式碼的意思呼叫IOS原生的backAction方法，引數是backActionStr，這個引數沒有具體含義，只是為了方便判別。IOS原生的backAction方法就是關閉CCMobile，跳轉到指定頁面的方法，程式碼參考上圖中紅色框標識1。

         下圖中的 x 按鈕，就是關閉（返回）。

3. 全面屏與劉海屏樣式相容

         包括Android手機在內，絕大部分的手機都有全面屏與劉海屏，兩者的樣式區別就是劉海屏比全面屏的頂部，凹下去一塊，如果按照全面屏的顯示樣式來說，CCMobile沒什麼問題，但是遇到劉海屏，CCMobile的頂部，就會被蓋住一部分。

         為了解決這樣的情況，CCMobile沒有為具體機型制定樣式，而是在IOS程式碼中增加判斷和修改，如果是劉海屏的機型，增加了整個CCMobile到頂部的距離。

         IOS程式碼如上圖紅色框標識2所示。

4.附件上傳與下載

         H5的附件上傳，需要在IOS原生中將相關許可權開放，否則H5是無法呼叫手機相關功能的。如下圖：

         附件下載，由於在流程中上傳的附件上傳到伺服器中，因此在手機端進行附加下載時，需要將伺服器中的附件資訊提供給手機，才能供手機下載。

         因此，我們在這個地方，也約定了一個下載的方法名稱，setLoadUrl。

                   window.webkit.messageHandlers.setLoadUrl.postMessage(Url);

IOS原生程式碼中，需要新增這個setLoadUrl方法，引數是附件的url地址，IOS根據URL進行下載。具體下載程式碼如上圖紅框標識3所示。

與安卓（Android）進行整合

1. 主要問題彙總

         與IOS不同，CCMobile對安卓的支援相對好一些，有一些功能為了相容IOS，做了特殊處理，因此在展現方面，兩者有所不同，比如：選擇器（下拉選擇框）。

第一張圖為安卓展示效果，第二張圖為IOS顯示效果。

         雖然安卓不存在IOS返回（關閉）的問題，但是在整合時也存在全面屏與劉海屏樣式相容、附件上傳與下載兩個問題。

         安卓的螢幕相容問題，與IOS的解決思路一樣，在安卓原生中，判斷機型，自動計算並設定CCMobile到手機狀態列的具體距離，此處就不再詳細說明了。下面將具體講解附件上傳與下載的整合問題。

2. 附件上傳

         mui的視窗介面採用的webview模組，因此在webview中帶有 input file的控制元件時，在手機端中是無法點選的，因此，無法達到上傳附件，並且也不會調動手機相機的操作。

         為了解決這個問題，在安卓原生中需要做以下操作：

         第一步：重寫WebChromeClient。

         第二步：監聽ValueCallback。

         第三步：webview要新增相應的設定。

         第四步：建立onActivityResult。

         具體程式碼參考：https://blog.csdn.net/shuaiyou_comon/article/details/76262303

3.附件下載

         安卓的附件下載，與IOS的附件下載設計思路一樣，需要在安卓原生中，增加一個下載方法，供CCMobile使用。

         第一步，增加下載方法，程式碼參照如下：

         第二步，方法宣告，CCMobile可以使用原生程式碼進行呼叫。

CCMobile中呼叫原生介面的程式碼：

       window.Android.setAttachmentUrl(Url);

setAttachmentUrl是原生下載的方法名，附