21
SYS  PRACTICE      系统实践
摘要：小程序凭借它省流量、省空间、登录方便等优点，吸引了大量用户。论文主要研究“宠宠欲动”小程序的设计与实现，程序采用mock接口、request封装、腾讯地图的WebService API接口等，实现小程序的随机数生成、个人定位等功能，满足小程序智能化、多样化、便捷性、高效性的特点。
关键词：小程序；接口；功能
一、前言
随着国家经济的高速发展，国民经济不断提升，越来越多的人有条件养宠物，宠物行业会有非常大的潜力，但是对于宠物主人来说养宠物有时候并不是那么容易的事情，比如在哪里购买让主人满意的食物？家附近哪里有靠谱的宠物医院呢？这些“宠宠欲动”小程序都可以为宠物主人提供。“宠宠欲动”小程序无需下载，不占内存，直接打开就可以使用，为主人节省时间。
二、主要设计内容
“宠宠欲动”小程序主要由四个主页面构成：第一个界面，主页面。即购物商城，用户可以在里面查、浏
览、查看商品，扫描商品二维码查商品，并且可以跳转到其他功能页面。第二个界面，购物车。可以对商品数量加减，计算价格，对所有商品进行全选、反选并且购买。第三个界面，寻线下商店。可以查宠物店、猫咖、宠物医院，对这些店铺进行定位，计算店铺的距离。第四个界面，个人主页。显示了用户的头像、昵称、当前定位，用户可以修改个人信息和设置收货地址。
三、系统设计
js实现轮播图最简代码（一）功能模块设计
“宠宠欲动”小程序主要由四个功能模块组成，
分别为商城、购物车、线下商铺、个人中心。这四个模块实现了界面的加载、页面跳转、商品的购买和加入购物车、商品的增删改查、商品价格计算、个人及商铺定位功能、计算距离功能、导航功能等其他功能。它基本满足了界面友好、易于操作、报错性较好的要求。因此更利于用户操作，运行简单，从而达到从进入小程序到购买商品一条龙的操作，并且速度更快、内容更直接地达到用户预期的效果[1]。
（二）界面设计
1.商城界面：用户通过授权进入商城界面，这个界面由搜索框、轮播图、商品等组成。用户通过搜索框搜索商品，也可以选择搜索框左边的扫描二维码图标扫描二维码搜索商品；搜索框的下方是一个轮播图，
用户点击轮播图的图片可以进入商品详情页；接下来是五个跳转图标，用户点击某个图标就会进入某个对应的界面，如点击分类，就会进入分类界面，所有商品的分类都归类在分类界面；在浏览商品时点击商品会进入商品详情页，商品详情页可以点开商品的详情图进行查看，用户可以选择立即购买商品和加入购物车[2]。
2.购物车界面：第二个界面是购物车，用户加入到购物车的商品都会显示在购物车界面中，用户点击右边的圆形按钮可以对商品进行增加或者减少的操作，点击商品图片也会进入商品详情页，点击图片左边的商品属性可以修改属性。购物车还引用了iconfont.js，用来直接使用阿里巴巴iconfont 的图标来标记未选择的商品和已
“宠宠欲动”小程序设计与实现
阙瑾蓉    卢    嫣    丁    雄    秦    愉
◆ 图1 界面设计图
SYS  PRACTICE    系统实践
选择的商品，白图标的是未选择，灰图标的是已选择，左下角的勾选图标实现了所有购物车商品的全选和反选，同时运用了算法计算已选择商品的总价，并且使用request封装了重复的语言，简化了JS
代码部分[3]。
3.线下商铺界面：线下商城界面的构成首先最上方显示的是地图，地图中显示的是用户的位置，下方则是一些线下商店离用户的位置，点击导航将会帮用户导航到这家商店，用户还可以选择点击店铺，进入店铺详情页进行预定。这个界面使用了腾讯地图的WebService API 接口实现个人定位和商家定位，并告诉用户线下商店与自己的距离，也封装了重复的方法来简化JS代码界面。 
4.个人主页：第四个界面是个人主页，显示了用户的头像、昵称、当前定位，下方的三个图标可以查看用户订阅的帖子、关注的店铺和浏览历史；点击所有订单会进入到用户所有订单界面，用户可以对已完成的订单进行评论；用户需要在收货地址中填写收货地址和收件人信息才可以正常购买商品；最后就是反馈问题，用户在小程序遇到了任何问题都可以反馈给我们，我们会尽最快的速度解决。 
四、功能实现
“宠宠欲动”小程序是由开发者工具开发的，由于小程序的大小只能控制在2M之内，小程序本地不能保存太多文件，所以小程序的图标都是引用iconfonts 的图标，小程序中的组件引用Vant的组件。
授权登录的实现中主要使用了if语句来判断是否让用户进入小程序，如果用户点击了授权登录则直接进入小程序首页，如果点击拒绝授权则弹出一个模态对话框提醒用户返回授权界面重新授权。商城界面搜
索功能的实现是利用了SearchInput，用户可以去搜索自己想要的产品，用户在搜索框输入想要的产品，下方就会出现相对应的相关产品；搜索框下方是一个swiper轮播图组件，swiper的属性有autoplay是否自动播放、interval轮播图片时间和circular是否循环播放等等，每个轮播图都使用src引用链接显示在swiper-item中；轮播图下方是五个图标，五个图标使用flex布局使五个图标在同一行上，点击图标会跳转到相应的界面；接下来就是浏览商品的部分了，浏览商品的上方有三个不同的键位为最新热卖、特价清仓和附近好货，我们使用控制变量的方法，使点击不同键位的时候出现不同的商品，点击商品会进入商品详情页，在详情页面中有商品图片、参数以及可以、分享、加入购物车和立即购买，这个页面主要引用了外部接口，让顾客更全面得了解商品信息[4]。
购物车功能可根据用户需求对商品通过catchtap事件进行购物车的清空，通过wx:if条件渲染对数量进行修改、相关商品的删除等操作；通过wx:for列表渲染对购物车内的商品进行展示，还会根据用户添加到界面的商品通过{{total}}数组进行价格结算；该界面会一直保存用户提交的“购物车”信息，直到用户点击“确认下单”通过bindtap=“goOrder”点击事件进行下单。分类界面采用了flex布局，分为左边的菜单和右边的商品内容。此页面先引用了mock接口生成随机数，再连接外部的接口连接到了商品的菜单。用户点击左侧的菜单选择相对应的种类，则在右边会出现相对应的商品种类。
个人主页界面为了方便用户更方便设置自己的个人信息，涵盖了几个常用的入口，界面中主要分为三大部分，上面的头像部分、中间的图标部分和下面的列表，头像部分也是一个授权登录部分；列表中包含“
全部订单”“收货地址”“反馈问题”几个界面，收货地址引用了Vant中的组件。
五、结语
本文描述了“宠宠欲动”小程序的详细设计和实现过程。程序满足了用户对于操作简单易懂的要求。随着移动互联网的发展，小程序的发展前景十分良好，但是在开发小程序时要紧跟官方发布的最新功能，才能达到我们想要的最佳效果。 
参考文献
[1]谭宇欣.国内宠物App运行现状以及发展分析[J].现代交际,2019(09):68+67.
[2]高梦雪, 邓方圆, 汤鑫, 等.“互联网+”背景下宠物市场研究[J]. 中国商论,2018(19):74-76.
[3]张静, 孔佳娣, 赵金涛，等 宠物行业小程序市场现状调查与分析[J]. 现代商贸工业,2018,39(07):109-111.
[4]杨怡清, 谢娇, 陈佳荟, 等. 宠物医疗APP 市场可行性分析[J]. 江西畜牧兽医杂志,2017(06):1-3.
基金项目：1.2020年湖南省大学生创新创业训练计划项目（湘教通〔2020〕191 号）：“宠宠欲动”——
专业宠物服务电商平台（NO:3860） ；2.2020年国家级大学生创新创业训练计划项目（教高司函〔2020〕13号）：“传艺阁”——传统工艺的保护与开发项目（NO: S202012303019X）
（作者单位：湖南涉外经济学院信息与机电工程学院）
22

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。