GO比分开发总结

Heero.Luo发表于12年前,已被查看1802次

最近一直在忙公司的第一款类客户端产品——GO比分

GO比分

网页具有强大的跨平台特性,HTML+CSS比任何其他界面制作方式都要强大和灵活。然而,网页无法实现Web范围外的一些功能(例如手机通知栏、铃声、震动等)。因此,还需要通过一个代理去调用,也就是客户端。所谓类客户端,就是穿了客户端这件“马甲”的网页

经过一个多月的努力,GO 比分的Android版在上周正式登陆安卓电子市场,iPhone版也即将推出。趁着这几天清明假期,先来总结下这段时间的开发经验。另外,本人第一次做移动Web开发,如有错误之处,欢迎指正;如有更好的解决方案,欢迎指教。

禁止页面缩放

这个很简单了,Google一下可以搜出一框:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />

禁止手机号识别

webkit手机浏览器会自动把页面上的数字识别为电话号码,一点这些数字,就进入打电话的界面了。要禁止手机号识别,可以加上这段meta:

<meta name="format-detection" content="telephone=no" />

这段meta是在iPhone的开发资料里面找出来的,对Android自带的浏览器也有效,反倒对Safari没效。针对Safari的解决方案还在寻找中……

position: fixed

从上面的界面截图中可以看到,整个软件的顶部和底部是固定的,中间是可以滚动的内容。那么,按照常规的思路,我们可以把顶部和底部的position样式设为fixed。悲剧的是,目前大部分的webkit手机浏览器不支持fixed,包括iPhone中的Safari。于是,顶部和底部只有放到客户端了。

触屏事件

手机上没有鼠标,所以什么mouseover、mouseup、mousedown全部出局,但是click还在。触屏的事件则有三个,分别是touchstart、touchmove和touchend。click在touchstart之后、touchend之前触发,一旦touchstart之后有touchmove的动作,就不会触发click。

锚点存储

Web是无状态的,特别是由javascript控制的界面状态,一刷新就会丢失。比如在上图中,在日期栏跳到下一天,要想在刷新之后,仍然保持在该天,就得把这个状态存起来。按照常规思路,可以通过Cookie来存,但是Cookie会随着http请求发送,无形中增加了流量。于是,我们采取了锚点存储方案。具体实现是,把数据用键值对方式存储在一个Object中,通过JSON.stringify序列化后添加到锚点。例如:

index.html#{"date"%3A1301846400000}

重新载入页面后,通过JSON.parse反序列化锚点中的数据,就可以取得刷新前的日期。

多语言

在开发初期,我们就确定了目标人群以外国用户为主,这就必须做多语言了。

首先,把语言项写成JSON结构,根据不同的语言存储在不同的js文件中。比如:

{
  "basketball" : "Basketball",
  "football" : "Football"
}
{
  "basketball" : "篮球",
  "football" : "足球"
}

在显示多语言文字的地方,通过一个HTML5的自定义属性data-lang来识别,例如:

<span data-lang="football"></span>
<span data-lang="basketball"></span>

然后,通过Cookie项lang存取当前语言。这里使用Cookie的原因是,后端也要通过识别这个值去输出相应语言的数据。获取到当前语言后,通过AJAX去读取对应语言的js文件,并反序列化为一个Lang对象。

最后,通过一段Js程序把文本写入:

$("[data-lang]").each(function(){
  var lang = Lang[ this.getAttribute("data-lang") ];
  if (lang != null) {
    if ("INPUT" === this.nodeName || "TEXTAREA" === this.nodeName) {
      this.value = lang;
    } else {
      this.innerHTML = lang;
    }
  }
});

(题外话,在美国,Football指的是橄榄球,Soccer才是足球。因为这个问题,又折腾了一番)

HTML5 缓存——Cache manifest

Cache manifest是一种非常智能的缓存方式,它通过一个配置文件来记录要缓存的目标,一旦这个配置文件被更改,原来的缓存就会失效。这听起来非常美好,但是实际应用的时候却有不少问题。

  1. 只要配置文件中有一丁点错误,整个文件就无法识别、无法更新,这时必须清除浏览器缓存。
  2. 虽然网上很多资料都说Cache manifest支持目录,但是经我实测证明,一旦在配置文件中写了目录,整个文件就无法识别了。如果要缓存的文件很多,难道要逐个去写?

 

看完这篇文章后,你或许会察觉到一件事,对的,我又回到前端来了。

评论 (12条)

发表评论

(必填)

(选填,不公开)

(选填,不公开)

(必填)