HTML5技术

【开源】浅谈Hybrid技术的设计与实现 - 叶小钗(6)

字号+ 作者:H5之家 来源:H5之家 2015-11-03 08:07 我要评论( )

以网页的方式访问,账号登录与否由是否带有秘钥cookie决定(这时并不能保证秘钥的有效性),因为Native不关注业务实现,而每次载入都有可能是登录成功跳回来的结果,所以每次载入后都需要关注秘钥cookie变化,以做

以网页的方式访问,账号登录与否由是否带有秘钥cookie决定(这时并不能保证秘钥的有效性),因为Native不关注业务实现,而每次载入都有可能是登录成功跳回来的结果,所以每次载入后都需要关注秘钥cookie变化,以做到登录态数据一致性。

以file的方式访问内嵌资源的话,因为API请求控制方为Native,所以鉴权的工作完全由Native完成,接口访问如果没有登录便弹出Native级别登录框引导登录即可,每次访问webview将账号信息种入到webview中,这里有个矛盾点是Native种入webview的时机,因为有可能是网页注销的情况,所以这里的逻辑是:

① webview载入结束

② Native检测webview是否包含账号cookie信息

③ 如果不包含则种入cookie,如果包含则检测与Native账号信息是否相同,不同则替换自身

④ 如果检测到跳到了注销账户的页面,则需要清理自身账号信息

如果登录不统一会就会出现上述复杂的逻辑,所以真实情况下我们会对登录接口收口。

简单化账号接口

平台层面觉得上述操作过于复杂,便强制要求在Hybrid容器中只能使用Native接口进行登录和登出,前端框架在底层做适配,保证上层业务的透明,这样情况会简单很多:

① 使用Native代理做请求接口,如果没有登录直接Native层唤起登录框

② 直连方式使用ajax请求接口,如果没有登录则在底层唤起登录框(需要前端框架支持)

简单的登录登出接口实现:

无论成功与否皆会关闭登录框 3 参数包括: 4 success 登录成功的回调 5 error 登录失败的回调 6 url 如果没有设置success,或者success执行后没有返回true,则默认跳往此url HybridUI.Login = function (opts) { 9 }; requestHybrid({ 12 tagname: 'login', 13 param: { 14 success: function () { }, 15 error: function () { }, 16 url: '...' 17 } 18 }); HybridUI.logout = function () { 21 };

账号信息获取

在实际的业务开发中,判断用户是否登录、获取用户基本信息的需求比比皆是,所以这里必须保证Hybrid开发模式与H5开发模式保持统一,否则需要在业务代码中做很多无谓的判断,我们在前端框架会封装一个User模块,主要接口包括:

1 var User = {}; 2 User.isLogin = function () { }; 3 User.getInfo = function () { };

这个代码的底层实现分为前端实现,Native实现,首先是前端的做法是:

当前端页面载入后,会做一次异步请求,请求用户相关数据,如果是登录状态便能获取数据存于localstorage中,这里一定不能存取敏感信息

前端使用localstorage的话需要考虑极端情况下使用内存变量的方式替换localstorage的实现,否则会出现不可使用的情况,而后续的访问皆是使用localstorage中的数据做判断依据,以下情况需要清理localstorage的账号数据:

① 系统登出

② 访问接口提示需要登录

③ 调用登录接口

这种模式多用于单页应用,非单页应用一般会在每次刷新页面先清空账号信息再异步拉取,但是如果当前页面马上就需要判断用户登录数据的话,便不可靠了;处于Hybrid容器中时,因为Native本身就保存了用户信息,封装的接口直接由Native获取即可,这块比较靠谱。

Hybrid的资源 目录结构

Hybrid技术既然是将静态资源存于Native,那么就需要目录设计,经过之前的经验,目录结构一般以2层目录划分:

如果我们有两个频道酒店与机票,那么目录结构是这样的:

├─flight │ │ index.html │ │ main.js │ │ │ ├─css │ └─images 11 ├─libs 14 └─static 15 ├─css 16 └─images

最初设计的forward跳转中的topage参数规则是:频道/具体页面=>channel/page,其余资源会由index.html这个入口文件带出。

增量机制

真实的增量机制需要服务器端的配合,我这里只能简单描述,Native端会有维护一个版本映射表:

{ flight: 1.0.0, hotel: 1.0.0, libs: 1.0.0, static: 1.0.0 }

这个映射表是每次大版本APP发布时由服务器端生成的,如果酒店频道需要在线做增量发布的话,会打包一个与线上一致的文件目录,走发布平台发布,会在数据库中形成一条记录:

channel ver md5

flight 1.0.0 1245355335

hotel 1.0.1 455ettdggd

 

 

 

 

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

相关文章
  • C# 超高速高性能写日志 代码开源 - Emrys5

    C# 超高速高性能写日志 代码开源 - Emrys5

    2017-04-12 12:10

  • 车大棒浅谈jQuery源码(二) - 车大棒

    车大棒浅谈jQuery源码(二) - 车大棒

    2017-04-02 10:07

  • 开源 免费使用 打包下载自行部署 :升讯威 周报系统 - sheng.chao

    开源 免费使用 打包下载自行部署 :升讯威 周报系统 - sheng.chao

    2017-03-28 13:00

  • 期待微软平台即服务技术Service Fabric 开源 - 张善友

    期待微软平台即服务技术Service Fabric 开源 - 张善友

    2017-03-27 18:00

网友点评
m