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

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 按钮,就是关闭(返回)。

https://uploader.shimo.im/f/McqOwoau7coOhicS.jpg!original

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是参数。

相关文章