基于GMU开发单页应用

最近做的项目,H5单页应用,嵌入第三方IOS和Android客户端。
时间紧迫,开发时间一周,无暇筛选框架,大概对比了jQuery Mobile、Bootstrap、Amaze UI、AngularJS、Zepto等。经过对比项目环境,最终决定基于百度的GMU框架,创建单页应用。

吐槽一下,GMU似乎很久没有更新了。官网最新版本是2.1.1,更新时间2013.10.24。github最后一次更新是3个月前,但非重要更新。选中它的原因,只是看重百度的用户群体设备花样百出,性能参差不齐,其兼容性相对较好。

第一次开发H5单页应用,过程中遇到几个问题,特此记录一下。
1.设计稿局限于单一平台。
视觉设计师,根本没有考虑多种设备和分辨率下的显示效果。设计的很多交互效果,在实现时非常麻烦,花费了大量时间调整兼容性。
2.字体大小在不同设备上显示有差异。
参考GMU的demo,使用百分比来控制font-size。在PC端chrome中模拟,没任何问题。但放入H5容器(如微信)后,字体大小与PC端chrome中相差甚远。最终还是通过像素数来指定字体大小。
3.GMU的Toolbar太“智能”。
Toolbar会自动对指定的DOM内容进行包装,以<h>标签作为标题,<h>之前的DOM包装进左侧菜单,<h>之后的DOM包装进右侧菜单。挺人性化吧,但问题在于它没有提供禁用功能。原本希望使用此方式,将按钮区域固定至屏幕最下方,现在只能作罢。
4.H5容器中渲染顺序错误。
使用iScroll处理单页,根据其只滚动页内第一个子元素的原理,将按钮区域作为页内第二个子元素,通过position:absolute;将按钮区域固定在屏幕最下方。
很奇怪的是,如果进入应用后直接显示该页,按钮区域位置正常。如果进入应用后通过切换显示该页,按钮区域会被页内第一个子元素的内容覆盖。其表现类似于被设置了z-index属性,safari完全重现,chrome偶尔重现。
更奇怪的是,如果将屏幕方向切换一下一切又正常了,怀疑是切换方向导致页面重新渲染。
尝试多种方式解决,均告失败。最终使用stackoverflow中提供的方案解决。

发表评论

电子邮件地址不会被公开。 必填项已用*标注