最近几个月事情太多了，有些东西什么时候想起了再结一下吧。
事情再多，生活也还是要继续的。
最近在做一些小活动，有所收获，以后每完成一个小任务，都小结一下。
这是一个微信上的发红包推广活动，以前没有移动端的经验着实碰壁不少。这里得感谢凯明和小胖~(≧▽≦)/~啦
一开始同样的，从美工拿到图，一看图什么长宽，间距，大小之类的老芮都已经标好了，诶，还挺好啊，不用再自己量了，然后呢就是按照给的标注进行排版布局了，比如，一开始给的图是这样的，然后呢，就一个div一个div的写下来，该有的间距呢就margin-top一下，三个页面勉强依葫芦画瓢的弄出来了，看起来有模有样，可后来才知道，既然是做手机端，那手机肯定有不同的尺寸啊，不同的分辨率啊，这就造成同一个页面在不同设备上看起来不同，给的图的那些标记实际上是按照iphone6来做的。
于是切换到iphone5和iphone6 Plus下看起来各种错位，那怎么弄呢？用媒体查询吧，给不同的尺寸的设备匹配相应的样式，这就意味着同一个样式可能为了适配三个不同的机型就要写三个样式，似乎工作量大了点，不过好歹也达到了效果。后来又发现，作为一个红包页面，也就一个页面啊，当别人进来以后不会说还要有上下滚动再去查看有没有别的什么东西，最好就一个页面，最主要的抢红包在最显眼的位置。
那怎么才能让不同屏幕大小里的同一个页面都没有滚动呢，这又得把全局高度设为100%，把间距和宽度什么的都用百分比来表示，于是又改改改。但因为是每个小块之间操作导致后来改起来特别麻烦，也不好调试，得让某些属于一个块里的都用一个div包含起来，后来又用一个div将几个小块包含为一个整块，在这个基础再进行调试可是又发现这样调还是有问题，为什么呢？原来的间距什么的都是在里面的块里面调试的，这样进行调试反而更乱了，需要将这些都删掉，重新对外面的整个块进行操作，这样就方便多了。简单的三个页面却写的乱，改来改去。
界面的上方总是有空行，原来的在手机上得添加一段这个代码：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection">
以上第一行是一个文档兼容模式的定义，Edge模式告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。chrome=1呢就是轻质IE使用Chrome Frame渲染。
第二行是让网页的宽度自适应手机屏幕的宽度，避免有滑动：其中width=device-width:表示宽度是设备屏幕的宽度；minimum-scale=1.0表示最小的缩小比例；maxximum-scale=1.0：表示最大的缩放比例；user-scalbale=no：表示用户是否可以调整缩放比例；还有initial-scale=1.0：表示初始的缩放比例。
第三行用于表明当该HTML页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
开始的时候没有注意有个问题。因为看页面不多便把三个页的css都写在一个里面了，这也是不妥的地方，比如两个页引用了相同的样式，在这个页上改了没有问题了，但是到另外的页就发现样式又乱了，改了这边那边又乱了，所以不同的页面对应相应的文件是很重要的。
如果要对一张图片进行操作，最好不要单独对图片进行操作，用一个div包起来对它外面这层div进行操作是比较好的选择。
微信分享时的遮罩层：对整个body设置width,height都为100%，然后把遮罩层的width和height也都设置为100%，position:fiex;先隐藏，点击时再show，然后对蒙层的任何地方点击触发hide事件
以上大概就是一些HTML和CSS的部分了，再来说说JS部分。移动端使用的库是zepto，类似jQuery，便于对DOM进行操作。
Ajax作为前后台数据交互的技术是必不可少的。
作为微信公众号开发当然少不了诸如朋友圈分享等操作啦，这些调用微信接口就好了。
稍微复杂点的就是抢红包页了，主要红包下面分别有3个人的评论等，这里传几个假数据就行了，当别人进来以后看到抢红包不会说还仔细去看别人的评论什么的吧，哈哈，不过，这假的也得做得像真的一样。也就是给一串数据，然后每次刷新时随机从中选取几个填进去。
这几个随机事件要注意的是同一个头像，同一个名字要对应的是同一个评论，不能说一会看到这个人是这个评论，一会看到这个人是另一个评论，也不能说几个人随机到同一个头像，这不乱套了。不过这也好办，都统一用一个随机数就好了，对生成的随机数进行判断，如果有相等的就继续生成随机数知道不等为止。
至于时间呢，就随机一个当前时间到当前这天凌晨之间的某个时间点
包括这个抢红包活动和别的活动，因为很多地方都涉及从后台取数据的问题，利用Ajax来获取数据这方面还有待提高。
至于安装环境的话，如果安装了node环境但是不知道要用npm安装哪些模块，最简便和推荐的就是把package.json这个json文件拷过来，然后npm install，这样就会直接安装需要的模块了。
为了便于启动服务的话，还要在webstorm中配置一下，点击Run下面的Edit configurations，进入如下界面，这时候不是点击Defaults下的Node.js，要先点击左上角的”+”号，在弹出窗口中选择Node.js(当初是说怎么老是没有起起来服务)，右边的窗口我们来一一看看。
最上面的Name表示启动服务的名字；Node interpreter:这里是指安装的node程序的位置，一般会默认填好你的node安装路径；Node parameters:顾名思义，Node参数，空着就行；Working directory:工作目录，哪一个文件夹是你的项目就填写上；Javascript file:填写你项目依赖的用Javascript写的服务器文件(node就是用javascript写的嘛)；Application parameters:应用参数，前面固定的。后面是项目路径。
在配置完环境后运行时还是会报错，原来是项目中缺少logs文件，需要手动添加一个logs文件
还有一些项目中经常看到的一些文件夹，也说一下都有什么作用。比如这个红包页面的项目结构，conf文件夹主要是起服务的时候需要的一些配置文件，如配置的IP，监听的哪个端口，还有就是是哪个文件要起服务，写在applications下面，开始这里没有写就一直显示can not Get /XXX,logs是一些日志的记录，node_moudules是依赖的node模块，src下面就是我们自己的项目主体了。
有时候只是在于做的东西多了，碰到的问题也多了，自然学会的也就更多了。毕竟，天才型的选手只是少数。
