{JS} 记银联POS机晓智付APP开发总结

18年10月底集团内部有一个需求是需要在银联内部集成我们自己的收付款APP,也就大家在外常见的POS小程序,其中集成了扫码支付,刷卡支付,后端订单实时推送,收款流水同步中台等众多功能。和集团的中台系统进行打通。接到这个项目的时候,感觉非常非常有意思,也算是一种挑战,因为在之前的履历里并没有在这种终端POS机写移动端Web的经验。开发前,我们仔细梳理了整个POS机的环境和细节,目前POS机内部使用的是安卓系统,其原理就是在POS机内部打包一个安卓应用,安卓应用接入银联内部的SDK,应用内指向URL地址来渲染前端资源,通过类似于JSBridge的方式来实现H5和Native之间的相互调用,达到成功调用拉起原生银联支付的目的。


前端技术方案

对于前端来说,无非是一个HTML5的应用,最低安卓版本的WebView支持到4.4.2(2011年始) , 对这个版本的安卓系统来说,已经几乎完整的支持了ECMAScript5的JavaScript标准,换而言之就是基本上babel转化出来的代码都可以顺利的执行,当然一些必要polyfill是必不可少的,例如Promise,如果需要完整支持es6的某些特性可能还需要加入es6-shim的类库。老版本的安卓系统WebView并不支持这些es6特性, 这里我们做了很多兼容的处理,包括CSS动画的处理

在前端技术的选择上,我们采用了Cubec+React的组合方式,将所有的数据请求和轮询操作都放在Cubec的模型中进行管理,使得数据流向和视图界面几乎完全分离,将所有的请求托管到模型中,包括请求的异常处理。通过单项数据流的方式反应到界面中。路由管理采用了原生灵活的HTML5 History Router, 而不是React-Router这种绑定框架的做法。为将来能够在这个APP项目内根据各种场景里集成不同的组件,甚至不同的框架铺垫了基础,不束缚前端开发人员的技术选择,秉持一种“用正确的技术来正确的编写业务”的理念。 举个例子:React组件不一定适合做移动端手势的场景,如果一旦有各种手势操作,那么各种问题就随之而来,而我们灵活的路由机制可以不束缚开发人员的选择,这样我们就可以灵活使用社区内的各种适用场景的组件来进行开发,大大的提高了开发效率。例如涉及到拖拽场景,用React写不但性能底下,代码量和维护成本也是骤增,此时也许更好的解决方案,我们可以使用到社区的Swiper组件或者jQueryUI来完成,更为方便,代码更加清晰。也许我只需要引入一个手势组件库,但是需要兼容React我需要花大量的时间来对现有的组件进行而包装,将手势行为都加入React组件中,然而我如果使用原生JS,甚至可以简单到直接用原生JS直接操作DOM节点,那这个事情将会变得简单而容易的多,而且性能和兼容性极好,无可否认,纯原生代码的执行效率相当的高。很多时候,很多人就是把一些简单的问题复杂化了,杀鸡用牛刀这种事情在很多项目里随处可见。当然,React适合某些特定的场景,做个大型的集成组件,类似于购物车,用户订单等页面就极其适合用React封装。详情可以参见淘宝已买到的宝贝(订单页面)

项目类型我们定性为一个通用的单页面应用(SPA),在开发时,我预留了很多空间。理论上,这个HTML5 SPA即使不放在POS机的环境内一样可以运行。这个APP甚至可以独立出来,放在微信端,支付宝端,手机浏览器中完美运行。可以随时更换支付方式,兼容用户扫码,支持微信支付支付宝支付等功能逻辑,不单单会局限在POS机的系统环境内。符合“WORA”的概念。

开发工具上我们有自己的脚手架,将dev和打包集成在工具流中,极大的降低了开发成本和去除开发人员人肉维护webpack配置的过程。并且在完美支持社区npm和技术栈的情况下,优化了开发过程中的调试体验,CSS动态更新,React-hot-reload等技术的引进。将原本项目调试每次启动过程长久的等待时间缩短到了仅仅只有4秒钟,重新热更新代码时间缩短到300毫秒,速度极快。并且我们紧跟社区最新技术,脚手架在我的维护进程里,将会永远保持所有内置包为社区最新状态。

xcli

开发模式完全前后端分离,加上脚手架的赋能,可以实时转发不同后端的请求,可以在后端没有提供接口的时候仍然可以自己mock数据,从而达到不依赖后端接口即可完成独立开发的效果,符合了敏捷开发的原则。


黑盒调试

对于移动端开发来说,要在不同的设备中进行调试,是一个比较痛苦的过程。比如我要将我开发好的页面放在POS机的环境里进行调试,这样对于我来说,POS机完全是一个黑盒环境,如果一旦发生报错现象,我们是无法直接通过调试工具来进行定位:JS报错? 请求处理错误?我们都无法捕获。这样一来一个通用的调试工具就显得极其重要。 社区的weinre 正好满足了我们这个需求。 weinre 也算是最早的移动端调试鼻祖了,后来被PhoneGap内置收购,于是apache就自己拿了一个分支出来搞,也就是现在的weinre了。 基本上满足了在黑盒环境中实时查看console, http请求,DOM节点的映射等,兼容性自然相当的好。

weinre

另外相关的工具还有GhostLab,当然这个是要给钱的,40$买断,好在我朋友买了一个,和我共享了(key可以支持两台机器),说到这里有点不好意思。GhostLab 就更加智能了,同样适用于各种黑盒环境进行调试,不过我目前在本地没有试验成功,这个结论有待于后续的补充,不过这个工具可以理解为weinre的浏览器版本,调试工具和Chrome devtools几乎完美融合,一旦完整使用之后我相信在日后的移动端开发中会对它爱不释手

ghostlab