手机百度前端工程化之路

本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从 localstorage缓存和版本号管理模块化静态资源渲染方式 三个方面总结手机百度前端一年内沉淀的解决方案,希望对大家移动开发有所帮助。

一年前存在的问题

可能因为之前项目节奏紧,人力不足原因,一部分phper承担了前端的工作,于是暴漏了一些问题。

粗暴的一刀切

从第一次在厂子写代码开始,就被前辈告诉移动页面,所以的静态资源都要内嵌,即写在scriptstyle内,这样的好处是,网络情况不好的时候,减少http请求。因为2G等网络不稳定的情况下,多开一个http请求,对手机资源消耗是巨大的,比如我们在手机信号不好的地方,访问网络,耗电量会急剧增高。

但是随着3G,甚至4G的普及,实际统计显示,手机百度上2G用户不到30%,所以上面提到的这种一刀切的方案是不妥的。

不成规矩

第二个问题是没有规范和模块化的问题。大家写码都是 意识流 ,除了都是用zepto.js之外,没有沉淀下模块。碰到以前写过的代码,都是ctrl+c + ctrl+v。这种粗放的方式,虽然可以暂时解决问题,但是当出现之前的一段代码不能满足需求的时候(比如新版app发布,之前的代码需要做兼容和升级),需要遍历所有的代码,挨个修改,麻烦!

iOS使用schema协议调起APP

在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行。

在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议。

Smart App Banner

即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具体可以看下开发文档:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

今天Smart APP Banner不是我们的主角,我们说的是schema

使用schema URL来打开iOS APP

schema类似自定义url协议,我们可以通过自定义的协议来打开自己的应用,形如:

myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 还有短信也是类似的
sms://

如果要打开一个app,最简单的方式是通过一个链接,如我们在html中这样写:

<a href="myapplink://">打开我的app</a>

当用户点击链接的时候就可以打开对应的app。

绑定click事件

但是实际中我们更多的情况是绑定事件,比如做个弹层啥的,不能一味的用a标签啊,所以可以通过两种方式来解决:location.hrefiframe

  • location.href,简单,但是容易出现问题,比如没有安装可能会跳转啦。
  • iframe,比较复杂,需要创建一个iframe,然后把schema扔给src

iframe的方式是开发中常用的,但是他也有一些问题:

  • 我们没很好的方式来判断是否打开了app
  • 会引起history变化
  • 因为引起history变化,所以一些webview会有问题,比如:我查查,打开一个页面,如果有iframe,选择在safari中打开,实际打开的是iframe的页面
  • 如果页面暴漏给了android系统,那么也会出现页面打不开,之类的问题
  • 如果没有app,调起不成功,ios的safari会自己弹出一个对话框:打不开网址之类的提示

所以现在的问题是:如何知道iframe已经打开了某个app,即解决iframe打开app回调