https://mp.weixin.qq.com/s/RKGJOtRMjTetTZRIGzqH_Q -webkit-tap-highlight-color ## 一 hybrid 混合开发 - 半 Native 半 web 在原生 APP 开发中，webview 是可以加载html文件的一个组件。（Android中是webview,iOS7以下有UIWebview,7以上有WKWebview） ### JSBridge 技术 - Native 和 非 Native 消息通信的通道 双向通信的通道: 1. JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。 2. Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等  #### 1. javascript 调用 Native 的方式 1. window.postBridgeMessage(message); -- 注入 API 2. url scheme #### 2. Native 调用 javascript 的方式 JavaScript 的方法挂在全局的 window 上 ## Native 地图与 web 融合技术的应用于实践 * 点击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元素  **框架图介绍**  **手势分发层** Native端，在启动APP时，设置三层内容，最上层是手势触摸事件接收层，中间是WebView层（背景设置透明），最下层是Native地图层（如腾讯地图SDK），用数组记录当前热区数据，当手势分发层有事件发生时，通过Touch事件获取手指位置信息，遍历热区数组判断手指位置是否与热区的矩形相交，如相交则将消息分发给WebView层，否则分发给Native层。 **webview层** 1. 提供设置热区的JS接口，业务可通过此接口设置屏幕中的热区 2. 封装JS形式地图接口，为上层业务提供地图服务，该层借助JSBridge通讯桥实现H5与Native层的异步通讯。  ### Dom元素热区数据的自动维护技术 - 自定义指令实现* 在添加元素时，Vue指令的bind钩子函数被触发，此时计算出弹窗元素的大小和位置：使用getBoundingClientRect函数可以获取到元素的left、top、width、height等信息，将新的热区数据通过setHotRegion函数更新到手势分发层。 * 在移除元素时，unbind钩子函数被触发，此时将热区数据移除，这样便实现了热区的自动添加删除功能了。 * 使用指令技术很简捷，编写好指令的逻辑后注册到全局，在需要动态更新热区的元素上设置个v-hotRegion标签就可以了。 ## 项目中坐标上报方案 1. 首次初始化上报一次坐标 上报坐标调用 Native 提供的方法 2. 开始监听指定容器内dom的变化 new MutationObserver 3. 监听屏幕旋转变化，resize变化 重新上报坐标