关于react-native:Native地图与Web融合技术的应用与实践

1. 背景

美团打车业务很早就在美团App与点评App中提供了服务入口,并在技术上采纳了H5与Native的混合开发技术。随着业务上线,有用户反馈咱们的地图性能有一些问题,起因是咱们打车地图应用的是Web版的地图(通过腾讯地图JavaScript API),业内同类产品应用的是Native版的地图SDK,Native地图相比Web地图具备人造的性能劣势,所以美团打车地图从首屏地图加载到后续的地图操作体验都有肯定差距​。

问题和挑战

为了改善打车业务的地图体验,咱们想到的计划是在展现地图的局部应用Native地图,而非地图局部应用H5页面来显示,这样既能追平与竞品的地图性能差距,又能充分发挥H5的开发效率。这种计划乍一看仿佛是传统的Hybrid开发,没什么难度与离奇。比方地图应用事后内置到App中的地图SDK实现,H5与Native的交互应用业界成熟的JSBridge技术。但从打车业务角度来看,因为打车业务有很多性能入口须要沉没在地图之上,如起起点卡片、用户核心入口等,这种沉没性能在技术上并不容易实现,而且还要保障用户触摸动作在沉没元素与地图上产生时,别离派发给各自的事件零碎,Hybrid技术在这方面没有教训能够借鉴。

带着这些挑战,咱们进行一系列的尝试与试验,最终将问题解决并封装出咱们打车业务的地图调用框架,咱们称之为Native地图与Web交融框架(下文简称交融框架)。在这个过程中,咱们总结出了一些教训,心愿能给从事相干钻研的同学带来一些帮忙。

2. 调研

基于混合技术开发体系,咱们钻研了市面上大部分H5页面与Native地图的利用场景,次要分为如下两类:

  • H5页面与Native地图别离是2个独立的页面:H5业务逻辑用到地图时候,通过交互技术关上一个新地图页面,在新页面内,Native地图依照传入参数调用对应地图组件,实现业务性能的展现。

  • H5页面与Native地图位于同一页面内:两者将屏幕宰割为两局部,如下图所示:Native地图位于上半局部,WebView H5页面位于下半局部。

通过剖析后,咱们发现这两种模式都无奈满足打车业务场景的需要,因为目前市面上支流的打车业务场景由4局部形成,如下图所示:

  • 起起点抉择面板:占据页面下半局部,能够高低滑动露出更多内容。
  • 地图局部:页面上半局部,显示起起点、线路等地图因素信息。
  • 更多菜单:左上角图标,点击后跳转到H5性能菜单页面。
  • 广告入口:右上角图标,点击后跳转到H5经营页面。

上文第一类,H5页面与Native地图别离位于两个独立页面中,只能满足局部地图场景的需要,无奈布局为上图H5与地图同框显示的成果。

上文第二类,实现这样的布局须要多个WebView能力实现,存在如下毛病:

  • 下方WebView与上方Native地图是平级的组件,各占屏幕的一半,相互间不存在压盖关系,实现起起点面板高低滑动成果艰难。
  • 左上角、右上角的更多菜单,广告入口地位须要新增2个WebView组件能力实现笼罩在地图之上,WebView组件再加载对应H5页面实现上述布局,整个步骤比拟繁琐。
  • 多个WebView组件形成的页面布局,因为内存空间不共享,它们之间信息的同步比拟艰难,太多的WebView组件对系统性能也是一种节约。

调研论断是:市面上现存技术都无奈满足打车场景的需要。

全新计划的提出

基于打车场景的特殊性,咱们做了一个大胆的假如:把页面分为2层,上层是Native地图层,布满屏幕;下层是WebView层,齐全笼罩到Native地图层之上,如下图所示:

咱们冀望的成果是:

  • 点击H5元素时,点击事件会派发给H5 WebView容器解决。
  • 点击地图区域时,点击事件会派发给Native地图组件解决。
  • H5与Native地图间的信息交互,可采纳成熟的JSBridge技术实现。

具体实现思路有如下几点,参照下图:

  • Native地图位于上层,WebView置于Native地图之上,WebView背景通明,透过WebView能够看到下边的地图。红框区域是下层WebView关上的H5页面元素。
  • 减少一个手势音讯散发层,该层会智能判断手势事件落在H5元素还是地图元素中。举例:点击红框区域,音讯会传递到WebView层的H5逻辑解决,点击红框之外的区域,音讯会传递到Native地图层解决(地图挪动、缩放等操作)。
  • H5与Native地图交互应用JSBridge实现。比方在地图中增加一个Marker,H5层业务逻辑收回增加Marker的音讯,H5层通过JSBridge技术将音讯发送到Native地图层,Native地图收到音讯后在地图中增加Marker元素。

为了验证想法是否正确,咱们首先通过Android平台开发出Demo,验证这种分层智能传递音讯的做法是可行的,该计划最大长处是兼顾了H5的开发效率与Native地图的高性能个性,十分合乎美团业务地图场景的需要。为了让想法落地时更标准、更零碎,咱们进行了如下的框架设计。

3. 框架设计

3.1 热区数据介绍

先介绍一个“热区数据”的概念,下图(3.2节)在手势散发层存在着音讯分发热区数据局部,下文简称热区数据。热区数据是针对下层WebView的一个概念,只对WebView层无效,对上层Native地图层有效。如果用户点击屏幕事件想让H5来捕捉解决,能够在屏幕区域内设置一个逻辑上的矩形区域,如:[0, 0, 50, 50](上图左上角区域),这个数据被称为热区数据

咱们通过编写代码逻辑,管制手势音讯散发的策略,如果手势音讯产生在热区数据矩形范畴内,咱们把音讯发送给WebView解决,否则发送给Native地图解决。如上图所示,能够在同一屏幕内设定多个热区,[0, 0, 50, 50]、[430, 0, 50, 50]、[0, 200, 480, 200],热区的格局能够本人定义,咱们这里采纳的基于WebView组件左上角为原点的像素坐标格局:[left, top, width, height]。

3.2 框架图介绍

手势音讯分发给WebView层流程

次要为上图1–>2–>3–>4过程,如下:

  • 用户触摸动作首先被手势散发层捕捉,手势散发层判断用户点击到热区数据范畴内,将音讯散发到WebView H5层解决。
  • WebView H5层收到音讯,对音讯进行解决(比方:在地图中增加一个起点Marker),通过通信桥将消息传递到Native地图层。
  • Native地图层收到音讯,并执行增加Marker操作,实现后返回胜利信息。上述总体流程为:手势散发层–>1–>2–>3–>6–>7。

手势音讯分发给Native地图层流程

次要为上图 5–>6–>7过程,如下:

  • 手势散发层捕捉到音讯,发现用户手势与以后热区数据矩形没有交加,于是将获取的音讯散发到Native地图层。
  • 如果音讯是拖动操作,则Native地图自动识别拖动地图音讯,实现挪动地图的成果,波及流程为:手势散发层–>5。
  • 如果音讯是点击操作,比方咱们想实现点击地图中的Marker,将消息传递给H5解决的性能。实现步骤为咱们当时在增加Marker时减少一个点击事件(Native地图层实现),Marker被点击时Native地图层会派发此事件,事件音讯会通过JSBridge技术从Native地图层传到H5层,最初H5层获取到点击音讯。整个操作流程为:手势散发层–>5–>6–>7。

热区数据的动静更新策略

因为打车业务底部的面板高度是可伸缩的,所以底部的热区数据并不是静止不动的,须要思考热区数据也要随着DOM元素的拉伸做同步调整。能够通过在WebView H5层监控DOM的变动,DOM元素发生变化时,获取变动后的DOM元素地位、大小,格式化为热区数据,并更新到音讯分发热区数据局部。因为拉伸动作是一个间断的动画成果,为了高效,咱们只在动画完结的那一刻更新热区数据,两头过渡期不做解决。此整体流程为:2–>3–>4。

4. 点评App中的落地实际

4.1 手势散发层要害代码

这部分性能须要Native端同学实现,包含iOS与Android。两端别离在启动App时设置三层内容,最上层是手势触摸事件接管层,两头是WebView层(背景设置通明),最上层是Native地图层(如腾讯地图SDK)。用数组记录以后热区数据,当手势散发层有事件产生时,通过Touch事件获取手指地位信息,遍历热区数组判断手指地位是否与热区的矩形相交,如相交则将音讯分发给WebView层,否则分发给Native层。下边是Android与iOS音讯散发要害代码:

Android散发层要害代码

@Override
public boolean dispatchTouchEvent(MotionEvent event){
  if(event.getAction() == MotionEvent.ACTION_DOWN) {
    // 散发层接管到手势触摸音讯,通过dispatchService类判断手势是否落在热区内,从而确定音讯散发的对象
    this.touchHandler = dispatchService.inRegion(event) ? TouchHandler.WebView : TouchHandler.MapView;
  }
  // 分发给Native地图层
  if(this.touchHandler == TouchHandler.MapView) {
    return this.mapView.dispatchTouchEvent(event);
  }
  // 分发给WebView H5层
  return super.dispatchTouchEvent(event);
}

iOS散发层要害代码

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
   UIView *hitTestView = nil;
   // 散发层接管到手势触摸音讯,通过pointInHotspot判断手势是否落在热区内,从而确定音讯散发的对象
   if ([self pointInHotspot:point]) {
     // 分发给WebView H5层
     hitTestView = [self.WebView hitTest:point withEvent:event];
   }else{
     // 分发给Native地图层
     hitTestView = [self.mapView hitTest:point withEvent:event];
   }
   return hitTestView;
}

4.2 WebView H5层

该层有2个性能:

  • 提供设置热区的JS接口setHotRegion,业务可通过此接口设置屏幕中的热区。
  • 封装一层JS模式的地图接口,为下层业务提供地图服务,该层借助JSBridge通信桥实现H5与Native层的异步通信。

4.3 通信桥简介

通信桥即JSBridge技术,次要实现H5与Native的信息交互,这方面的技术都已比拟成熟,业界有十分多的JSBridge实现,原理也都相似,常见的有:原生对象注入到H5层、URL拦挡技术,Native调用JS罕用的内置函数stringByEvaluatingJavaScriptFromString等。美团外部有比拟成熟的KNB框架,所以我的项目中间接应用了KNB框架。

4.4 Native地图层

该层在地图SDK(如腾讯地图SDK)根底上进行了封装,提供一些打车业务敌对的接口,如地图基本操作、打车起起点Marker增加、接送驾司机小车动画、地图事件、各种Marker的信息弹窗等。

4.5 Dom元素热区数据的主动保护技术

打车业务前端的技术栈是: Vue + VueX + Vue-Router构建的单页零碎。如下图所示,页面中存在很多H5元素须要增加热区,一一元素编写代码增加的话会很繁琐,而且页面元素的地位、大小变动时还须要同步更新热区数据,这里咱们应用了Vue中的directive(指令)来解决了此问题。

以上左右2图是用户操作时页面展现的不同状态,很显著右图底部卡片变高了,卡片变动同时须要同步更新对应的热区数据,directive技术能够很不便解决此问题,原理如下:

  • 在增加元素时,Vue指令的bind钩子函数被触发,此时计算出弹窗元素的大小和地位:应用getBoundingClientRect函数能够获取到元素的left、top、width、height等信息,将新的热区数据通过setHotRegion函数更新到手势散发层。
  • 在移除元素时,unbind钩子函数被触发,此时将热区数据移除,这样便实现了热区的主动增加删除性能了。
  • 应用指令技术很简捷,编写好指令的逻辑后注册到全局,在须要动静更新热区的元素上设置个v-hotRegion标签就能够了。

4.6 调试工具及测试

调试工具应用模拟器、真机都能够,开发期间咱们应用的模拟器开发,测试期间QA应用真机验证。调试过程中次要验证2局部性能,别离是热区的验证与地图接口验证。

热区验证

次要验证主页面设置的热区是否正确,包含是否能够点击、底部卡片是否能失常利落、业务性能是否失常等。因为热区数据是一串数字,形如:[0, 0, 50, 50],无奈直观判断出该数据是否有误,于是咱们开发了一个可视化工具,将设置热区的元素都用红色矩形高亮显示,如下图所示,这样就能疾速诊断出热区数据是否有异样。工具是应用Canvas画布实现的,画布大小与屏幕大小齐全重合,借助画布就能够将矩形热区数据在屏幕中实时绘制进去。

地图接口验证

次要是编写单元测试实现的,本我的项目封装了50多个地图接口,每个接口都编写单测用例,察看入参、出参、控制台输入后果,地图展现成果是否正确等。测试次要在iOS模拟器中实现,这样不便在控制台打印一些调试信息进行诊断。

5. 上线成果

该框架在公众点评App中上线后地图体验显著晋升,次要有体现在以下几个方面:

  • 地图的操作体验,如地图挪动、缩放显著好于H5地图,用户利用Native地图抉择起起点、下单叫车、接送驾小车动画成果更加晦涩。
  • 首屏地图数据指标也有显著晋升,如下表所示:

  • 目前线上运行稳固,上线2月期间,Crash数量为个位数,Crash率远低于0.1‰。
  • 框架上线后,公众点评App中业务迭代能够依照H5节奏上线,实现随时发版的开发效率。

Native地图层代码接口稳固、功能丰富,根本满足地图场景的业务需要。只需首次跟版公布,后续只须要迭代H5的业务逻辑即可。

6. 本文小结

本文将WebView与Native地图组件叠加到一起,实现了用户手势事件智能散发的机制,解决了WebView与Native地图在同一页面内布局艰难的问题。这种交融机制为打车业务晋升迭代效率同时保障地图体验提供了一种无效的路径,日常业务性能上线采纳H5技术迭代,Native地图作为不常更新的根底能力首次发版时装置到用户手机上,实现业务需要随时发版的能力,不再受各大利用商店的限度,用户操作地图的体验也更加晦涩。该交融框架适宜以下业务场景:

  • 业务中应用了地图功能,并对地图的加载、操作体验等有较高要求的业务。
  • 业务属于Hybrid业务,并且H5页面与地图在同一页面内布局的性能。
  • 如果你的业务是基于多个WebView与Native地图构建的零碎,十分倡议你理解下此文章。

7. 作者简介

美团打车技术部终端研发核心,加鹏、张斌、杨睿、邱博、海峰等。

8. 招聘信息

美团打车技术部终端研发核心诚招高级前端开发工程师、前端开发专家、高级iOS工程师、高级Android工程师。咱们为美团点评用户提供优质的打车服务,是本地生存吃喝玩乐行的重要环节。欢送各位小伙伴的退出,独特打造极致出行产品。感兴趣的同学可投递简历至:tech@meituan.com(邮件题目注明:美团打车技术部终端研发核心)

想浏览更多技术文章,请关注美团技术团队(meituantech)官网微信公众号。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据