页面嵌入式View

什么是嵌入式View

在前端开发的过程中，会遇到一些业务场景，使用H5展示用户体验不好，比如地图、股票等内容，在大部分手机上存在拖动不流畅等问题。

针对这些痛点问题，嵌入式View提供了一套Native View嵌入H5页面的解决方案，并为应用层提供了方便灵活的定制方式，让Web应用达到Native同样的用户体验。

为什么选择嵌入式View

关于H5 native化的技术，目前已经有比较流行的Weex、React Native等技术，为什么还要使用嵌入式View的方案呢？

相比Weex等技术，嵌入式View有以下几个优点：

1. 非常轻量级。集成于内核中，不需要额外适配，而接入Weex等技术，至少都需要增加几百K的size；
2. 使用Html标准语法。前端开发没有学习成本，而且线上已经部署的普通页面可以简单快速修改为支持嵌入式View的页面；
3. 安全性高。Weex等技术，因为暴露太多底层功能，可能存在安全性问题，而嵌入式View提供给前端的接口功能单一，安全性较好；
4. H5与Native View自然交互。前端页面可以通过内核扩展的js接口、事件、属性等特性与Native View进行自然交互；
5. Native View完美融入WebView。体验(滚屏, 缩放等)上感知不到哪些区域是native view。

如何利用嵌入式View进行开发

前端页面写法：

“嵌入式View元素”的定义：

带有 type == application/view 属性的 object 元素。例如下面的object标签，即为一个嵌入式View元素：

<object id="map" type="application/view" width="200" height="100">
    <param id="param" name="data" value="origin value"/>
</object>

以上的HTML页面，如果在支持嵌入式View的浏览器，则会创建一个和object标签同样大小及位置的Native View，覆盖在object标签上面，对于普通浏览器，则按照普通object标签进行展示。页面展示效果对比：

同样的页面，不同浏览器展示效果如下：

图1：不支持EmbedView浏览器展示效果图2：支持EmbedView浏览器展示效果

对于不支持EmbedView的浏览器，展示效果如图1所示，黄色区域（object元素background color 为 yellow）即为object元素；

对于支持EmbedView的浏览器，展示效果如图2所示，黑色区域是一个覆盖于WebView上方的Android TextView，它的大小与位置跟object标签保持一致，并且当页面通过js改变object标签的位置与大小时，Native VIew可以跟随变化。

如何实现嵌入式View效果：

图2的Demo实现非常简单，只要做3件事：

1. 前端页面放置一个object标签，并且type="application/view" ，例如上面的HTML示例;
2. 浏览器应用层增加一个TestEmbedView类，实现 WebView SDK 提供的 IEmbedView 接口，在 IEmbedView.getView() 方法中返回想要嵌入页面的 View。
3. 应用层实现 WebView SDK 提供的 BrowserClient. getEmbedView() 接口，返回实例化的 IEmbedView 对象。

嵌入式View相关能力与接口

WebView SDK 相关类与方法：

前端能力增强：