HTML5技术

浅谈Hybrid技术的设计与实现第二弹 - 叶小钗(3)

字号+ 作者:H5之家 来源:H5之家 2016-06-03 12:00 我要评论( )

之前Native是没有能力将具体API方法注入给H5,所以我们使用唯一的方法传递tagname给Native,Native底层会使用类似反射的方式执行他的逻辑,这个tagname可以理解为方法名,而现在Native是有能力为前端注入所有需要的

之前Native是没有能力将具体API方法注入给H5,所以我们使用唯一的方法传递tagname给Native,Native底层会使用类似反射的方式执行他的逻辑,这个tagname可以理解为方法名,而现在Native是有能力为前端注入所有需要的方法了,比如:

意思是之前要根据url schema然后native捕捉请求后,获取tagname字符串,再映射到具体NativeAPI,而现在Native已经有能力将这些Native API建立一个映射函数,注入给H5,所以H5可以直接调用这些方法了,实际的例子是:

requestHybrid({ 3 tagname: 'getAdress', 4 param: { 5 param: 'param' 6 }, 7 callback: function(data){} 8 }); hybrid.getAdress({ 12 param: { 13 param: 'param' 14 }, 15 callback: function(data){} 16 });

这里可以各位需要产生一个思考,方案一与方案二到底选哪个?这个时候就要多考虑框架的扩展性了,一旦有机会“收口”的都要考虑 “收口”,我们对某一类方法应该有统一的收口的地方,以便处理我们一些公共的逻辑,比如:

① 前端要对每个接口调用的次数打点

② 前端要对参数做统一处理

③ 我们突然要在底层改变与APP桥接的方式,不能走JavaScriptCore了(我们就实际遇到了这个问题)

④ 前端要为Native返回的错误码做统一封装

......

一个比较好的交互事实上是这样的,请求的时候要通过一个地方的处理,回调的时候也需要通过一个地方的处理,而这个地方便是我们能统一把关与控制的地方了,正如我们对ajax的收口,对settimeout的收口是一个道理:

跳转

无论什么系统,一个最重要的功能就是跳转,跳转设计的好坏很大程度决定你的框架好不好,好的跳转设计可以省下业务很多功夫,对迭代扩展也很有帮助,对于Hybrid来说,跳转可能会有:

① Native跳H5

② H5跳Native

③ H5跳H5(这里还要分内嵌的场景)

④ H5新开Webview打开H5

......

一般来说,Native跳H5事实上是用不着我们关注的,但是有一类Native跳转我们还不得不关注。

入口类跳转

所谓入口类跳转有以下特点:

① 一个入口往往会跳到一个独立的频道

② 每个独立的入口的实现首页关注不了

③ 频道可能是Native的,也可能是Hybrid的

几个常见的情况是:

 

比如糯米的美食或者携程的酒店,美食是Hybrid的,酒店是Native的,而跳转实现是做到Native上的,需要考虑到他的灵活性,也就是我一次点击想去哪就去哪,这个自然需要数据库的支持。

事实上在这类“入口类”跳转模块,每个模块点击往哪里跳转可能server端会给他一个类似这样的数据结构:

{ 3 topage: 'hotel/index', 4 type: 'native' 5 } { 8 topage: 'https://mdianying.baidu.com', 9 type: 'h5' 10 }

当然,上述只是可能的数据结构,根据之前我们的实现,更有可能是这个样子,直接只是一个URL:

1 requestHybrid({ 2 tagname: 'forward', 3 param: { 4 topage: 'train/index.html', 5 type: 'h5' 6 } 7 }); hybrid://forward?param=%7B%22topage%22%3A%22hotel%2Findex.html%22%2C%22type%22%3A%22h5%22%7D

以这个做法来说,无论是怎么跳转,仍然可以统一将实现封装到forward的实现中。

如果你使用的是JavaScriptCore,URL Schema依旧要保留以处理这类跳转或者外部浏览器打开APP的需求,有时候当一种方案坑的时候才能体现另一种的可贵。

动画约定

Native体验好,其中一个原因就是有过场动画,我们这里约定了四种基本的动画效果:

//默认动画push 左进 requestHybrid({ tagname: 'forward', param: { topage: 'index2', type: 'native' } }); //右出 requestHybrid({ tagname: 'forward', param: { topage: 'index2', type: 'native', animate: 'pop' } }); //从下往上动画,这种关闭的时候会自动从上向下滑出 requestHybrid({ tagname: 'forward', param: { topage: 'index2', type: 'native', animate: 'present' } });

如果没有动画animate参数便设置为none即可。

back

因为要保证H5与Native的特性一致,Native的页面路径事实上也是与浏览器一致的,所以我们只需要保证Native中的back与浏览器中一样,意思是什么都不做......

requestHybrid({ tagname: 'back' });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • .NET插件技术-应用程序热升级 - 把爱延续

    .NET插件技术-应用程序热升级 - 把爱延续

    2017-04-20 12:01

  • 前端开发框架简介:angular和react - 腾讯云技术社区

    前端开发框架简介:angular和react - 腾讯云技术社区

    2017-04-11 18:02

  • 浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    2017-04-07 15:08

  • 面向个人的技术咨询服务 - 思想瞭望者

    面向个人的技术咨询服务 - 思想瞭望者

    2017-04-05 12:07

网友点评
e