JQ框架下基于h5开发的微信吃货网

陈春雨 大庆师范学院机电工程学院 王福成 黑龙江八一农垦大学工程学院

解国梁 黑龙江八一农垦大学工程学院 梁宇 中国石油大庆化工研究中心

JQ框架下基于h5开发的微信吃货网

陈春雨 大庆师范学院机电工程学院 王福成 黑龙江八一农垦大学工程学院

解国梁 黑龙江八一农垦大学工程学院 梁宇 中国石油大庆化工研究中心

本文主要以HTML5版网站的设计与实现为基础，以文字、图片等丰富的多媒体为客户展示产品信息。吃货网的页面呈现主要是基于当前流行的HTML5的新功能，使用HTML5技术，优化网站显示，能够自动识别手机的屏幕大小，完全适应各种各样的手机、平板电脑。吃货网内容丰富，而且加载速度非常快，这使得移动电话用户更容易的浏览信息。

微信 HTML5 吃货网

在当今的移动网络世界，出现了一批基于微信浏览器开发的网站，这些网站能够完美兼容各大浏览器平台，功能更加全面，信息更加丰富。本论文主要目的是做一个美观实用的基于H5的吃货网。本文的两个创新点为：第一，使用微官网设计风格，实现兼容各平台的网站。第二，使用当前最新的H5技术来完成吃货网的页面设计与展示。

1 网页核心技术

1.1 HTML5

运用H5进行代码开发，简单易懂，让网页自动适配所有移动端屏幕，在因此自动调整页面布局。与以往相比，H5能让移动设备上呈现多媒体。它的新的语法特征，实现了很多的新功能。因此，如今用户与文档的交互方式受到了本质上的进化。

一方面从性能角度来看，H5让HTML文档体积变小；另一方面从用户可读性上看，之前的一堆繁杂代码相对初学者来说，完全是像看天书似的，而H5的声明方式显然更让人理解一些。

1.2 jQuery框架

jQuery是一个集很多优势于一身的js框架。它的宗旨是：写更少的代码，做更多的事情。jQuery有六大核心特点，分别是：①独特的链式语法；②多功能接口；③高效灵活的选择器；④可对选择器扩展；⑤便捷的插件扩展机制；⑥丰富的插件。

2 网站项目分析

2.1 目标

第一，操作简单，交互性增强。第二，实用性第一，制作成本低廉，显示相关信息。第三，为广大手机用户在生活中带来方便。

2.2 需求分析

商家企业拥有微官网的目的有两个：一个是为了在移动互联网上进行推广商品；另一个给用户提供更方便的购物需求。

2.2.1 功能需求

根据企业对微官网的要求，web页面的模块组成主要包括：商品展示列表、商品分类、购物车、我的订单、个人中心。

2.2.2 性能需求

网页性能方面的要求如下：

（1）响应性：响应速度快，最大程度上满足用户需求。

（2）适应性：网页能够自动适应所有屏幕，并且有相应的布局调整。

（3）可使用性：操作便捷，有验证功能，并采用友好的错误提醒。

（4）可维护性：使用h5新标签利于维护。

2.3 可行性分析

2.3.1 经济可行性分析

微官网是一种轻app化的产品，而app的开发、维护花费较高，使用微官网能让开发和维护成本降低很多，获得更大的经济效益。

2.3.2 社会可行性分析

在当今社会，使用手机的人数持续上升，越来越多的人通过手机获取外部信息，微网站已成为社交信息交流的新平台。微型网站建设，突出企业的特殊的社会地位，企业形象及声誉，最终促进服务行业的创新和与客户的良性互动。

2.3.3 技术可行性分析

考虑到用户的需要，来分析一下它的技术可行性。使用H5和jQuery框架构建WEB页面开发，可以满足用户的需要。使用H5技术使页面更适合移动用户，同时也兼容每一个移动设备。

从以上三方面考虑，建立吃货网是可行的。

3 网页设计

3.1 开发工具

Hbuilder是支持H5 web开发的编辑器。Hbuilder编辑器的快，是最大的优势，一套完整的语法技巧和代码输入方法，代码块等等，极大地提高HTML，javascript和CSS开发效率。该编辑器还包括最全面的语法库和浏览器兼容性数据。

HBuilder是专门为HTML设计而开发的。主要用于开发HTML、CSS和js，前端预编译的语言sass和less都能进行良好的编辑。自2013年夏天发布以来，HBuilder已经成为该行业的主要开发工具，拥有数十万开发者。

3.2 功能模块设计

网站展示的模块主要功能包括商品展示列表、商品分类、购物车、我的订单、个人中心。

3.3 代码设计

整个吃货网是由H5标准开发的。H5标准的格式很简单，最重要的标志是，第一行代码没有版本的信息和页面声明，原始HTML页面声明是一个很长的字符串。H5新标签和JQuery的使用可以做出很酷的2d或3d效果，给人带来一种新的感觉。

使用H5的预加载能力来开发。它可以预先加载特定位置的指定页面，使用浏览器的空闲时间提前下载指定的内容，放入缓存存储。这样，当您下一次浏览页面时，信息将被直接从缓存中提取，从而增加页面加载的速度。

用H5的新特性进行网页的开发：

（1）meta标签，使用这个标签，迫使文档维护设备的宽度在1：1，匹配所有的移动设备。最初的初始缩放比率1.0，代表屏幕上的初始大小的100%。

（2）Header标签，它定义了页面的标题，调用了js实现滑动开关在导航栏中。

（3）Nav标签，它定义了导航的内容，更容易识别。

（4）Footer标签，它定义了网页的底部。在这种情况下，定义小字使用smal标签用于解释网站底部的正确版权的信息。

（5）section和article标签，可以相互嵌套。换句话说，他们之间没有从属关系。article标签代表文章，文章是完整的、独立的内容。在某些方面，section标记也可以用作HTML标准中的div，但比div更有语义。

4 网页调试

4.1 浏览器调试

在浏览器的网站中(推荐使用谷歌，Firefox，搜狗也似乎是可以使用)，第一次在您的浏览器中打开url，然后按键盘上F12。出现的是我们常见的Web网站的调试方法。

当然，这一切的前提是，网页是一种响应式布局。

这里参数的含义分别是：

width-viewport 宽度 height-viewport 高度

initial-scale 初始的缩放比例

minimum-scale 允许用户缩放到的最小比例

maximum-scale 允许用户缩放到的最大比例

user-scalable 用户是否可以手动缩放

4.2 真机调试

直接使用自己的手机或者其他类型的真机进行调试。

5 网页展示

图1 商品展示列表页

本网页是基于H5技术进行前端展示，展示模块主要有：商品展示列表、商品分类、购物车、我的订单、个人中心。如图1展示：

点击导航栏首页按钮，则跳到商品展示列表页。商品展示列表主要由五部分组成，第一部分是最上面的轮播图，这个轮播图可以自动轮播，当鼠标停留在图片上，则会停止轮播；第二部分是中间的搜索框，可以根据自己的喜好，直接搜索自己想要的商品；第三部分是主体部分，展示众多商品，并配有具体图片介绍，供顾客选择，如果想具体深入的看某件商品，只需要点击此商品，则跳到商品详情页可以查看商品具体详情；第四部分是最下层部分，介绍技术支持；第五部分则是导航栏，它会一直处于最上层，不会被滚动条拉下去，五个导航可以自由点击跳到对应页面块。

点击导航栏购物车按钮，则会直接跳到购物车页。购物车页主要由俩部分组成，第一部分是商品请单，这里会展现之前添加在购物车的商品，可以选择购买个数，也可以重新选择不买删除；第二部分是下面的结算部分，这里有合计、清空、立即结算三块。

点击导航栏我的订单按钮，则会直接跳到我的订单页面。我的订单页主要由六部分组成，分别是待支付、待发货、待收货、已完成、退换货以及管理收货地址。

点击导航栏个人中心按钮，则会跳到个人中心页面，个人中心页主要由十部分组成，第一部分是上面的个人基本情况，这里会展现顾客给自己设置的昵称和头像以及系统分配的ID号、个人等级和关注；第二部分是中间的财产公示，这里包括总积分、账户余额和全部佣金；第三部分是我的二维码；第四部分是我的会员，这里展现自己发展的下线会员，分为一级普通会员、二级普通会员和三级普通会员；第五部分是我的推广，点击进去会出现三部分，分别是：推广订单、推广点击和推广关注；第六部分是佣金体现，点进去最上面会出现可提现佣金金额，然后下面会分成8种类别订单，分别是：未付款订单佣金、已付款订单佣金、已发货订单佣金、待审核订单佣金、无效订单佣金、未付款订单佣金和未付款订单佣金。最下边是两个按钮，分别是：佣金明细和申请提现；第七部分是修改资料，点击进去会分为五项，分别是：姓名昵称、手机号码、银行名称、支付宝号、微支付号；第八部分是积分兑换，可以查看用户当前可用积分和查看自己已兑换的产品；第九部分是销售排行榜，这里分为俩部分，分别是：粉丝排行和销量排行；第十部分是帮助说明。

6 总结

随着移动互联网的发展，人们越来越离不开移动互联网的使用。它指导人类社区的需求，而H5微网站的出现是基于人们需求的前提。吃货网在实际的使用可能会有一些问题。然而，我们可以通过许许多多移动用户的反馈来进一步优化页面，并及时改进。在现实生活中，更满足实际情况的需要，建立一个标准的、合理的微网站。

[1]基于HTML5的移动Web App开发[J].黄悦深.图书馆杂志.2014(07)

[2]微信公众平台的传播特点及趋势分析[J].王眉.互联网天地.2014(05)

[3]微信平台领先模式及其未来发展趋势研究[J].潘一飞.中国新通信.2014(04)

[4]国内电子商务网站的视觉设计分析[J].吴忠慧.现代装饰(理论).2015(01)

陈春雨，女，1979-，吉林省四平市人，汉，大庆师范学院机电工程学院教师，讲师，研究方向：测试计量技术及仪器。王福成（通讯作者），男，1979-，吉林省四平市人，汉，黑龙江八一农垦大学工程学院教师，讲师，研究方向：结构力学。

项目标号：黑龙江八一农垦大学教学研究课题——项目名称：基于BIM技术的计算机绘图技能的探索与实践研究（NDJY1608）。