HTML5+JS，微信平台开发

   【项目概要】

     最近进入了一个新的项目，手机移动端的开发。微信平台，现在是家喻户晓。而自己没想到，这么快，就可以亲身接触到这样一个微信平台开发项目中。 如何使得我们写HTML页面去适应各种手机，这就是在这个项目中，需要我们去做处理的一方面。

   【项目基础】

    HTML，大家都有很长一段时间的接触了，前台页面，一直是比较薄弱和不重视的地方。如果在面试时，让自己手写一段HTML代码，恐怕是难以下笔。而这一次，加入到项目组中，是让我们先从前台页面开始，HTML5+JS，实现手机移动端的开发。

    HTML5，其实，对于我们来说，并不算是一种新的语言。它和HTML之间有着深厚的渊源。如下所述：

    与HTML相比，HTML5具有更多的优点，在保留了html优势的基础上去其糟粕，加入新元素，比如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等，让网站的制作更简单，同时更便于工作人员的维护。

    【项目实战】

    而在了解了HTML5之后，便开始自己着手写前台页面了。

     这一次开发，和以前最大的不同在于：之前我们都是将各种内边距、外边距之类的写成固定值，以适应我们在电脑上的观看。这一次，因为是手机端开发，各种品牌手机的屏幕大小不同，如果将值写成固定值，那么开发出来的页面兼容性效果会很差，难以适应各种主流手机。所以，开发手机端的工作重点核心就在于：如何使得自己编写的代码，适应各种不同类型的移动端。

    至此，我们对手机端的开发也熟悉了不少，下面我将结合着自己的开发经历来说说开发中的那些事。

    刚进入组织，就好比看热闹看新鲜，又不时感叹不可思议，莫名其妙，什么东西都是陌生的，什么东西都是高大上的。手足无措、一脸茫然，很确切地可以形容自己刚进入组织的那一天。但凭借着师姐的精心指导，加上自己之前的调试经验，慢慢上手了的感觉。

    其实，手写了一些代码之后，便慢慢清楚了自己要做的是什么了。就拿自己做的页面来说，看起来很复杂，其实在宏观上控制好每个部分，就很容易实现了。

    如上图所示：我将整个页面划分成了个数不等、大小相等的派单，每个派单也划分为了六个部分，将各个部分的大小进行适当布局，这就使得页面上的整体布局不会乱。整体上布局没问题了，再细化到各个小部分，最终的效果也就可以达到了。

    整个页面下来，HTML代码+JS代码有1000多行，也不全部展示了，下面以上图的第1（文字）+第2（图片）部分为例，让大家看看如何编写代码。

    左边的1部分，每一行都是一个div样式，右边的2部分，放置的是一个img框和一个存放星星的div。

<!-- 左上部分样式设置 -->
<div class="containerLeftUp" style="float:left;">
	<!-- 每行字体样式设置 -->
	<div class="container1-1" style="text-align:left;color;#3e3a39;font-family:PingFangSC-Medium, sans-serif;">派单号：201505068584</div>  
	<div class="container1-2" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">名称型号：格力空调GL/5036</div>
	<div class="container1-3" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">保养内容：空调清洗</div>
	<div class="container1-4" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">位置：客厅</div>
	<div class="container1-5" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">申请时间：2015-5-6  10:16</div>	
<span style="white-space:pre">	</span><!-- 右上部分图片样式设置 -->
	<div class="containerRightUp">
	<!-- 图片框 -->
	<img class="img01" src="img/023.png">		
<!-- 星星图片样式设置 -->
<div>
<img class="img02" src="img/23-1.png" style="float:left">
<img class="img03" src="img/23-1.png" style="float:left;">
<img class="img04" src="img/23-1.png" style="float:left">
<img class="img05" src="img/23-2.png" style="float:left">
<img class="img06" src="img/23-2.png" style="float:left">
</div>			
	</div>
 </div>

在以上HTML代码中，达到的目的是实现页面布局，其中设置一些固定不变的属性，如字体颜色、对齐方式和浮动样式等。对于高度、宽度和边距等需要随手机变化而变化的属性，就需要在js代码中编写。

   部分js代码：

//自适应设置，左上部分DIV
    var len=document.getElementsByClassName("containerLeftUp").length;
	for(i=0;i<len;i++){
		document.getElementsByClassName("containerLeftUp").item(i).style.height=260/1334 * windowHeight + "px";  //设置高度
		document.getElementsByClassName("containerLeftUp").item(i).style.width=470/750 * windowWidth + "px";	//设置宽度
			  }
    //自适应设置，每行字体DIV
   var len =document.getElementsByClassName("container1-1").length;
	for(i=0;i<len;i++){
		document.getElementsByClassName("container1-1").item(i).style.marginTop=30/1334 * windowHeight + "px"; //顶部外边距
		document.getElementsByClassName("container1-1").item(i).style.marginLeft=30/750 * windowWidth + "px";  //左部外边距
		document.getElementsByClassName("container1-1").item(i).style.fontSize=(32*windowWidth/750)+"px";//字体大小
			}
    //自适应设置，图片样式设置
    var len =document.getElementsByClassName("img01").length;
	for(i=0;i<len;i++){
		document.getElementsByClassName("img01").item(i).style.marginTop=60/1334 * windowHeight + "px";
		document.getElementsByClassName("img01").item(i).style.height=140/1334 * windowHeight + "px";
		document.getElementsByClassName("img01").item(i).style.marginLeft=8/750 * windowWidth + "px";
			}			
    var len =document.getElementsByClassName("img02").length;
	for(i=0;i<len;i++){
		document.getElementsByClassName("img02").item(i).style.marginTop=10/1334 * windowHeight + "px";
		document.getElementsByClassName("img02").item(i).style.marginBottom=2/1334 * windowHeight + "px";
		document.getElementsByClassName("img02").item(i).style.height=25/1334 * windowHeight + "px";
		document.getElementsByClassName("img02").item(i).style.width=25/1334 * windowHeight + "px";
			 }

  依据此方法，将每个DIV都添加对应的自适应设置，就可以较好地实现页面布局适应手机屏幕了。但手机品牌不同，对代码的解析也是有不同的处理结果，所以为了更好地适应各个品牌的手机，在网上找到了分辨手机品牌的代码，根据手机品牌，调用不同的js方法，从而使得所有手机都可以很好地适应了。

辨别手机品牌的js代码：

<script language="javascript">
	window.onload = function () {	
	var u = navigator.userAgent;
		if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
		alert("安卓手机");
		} else if (u.indexOf('iPhone') > -1) {//苹果手机
		alert("苹果手机");
		} else 
		alert("安卓手机");//不能辨别的，默认为安卓手机
		}
    </script>  

【项目感悟】

    1.全局认识是第一位。拿到一个页面，首先要考虑的就是应该把这个界面分为多少个部分。这样才会使得整体布局不会乱。

2. 精益求精。做一个页面，花的时间真的很多，因为UI是个特别细致的工作，他们的要求很高，也许我们开发人员觉得页面已经做的很好，但他们也会觉得有很多不完美的地方。

3. 前端基础知识积累。这一次，在调试整个前端的时候，对以前不熟悉的前台样式属性更加熟悉了，同时，也接触到了很多之前没有接触过的样式设置。

4. 勇于尝试，快速进入状态。刚接触一个新东西的时候，难免会觉得陌生，如何快速进入工作状态，也是对自己的一个考验。我们只有敢于尝试，快速迈出第一步，才会让自己更快地找到得心应手的感觉。