关于响应式毕业论文格式模板范文 与构建基于响应式和微信的移动Web服务相关大学毕业论文范文

《构建基于响应式和微信的移动Web服务》

本文是关于响应式大学毕业论文范文跟微信和响应和移动Web服务方面毕业论文格式模板范文。

杨睿,陈秀清

(徐州医科大学医学信息学院,江苏徐州221000)

摘 要：为了解决如何构建方便、易用的移动Web服务.开发人员通过使用基于弹性布局、响应式图片、媒体查询等新设计理念的响应式网页设计模式与将移动Web服务可以与拥有庞大用户的即时通讯平台相连接.通过与拥有庞大用户的即时通讯平台相连接可以构建出方便、易用的移动Web服务,另外响应式网页设计可以有效解决如何只使用一种页面就能够适应各种不同分辨率的移动设备.

关键词：响应式网页设计；微信平台；移动Web服务

中图分类号：G434

文献标识码：A文章编号：16727800(2018)01008303

收稿日期：20171107

基金项目：徐州医科大学博士后基金项目(183822,53120225)；徐州医科大学优秀人才引进项目(D2016006,53591506)；江苏省高等学校大学生实践创新训练计划项目(20161031308H,201610313043Y)；江苏省高校自然科学研究面上项目(16KJB180028)；国家自然科学基金重大国际合作项目(81320108026)；江苏省“六大人才高峰”科研项目(2014WLW023)；江苏省现代教育技术研究2017年度立项课题(2017R54844；2017R57185)

作者简介：杨睿(1995),男,江苏连云港人,徐州医科大学医学信息学院本科生,研究方向为医学信息；陈秀清(1982),女,江苏徐州人,博士,徐州医科大学医学信息学院讲师,研究方向为信息安全.本文通讯作者为陈秀清.

在移动互联网之前,PC端用户作为网页的唯一用户,很多网页设计师倾向于使用固定的页面宽度(如1280×600(px))来尽可能保证网页在不同分辨率的PC屏幕内,得到一致的体验.但时至今日,移动互联网的快速发展,各

式各样的移动设备层出不穷,原有的网页设计方式越来越不合时宜,如果仍采用传统的网页设计方式必然会导致移动端访问和PC端访问时存在较大差别的体验效果.于是,如何才能让一个网页在移动设备上呈现同PC端相同体验效果,成为网站开发人员不得不面对的又一个难题.这时候,Ethan Marcotte为所有网页设计者带来了一种全新的网页设计模式——“响应式网页设计”.建立在响应式网页设计的基础上,便打开了移动Web服务的大门,便可以把原有的形形色色的Web形式的服务在移动设备上友好地提供出来,也为设计新型的Web服务呈现方式提供了可能.在此,以微信平台为例,构建基于响应式网页设计与微信平台的移动Web服务［1］.

1解决服务的呈现——构建响应式网页

1.1响应式网页的概念

Ethan Marcotte［2］在2010年的一篇文章中提出了响应式网页设计的概念.其概念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.说得简单点,同一个页面应该有能力对各种不同分辨率的屏幕自动做出响应及调整,可以适应几乎所有的不同分辨率的屏幕［3］.更深入的说,对于响应式网页设计,更像是一种对于网页设计的全新思维模式,而不是仅仅关于网页元素的自我调整适应等.

第1期杨睿,陈秀清：构建基于响应式与微信的移动Web服务

杨睿,陈秀清：构建基于响应式与微信的移动Web服务第1期

1.2响应式网页的设计

流式布局、响应式图片、媒体查询和viewport属性组成了响应式网页设计的关键技术,使用基于HTML5+CSS3的设计来实现一个页面对多种不同分辨率屏幕的兼容.

1.2.1流式布局

传统的页面设计采用固定尺寸,当用户的浏览屏幕变小时,就需要移动水平滚动条才能看全页面的所有内容.所以,页面需要采用弹性设计来自动响应屏幕的变化和调整页面布局.

(1)百分比布局.实现页面的弹性布局,就需要将元素的固定尺寸(px)转换为以“%”为单位的相对尺寸.这样页面便能对不同尺寸的设备做出向应和调整页面布局.Ethan MarcoRe提供了一个简易的固定尺寸与相对尺寸的转换公式：目标元素宽度÷父级元素宽度等于百分比宽度［4］.比如：

Div#sub_n{width:60%}那么div#sub_n的宽度就是其父级元素宽度的60％,无论浏览器的大小如何改变,都将不会再出现横向滚动条［5］.

(2)设置元素CSS浮动属性.为了解决缩小窗口后部分内容会被隐藏的问题,必须设置容器CSS浮动属性,来适应流式定位,自动适应宽度的变化.当屏幕宽度不够,一行放不下多个区块时,就会出现双栏布局,当父级元素的宽度小于一定值时,右内容栏会因为空间不够而跑到左内容栏的下面,形成单栏布局,从而防止了内容被隐藏.

1.2.2响应式图片

在网页中图片一般也以px为单位放大或缩小或按原始尺寸显示,但当显示宽度小于图片宽度时,就会出现滚动条.如果图像的单位采用百分比,并且设置图片的max-width属性,这样就可以确保图片随浏览器窗口变大或变小的同时不出现滚动条,而且尽量保证了图片的质量不失真,可以友好的显示出来.CSS样式代码如下：

img{border:none;width:100%;height:100%;max-width:100%}

建立在上述弹性图片的基础上,Filament Group提出了“响应式图片”的思想,解决浏览大图片时,移动端需要消耗大量流量的问题.这时可以考虑使用两种图片,PC上使用分辨率较大的图片,在移动终端上使用分辨率较少的图片,通过jascript脚本来检测屏幕的分辨率,引用不同的css样式,使用不同分辨率的图片.由此可以解决移动端浏览图片需要消耗大量流量的问题［6］.代码如下：

<script language等于“jascript”type等于”text/jascript”>

var iSwidth等于parseInt(screen.width);

var iSheight等于parseInt(screen.height);

if(iSwidth＞等于800||iSheight＞等于600)

{document.getElementsByTagName(“link”)［0］.href等于”css1.Css”;}

else{document.getElementsByTagName(“link”)［0］．href等于”css2.Css”;}

</script>

1.2.3媒体查询

媒体查询的实现主要通过link标签和@media规则,是响应式网页设计的核心部分.它根据不同的查询条件引入不同的样式表,为不同的设备视图渲染页面,达到页面自动调整的目的.

link标签：

link标签是根据查询条件,为不同分辨率的屏幕加载不同的css文件.代码如下：

<link rel等于“stylesheet”type等于”text/css”media等于”screen and(min-width:500px)” href等于"a.css"/>

<link rel等于“stylesheet”type等于”text/css”media等于”screen and(min-width:800px)” href等于"b.css"/>

通过link标签,浏览器分别为min-width:500px的屏幕加载了a.css样式和min-width:800px的屏幕加载了b.css样式,从整体上调整了页面在不同分辨率屏幕下的样式,使页面可以自动响应,调整出友好的界面［7］.

@media规则：

@media规则是指在css3中根据条件加载不同的css选择器,代码如下：

@media screen and(min-width:500px){body{background-image:url(1.jpg);}}

@media screen and(min-width:800px){body{background-image:url(2.jpg);}}

通过@media规则,分别为不同分辨率屏幕的body引入背景图片,从微观上调整了不同分辨率屏幕的页面样式,对link引入的整体样式表做出补充,使页面可以更加灵活的做出响应,调整出友好的界面.

1.2.4viewport属性

至此为止,完成的网页响应式设计,已经可以完美的适应pc端屏幕的变化,但在移动终端浏览器上还存在一个视口的问题,因为移动终端的浏览器默认页面是为宽屏幕设计的,所以会把页面缩小来适应小屏幕,当缩小比例较大时,用户将无法看清楚页面,往往需要放大操作才能显示清楚页面内容.这个时候就必须在meta标签中增加viewport属性,来获取终端设备正确的宽度［8］.代码如下：

<meta name等于"viewport"content 等于"width等于device-width,initial-scale等于1,user-scalable等于0,target-densitydpi等于device-dpi"/>

1.3响应式网页设计总结

通过以上几个方面的介绍,完成的响应式网页基本上可以对大多数的不同分辨率的屏幕自动做出响应与调整,我们的Web服务基本上可以友好的呈现在移动端.如图1所示.

图1响应式网页呈现模式

2利用微信平台解决服务连接问题

在响应式设计模式下,网站在移动端就可以呈现出如APP一样的界面效果,解决了服务提供的界面呈现问题.下面主要探讨利用微信平台解决服务的连接问题.

2.1微信平台的相关介绍

微信平台是腾讯公司于2011年1月21日推出的一款免费的,多平台的通过网络快速发送语音短信、视频、图片和文字、支持多人群聊的即时通讯工具.另外,微信平台还拥有微信公众号,微信小程序等面向公众开放的子服务,拥有微信支付等服务功能［9］.截止2017年,微信用户人数是7亿左右,全球月活跃用户数已达到10亿左右,微信已成为拥有庞大用户数目的即时通讯工具平台.

2.2利用微信平台构建服务

2.2.1微信小程序构建的服务

微信小程序是腾讯公司在2017年1月推出的一个面向公众开放的微信服务,微信用户可以通过微信客户端的小程序功能使用小程序服务.建立的网站是在响应式设计的基础上,便可以在网站设计之前,在微信公众平台申请小程序的开发,通过设计一个简单的跳转页面,便可以将Web服务提供方式从传统的浏览器模式转变为微信平台模式［10］.通过微信客户端的摇一摇、扫一扫、附近的小程序等功能,可以快速推广网站,这样便可以充分利用微信平台的大量用户,为网站赚取大量流量.

2.2.2微信公众号的使用

微信公众号分为订阅号与服务号,是微信平台提供给公众进行推广的一种服务,微信用户可以通过微信客户端的订阅号进行访问公众号.通过微信公众号,可以让用户通过关注公众号的方式来快速推广网站.在公众号上,同样可以设计一个菜单按钮,进行页面的跳转,进入网站,将Web服务提供方式从传统的浏览器模式转变为微信平台模式.另外,还可以在公众号上推送网站的日常更新,方便用户了解网站.

2.3总结

网站通过与微信平台的小程序,公众号相连接,有效解决了服务的连接问题,网站不仅可以完成服务提供方式的转变,而且可以让用户了解网站每天的日常更新.

移动互联网的发展,使得移动端市场得到了快速的发展.移动服务已然成为服务提供商不可忽视的一部分.可以看出,微信平台具有丰富的开发资源,特别是越来越多被开放出给公众的API接口,为进一步的开发移动服务提供了无限可能.

参考文献：

［1］赵书田,刘海姣,孙育,等.响应式Web设计在移动终端的应用［J］.青春岁月,2015(24).

［2］ZELDMAN J, MARCOTTE E. Designing with Web Standards［J］. New Riders,2009.

［3］杨薇.浅谈网页界面设计发展新趋势［J］.电子世界,2014(21):174174.

［4］吴仁玉.基于HTML5的网络备课系统的设计与实现［D］.镇江：江苏大学,2015.

［5］余英龙.基于用户体验的移动学习系统研究——以重庆红岩革命历史博物馆为例［D］.重庆：西南大学,2014.

［6］李月.基于场景需求的跨屏应用设计目标及方法研究［D］.南京：南京航空航天大学,2013.

［7］赵宇.响应式Web设计档案移动信息服务新方式［J］.档案管理,2016(6):4345.

［8］杨彬.浅谈响应式网页设计［J］.辽宁行政学院学报,2014(5).

［9］杜斌.基于OData与Html5的多终端系统机制研究及应用［D］.重庆：重庆大学,2013.

［10］何彦军.响应式Web开发模式分析［J］.工业,2015(7).

（编辑：徐丽娟）

响应式论文参考资料：

结束语：该文是大学硕士与响应式本科响应式毕业论文开题报告范文和相关优秀学术职称论文参考文献资料，关于免费教你怎么写微信和响应和移动Web服务方面论文范文。