摘  要：随着网络技术的不断发展，购物商城已经从Web端转向了Pc端，一个又一个像京东,淘宝一样的网上购物类App出现,简单，便携。该App使用HTML5+CSS3完成页面的布局,使用JavaScript给页面添加交互事件。用Bootstrap和JQuery框架加快开发进度。实现了用户的注册登录、商品查询、收藏商品、加入购物车、购买商品、填写订单、修改个人信息等功能。该App的优点是能根据手机的不同尺寸做到自适应。

关键词：商城；购物；HTML5

Design and Implementation of Shopping Mall Based on HTML5

Abstract: With the continuous development of network technology, shopping mall has shifted from the Web end of the Pc side, one after another like Jingdong, Taobao's online shopping class App appears, simple, portable. The App uses HTML5+CSS3 to complete the layout of the page, using JavaScript to add interactive events to the page. Using Bootstrap and JQuery framework to speed up the development progress. The realization of the user registration login, product inquiries, collection of goods, add shopping cart, buy goods, fill in the order, modify personal information and other functions. The App has the advantage of being able to adapt to different sizes of the phone.

Key Words: shop;shopping;HTML5

目    录

摘  要 2

引  言 2

1.软件开发技术基础和开发环境 3

1.1 HTML5开发语言 3

1.2 HBuilder开发工具 3

2.系统分析 3

3总体设计 3

3.1功能需求 3

3.2流程分析 4

4系统详细设计 5

4.1网站首页设计 5

4.2用户登录和注册设计 5

4.3商品管理 6

4.4购物车管理 6

4.5个人中心管理 7

5系统测试 8

5.1用户注册测试 8

5.2用查询功能测试 8

5.3购物车界面功能测试 9

6总结 10

参考文献 11

致谢 12

基于html5的微商城app设计与实现

引  言

在这个网络技术飞速发展，尤其是新兴平台App平台进一步拉近人与人之间的距离的时代，微商城也就应运而生。微商城是基于微信的一种商业运用，基于微信的传播速度快，及其简便等优点，为商家提供一个平台，在这个更简便的、方便的平台里进行更为现代的电子商务。同时在利用微信的这个平台也可以为商家提供更有效的宣传方式，更有利于商品的推广。

1.软件开发技术基础和开发环境

1.1 HTML5开发语言

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式。

1.2 HBuilder开发工具

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

2.系统分析

App翻译成中文是应用程序，Application的缩写。四大主流的APP系统分别是苹果ios系统版本，开发语言是Objective-C；微软Windows phone系统版本，开发语言是C#；安卓Android系统版本，开发语言是Java；塞班symbian系统版本，开发语言是C++。随着HTML5的出现，渐渐出现了基于HTML5的APP，这类APP可以做到跨平台，并且开发周期短。

3总体设计

3.1功能需求

3.1.1用户注册登录功能需求

用户注册：网站的账号注册。

用户登录：用户登录这个网站。

修改密码：修改用户登录这个网站的登录密码。