CCMobile with Android, IOS integration process problems and solutions
Preface:
CCMobile (2019 version) is a mobile terminal CCFlow & JFlow approval of the product. Mui-based system development framework, is a compatible Android and IOS mobile end workflow approval system. Since CCMobile confined approval process moving end, so very little, then you may need to develop or integrate with other APP on the source in other office functions.
Since the h5 Mui is a framework, not native, so when integrated with the native APP, there will be some problems, mainly in the attachment upload and download, screen compatible and so on. This article will describe the specific problems that arise when integrating with other APP and solutions.
Integration with IOS
1. The main issue summary
When integrated with IOS, there are three main issues, namely: return (closed), fully compatible with screen-screen-style bangs, upload and download attachments.
2. Return (closed)
IOS operating system is different from Android, unlike with Android back key. When Android back button click, you can return the order until you return home. IOS is not, if the jump from native to CCMobile, IOS is impossible to return to the home page in CCMobile APP, the APP can only end, to reopen. Therefore, we CCMobile home page, add return (close) button, when clicked, can close CCMobile, APP returned directly to the specified page.
In CCMobile, we agreed to a return (close) method call, IOS by invoking native methods to achieve close (return), the calling code as follows:
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是参数。