webApp爬坑之路(1)

最近着手写一个webApp项目,也是开始了爬坑之旅。。。这将会是一个系列的笔记吧,对于我这种菜鸡前端er,记录真的很重要啊!重要啊!重要啊!
直接开始,也是不啰B嗦。
先记录几个mata标签

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

这句的意思是将页面锁定到1.0的比例,且不允许用户强制缩放。
经测试,在我的android4.x的手机中,系统自带的浏览器解析成功,将手机像素值转化成了物理像素值(就是你的手机屏幕实际大小,不是你的分辨率大小!),但是在UC中不成功,原因未明。。。

由于我们的webApp不需要讲数字识别成手机号,所以,禁止之。。。

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

<!-- apple改变顶部状态条的颜色 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

这个我没有水果机,没法测试,大概是真的吧?__!

这个基本问题解决了,我得研究一下使用的库或者框架了。唔~~~~~~~~~~经过我的深思熟虑以及技术探讨,选择使用Zepto作为基础库,reactJS作为模板,嗯嗯,还有一个关于业务的eCharts图表库。

本来想选择一个模块加载器的,结果欣喜的发现eCharts自带了一个AMD规范的加载器(在/echarts/build/source/echarts.js目录下),然后就改装了一下zepto.js让他可以支持AMD加载。。这波漂亮!

//add ADM support
if ( typeof define === "function" && define.amd) {
  define( "Zepto", [], function () { return Zepto; } );
}

zepto大家应该都知道,是一个专门为移动端开发的类似于JQ的库,体积小,加载快。。。
但是我查了网上的资料之后发现了一个坑,zepto一共有14个模块:zepto,event,ajax,form, ie,detect, fx,fx_methods,assets,data,deferred,callbacks,selector,touch,gesture,stack,ios3,但是在官网下载的却只有前面5个模块。。。。差点就把我坑进去了啊,因为我非常需要它的touch模块啊,移动端你懂得。。。具体每个模块的功能大家可以自己看这里reactModules
想要其他的模块,怎么办呢?其实很简单,取github上面下载源码然后自己build,选择自己需要的模块,剔除不需要的,另外附一个zepto-builder的地址,这个可以帮你自动生成需要的代码zepto-builder

其实想一想zepto的这种做法其实很好,不就是我们常说的按需加载么。。。

reactJS我前面有一个文章写过它,很NICE的一个view层的模板,这里有一个论坛是国内react爱好者组织的,可以一看reactJS

因为我也还在学习react,所以关于它的话就在以后说吧,这一篇就到这里,据需研究项目吧。。。。

相关推荐