在过去的一年里,我经历了许多挑战和喜悦,从中学到了许多宝贵的经验,通过这篇征文,我希望能够分享我的成长历程,同时也期待读者在新的一年里有更好的收获和突破
在2023年,成功的领导了开发小团队完成了一项重要的新项目开发,实现从0到1。同时,在各个项目迭代中,担任主要负责人,梳理需求,编写技术文档,高效完成项目的同时,也提高自身的梳理逻辑以及理解能力。
使用组件库开发模式,实现项目模块解耦。
尽管在项目中遇到了原生与前端使用JSBridge多方案交互兼容的问题,但通过个人思考优化方案,最终输出兼容多套JSBridge注入方法的方式,我们最终解决了该问题。
JSBridge是Native代码与JS代码的通信桥梁,目前的一种统一方案是:H5触发url scheme -> Native捕获url scheme -> 原生分析、执行 -> 原生调用h5。如下图:
JS和Native之间的通信需要一个H5全局对象JSBridge来实现,该对象有如下特点:
在第一步中,我们定义好了全局桥对象,所以前端是通过它的callHandler方法来调用原生的,在前端页面,执行callHandler时,会判断是否有回调函数
_doSend()
方法添加到一个消息数组sendMessageQueue
中,然后通过设置messageIframe.src
注意:正常来说是可以通过window.location.href达到发起网络请求的效果的,但是有一个很严重的问题,就是如果我们连续多次修改window.location.href的值,在Native层只能接收到最后一次请求,前面的请求都会被忽略掉。所以JS端发起网络请求的时候,需要使用iframe,这样就可以避免这个问题。
在上一步中,我们已经成功在h5页面中出发messageIframe.src,设置这个会触发Webview的代理回调方法:
webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)
原生通过拦截url为约定的url,执行原生的核心代码
在第三步中,Native已经接收到了JS调用的方法,然后通过执行WebViewJavascriptBridge._fetchQueue()
方法获取第二步中的sendMessageQueue
的json数据,解析该json数据获取方法名、参数以及回调函数等,原生本地执行对应的api功能方法逻辑,方法执行完毕,再根据该方法的回调函数id和回调内容,组装成一个json格式的参数,回调给H5,参考第五步
原生组装好回调给h5的数据,通过调用WebViewJavascriptBridge._handleMessageFromObjC('\(messsageJson)')
方法,传递给H5,到此就是JS调用原生的方法的整个流程了
所以整个的流程可以简约为:
H5调用Native -> 将所有参数存入本地数组 -> 触发一个固定的url scheme -> 原生捕获scheme -> 原生通过JSBridge主动获取参数 -> 进行分析
这一年,关于模块解耦,组件开发,学到了如何灵活处理代码耦合的方式,关于模块中编写代码应严格避免硬编码的存在,不要存在侥幸偷懒的心理
通过探索主导【JSBridge原理解读】培训,我成功的掌握了JSBridge底层的原理逻辑,深入了解移动端与Web前端的交互原理。
通过参与【KMM跨平台项目分享】培训,成功的掌握了KMM跨平台开发模式,可统一实现移动端的逻辑开发。
回顾过去一年的点滴,我深感人生的宝贵,每一次挑战都是一次成长的机会。在新的一年里,我愿与读者共同努力,迈向新的高度,突破自我。
我鼓励大家分享你们过去一年的故事,也欢迎提出对我的征文的看法和建议,期待在评论区和大家一起交流探讨。