微店买家版APP设计和开发.docVIP

微店买家版APP设计和开发 　　摘要：文章研究如何在移动设备上设计和开发购物类APP。分析了移动端APP三种开发模式的特点，选择了混合应用模式，使用WeX5设计和开发了一款智能移动设备APP。 　　关键词：移动购物；App；WeX5 　　中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）33-0133-02 　　随着智能手机等移动端设备的普及，移动购物的灵活与便捷优势越来越突出。在主流电商平台的大力推动下，用户移动购物习惯已经养成。 2016年4月1日，全球领先的移动互联网第三方数据挖掘和整合营销机构艾媒咨询发布了《2015-2016中国移动电商市场年度报告》，该报告显示“在中国，移动电商成交额已经超越PC端，移动端将成为电子商务主要的交易渠道，预计到2018年中国移动电商用户规模将接近5亿。”目前，国内传统的电子商务已经发展至顶峰，微店开启了移动电商新模式。为了抢占移动电商市场的先机，各个电商大咖纷纷进军微店市场，如淘宝推出了淘宝微店，京东推出了拍拍微店。微店购物这一新兴的购物市场有着巨大的发展潜力。 　　微店买家版APP是专门为买家开发的一款移动端购物类应用，用户通过安装在移动设备上的微店买家版APP，可以随时随地购买自己想要的物品，为用户提供诸多便捷服务。为了满足移动互联网应用“富内容、富交互、富体验、跨平台”的要求，文中设计与开发的微店买家版APP采用基于HTML5的混合应用模式。 　　1 APP开发模式 　　移动端APP有三种开发模式：原生应用、网页应用和混合应用。原生应用又称为本地化应用，采用这种模式开发的APP，APP运行时所需的界面、数据、逻辑框架均安装在移动终端上。网页应用就是把手机当做一个浏览器，APP运行时所需的资源均在服务器端。原生应用开发成本高，跨平台性差是这种开发模式的重要缺点。网页应用模式开发成本低，跨平台开发工具选择多，但APP使用移动硬件设备的能力有限。混合应用是原生应用和网页应用的结合体，开发时二者的应用比例可自由组合，它的使用方式和原生应用一致，但又继承了网页应用开发成本低等优点。 　　目前，混合应用采用HTML5标准。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。[1]它具有HTML5跨平台性，开发一次APP，即可部署不同的移动设备。混合应用模式能很好的应用于电子商务，在线教育，娱乐等行业，已经成为移动开发者的首选开发模式。一些国内外主流的APP应用其实就是架构在混合应用开发平台上，比如脸谱，百度搜索等。[2] 　　2 APP开发工具 　　微店买家版APP使用WeX5设计开发。 WeX5是北京起步公司推出的开源并且免费使用的APP开发工具，它是在Eclipse平台下二次开发所得，采用H5+CSS3+JS标准技术。WeX5的混合应用开发模式能轻松调用手机设备，如相机、地图、通讯录等，让开发者轻松应对各类复杂数据应用，代码量减少80%。同时开发出的应用能够媲美原生的运行体验。[3] 　　3 APP设计开发 　　3.1 功能结构 　　文中设计制作了一个用于购买母婴用品的微店买家版APP。用户通过微店买家版APP可以随意的购买自己想要的母婴用品。该APP提供了四个栏目：1）动态：为用户精选打折促销的商品及新品；2）今日推荐：为用户推荐一些母婴用品方面的小知识；3）分类：提供了妈咪专区、宝宝服饰、童车座椅等14个类别的商品；4）个人中心：提供购物车功能及显示收藏的店铺信息。APP的首页效果如图1所示。 　　3.2 制作页面框架 　　制作页面框架的步骤如下：1）使用“新建W向导”，新建“dynamic.w”文件；2）页面中panel组件有top、content、bottom三个区域，形成了上、中、下的布局，删除top区域将“动态”页制作成中下格局。3）在panel组件的content部分，添加contents组件， contents组件中默认有一个content，再添加三个content形成四个内容页，每一个内容页对应一个栏目。4）在buttom区域，添加button Group组件，并将其class设置为“风格：x-card；排列方式：btn-group-justified”。5）在button Group组件中添加4个button，设置每个button的icon、 label和target属性为对应栏目的图标、文字和页面。6）设置button Group组件的select属性为第一个按钮。页面框架结构如图2所示。 　　3.3 制作动态页 　　该APP选用“动态”栏目页面为初始页面。其制作步骤如下：1）在?犹?页对应的content2中，添加panel组件，删除bottom区域