基于HTML5的大学生二手物品交易APP设计

苏雨鸿++姚兴华

摘要：一些知名交易平台如赶集网、58同城、闲鱼闲置等，主要聚焦于广大百姓群体的需求，没有为大学生群体的二手物品交易提供个性化设置。针对追求个性的大学生群体，采用HTML5技术设计一款二手物品交易APP。基于Cordova平台开发了5个主要功能模块：商品信息发布模块、书籍交易模块、非书籍类物品交易模块、社交活动发布模块、个人信息管理模块，为大学生用户填写个性化信息提供了框架，比如个性化优惠条件、星座、投票等。研究表明，该APP使用AngularJS的MYMhttp服務技术实现了数据交互。

关键词：HTML5；二手物品交易；APP；Ionic

DOIDOI：10.11907/rjdk.171427

中图分类号：TP319文献标识码：A文章编号：16727800（2017）010008005

0引言

2016年4月，国家教育部在《中国高等教育质量报告》中称，2015年中国在校大学生规模达到3 700万人，各类高校2 852所。可见，我国大学生群体数量庞大。大学生在求学过程中，会购买教科书、杂志、课外书、笔、台灯、书架、篮球、自行车、电瓶车、热水瓶、衣服等学习、生活用品。在毕业时，大多数学生希望将这些旧物品出售，往往在校园网站、人人网、朋友圈、QQ空间等平台发布二手物品信息。近些年，社会上确实涌现了不少知名二手交易市场网站平台，如淘宝旗下的闲鱼闲置平台、58同城、赶集网等。这些网站平台主要是针对广大百姓群体，提供了完整的交易环节设置，包括发布信息、上架展示、用户搜索、评价反馈、即时通讯等。相比广大普通百姓群体，大学生群体有其鲜明的特点：接受新鲜事物的能力强、追求个性、更替物品的周期短。此外，有关数据表明，大学生群体中使用智能机的百分比超过了80%，手机App的使用将会超过传统网站。面对庞大的大学生群体，闲鱼、58同城等二手物品交易网站平台显得个性化支持度不够，不能满足大学生的个性追求需求。因此，本文针对广大大学生群体，采用HTML5语言设计、开发一个融有社交元素的个性化二手物品交易APP。

1HTML5介绍

HTML5是W3C组织推出的最新一代HTML标准[1]。推出HTML5的主要意图是，将互联网语义化，便于更好地被人类与机器阅读，同时更多地支持各种媒体嵌入。

HTML5技术给网页浏览用户带来便利。经常上网浏览资讯的用户会发现，在打开网页播放视频或者动画时，浏览器窗口有时会弹出控件安装请求，只有安装了相关控件，才能正常运行网页内容。这给用户带来了麻烦，同时也存在安全隐患。现在，HTML5让这些问题都变得简单了[1]。用户可以通过插入

HTML5技术在本地存储方面，采用了一种不同于Cookie的全新方式[1]。用户在退出APP应用或者退出浏览器之后，本地数据仍然存在。相比Cookie存储方式，HTML5的本地存储容量更大，并且不会随每次HTTP请求重复地发送数据至Server。

HTML5支持离线Web应用[1]。HTML5能够让Web在设置好的情况下提前把应用数据缓存到本地浏览器。这样即使在出现突然无网的情况下仍可以浏览部分内容。

使用HTML5开发手机应用的一个优势是，开发人员可以在网页上直接调试[2]。在原生态手机APP开发过程中，开发人员可能需要花费不少精力配置开发环境，虚拟机不断重复编码、调试、运行。所以，现在越来越多开发人员将传统原生态手机客户端的开发转移至HTML5标准下进行。表1列出了常用浏览器对HTML5部分标签与特性的兼容信息。

使用HTML5开发手机应用的另一个优势是，按照HTML5标准开发的APP应用既可以在Android操作系统下运行，也可以在IOS系统下运行[2]。这为开发者省去了麻烦，为企业降低了开发、运营及维护成本。在HTML5标准推出之前，开发者设计一个手机应用，需要分别对安卓用户端与苹果用户端编写不同代码来实现相同功能；这给后期维护带来了不小工作量。如今，开发者使用HTML5进行开发，便没有了上述麻烦，企业也不需要为安卓端的开发专门招聘Java工程师，不需要为IOS端的开发招聘IOS工程师。

2二手物品交易APP设计

2.1功能结构设计

根据大学生群体的特点，笔者对二手物品交易APP设计了5个主要功能模块：“我要当Boss”、“Book”、“Market”、“情报站”、“个人中心”。系统框架结构见图1。

图1系统功能架构

5个主要功能模块如下：

（1）“我要当Boss”模块——发布二手物品信息。 其主要功能是发布二手物品出售信息。在该模块中，将设计、实现4个用户操作功能：①选择物品类型：书籍/其它；②填写物品信息：书名/物品名、数量、版本号、书本条形码、物品照片、简要说明；③定价，并制定个性优惠条件“××优惠××元”；④填写个性标签，比如美剧迷、k歌达人等。

（2）“Book”模块——查询&交易书籍。其主要用于查询二手书籍及交易书籍。“Book”模块中设计的子功能有：①查询书本名称；②显示查询结果，并支持按照书籍价格或者卖家的年级、星座、性别筛选结果；③填入购买详情，如购买数量、交易方式（支付宝/线下交易）；④跳转至支付界面；⑤返回商品详情界面。

（3）“Market”模块——查询&交易非书籍物品。用于查询以及交易非书籍类物品。“Market”模块的设计类似于“Book”模块，支持非书籍类物品查询、查询结果显示、支付交易等子功能。

（4）“情报站”模块——发布社交状态。“情报站”模块将用于发布社交状态。考虑到学生活动因校而异，根据学生用户所属学校设计相应的状态发布界面，并设计“投票”与“召集”两个子模块，以支持学生发起投票活动与发起号召、主题讨论活动。

（5）“个人中心”模块——记录用户的交易历史信息。着重设计“购买记录”、“出售记录”、“我上架的物品”、“历史评价”、“好友列表”5个子模块功能。

2.2数据库设计

在构建数据库的过程中，通过创建唯一性索引保证数据库表中每一行数据的唯一性。使用SQL Sever设计的数据库容易维护[3，4]。所以，在开发二手物品交易APP时，选择使用SQL Server。在数据交换方面，选择使用Angular Js的MYMhttp服務技术[59]。

数据库中包含3张主表：“Student”表、“Book”表、“Goods”表（见图2、图3、图4）。图2为“Student”表，记录、存储学生的个人信息。图3为“Book”表，记录书籍物品的信息。图4为“Goods”表，记录非书籍类物品的信息。“Student”表中的主键telephone同时作为“Book”表、“Goods”表的外键，与“Book”表、“Goods”表中owner字段的值相对应。

3系统实现

3.1开发平台与前端框架选择

目前，移动应用的开发方式有3种：Native APP、Hybrid APP、Web APP，如表2所示[10]。本文拟开发二手物品交易APP属于Hybrid APP。Hybrid APP是一种同时使用网页语言与程序语言开发得到的APP。它以JS、Native两者相互调用为主：JS用于实现可视化界面，即前端UI；Native层面通过使用开发平台操控手机硬件。Hybrid APP将HTML5技术运用于传统APP上，从而加快了开发进程。Hybrid APP实现了“一次开发、多处运行”的跨平台开发。相比局限于浏览器浏览、应用的即时Web APP，Hybrid APP的可跨平台移植性更强。

在Hybrid APP开发最初阶段，先要对已有开发平台有所了解。现阶段主流的开发平台有PhoneGap、AppCan等。这些平台使用HTML5 标准开发，以适配各类机型，兼容各类开发者自定义的插件，能较好地满足各类用户需求。

PhoneGap是一款基于HTML、CSS与JavaScript的开源移动开发平台[11]。它支持使用一些开源的框架提高用户体验，比如jQuery Mobile、Dojo Mobile、Sencha Touch等，提供了丰富的原生插件调用。不足的是，现阶段PhoneGap启动速度略慢，页面切换响应慢，有大量请求时会产生页面卡顿现象。

AppCan是眼下流行的一个搭建本土移动开发Hybrid APP平台。它封装了类似PhoneGap本地调用的手机底层功能与uexWindow多窗口机制，实现了移动端的iframe效果。AppCan的免费版本不支持自定义插件，且功能有限。

考虑到PhoneGap与AppCan的优缺点，选择Cordova开发平台。因为Cordova支持的前端UI组件库Ionic已经成熟，并且可以在其提供的样式库基础上进行个性化修改，得到想要的效果。

3.2功能模块设计与展示

5个主要的功能模块即“我要当Boss”模块、“Book”模块、“Market”模块、“情报站”模块、“个人中心”模块。返回功能是APP应用支持的常见功能，在实现返回功能时，使用了MYMScope对象，5个功能模块都需支持返回功能。比如：在“我要当Boss”模块界面中按左上角的“返回”，则返回到系统APP首页；在该模块子界面中按左上角的“返回”，则返回到“我要当Boss”模块首界面。由于这5个模块是在不同的页面支持返回功能，所以，App使用了MYMrootScope以实现不同页面Angular JS中Controller之间的数据共享。

3.2.1“我要当Boss”模块

“我要当Boss”实现的主要功能是用户能够发布商品信息。商品发布流程分3步：①选择商品类别，可以选择“Book”书籍类商品或者“Other”非书籍类商品；②填写商品信息，可以上传商品的图片等；③个性定价，界面如图5所示。为了实现60s内物品快速上架目标，吸引顾客眼球，在个性定价流程中向用户提供了“个性优惠”栏目，卖家可以在该栏目中选填一些购买优惠信息。

实现“我要当Boss”功能模块的代码量较大，下面仅给出商品发布流程第一步“选择商品类别”的核心代码。

第一步

选择商品类别

<！--

-->

Book

[1] 2 [3] 存入我的阅览室

Other