技术选型从 HTML5 到小程序,走过逐步熟悉产品的阶段后,即可获得飞升的研发效能和流畅体验。
瞰聆信息科技有限公司是一家专注移动医疗的公司,聚焦于采用移动化的技术手段实现医疗高效协作和精细化敏捷管理。业务服务结合国内医院的实际情况进行创新,致力于构建国内细分领域最先进的产品和解决方案。
「南京儿医在线」是瞰聆科技为南京儿童医院开发的官方就医 App,支持线上线下一体化就医体验。本文介绍了其如何通过接入 mPaaS 小程序从而提升应用体验性能的故事。
项目背景
因此我们采用了「原生 App 作为容器 + HTML5」的技术选型支撑业务开发:App 提供统一的用户认证体系,在线加载 HTML5 页面,并对 HTML5 提供相应的 JSSDK。由此,医疗相关的业务我们基本统一使用 HTML5 开发,期望做到一端开发,两端适配。
当然,面向 toB 类的业务还好,医生用户群的体量相对可控,能够针对性优化解决性能问题。但一旦业务面向 toC,如若我们的 App 持续出现性能问题,随之而来的就是不可控的患者投诉和差评,既影响用户体验,也对公司的品牌有所伤害。
接触 mPaaS 之前,实际上我们也尝试过其他跨平台的解决方案,如 Cordova、Uni-App、Flutter,甚至还有个人开发者输出的微信小程序框架 Hera。测试了一段时间之后:
Cordova 的性能无法满足要求,兼容性也有不少问题;
Uni-App 倾向于纯 HTML5 开发模式,评估后不太适合与原生 App 结合;
Flutter 现阶段生态还有待完善,且对应的学习成本较高,不适合我们团队。
小程序针对浏览器内核进行了优化,分离渲染和逻辑执行引擎,再加上对渲染层做了一些优化。除了首次下载需要花一些时间,之后的体验已经非常接近原生应用。虽然个人开发者的 Hera 框架也提供了我们一些思路,但由于后续开发扩展的东西太多,如扩展 API、HTML5 端 SDK、离线下载策略、渲染优化……很显然,短时间内我们无法完成。
接入 mPaaS 过程回顾
当然,在对接测试过程中,我们确实也踩了不少坑,借助 mPaaS 技术团队的支持,问题逐一得到解决。而对我们而言,实际上是逐步熟悉产品、积累经验的过程。下面列举一些有代表性的问题,供大家参考:
这个问题反映出由于我们前期没有熟读文档,对问题的判断以及解决思路不够清晰,由此走了很多弯路。因此,开发者一定要通读文档,了解接入流程,从而能够更好地提升接入效率。
2. 离线包实时更新。mPaaS 离线包默认每隔 30 分钟自动更新。但我们偶有紧急业务调整或者 Bug 需快速修复,希望用户打开的时候就能加载最新的包。
基于这个需求,我们自主实现了一个实时更新机制。
经过排查后,核心原因在于一开始我们没有获取键盘的展开缩起(高度变化)的状态,对应的解决方案即通过配置属性即可:
enableNative="false"
(原本应该在体重输入框的,键盘弹起后,跑到了下面输入框)
目前我们采取的方式是后台接口添加 GET/POST 支持,比如 PATCH/USER,用 POST 便变成 POST/USER/PATCH。
5. iOS 端小程序标题不显示。这个问题从接入开始,持续到项目近上线最终被解决,具体表现是 iOS 端小程序不显示默认标题,小程序手动调用 ‘my.setNavigationBar’ 设置的方可显示。期间我们尝试了很多方案,虽然定位问题在客户端,但始终没有找到问题。
最终通过 mPaaS 开发同学发现其中一个叫 SSZipArchive 的 pod 库,影响了框架的执行,删掉了这个引用解决了问题。
建议大家可以根据 mPaaS 官方文档,尽量使用 mPaaS 自身的依赖,挨个排查替换即可。
后来通过提工单,并通过对比文档发现,有一个参数设置可以实现多个小程序互跳:在创建小程序的时候通过 startTinyAppWithId 方法传入启动参数即可实现:
@{@"startMultApp":@"YES",@"appClearTop":@NO}
全新的开发体验
在第一个版本之后,我们又进行了几次版本迭代。迭代开发过程中,我们的客户端只需关注与“HTML5/小程序”的交互接口扩展,HTML5/小程序端更多关注业务开发,需要什么接口,和客户端约定一下协议即可,几乎实现了和客户端的“分离”开发。
业务开发完成后,可以在支付宝小程序 IDE 上一键发版提测,非常方便。上线也只需在 mPaaS 控制台手动发布一下版本即可,实现了秒级更新。
接着还有新同事参与进来开发了医生端的新业务。基于之前的积累,以及 mPaaS 小程序的开发文档,大家很快就能上手。几天时间就开发出了一个在线开处方的应用,mPaaS 大大地提高了我们的研发效率。
综合来看,mPaaS 帮助我们解决了最为头疼的性能体验问题,让我们可以集中精力进行业务模块的开发。
当然,mPaaS 带来的价值还有很多。它不光解放了我们的客户端,让客户端可以专注在 App 容器,不断丰富平台能力,比如统一 UI 组件库、身份认证体系、IM 通信、音视频直播等等;而且统一了我们的前端开发规范,让我们得以在统一的平台上进行业务开发,形成自己的规范,有利于代码的沉淀和管理。
「南京儿医在线」应用界面
未来展望
我们只有不断地迭代、创新,才能做出真正有价值的产品,满足用户和客户的要求。项目上线才是开始,我们后面要面对的问题还有很多。
最后,我们感谢 mPaaS 团队的无私贡献,感谢节假日还在帮助我们解决问题的开发同学。mPaaS 还在不断完善,我们相信 mPaaS 是一个可以依靠的平台,mPaaS 未来一定会更加强大!
- - - END - - -
关于 mPaaS 小程序
源自于支付宝小程序框架,亿级线上业务体量的锤炼,安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序,更可快速构建打包,覆盖支付宝、淘宝、钉钉等应用。