《物联网医用内窥镜监控平台》IOS前端

  简介，20年暑假的时候到一家初创型的医疗器械公司，从事软件维护升级和测试工作的心得体会。下面会简单介绍平台的结构，公司的需求及适应性维护的措施，还有整了快一个月的测试，问题是发现了但实习时间也到了。

物联网医用内窥镜监控平台架构示意

  暑假闲着没事，接手了导师推荐的一份暑期实习，刚到公司的时候就发现技术人员没几个o(￣︶￣)o。来的基本上是实习生，大家争着想接手后端适应性维护的工作（能学到东西），很不幸我只拿到了IOS前端的任务。那上面就是公司给我们的一套分布式前后端分离的平台架构。前端分为4个模块，微信小程序、安卓端、IOS端、pad端，后端则是常用的Java web服务技术。由于代码久远，技术文档不全，不仅没有redis缓存，而且有些数据库表字段名都不知道是啥意思，庆幸没有去后端。

IOS前端

确定前端框架

  前端之前没有接触过框架，只在上学的时候修过html+css+javaScript课程，那只有边学边做了。网上逛了一圈，最后发现用xcode工具，不仅慢而且成本也高。对于要快速上线的应用，只能选择uni-app或者5+app解决方法,uni-app是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app前端开发框架其实也有很多弊端。并选择配套的HBuilderX作为IDE。

代码移植及原型设计

  随后，我用前端源代码快速转换成uni-app，再将其打包成ios端。在IPhone xr上完成基本测试，测试设备及苹果的开发者账号（一年699老贵了）都是由公司提供。但由于后端接口不可用，数据显示和功能调试都还不能进行。估计后端小伙伴还在挣扎摸索中(#^.#)。啪，实习两周过去了，似乎也快要结束了。但后续收到的公司的需求是需要对前端进行重做（看我太闲了吧）。。没办法，一个拿着低微实习工资的只能冒着巨大风险帮公司重新设计了一个界面（严重怀疑完成不了，并会要求用原版）。前端原型设计用的是墨刀，它的口号是产品原型设计工具，异地协同，高效协作。咱也没学过设计，简单设计了20个页面，拿给公司看满不满意。确定了界面风格及结构后，要进行代码的重写了，讲真风险是真的大，但实习嘛能学一点是一点。

IOS前端MUI框架

  想着用最快捷的方法完成，我设计的20个前端页面。敲定了用MUI框架，它的口号是，最接近原生APP体验的高性能前端框架。鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是MUI的重要目标，MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件。本着该框架好多组件和IOS应用风格相似，且相应迅速，所以使用了该框架。但由于MUI也存在问题，它并没有那么兼容uni-app，后续会说例子。

IOS手机端监控平台

  虽然之前说设计了20个页面，但实际只有5、6个左右，剩下的都是重复内容。代码的编写主要是用MUI的组件罗列在一起，调整CSS。反复测试不同机型下的效果。但是，js部分一直没办法修改，加入不了测试。主要问题还是后端没有给出接口。下节介绍一下实现效果吧，实习生不太懂勿吐槽，主要是分享自己的经历。

IOS端存在的问题

IOS应用美观问题
1.顶部状态栏和底部存在颜色上的不匹配，美观度差。
2.部分图标仍然不清晰。
编码规范问题：
1.存在许多用不上的资源文件，代码。
2.代码编写不规范，内置样式太多，难以维护。

结语

  最后，为时两个月的实习经历，确实让我学到了不少知识。希望后续接手IOS前端的小伙伴不要吐槽吧！水平有限就到这了。