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

开发者社区> leanring> 正文

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

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

相关文章
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
3069 0
好程序员技术文档HTML5开发中的javascript闭包
  好程序员技术文档HTML5开发中的javascript闭包,事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率,同时避免对命名空间的污染,最重要的是可以从一个域中取出原本访问不到的变量去使用。
1071 0
为开发者和设计者准备的 HTML5 文件上传教程
本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件上传 HTML5-powered...
644 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4496 0
CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
  CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发。它是开源的,跨平台的,与现代的浏览器和移动设备兼容。CutJS 提供了一个类似 DOM 树的数据模型来编写应用程序,并在内部管理渲染周期,绘制你的应用程序。
841 0
用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。
1517 0
推荐25款很棒的 HTML5 开发框架和开发工具【上篇】
  HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5。HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验。
1007 0
+关注
100
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载