1 requestHybrid({ 2 tagname: 'showCitilist', 3 param: { 4 data: [ 5 {name: '北京'}, {name: '上海'} ] 8 }, 9 callback: function(item) { 10 alert(item.name) 11 } 12 });

这里Native弹出了一个弹出层，装载的是Native的UI，点击某一个城市，执行的是H5的回调，表面逻辑上这个Native的UI应该是基于Webview的，事实上这个NativeUI可能是一个单例，其实这个实现还比较简单，因为他的点击交互比较单一，Native可以很容易的将数据获得再回调H5的方法，这里与Header上的点击事件处理一致，比较复杂的是Native新开了一个弹出层而他是一个Webview，装载我们自己的H5代码，这个便复杂了。

请考虑以下业务场景，这次依旧是使用Native弹出层，但是这里的弹出层是一个Webview组件，里面的内容需要我们自定义，调用可能是这样的：

1 requestHybrid({ 2 tagname: 'showpagelayer', 3 param: { 4 html: '<input type="text" ><input type="button" >', 5 events: { 6 'click #btn': function() { 7 var v = $('#test').val(); } 13 }, 14 } 15 });

这个代码之所以可以这样写，是因为我们对这个页面展示的Dom结构与事件有控制力，但是如果这个页面如果压根不是我写的，而且上面那种代码的应用场景基本为0，我们真实的使用场景往往是直接载入一个页面，比如这个例子：

1 requestHybrid({ 2 tagname: 'showpagelayer', 3 param: { 4 src: 'http://domain.com/webapp/common/city.html', 5 } 6 });

如果是以url载入一个页面的话，我们对页面的控制力就没有了，除非有一个规则让我们可以对页面的某些方法进行重写，比如依赖一个框架：

一个好的Hybrid平台除了基础实现外，还需要一配套使用前端框架，框架需要最大限度的保证业务代码一致，提升业务的开发效率

我们这里为了方便大家理解做简单实现即可。首先，我们约定，这类可以用弹出层打开的页面一定是具备某些“公共”特性的页面，比如：

① 城市列表页

② 常用联系人选择页

③ XX类型选择页

切记，这类页面一定是公共业务，不会包含过于业务化的东西，否则是不适用的，那种页面还是以url传参处理吧。

然后，我们对这类页面的处理也仅限于回调的处理，不会影响到他们本身的渲染，比如是这样的页面：

(){ ).val(); 7 clickAction(val) 8 }); clickAction (val) { 11 alert(val) 12 };

而我们真实的调用是这样的：

1 requestHybrid({ 2 tagname: 'showpageview', 3 param: { 4 src: 'http://sandbox.runjs.cn/show/imbacaz7', 5 callbacks: { clickAction: function(val) { } 12 } 13 } 14 });

webview载入结束后，我们会使用我们自己定义的方法将原来页面的方法重写掉，比如使用JavaScriptCore重写掉。当然，真实的使用场景不会这么简单，具体的业务逻辑就看依赖框架（blade）的实现吧。

PS：这里的实现过于复杂，不太实用，各位暂时还是保持url跳转通信吧，这里待研究

前面我们设置header时，用到了在线静态资源，那里直接是使用的http的资源，我们在实际业务中因为知道自己的图标在什么位置所以代码可能是这样的：

1 { 2 tagname: 'search', icon: './static/hybrid/icon-search.png', 5 callback: function () { 6 alert('读取线上资源') 7 } 8 }

根据之前的规划，Native中如果存在静态资源，也是按频道划分的：

webapp //根目录 ├─flight ├─hotel //酒店频道 │ │ index.html //业务入口html资源，如果不是单页应用会有多个入口 │ │ main.js //业务所有js资源打包 │ │ │ └─static //静态样式资源 │ ├─css │ ├─hybrid //存储业务定制化类Native Header图标 │ └─images ├─libs │ libs.js //框架所有js资源打包 │ └─static //框架静态资源样式文件 ├─css └─images

我们开始考虑webview读取Native静态资源时候想了几套方案，比如：

icon: 'hotel/icon.png'