HTML5+JS,微信平台开发-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章