驰骋工作流引擎-CCMobile与安卓、IOS集成过程中的问题与解决方案

叁歲伎倆 2024-04-20 09:27 111阅读 0赞

### CCMobile与安卓、IOS集成过程中的问题与解决方案 ###

#### 前言： ####

CCMobile（2019版本）是CCFlow&JFlow 的一款移动端审批的产品。系统基于mui框架开发，是一款可以兼容Android与IOS的移动端工作流审批系统。由于CCMobile仅仅局限于移动端的流程审批，所以在其他办公功能方面很少，这时可能就需要在源码上开发或者与其他APP进行集成。

由于Mui是一款h5的框架，并不是原生的，所以在与原生APP集成时，会出现一些问题，主要集中在附件上传下载、屏幕兼容等。本文章，将具体描述与其他APP进行集成时出现的问题以及解决方法。

#### 与IOS进行集成                                  ####

##### 1.主要问题汇总 #####

与IOS进行集成时，主要有3个问题，即：返回（关闭）、全面屏与刘海屏样式兼容、附件上传与下载。

![867f7a238cb9df76b2bbac21163e8be7313.jpg][]

##### 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 按钮，就是关闭（返回）。

![https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba7bafe998f6402a92872a72ce241e1a.jpg][https_uploader.shimo.im_f_McqOwoau7coOhicS.jpg_original]

##### 3. 全面屏与刘海屏样式兼容 #####

包括Android手机在内，绝大部分的手机都有全面屏与刘海屏，两者的样式区别就是刘海屏比全面屏的顶部，凹下去一块，如果按照全面屏的显示样式来说，CCMobile没什么问题，但是遇到刘海屏，CCMobile的顶部，就会被盖住一部分。

为了解决这样的情况，CCMobile没有为具体机型制定样式，而是在IOS代码中增加判断和修改，如果是刘海屏的机型，增加了整个CCMobile到顶部的距离。

IOS代码如上图红色框标识2所示。

##### 4.附件上传与下载 #####

H5的附件上传，需要在IOS原生中将相关权限开放，否则H5是无法调用手机相关功能的。如下图：

![8c2ad47d87a15951780423dbfaac20dd332.jpg][]

附件下载，由于在流程中上传的附件上传到服务器中，因此在手机端进行附加下载时，需要将服务器中的附件信息提供给手机，才能供手机下载。

因此，我们在这个地方，也约定了一个下载的方法名称，setLoadUrl。

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

IOS原生代码中，需要添加这个setLoadUrl方法，参数是附件的url地址，IOS根据URL进行下载。具体下载代码如上图红框标识3所示。

#### 与安卓（Android）进行集成 ####

##### 1. 主要问题汇总 #####

与IOS不同，CCMobile对安卓的支持相对好一些，有一些功能为了兼容IOS，做了特殊处理，因此在展现方面，两者有所不同，比如：选择器（下拉选择框）。

第一张图为安卓展示效果，第二张图为IOS显示效果。

![228cec9ebbce842fcf7d0b7d29f460640de.jpg][]![4910eff4ea31019c30ba1dc51ad2ba6b202.jpg][]

虽然安卓不存在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使用。

第一步，增加下载方法，代码参照如下：

![a2c51e0abbd393fa5c68f1e1ab78556dabe.jpg][]

第二步，方法声明，CCMobile可以使用原生代码进行调用。

![3e1d1a7424e85992e654e1a83035674bd97.jpg][]

CCMobile中调用原生接口的代码：

window.Android.setAttachmentUrl(Url);

setAttachmentUrl是原生下载的方法名，附件的url是参数。

转载于:https://www.cnblogs.com/mengjuan/p/11162087.html

[867f7a238cb9df76b2bbac21163e8be7313.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0cdea03a971f4a25b3110a827ae8455b.jpg
[https_uploader.shimo.im_f_McqOwoau7coOhicS.jpg_original]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba7bafe998f6402a92872a72ce241e1a.jpg
[8c2ad47d87a15951780423dbfaac20dd332.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8550e8f4aca0409f9f292f55bef590cf.jpg
[228cec9ebbce842fcf7d0b7d29f460640de.jpg]: https://oscimg.oschina.net/oscnet/228cec9ebbce842fcf7d0b7d29f460640de.jpg
[4910eff4ea31019c30ba1dc51ad2ba6b202.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/74309a21f24042048ef815afb373aaee.jpg
[a2c51e0abbd393fa5c68f1e1ab78556dabe.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fa3381e995894580925b5b602b7b0e0d.jpg
[3e1d1a7424e85992e654e1a83035674bd97.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b63d56a2db6642d59d7ec06989d67706.jpg