南京儿医在线 x mPaaS | H5 性能体验太卡，我们换了小程序试一试

简介： mPaaS 小程序接入过程实操

封面图0723.jpg

技术选型从 HTML5 到小程序，走过逐步熟悉产品的阶段后，即可获得飞升的研发效能和流畅体验。

瞰聆信息科技有限公司是一家专注移动医疗的公司，聚焦于采用移动化的技术手段实现医疗高效协作和精细化敏捷管理。业务服务结合国内医院的实际情况进行创新，致力于构建国内细分领域最先进的产品和解决方案。

「南京儿医在线」是瞰聆科技为南京儿童医院开发的官方就医 App，支持线上线下一体化就医体验。本文介绍了其如何通过接入 mPaaS 小程序从而提升应用体验性能的故事。

项目背景

瞰聆成立以来，业务大多集中在移动端对外开放。而在 App 发展初期，我们所服务的受众人群以 B 端医生为主，考虑到医院端业务量大、场景丰富、产品线广，同时项目需要支持“微信公众号”及“支付宝公众号”。

因此我们采用了「原生 App 作为容器 + HTML5」的技术选型支撑业务开发：App 提供统一的用户认证体系，在线加载 HTML5 页面，并对 HTML5 提供相应的 JSSDK。由此，医疗相关的业务我们基本统一使用 HTML5 开发，期望做到一端开发，两端适配。

然而，跑了一段时间之后，我们发现纯 HTML5 开发的方式，性能体验问题较大。比如，HTML5 页面在用户手机上经常出现打不开、一直加载中、卡顿等问题。

当然，面向 toB 类的业务还好，医生用户群的体量相对可控，能够针对性优化解决性能问题。但一旦业务面向 toC，如若我们的 App 持续出现性能问题，随之而来的就是不可控的患者投诉和差评，既影响用户体验，也对公司的品牌有所伤害。

评估“南京儿医在线”App 的用户体量将持续增长，我们决定不再忍受纯 HTML5 开发的模式，重新改造 App，势必输出一款能够满足消费级市场要求的应用。

接触 mPaaS 之前，实际上我们也尝试过其他跨平台的解决方案，如 Cordova、Uni-App、Flutter，甚至还有个人开发者输出的微信小程序框架 Hera。测试了一段时间之后：

Cordova 的性能无法满足要求，兼容性也有不少问题；
Uni-App 倾向于纯 HTML5 开发模式，评估后不太适合与原生 App 结合；
Flutter 现阶段生态还有待完善，且对应的学习成本较高，不适合我们团队。

最终我们把目光投向了小程序。

小程序针对浏览器内核进行了优化，分离渲染和逻辑执行引擎，再加上对渲染层做了一些优化。除了首次下载需要花一些时间，之后的体验已经非常接近原生应用。虽然个人开发者的 Hera 框架也提供了我们一些思路，但由于后续开发扩展的东西太多，如扩展 API、HTML5 端 SDK、离线下载策略、渲染优化……很显然，短时间内我们无法完成。

接入 mPaaS 过程回顾

经过一系列调研之后，我们发现 mPaaS 小程序与我们当前的需求不谋而合，同时也已沉淀了很多大客户案例。于是我们决定接入测试 mPaaS，通过 mPaaS 小程序来提升 App 性能体验。

当然，在对接测试过程中，我们确实也踩了不少坑，借助 mPaaS 技术团队的支持，问题逐一得到解决。而对我们而言，实际上是逐步熟悉产品、积累经验的过程。下面列举一些有代表性的问题，供大家参考：

1.初期对接阶段，安卓端遇到加载在线 HTML5/小程序报【网络不给力，请稍后再试】的问题。调试下来发现有个 RPC 请求报 7001，验签未通过。最后提了工单，开发同学提示需求将安装包上传至 mPaaS 控制台，并下载新的配置文件 ‘Ant-mpaas-xxxxx.config’，覆盖原来的配置文件。（实际上是我们需要将安装包的签名做更新，修改其中 ‘base64’ 字段内容）
这个问题反映出由于我们前期没有熟读文档，对问题的判断以及解决思路不够清晰，由此走了很多弯路。因此，开发者一定要通读文档，了解接入流程，从而能够更好地提升接入效率。

2.离线包实时更新。mPaaS 离线包默认每隔 30 分钟自动更新。但我们偶有紧急业务调整或者 Bug 需快速修复，希望用户打开的时候就能加载最新的包。
基于这个需求，我们自主实现了一个实时更新机制。
大致思路是启动的时候即刻检测是否有离线包更新，如果有，便请求下载，然后重新渲染页面。（当然这种机制相对消耗流量，也并非常规做法，我们仍在持续优化中。）如果对实现方法感兴趣，大家可以参考我同事的这篇文章：《mPaaS 集成：基于内嵌 View 形式优化首页更新》

3.键盘样式问题。fixed 定位中的输入框弹出的键盘会把输入框顶上去，而输入框内容保持不动（如下图所示）
经过排查后，核心原因在于一开始我们没有获取键盘的展开缩起（高度变化）的状态，对应的解决方案即通过配置属性即可：enableNative="false"

（原本应该在体重输入框的，键盘弹起后，跑到了下面输入框）

4.接口仅支持 GET、POST 请求。原因是由于支付宝小程序限制。
目前我们采取的方式是后台接口添加 GET/POST 支持，比如 PATCH/USER，用 POST 便变成 POST/USER/PATCH。
当然，还有个办法是 App 提供 JSAPI，网络通信交给 App 来做，前端调用 JSAPI 来实现。

5.iOS 端小程序标题不显示。这个问题从接入开始，持续到项目近上线最终被解决，具体表现是 iOS 端小程序不显示默认标题，小程序手动调用 ‘my.setNavigationBar’ 设置的方可显示。期间我们尝试了很多方案，虽然定位问题在客户端，但始终没有找到问题。
最终通过 mPaaS 开发同学发现其中一个叫 SSZipArchive 的 pod 库，影响了框架的执行，删掉了这个引用解决了问题。

6.关于依赖库冲突/报错问题。
建议大家可以根据 mPaaS 官方文档，尽量使用 mPaaS 自身的依赖，挨个排查替换即可。

7.多个小程序之间跳转问题。在实际需求中，有小程序跳 HTML5 再跳小程序等需求。而后我们发现 App 端只能同时存在一个小程序，无法实现小程序互跳。具体表现即，跳转小程序之前必须关掉当前小程序，否则跳转无效。
后来通过提工单，并通过对比文档发现，有一个参数设置可以实现多个小程序互跳：在创建小程序的时候通过 startTinyAppWithId 方法传入启动参数即可实现：@{@"startMultApp":@"YES",@"appClearTop":@NO}