笑联 x mPaaS | 12 个模块,全面小程序化,如何打造真正的一次开发复用多端?

简介: 一款 App 基于 mPaaS 小程序如何进行改造?

封面图0619.jpg

这篇故事围绕着一款 App 基于 mPaaS 小程序进行改造娓娓展开。

作为国内校园服务场景最丰富的平台,笑联 App 已覆盖国内 130 所高校,服务近百万高校学生。

截止目前,笑联 App 内的 12 个业务模块目前已顺利实现小程序化。不仅获得媲美原生应用的用户体验,同时有效规避“发版周期长”、“无法快速在线修复 Bug”等弊端,实现真正的动态发布与更新能力。


项目背景

开篇先做个自我介绍,笑联 App 目前已是国内提供校园服务场景最丰富的平台,目前已覆盖 130 所高校,服务近百万高校学生。

因我们提供的服务类型囊括洗衣机、热水器、淋浴等多项功能,业务模块多元化,并且需满足每所学校在服务类型、标准方面的个性化设计,笑联 App 长期堆叠业务模块,缺乏规范的模块化设计,导致代码愈发臃肿,开发效率低下。

与此同时,随着业务的持续扩张,任一需求的迭代均需要重新发版审核,很显然如此繁琐的发版工期已无法满足高频更新的业务需要。

我们急需在技术侧找到对应的解决思路,一方面简化业务模块之间的耦合,加速日常的开发速度;另一方面架构上需实现模块化,找到动态发布与更新的解决方式。

我们针对市面上已开放的技术选型做了调研,Flutter 和 mPaaS 理论上都可以满足我们当时的选型要求,但 mPaaS 小程序动态更新的能力跟我们业务需求相吻合,避免需要频繁更新整个 App。

接入过程

回顾 mPaaS 的接入过程,笑联作为早期用户,和 mPaaS 技术团队建立了深入合作的革命友谊:一方面对于 mPaaS 整体的技术体系有了更全面的了解,另一方面双方协作,针对“产品接入、功能丰富”做了很多改进工作。

  • Android 接入初期使用 Inside 模式,适用于业务复杂的 App,尤其是多个业务模块并行开发、迭代且需要多人多团队协同。
    但由于框架中包含一些通用第三方 SDK(如支付宝支付、微信支付、微信分享等),因这些集成的第三方 SDK 自身版本过低或者功能不全,存在一定的解除依赖工作。

后续 mPaaS 推出 AAR 原生接入模式后,由 Inside 升级至 AAR 在早期还需要技术同学的协助支持。
目前,mPaaS 已经实现针对 AAR 接入模式较好的支持:通过 mPaaS IDE 插件,可以简单地点击两下,便完成小程序能力的接入。而三方 SDK 的冲突,目前配备对应的详细文档说明。

  • 作为早期用户,尤其是不熟悉 mPaaS 技术体系全貌的情况下,初期遇到接入出错时日志查看不够方便,不利于研发团队快速定位问题。
    关于这块,我们也和 mPaaS 官方团队做了交流,目前已将「问题定位」和「排查」作为专项重点跟进治理,我们期待后续的产品使用及问题自排查可以得到较大的体验改善。
  • mPaaS 早期依赖的 Gradle 版本较低,笑联 App 在集成的时候由于 Gradle 版本的兼容问题,使得研发团队花费大量的时间定位编译失败的原因,后明确是低版本 Gradle 与其他第三方库的兼容性问题导致,如 ButterKnife。
    不过现在,mPaaS 已经完美适配了高版本 Gradle,初期接入过程中遇到的问题大部分已经迎刃而解。

价值沉淀

经过一段时间的调试,最终我们成功实现 mPaaS 的接入。一鼓作气,现阶段 12 个核心业务模块已全部完成改造,以“小程序”的方式嵌入到 App 中。

引入 mPaaS 小程序,虽过程有坎坷,仍然要多谢 mPaaS 的技术同学及时答复与支持,最终一个个问题都得到了相应的解决。

文章插图0619.jpg

但实际上“mPaaS 小程序”对我们的价值远不止于此。

首先,借助小程序的开发标准能够快速覆盖 Android/iOS 双端。小程序的语法并不算难,对于新手而言上手也很快,作为客户端同学目前可以干两个人的活(开玩笑)

从研发效率的提升角度来看,小程序技术栈的引入确实给我们带来了很多改善。作为客户端开发,不用疲于在需求的高频迭代中,给自己更多的时间去思考去沉淀客户端本身的移动中台能力,利用 mPaaS 小程序提供的自定义扩展机制,反哺给小程序来使用。

其次,mPaaS 小程序使用了 Web 能力来进行 UI 渲染加 JSCore 处理逻辑。在渲染逻辑上,和纯原生开发的页面相比还有一点点差距,但换来的是强大的动态性以及一端开发双端适配的研发效能提升。

另外 mPaaS 提供了独立的 UC 内核,小程序凭借独立内核,针对性的渲染优化,其性能相较 HTML5 已做了明显优化。还有即小程序的这套设计,其实渲染引擎可以无感替换,期待未来 mPaaS 可以结合 Flutter 的绘制引擎,带来高性能的小程序方案。

再者,基于小程序开发标准,我们有能力做到丰富笑联的生态。

笑联 App 中可以嵌入自身业务相关小程序,也可以开放其他第三方小程序接入笑联的功能。像笑联是面对高校市场,未来是不是可以结合 mPaaS 开放接口,将小程序开放能力提供给高校开发者,让更多高校开发者参与进来共建生态?

接入 mPaaS 至今,笑联开发团队对 mPaaS 极为肯定:

  • 站在开发者的角度来看,mPaaS 结构清晰,语法简洁明了,API 接口充足(还可以在客户端中自定义接口😎)。开发成本低、效率高发布简单,一套代码覆盖双端,不用去考虑复杂的适配问题,甚至无需顾虑打包、审核等繁琐流程。
  • 站在用户的角度来讲,小程序带来的“即开即用”体验,其效果几乎与原生相同。不用单独安装,客户端抛去小程序所实现的功能后,体积小,大大节省了用户的手机存储空间。
  • 站在公司角度来看,引入 mPaaS 后,我们已具备能力将 App 打造出生态。目前 App 扩展性非常高,将来有其他的业务,可以继续开发成小程序嵌入到 App 中,甚至在将来,还会像支付宝一样,可以把其他合作伙伴的小程序接入到我们的 App 中。

👉关于 mPaaS 小程序👈

源自于支付宝小程序框架

亿级线上业务体量的锤炼

安全性媲美支付宝原生能力

不仅面向自有 App 投放小程序

更可快速构建打包覆盖支付宝、淘宝、钉钉等应用

mPaaS 小程序 接入答疑群.jpg

👇点击链接,查看更多 「mPaaS 小程序」相关资讯👇

鸣谢:魏星、魏明浩、余巍、刺猬
(排名部分先后)

公众号媒体导流矩阵.jpg

相关文章
|
5天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
5天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
5天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
5天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
5天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
5天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
3天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
14 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
5天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
5天前
|
小程序
开发小程序只要几百块?
开发小程序只要几百块?
636 0
|
5天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
13 1

热门文章

最新文章

相关产品

  • 移动开发平台 mPaaS