基于HTML5移动电商响应式APP设计-毕业论文

---文档均为word文档，下载后可直接编辑使用亦可打印---
摘要
在这个飞速发展的信息时代，电子支付成为人们日常生活的一部分，而移动电商这个主题依旧在发展。

由于原生APP（应用）的高额成本等原因，更多的公司放眼于H5-APP（应用）的制作上。

H5应用与原生应用相比最大的优势在于跨平台，应用的开发人员无需针对安卓系统或者IOS系统分别进行应用开发，只需要打开目标网页，就能在全平台都适用运行。

这样既减少公司在开发电子商务平台时的成本，也为更好地推广提供了便捷。

本文主要提供了一种基于HTML5的移动电商响应式APP的设计思路，目前单单就HTML5而言就有多种开发软件平台，而数据库的创建以及服务器的选择也是多种多样的。

本文采用了微软的Visual Studio 2013编写网页前台，SQL SERVER 2012创建相应的数据库，再运用IIS配置网页信息，然后利用花生壳开启相应服务器，使网页能用外网登陆。

最后用Hbuilder将目标网页做成APK的形式，可供安卓用户安装并使用。

关键词：HTML5 移动电商响应式APP（应用）
Abstract
In this rapidly developing information age, electronic payment has become a part of people's daily life, and the theme of mobile e-business is still developing. Due to the high cost of native APP (application) and so on, more companies focus on H5-APP (application) production. The most important advantage of H5 application is cross platform. The developer of the application does not need the application and development of the Android system or the IOS system. It only needs to open the target page, and it can be applied in the whole platform.This not only reduces the cost of developing e-commerce platform, but also provides convenience for better promotion.
This paper mainly provides a design idea of mobile e-commerce responsive APP based on HTML5. At present, there are a variety of development software platforms for HTML5 alone, and the creation of database and the selection of servers are also varied. This article uses the Microsoft Visual Studio 2013 to write the web front desk, the SQL SERVER 2012 creates the corresponding database, then uses the IIS to configure the web page information, then uses the peanut shell to open the corresponding server, so that the web page can be landed with the external network. Finally, the target page is made into APK form by HBuilder, which can be installed and used by Android users.
Keywords: HTML5, Mobile e-commerce, Response Mode，Application
前言
在这个飞速发展的信息时代，越来越多的移动上网终端出现在人们的日常生活当中，电子商务也愈加注重移动电商的发展。

而如今的移动终端以安卓系统和IOS系统为主要操作系统，占据各半的移动市场，电商公司则需要分别对两大系统进行APP 应用的开发，才能获取广大市场空间，然而这样的开发成本颇高。

近年来，HTML5的兴起，让移动电商的发展有了新的转机，我们可以通过编写目标网页来替代不同操作系统的APP，用一份开发的成本完成多平台开发的多份成本。

而且界面更新优化等均可在服务器端修改，对用户移动端存储的占据量极小。

本文为基于HTML5的移动电商响应式APP设计提供了一条思路，仅限于本科阶段的入门与了解，若要真正商用化，还需更多考量与努力。

整篇文章主要由以下几个方面来讲述：
第一章介绍了HTML5的发展以及响应式设计的大概。

第二章介绍了网页设计的主要界面以及具体的响应式设计操作。

第三章介绍了数据库的需求分析以及表结构等。

第四章介绍了IIS构建内网，配置网页信息，再利用花生壳连接到外网服务器，最后用HBuilder将目标网页做成APK，使安卓用户能安装使用。

第五章总结了全文，并展望了HTML5的发展，移动电商的发展。

第一章绪论
1.1 研究背景
伴随着第三次工业革命，现如今社会朝着信息时代发展，人们的生活愈加方便，更加数字化。

随着智能手机的普及化，传统的PC机慢慢开始落幕。

随着移动设备的更新与发展，各类适应各个移动设备的APP也应运而生。

近年来，随着塞班系统的没落以及Android和IOS的迅速发展，逐渐形成了两大系统平台占据大片市场的局面。

而在开发APP的时候就要考虑Android和IOS的两种系统的适应情况，对此则需要付出两个团队的开发成本。

而如若采用HTML5的网页开发，则能大大降低所需的开发成本。

近年来，我国互联网终端从以PC端为主转变为移动端占据大头，手机已成为第一大上网终端。

众多传统互联网业务都提供了移动端的服务，实时通信、在线购物、视频观赏、移动支付等等。

移动电商的发展是必然之势，而为了方便各大移动电商的开发，HTML5技术是必不可少的。

HTML5语言相对于java等编程语言的最大优势就是不拘泥于单个系统平台，能够跨平台运行。

APP应用的开发人员无需针对不同的Android或IOS系统平台进行开发。

而在用户方面，无需下载较大的安装包占据手机存储空间，只需要打开一个网址，在任意的系统平台、大部分的浏览器都能成功运行。

除了这些优点，由于不需要用户下载安装，就能向大众推广，传播的效果会比原生app好，相应的推广成本也会低很多。

移动互联网的普及带来的是多种多样移动设备的诞生，广义的有手机、平板电脑等，侠义得讲各手机各平板电脑有着不同的品牌厂商，即使是相同的厂商也有不同的型号等等。

它们的显示屏有着不同的尺寸大小，屏幕有着不同的分辨率。

此时，如果程序开发员为不同尺寸和不同的分辨率分别设计相应的界面，那是相当耗费时间和精力的，承包公司的成本也是巨额的。

那么如何让一个页面自适应不同的访问设备，它的界面布局能够根据移动终端的尺寸和分辨率等自己做出相应的调整，从而使界面更加舒畅，增加用户体验。

这样的工程可以让页面兼容于所有设备的显示屏的不同尺寸、分辨率，也就意味着只需要一次工程设计就能几乎适应市场上大部分机型的尺寸以及分辨率，给大部分用户的体验是良好的。

因此，基于HTML5的响应式Web页面的设计显得尤为重要，既节省了开发人员的时间与精力，也增强了用户的舒适体验。

1.2 国内外现状
说起响应式web的起源，它是由伊桑·马科特（Ethan Marcotte）在2010年5月在“A List Apart”这篇杂志上发表了一篇开创性的文章--《Responsive Web Design》，他对全世界的网页设计师提出了自己的独特的建议，要利用网页所具有的各样特性去设计。

用户使用不同移动设备体验网页效果，设计师要将它当作是同一个网站的不同侧面来对待，不能因为某种尺寸或分辨率而彼此断开设计，这才是网页设计的发展方向。

我们需要将基于各设备参数的技术加入到设计中去，这样才能使设计更加灵活多变去适应不同的设备。

伊桑·马科特向世人证明了一种设计就能在众多不同设备上都能获得各自良好体验的方法的存在。

而且响应式的设计不会突出设计师的绝对控制权，而是能够根据移动终端的尺寸、分辨率自行变化。

2014年，XP操作系统逐渐隐落于历史的潮流，而IT界有着不少的新兴技术的诞生，在编程行业出现了使用HTML5的热潮，最明显的现象就是越来越多的HTML5播放器代替了原来的FLASH播放器。

紧接着便是多种多样的基于HTML5的开发框架出现在世人眼中，响应式设计也渐渐进入各个行业。

HTML5是让应用程序通过浏览器在微信或其他应用端口均可运行操作。

因此它的一大特点就是不拘泥于不同的操作系统。

无论是Android亦或IOS都能做到兼容并完整运行，因此受众不会受制于用户不同的移动设备。

用户在浏览器所访问到的内容与使用原生应用的效果是一致的，不同的是HTML5程序所存储的信息主要是在云服务器，而原生应用存储在移动端占据了一定空间，随着时间的推移，用户会对占据空间量越来越多的原生应用产生一定抗拒性。

因此占据极少量内存的HTML5应用会将更受众多移动端用户欢迎。

随着两种应用慢慢在移动市场铺开无论是用户的使用习惯还是公司的服务模式都将发生巨大的变化。

移动电商的应用近年来已经出现在全世界，无论是国内的淘宝、京东还是国外的亚马孙等等都是电商巨头，移动电商已经很大程度上影响了我们的生活，是各大企业必然进行研讨的话题。

而随着移动电商的模式发展日渐成熟，企业更多得将精力放在减少成本以及更广更及时的宣传上来，在HTML5兴起之后，移动电商的IT巨头们找到了解决方案，决定利用HTML5开发移动电商的应用，而HTML5的网页设计一大主题就是响应式设计。

近年来响应式网页的设计一直是网页设计不断研究探讨的内容，响应式网页设计
主要分为三大技术：媒体查询、流体网络以及弹性视觉媒体。

它能有效解决当今移动互联网时代移动终端多样性的问题。

媒体查询：媒体查询可以让项目程序在不同设备运行时自动识别或查询包括设备品牌、类型、尺寸、分辨率等各项属性，接着就可以决定使用什么样式来适应该设备。

流体网络：在以往的界面设计中常以像素为单位，而在响应式设计中，加入了百分比或者混合百分比，从而使界面更具灵活性，能更好适应各种不同界面。

弹性视觉媒体：随着浏览器界面的大小变化等，界面内承载着信息的文字、图片、视频等的大小能发生相应的变化来适应界面或者布局的变化。

图1-1 响应式设计
第二章 HTML5网页的制作
2.1 需求分析
参考现有各移动电商的界面，粗略测绘出网页的界面以及购买商品等使用模式。

用户在进入网页页面后，需要进行登陆操作，接着用户可以搜索商品信息或者店铺信息则可相应跳转出商品或者商铺。

之后用户可以将商品添加进购物车，再选择结算进行付款下单。

做出合理规划，想好需要实现的功能，使页面能让用户浏览舒适，信息浏览全面，购物愉快、便捷。

利用VS 编写基础网页内容，利用SQL Server 保存相应数据库。

图2-1 运行流程图 2.2 界面设计
2.2.1 主界面设计
电子商务与实体店商务相同的是向所有人展示自己的商品信息，因此主界面即是商品信息页面，而不是登录界面。

否则就限制了自己的市场，得不偿失。

用户 登陆购物网站 浏览商品信息
选择商品数量 提交订单
图2-2 主界面
当用户相中自己中意的商品后，需要登录才能购买
2.2.2 登录界面设计
当用户有中意商品想要购买时需要登录信息，这时用户使用用户名和密码可以完成登录以方便添加购物单信息进入自己的账号。

而如果用户名和密码不匹配则会提示用户信息错误，重新输入或者注册新的账号信息。

图2-3 登录界面
当然更多的新用户可以选择注册，相应的账号和密码就会保存在数据库，可用于登录使用。

2.2.3 商品信息界面设计
在用户点开商品信息后，需要展示价格、库存、商品参数等一系列信息，在这里，
笔者简单添加了库存、颜色、尺寸等信息，包括其他用户评价信息也简陋添加了一些。

图2-4 商品信息界面
除此之外就是对商品数量的购买，用户可以自定义商品数量点击购买即可进入订单也就是购物车页面。

2.2.4 订单界面设计
图2-5 订单界面
在这里用户可以回顾自己所点击购买的东西。

如果不再想购买商品，可以进行删除操作，则该购买信息不会出现在订单界面；如果已经决定好购买了，则可以点击提交订单，进入支付界面。

至此，则基本完成一个购物流程。

2.2 响应式布局
2.2.1 媒体查询
做为响应式设计的第一步我们需要了解当今市场上常用移动设备的类型、屏幕
的尺寸、分辨率等属性信息。

通过调查研究，了解市场上各类型设备的使用分布情况，进而确定它们的包括屏幕属性等的设备信息。

这样网页在不同设备运行时就能自动识别设备类型以及其相应的操作系统、屏幕尺寸、屏幕分辨率等信息，并能使界面能够自适应。

下面列举了部分如今生活中常用的几种机型信息。

表2-1 常用机型信息表
在通常情况下，我们对于界面大小的设计可以分为三种：①开发人员固定界面大小，不允许用户缩放。

①将有内容的界面大小充斥整个屏幕。

①用户可以自行缩放以适应可以看见的界面。

这几种在需求不同时可以有不同的选择，而在响应式设计中我们通常选择：
面对不同设备的型号尺寸，我们在head中可以加入以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
也就是说我们将可视区域设置为当前设备的大小尺寸，允许用户缩放的比例最大值和最小值均为1，即不允许用户自行缩放。

2.2.2 流体网络
当设备更换或者浏览器的大小有所不同的时候，界面元素如何布局才能显示拥有者希望展现的内容并给用户更好的体验，内容的缩放，功能的删减等，如何正确显示。

在确定了不同设备的尺寸和分辨率信息后，要针对这些不同的尺寸和分辨率制作不同的线框原型。

也就是说在不同的尺寸时页面应该如何布局，内容的增减应该怎样合适才能使用户获得最棒的体验。

图2-6 流动布局示例
（1）有关内容的缩放或增减这个方面我们可以采用弹性盒模型进行操作：
①优先显示。

无论哪个是什么界面，用户的第一眼决定了对这个产品的印象，因此当有需要突出显示的商品信息该如何部署，可采用“双飞翼布局”，也就是网页界面分别左中右三列，左右列固定宽度，中间列采用自适应设计：
<div class="container">
<div class="column" id="center_panel"></div>
<div class="column" id="right_panel"></div>
<div class="column" id="left_panel"></div>
</div>
①平行显示。

而像订单页、购物车页则是平行等价的，这些内容需要平行显示，则可以用“栅格布局”来为页面的不同内容设置宽度百分比（数值根据实际运行情况而定）。

当显示屏幕变化时，界面里的各部分内容自动调整，且宽度分布按百分比变化：
@mediaall and(max-width:800px){
.col-1{width:33.33%;}
.col-2{width:50%;}
.col-3{width:83.33%;}
.col-4{width:100%;}
.col-5{width:100%;}
.col-6{width:100%;}
.row.col-2:last-of-type{
width:100%;
}
.row.col-5~.col-1{
width:100%;
}
}
（2）界面元素的定位
①元素定位。

在我们进行响应式设计时由于尺寸的变化而导致的布局变化这一过程中，页面的元素（包括文本、图片、视频等）会发生一定的变位，因此我们需要相对定位的样式来使元素适应布局的变化，元素可以移动适当的位置完成整个页面的变化。

相对定位：当将目标的顶端（top）预留一定像素空间，也就是将目标向下移动该像素的距离。

同样的道理，在目标右边预留一定像素空间，就是将目标向左移动相应的距离。

position:relative{
position:relative;
top :10px;
right:10px;}
①边距参数。

根据实际情况，需要与容器边距保持固定距离的元素，边距给予固定数值。

就像# btnLeft{position: absolute; left:0px;top:185 px; }
需要保持相对位置关系（如居中、偏左和偏右）的元素边距给予百分比，而像企业logo这样重要的标志需要居中显示：
#main.logo{position:absolute;bottom:50%;right: 50%;}
当然百分比边距也要根据元素的大小等进行适当调整，例如元素本身占有一定宽度而又需要保持居中位置时，宽度计算时需要减去元素宽度的一半：位置%=1/2(屏幕% -元素宽度%)。

①浮动。

浮动是水平方向的运动，因此只有左右方向的移动，它使目标左右移动，直到它的外边缘碰到另一个元素的边框便停止移动。

我们以图片的浮动为例：
左浮动：img{float;left;}
右浮动：img{float;right;}
○4对齐
通常为了画面的美感无论是文字还是图片，我们会采用对齐的属性来美化对象。

水平居中对齐：我们要使用margin属性并设置左右外边距为auto自动来对齐。

<style>
.center {
margin: auto;
width: 50%;
}
</style>
左右对齐：使用position属性的absolute绝对定位，下面用左对齐来演示一下。

<style>
.right {
position: absolute;
left: 0px;
width: 500px;
}
</style>
2.2.3 弹性视觉媒体
伴随布局的弹性，文字、图片、图表等视觉媒体作为信息重要的形式也必须有更灵活的方式去适应布局的变化。

注意用户在浏览时候的视觉享受，做好字体、图片、视
频等在不同尺寸的缩放，不断测试直至良好视觉享受。

①文字大小调整
在响应式的文本设计中通常用em代替px作为文字的大小单位，em是一个相对单位，它的大小为文当前文字像素与最大文字像素的比值。

div{font-size:50px;}
文本1{font-size:0.5em}
文本2{font-size:0.2em}
①图片、视频等缩放问题
在确保图片、视频等不超过其最大限值的情况下可以自行缩放。

img {max-width:100%;height:auto;width:auto}
video {max-width:100%;height:auto;width:auto}
object {max-width:100%;height:auto;width:auto}
第三章数据库的创建
3.1 数据库需求分析
数据库作为一个项目重要后台数据组成部分，在任何项目中都占据着举足轻重的地位，因此完善的数据库信息是项目创建过程中很关键的一部分。

而就电子商务系统而言，完整的电子商务设计应该包括客户登录信息，商品信息，后台管理信息等。

客户信息是至关重要的一部分，要能获取主要相关信息而不能让用户没有种侵犯隐私的隐患。

因此用户信息包括姓名（也可以是昵称，并无限制）、电话（需真实以方便信息的确认等）、收货地址（一个或多个，可自行增添）等等。

而商品信息则包括单价、规格、颜色、参数等等根据不同类型的商品有着不同的商品信息。

比如一件衣服的具体信息应包括材质各占比、厂商、颜色、单价等等，而书籍的信息是出版社、版本年份等等。

另外，电子商务一大特点就是客户在购买后可以对该商品进行评价，所有浏览该商品的客户群都能看到；
而后台管理需要对商品的增减等信息做出及时的更新。

3.2 表单结构
在完成需求分析以及构建基本数据结构后，我们则建立名为mvc-business的数据库，并进行建表和链接等工作。

下面列举了部分所用表：
用户注册表（用户注册时所需要填写的信息表）：
表3-1 用户注册信息表
商品信息表：
表3-2 商品信息表
购物车信息表：
表3-3订单信息表
完整的电商数据库表应该更加详细明了，这里仅仅列举部分表单信息，以及商品的部分信息，真正实用时的表单应更加完整。

3.3 数据库与项目的连接
由于笔者使用的是Visual Stdio编写的网页代码，在工具栏里有连接数据库的直接选项，在将数据库分离出来后可直接连接。

接下来，我们说一下通过connection对象来连接数据库：
<connectionStrings>
<add name="conn" connectionString="DataSource=DESKTOP-HEUMPAE; InitialCatalog=mvc-business; User Id=sa; Password=1;"/>
</connectionStrings>
第四章服务器的构建和APP的完成
4.1 IIS配置
IIS的全称是Internet Information Services，它是微软公司提供的互联网服务，其中有Web服务器可以用于网页浏览，它能帮助我们在内网建立属于自己的网站信息，之后要在互联网发布网站信息就容易多了。

由于IIS是Windows系统自带的功能，只要是Windows系统我们可以在在“控制面板”--“程序”--“程序和功能”--“启用或关闭Windows功能”，找到Internet Information Services并全选安装即可。

接下来我们可以在搜索栏找到“管理工具”打开Internet Information Services (IIS)管理器。

这样我们就可以开始配置信息了，首先需要添加网站：
图4-1 新建网站信息
其中网站名称可自行命名，物理路径添加为先前的网页工程，IP地址为本地IP地址：127.0.0.1，主机名可空。

图4-2 浏览所建网站信息
在添加网站后，可点击右侧浏览网站，也可在任意浏览器输入本地IP地址：127.0.0.1进行浏览，在浏览后必定出现一些问题，只需将问题界面内容复制黏贴到百度，大部分都能帮助解决。

在网页代码里我们需要添加数据库的信息，包括数据库服务器的名称，所用数据库的名称，数据库登录用户名称以及数据库登录密码等信息。

在经过一系列问题修改后，直至浏览该网页能达到预期效果。

至此，IIS配置就完成。

4.2 发布网站信息
内网信息配置完成后，我们需要将项目连接到外网服务器上。

有关服务器的选择可以有阿里云、腾讯云等，在笔者多方寻求帮助后找到了一款名为“花生壳”的动态域名软件。

只需要在自己的PC安装并注册获得属于自己的固定域名后，可建立拥有自主权的互联网主机。

图4-3 花生壳界面
在注册账号后，可获得一个简单的域名，此后，我们需要添加内网穿透，将外网和内网结点进行连接。

图4-4 获取外网网址信息
在添加映射后，会有一个外网访问地址。

我们先用IIS配置的IP地址登录内网节点，接下来只需在浏览器内用这个外网访问地址替换原内网地址，刷新网页即可完成外网与内网的连接。

在打开花生壳的前提下，登陆该外网访问地址，可访问目标网页。

4.3 APP生成
这里我们需要用到一款编程软件HBuilder，我们新建一个移动APP项目。

图4-5 修改网址信息
在文件manifest.json中，将页面入口的地址信息换成前面我们获得外网地址，根据个人喜好或要求还能进行其他一些APP界面设置。

完成基础设置后就可以发行该移动APP项目。

图4-6 安装包设置
在这里，我们可以选择IOS系统或者安卓系统的安装包，为了方便，我们就只选择安卓系统的打包成APK的形式，在软件完成打包后，可以下载该APK文件。

再将此APK
文件给安卓用户安装，即可使用。

第五章总结与展望
5.1 课题总结
HTML5是当今发展的一大热门，运用基于HTML5的响应式网页技术能够解决现如今移动端多样性的问题，大大降低了开发商的开发成本，也增强了用户的视觉体验。

HTML5手机应用的另一个优势在于开发人员可以直接在网页上进行修改而用户无需更新应用就能感受到网页信息的变化，减少了用户应用占用移动端内存的烦恼，这样有利于网页的推广。

数据库是一个项目的重要组成部分，而电商这个主题更加需要更加细致、优良的数据库去展现，笔者粗略分析了表单结构，但远达不到企业使用标准。

在真正的电商数据库中，需要更加详细的商品信息展现给客户，数据库的创建尤为重要。

有关网站的发布，笔者使用了windows自带的IIS配置网站信息，但在众多企业的实际应用中很少IIS，因为它的安全脆弱性曾长时间被业内诟病。

而在网络信息时代这样的错误是不被容许的。

IIS在HTTP中存在一定系统漏洞。

，而如果不法分子利用这个漏洞进行攻击，就会导致ISS所在PC端的信息被入侵，整个PC端的内容将被窃取。

服务器是信息安全的关键，企业公司项目服务器可以选择阿里云、腾讯云等高标准服务器，也可根据条件自行搭建服务器。

5.2 研究展望
随着智能手机的风靡与普及，越来越多的公司致力于移动APP的开发，而伴随着HTML5的兴起，移动端的网页技术愈发成熟。

而各种各样的移动端应允而出，移动端的网页技术愈加需要响应式的布局来优化客户体验。

响应式设计是种高度适应性的设计思维模式，它给开发人员和终端用户都带来了便捷与舒适。

除了达到响应式的目的，我们更应该思考更为优化的设计思路以及工作流程，来简化程序员的工作。

互联网时代的信息安全尤为重要，我们在发布网站信息构建服务器的同时一定要保证数据的保密性，服务器安全要有所保障。