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是原生下载的方法名，附件的url是参数。