琠醉美通江农产品超市小程序的设计与实现毕业设计论文

本科毕业论文（设计）-40-绪论1.1研究背景随着信息时代的发展，传统的网上购物方式必将迎来瓶颈，人们要想网络购物需得下载专门的购物APP；这些APP不仅占据手机的内存，也使得手机界面不够干净简洁；给追求快节奏、简约理念的社会群体带来不少烦恼。而这时我们选择微信小程序购物，靠着基本人手一个微信APP，依托大量的微信用户。无需下载节省空间且操作便捷，下拉即用，用完即收。完全不会影响微信的正常使用且十分快捷，完全符合当代社会群体的生活节奏。而且伴随电子商务的兴起，我们将电商与农业相结合，相较于以往农产品受困于闭塞传统的销售模式，从而导致农产品积压变质。本课题通过将农产品上架微信小程序商城进行推广和售卖；渠道广，客流量大；大大的提高了农产品的销量，流通范围不在拘泥于一小块区域，而是全国各地。且农产品的有效输出也为当地树立了一个好的形象，成为当地特色的明信片。农产品搭上新兴互联网的列车，定会碰撞出非凡的火花，做出卓越的成就。商品线上销售是互联网电子商务在销售行业中的必然结果，而微信小程序这种新型快捷的百货商品销售形式越来越受人们的欢迎，且正在以不可阻挡的气势替代着线下的销售模式。其与传统销售模式相比拥有许多优势。例如足不出户就能获取最新的产品信息，实现商品的线上购买；操作便捷灵活。深受人们欢迎。1.2国内外研究现状1.2.1国内现状数据来源于权威第三方统计平台阿拉丁研究所REF_Ref13533\r\h[1]。可以说微信小程序已经在全面爆发生态能力，无论是在垂直电商领域深耕，还是公众号、视频号、企业微信的互联互通继续推进企业数字化转型和私域建设领域，都能看到小程序所具备的巨大商业潜力REF_Ref26799\r\h[2]。现在小程序已经成为企业品牌数字转型标配，之前阿拉丁预计2022年小程序DAU将突破5亿，而事实上上半年就完成日活突破5亿这一期望指标。阿拉丁在预计今年小程序将创近3万亿GMV，微信电商GMV未来三年可破十万亿。小程序凭借微信，轻松坐拥12亿微信用户群体，应该是国内最大的用户池，从商家运营角度来说，运营小程序不需要像APP那样花费更多人力物力去搭建获取用户渠道，借助小程序触达和获取线上用户的门槛更低，用户路径和交易转化更快。同时，目前小程序在网络购物和生活服务两大类中占比较高，而健康、线下零售类、娱乐游戏等行业市场上还没有达到需求饱和状态。流量+社交的新营销模式，让商家更容易沉淀自己的流量池。1.2.2国外现状从新加坡到柏林，从东南亚到欧洲，小程序成出境游必备“利器”。在实践研究中，国外的Facebook也曾开发过一个类似于微信小程序的应用工具。但由于早期的开发平台上各种应用水平参差不齐，加上网速、Web端技术不成熟等原因，导致了Facebook没能成为如微信一样的应用程序集散地。为了突破发展瓶颈，Facebook在之前的研究基础上开发了游戏、测验、绘图等社交中的附加功能，并同时发布了新型聊天bot。通过bot用户可以随意进入其它App的入口，使得应用与操作系统的界限开始变得模糊。2016年11月Facebook推出了InstantGames,它允许用户在无需下载App的情况下玩一系列HTML5游戏。由于这类游戏的进程较短，用户可以在等待好友消息回复的时候开始一局游戏，而当收到消息的时候又能快速切回到消息界面。2017年4月，Facebook又为用户开放了第三方的扩展程序，并试图将应用与Facebook的功能相互连接起来，此时，这类扩展程序已是多种App的集合入口，最终成为了真正意义上的Facebook“小程序”REF_Ref22292\r\h[3]。1.3本文研究内容课题主要是运用JavaScript技术和uni-app框架实现醉美通江农产品超市小程序，该小程序面向的用户是广大的人民群众,在设计该小程序时，要做到操作简单，流程快捷。本系统总共分为用户、商品、支付、购物车、搜索、收货地址各个大模块，各个大模块还包含有小的模块REF_Ref12087\r\h[4]。在本系统当中对于用户的类型可以分为两类：未登录授权用户，已登录授权用户。未登录授权用户只可以做页面的浏览，而已登录授权用户可以进行页面的商品详细查看和购买操作，从而来进行系统的日常维护和确保用户的数据安全，如果系统需要做任何的活动优惠只能由系统的管理员在服务器数据库中来进行操作，其余的角色都不能进行。1.3.1论文结构本文主要分为以下几个部分：第一部分是绪论部分，简要概述此系统的项目背景和目前的发展概况。第二部分是该系统使用的技术和工具部分，主要描述实现该系统所要用到的软件和技术。第三部分是该系统的可行性分析，从理论上分析系统的需求，模块等，分析产品的可行性。第四部分是该系统的系统设计部分，介绍系统架构设计和数据库设计。第五部分是系统的测试部分，测试系统的各种模块功能。第六部分是总结与展望，总结系统设计和开发过程中的问题REF_Ref27452\r\h[5]。1.3.2研究方法及手段文献收集法：查阅与微信开发者工具相关的文献和技术资料，了解当前留下的开发技术。查看相关功能的设计方法和知识原理。面向对象开发方法：以对象建模为基础，自底向上和自顶向下相结合的开发方法，彻底解决一些开发方法存在的严重问题。UML(UnifiedModelingLanguage)为面向对象软件设计提供统一的、标准的、可视化的建模语言，用于项目的分析金额设计阶段。系统分析2.1可行性分析2.1.1经济可行性分析现在提及速度就会想到中国的高铁，在另一方面也有不小的成绩，比如中国的基站建设，现在中国基本普及5G基站的使用了，这些基站也是中国网络速度的基点，当整片网络联通的这些点都是网络高铁的物质桥梁。网络的速度离不开一个东西，那就是流量，这里的流量是上网时候的刚需；还有在网络上网站里面的访问量、点击量等等。现在社会不断进步发展，人们的物质条件都好了几乎一个人手里就有一部手机，现在智能手机操作简单普及率也广。但是人们生活节奏逐渐加快，网上购物就成了一种普遍消费方式，所有从经济方面是可行的。2.1.2技术可行性分析本系统采用基于C/S架构模式开发的微信软件上进行开发，即客户端/服务器模式，只需要用户下载安装微信APP软件打开本小程序即可进行操作（有网即可调用数据接口）。项目开发工具采用的是HBuilderX。HBuilderX在程序员开发界被广大程序员公认为是最好的用于小程序开发的工具，HBuilderX软件它在智能代码助手、代码自动提示、重构、uni-app支持、各类版本工具、代码分析。因此从技术方面本系统使用HBuilderX工具进行开发在技术上是可行的。系统在模拟运行环境上选择微信开发者工具进行模拟器运行，在微信开发者工具上面可以完美的选择不同模拟机进行项目预览，但是在微信开发者工具上面实际发布的时候主包资源大小不能超过20M（主包+分包），单个分包大小不能超过2M。所以对于图片等资源必须存储在服务器上面，项目通过对服务器发送数据请求来加载数据。因此从技术方面本系统使用微信开发者工具进行模拟运行与调试，通过对服务器发送数据请求方式来加载页面数据也是可以行的通的，所有从技术方面是可行的。2.1.3操作可行性分析在用户进入微信后，通过微信APP的搜索功能可以直接搜索到本小程序，用户可以在不登录的情况下对小程序首页进行浏览，用户浏览到满意的商品的时候可以点击添加到购物车，并在购物车中实际查看到刚添加进来的商品，也可在购物车页面下拉屏幕进行收货地址的添加，当用户对添加到购物车中的商品进行付款购买的时候，系统会检测用户有无登录，当用户未登录的时候会提醒用户进行一键登录，当用户登录成功后即可进行结算，用户登录后可以在“我的”导航栏中进行点击查看个人相关信息，也可以进行退出登录操作，所以在操作方面上是可行的REF_Ref27514\r\h[6]。2.2需求分析2.2.1关键技术主要运用Vue框架做前端编页面开发，页面数据交互上面使用JavaScript语言进行逻辑编写，运用uni-app框架做整个项目的搭建主体，HBuilderX为开发语言编写工具，微信开发者工具用来做实际结果展示和项目编写时的运行调试，通过get和post两种不同的网络数据请求方式对服务器发起项目资源的数据请求，通过scss/sass编译语言进行页面CSS样式的编译，通过使用GITEE管理项目工具对项目进行开发进度管控和项目版本管理，在醉美通江小程序中使用第三方包发起网络数据请求，为规范项目的开发贴近实际企业开发模式，项目文件采用分包管理的方式进行分类，对重要功能进行自定义封装，为贴近实际后期项目使用需求对主要组件进行自定义开发从而增强组件的通用性优化。2.2.2业务流程分析用户通过微信APP搜索到醉美通江小程序，用户搜索到醉美通江小程序点击进入会直接加载到醉美通江小程序的首页，首页上会展示醉美通江小程序的重要内容推送展示，用户也可以直接通过点击首页或分类导航页面上面的搜索框对内容进行模糊搜索或精确搜索，并持久化的保存搜索历史数据。可以通过点击搜索历史中的关键字进行商品列表的加载，在商品列表页面可以进行下拉刷新或者上拉加载更多内容，当数据加载到最后一项时会进行相应弹窗提示。用户可以通过点击首页的分类图标或者分类导航栏进入商品分类页面，在商品分类页面用户可以通过左侧导航栏进行商品筛选或者搜索框筛选。当用户点击某件商品或者搜索出来的信息数据时可以进入该商品的详情页面，在商品的详情页面用户可以看见关于商品的完整信息也可以点击轮播图进行商品的大图展示，用户如果对该商品满意可通过点击添加购物车图标把商品添加进入自己的购物车，用户购物车中的数量会在每个页面进行实时更新显示REF_Ref27629\r\h[7]。在购物车界面可以持久化保存用户添加的商品，在购物车界面用户可以看见自己曾经添加进来的商品也可以在对应商品上面进行快捷的数量变更，也可以把曾经添加进来的商品进行向右滑动点击删除按钮进行删除。当用户选购好商品后会检测用户是否添加收货地址，其次是否登录。用户点击购物车界面的选择添加收货地址时会跳转到添加地址界面，在收货地址界面用户可以进行历史地址的快捷选择或者添加新的地址，所有的地址信息都会进行持久化存储，用户选择地址后会把地址信息加载回购物车界面的添加地址栏进行展示，用户也可以对已经加载过来的地址信息进行重新选择。当判断用户未登录时会弹窗提示用户先进行登录并自动三秒钟跳转到一键登录界面。用户点击一键登录后会出现授权弹窗，当用户点击允许授权会跳转到我的导航页面，并把获取到的用户信息（头像、微信昵称）在我的页面进行展示，并重新定向的跳转回购物车界面，如果用户点击拒绝授权操作会依旧停留在一键登录界面。用户在我的界面可以进行退出登录操作，并跳转回一键登录界面。2.2.3功能需求分析进行最新商品消息推送，商品分类导航栏方便用户进行商品的选择，不同模块类型最新推荐展示。来提高对用户的吸引力。搜索功能：在首页或者分类点击搜索导航栏后可以跳转到该页面。搜索功能提供模糊搜索、精确搜索两种功能。以及关键字实时搜索推荐，搜索关键词持久化存储，搜索历史点击跳转到商品列表页面，历史搜索关键字删除等功能。来提高用户的访问效率。商品列表页面功能：页面会展示关键词搜索相关的商品，每一页每次网络数据请求只加载10条相关商品数据，浏览完成后上拉屏幕可以再次发送新的网络数据请求在加载10条相关商品数据，加载完最后的数据后会提示用户数据已加载完，也可以进行下拉刷新页面。商品详情页面功能：商品详情页面轮播图循环展示商品图片，点击轮播图片可以进行大图展示且支持左右滑动，页面底部添加购物车按钮可以把商品添加到购物车并实时显示购物车数量，当点击购物车图标可以跳转到购物车界面。购物车页面功能：添加的购物车商品会在这里进行展示，并进行持久化存储，可进行对应商品数量快捷添加或减少，也可右滑商品列表点击删除按钮进行商品购物车删除，可以通过商品列表前面的选择框进行商品购买选择，并对选中商品数量和总价进行计算，可以通过点击选择收货地址按钮进行地址添加和选择，点击结算进行登录状态判定，未登录就会弹出提示信息然后3秒后跳转到一键登录界面，已登录就进行支付界面跳转。收货地址界面功能：购物车界面点击选择收货地址按钮后跳转到本页面。页面会自动读取到该手机里面存储收货地址，可以直接点击使用，也可以通过右上角加号按钮进行地址添加，地址信息会持久化存储到本地REF_Ref27727\r\h[8]。一键登录界面功能：点击一键登录后会弹出授权提示弹窗，点击允许会跳转到我的信息界面并对获取的个人信息进行展示，并重定向会购物车界面进行支付，点击拒绝会登录失败关闭弹窗REF_Ref18337\r\h[9]。我的页面功能：页面会展示授权成功获取到的信息（微信头像、微信昵称）进行展示，可以进行退出登录操作REF_Ref21550\r\h[10]。支付界面：登录成功后点击结算对选中商品进行结算调用微信支付接口进行支付，但由于微信官方需求工商局注册商家运营执照限制故而暂时无法实现REF_Ref21475\r\h[11]。版本管理工具功能：项目使用GITEE版本管理工具进行项目管理，并对项目进度进行管控REF_Ref21253\r\h[12]。2.2.4性能需求分析商品列表页面因商品数量众多，为减少使用者的恶意操作发起大流量、多次数的网络数据请求来增加系统运行负担，采用节流阀和过滤器来判断当前发起请求的时候是否还有网络数据请求正在进行中，并限制每次网络数据请求的请求商品数量。和通过使用组件的自定义方式来定义组件功能，并对重要组件进行封装，保证软件系统的安全性。从而实现性能优化REF_Ref14423\r\h[13]。2.2.5数据需求分析项目的商品数量众多，数据资源体积很庞大，为减轻项目的运行需求以及符合小程序的发布规范，数据信息全部采取存放在服务器上进行存储，通过向服务器发送数据请求的方式获取服务器上的数据资源。2.2.6接口需求分析由于项目的数据资源存储在服务器上，当每次项目需要调用资源时都会通过发送get和post方式对服务器的数据接口进行访问，因此接口之间的数据传递和共享都要进行规范管理。2.2.7将来可能提出的需求分析为应对各类型季节，项目页面的导航栏需要更换不同的样式，这一块需要单独封装和集成出来，商品详细页面的收藏功能后期根据实际情况需要进行集成开发，商品详细页面的立即购买功能需要进行补充开发实现，我的页面商品订单，商品购买记录，订单管理等都需要进行集成开发。系统设计3.1架构设计本系统采用JavaScript技术与VueX配合uni-app框架进行建设，有服务器和前端页面分析的现象，系统商品图片和商品信息存储在服务器上，开发者工具上进行开发和调试。在系统的前端页面中使用GET和POST方式对服务器中的商品数据进行数据请求，并在页面中使用scss/sass编码的方式编译为css，在页面中进行直接展示，需要修改商品信息的时候直接修改服务器上面的后端数据内容。后端运用最流行的Java语言进行管理页面的编写。软件架构是该系统的一个或多个结构，由元素，外部元素属性之间的关系组成。REF_Ref22206\h图3.1系统架构图图3.SEQ图3.\*ARABIC1系统架构图3.2功能模块设计根据本系统的功能需求分析可以得到如下功能。如图3.2系统功能模块图所示：图3.SEQ图3.\*ARABIC2系统功能模块图3.2.1用户登录、退出、一键登录、获取个人信息权限用户如果是第一次进入使用本小程序，可以浏览本小程序的基s本页面内容，但要是想进一步了解就需要进行登录，可以通过一键登录按钮，授权允许获取个人基本信息，如微信昵称、微信头像等，当用户拒绝授权，则停留在一键登录界面。当成功获取用户信息后可以在我的页面进行查看。如图3.3登录的程序流程图所示：图3.SEQ图3.\*ARABIC3登录的程序流程图用户如果是登录成功后使用本小程序，可以在本小程序的页面使用所有功能内容，但如果用户在完成购买任务后需要进行个人授权信息的取消则需要取消登录操作，可以通过导航栏我的进入页面，点击退出登录按钮，并点击确定退出，则可以解除授权信息如微信昵称、微信头像等，并回到一键登录界面，用户下次购买需要重新进行授权登录REF_Ref14489\r\h[14]。如REF_Ref12596\h图3.4退出登录的程序流程图所示：图3.SEQ图3.\*ARABIC4退出登录的程序流程图3.2.2商品模块醉美通江小程序的这一部分主要分为商品列表展示，商品大图展示，商品下拉刷新，商品页面详细信息，商品上拉触底提示这五个功能点，首先是商品列表展示功能，也是用户进入到醉美通江小程序最重要的操作，用户可以在系统里面进行查找想要的商品。第二是商品大图展示这个功能是在进入商品详细页面后商品的轮播图可以被点击并放大图片进行查看；第三是商品下拉刷新这一功能主要是在商品列表页面当用户需要对商品数据进行更新时可以下拉屏幕；第四是商品详细信息，这一界面可以对商品的详细信息进行展示，并对商品进行购物车的添加。如REF_Ref12841\h图3.5商品查看程序流程图所示：图3.SEQ图3.\*ARABIC5商品查看程序流程图3.2.3购物车模块该模块里面用户在页面进行商品添加到购物车中，可以进入购物车查看是否有添加的商品，在页面上观察当前数量有无减少，显示是否正确。如REF_Ref13242\h图3.5商品添加到购物车流程图所示：图3.SEQ图3.\*ARABIC6商品添加到购物车流程图3.2.4搜索模块用户可以通过首页和分类页面进入到搜索模块，用户可以通过在搜索框中输入商品的关键词即可自动实时检测出包含关键字的商品并推荐给用户，当用户点击搜索时会跳转到商品列表页面进行推荐商品数据的加载显示，并把输入的关键字进行持久化数据保存下来，并显示在搜索历史栏中，也可以直接点击搜索历史的关键字搜索商品REF_Ref14512\r\h[15]。如REF_Ref13526\h图3.6关键字搜索流程图所示：图3.SEQ图3.\*ARABIC7关键字搜索流程图3.2.5收货地址模块用户进入购物车当点击结算功能时会要求先填写收货地址，在收货地址界面会自动获取用户手机中的收货地址信息，也可以自己重新添加收货地址信息。如REF_Ref13804\h图3.7收货地址流程图所示：图3.SEQ图3.\*ARABIC8收货地址流程图3.3数据库设计3.3.1概念模型设计E-R图也称实体-联系图，是表示概念关系模型的一种方式，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型REF_Ref7872\r\h[16]。用户模块，各个实体有（编号、性别、头像、登录时间、退出登录时间、token）如下REF_Ref23886\h图3.9用户详情E-R图所示：图3.SEQ图3.\*ARABIC9用户详情E-R图商品详情模块。全部商品提供了商品ID和商品名称联合查询，并且展示商品ID、封面、名称、价格、商品简介、库存以及所属类目等信息REF_Ref26307\r\h[17]。如下REF_Ref24017\h图3.10用户详情E-R图所示：图3.SEQ图3.\*ARABIC10用户详情E-R图订单模块，各个实体有（编号、价格、收件地址、收件名字、收件电话、支付状态、下单时间、用户ID）如REF_Ref23154图4.13订单E-R图所示：图3.SEQ图3.\*ARABIC11订单E-R图3.3.2数据库表的设计根据本小程序的实际使用和数据存储的需求对数据库进行设计，并把数据存储在服务器上，通过网络数据请求方式访问接口来获取数据。设定创建存储用户登录时的用户表，和存储本小程序商品数据的商品表等，为了方便后期对产生订单的订单数据进行操作而建立的订单表，各表之间存在相互管理和一对多的关系。存储用户登录数据的用户表详情如REF_Ref23406\h表3.1用户表所示：表3.SEQ表3.\*ARABIC1用户表字段名称数据类型字段大小是否主键字段说明user_idvarchar100是用户IDuser_sexDouble11否用户性别User_namevarchar255否用户名字User_imagevarchar20否用户头像tokenInt11否用户的唯一凭据存储商品数据的商品表详情如REF_Ref23524\h表3.2商品表所示：表3.SEQ表3.\*ARABIC2商品表字段名称数据类型字段大小是否主键字段说明goods_idvarchar100是商品IDcat_idvarchar40否分类IDgoods_nameDouble10否商品名称goods_pricevarchar40否商品价格goods_numberInt11否商品数量goods_big_logovarchar100否商品大图标goods_small_logovarchar255否商品小图标add_timevarchar255否商品添加时间cat_idvarchar10否所属一级分类goods_introduceInt11否商品介绍picsvarchar255否商品图片列表订单表有以下实体，如下REF_Ref23566\h表3.3订单表所示：表3.SEQ表3.\*ARABIC3订单表字段名称数据类型字段大小是否主键字段说明Idvarchar100是编号MoneyDouble11否价钱ReceiverAddressvarchar255否收件地址ReceiverNamevarchar20否收件名字ReceiverPhonevarchar20否收件电话PaystateInt11否支付状态OrdertimeTimestamp11否下单时间User_idInt11否用户ID系统实现4.1开发环境通过表格的形式给出系统开发所需的软硬件环境，可以更鲜明的了解本微信小程序使用的硬软件相关配置。本微信小程序基于uni-app框架进行开发，使用HBuilderX进行编写代码，微信开发者工具进行运行，选用访问服务器数据库的方式获取数据，对于运行环境要求相对较低如下REF_Ref4996表4.1开发环境所示：表4.SEQ表4.\*ARABIC1开发环境软件环境操作系统Windows10技术搭建JavaScript+VueX+uni-app+Vue2+Postman数据库平台服务器开发平台HBuilderX3.7.3+微信开发者工具2.26.2硬件环境处理器骁龙8+Gen1内存8GB硬盘空间128GB4.2功能模块实现4.2.1项目Git管理工具配置为了方便项目的管理，引入git管理工具进行项目的管理，为了在上传代码时uni-app中的资源包不被跟踪故而在目录中新建.gitignore

忽略文件，并进行本地配置。由于我们忽略了unpackage目录中仅有的

dist目录，因此默认情况下，unpackage目录不会被Git追踪。REF_Ref14326\h图4.1忽略项目包。为了让Git能够正常追踪unpackage目录，在目录下创建一个

gitkeep

的文件进行占位。REF_Ref14643\h图4.2初次提交仓库。并把项目托管到码云。1.注册并激活码云账号，2.生产并配置SSH公钥，3.创建空白的码云仓库。4.把本地项目上传到码云对应的空白仓库中。REF_Ref15038\h图4.3项目提交仓库成功。图4.SEQ图4.\*ARABIC1忽略项目包图4.SEQ图4.\*ARABIC2初次提交仓库图4.SEQ图4.\*ARABIC3项目提交仓库成功4.2.2首页实现创建首页、分类、购物车、我的这4个tabBar页面，并在pages.json

配置文件，新增

tabBar

的配置节点。REF_Ref15437\h图4.4首页实现方法。首页轮播图区域的实现，在data中定义轮播图存放数据的swiperList列表，存放分类导航栏数据navList列表，存放楼层数据floorList列表，在onLoad生命周期函数中调用获取轮播图数据、分类数据、楼层数据的方法，在methods属性中定义获取轮播图数据的getSwiperList()方法，定义获取分类数据的getNavList()方法并绑定navClickHandler()事件函数实现点击分类列表跳转到分类页面，定义获取楼层数据的getFloorList()方法。REF_Ref15610\h图4.5首页页面图。图4.SEQ图4.\*ARABIC4首页实现方法图4.SEQ图4.\*ARABIC5首页页面图4.2.3分类页面实现在页面加载时onLoad生命周期函数调用methods属性中getCateList()方法进行分类列表数据获取，REF_Ref15887\h图4.6分类页面实现方法。在data中定义二级分类列表的数据节点cateLevel2列表把getCateList方法请求到的数据为二级分类列表数据赋值，在二级分类的

view

组件中，循环渲染三级分类的列表结构，三级分类的Item项绑定点击事件处理函数goodsGoodsList()方法，实现点击三级分类中的商品图片跳转到商品列表页面。REF_Ref16028\h图4.7分类页面成功图。图4.SEQ图4.\*ARABIC6分类页面实现方法图4.SEQ图4.\*ARABIC7分类页面成功4.2.4收搜模块实现在项目根目录components上创建自定义组件my-search组件，使自定义搜索组件的

背景颜色和圆角尺寸，可以通过props属性定义bgcolor和radius两个属性，并指定值类型和属性默认值，通过属性绑定的形式，为.my-search-box

盒子和

.my-search-container

盒子动态绑定

style

属性，并移除对应

scss

样式中的

背景颜色和圆角尺寸，自定义组件内部，给类名为.my-search-box

的view绑定click事件处理函数，通过SCSS的样式实现吸顶的效果，修改uni-search-bar.vue

组件，把data数据中的show和showSync的值，REF_Ref16687\h图4.8搜索页面实现方法。从默认的false改为true即可实现搜索框自动获取焦点。搜索建议和搜索历史的按需展示功能通过判断当前搜索列表长度使用v-if和v-else控制这两个区域的显示和隐藏，使用JSON方法把数据持久化存储在本地，并使用set集合和reverse方法去重和反转列表。REF_Ref16965\h图4.9搜索页面实现。图4.SEQ图4.\*ARABIC8搜索页面实现方法图4.SEQ图4.\*ARABIC9搜索页面实现4.2.5商品列表实现基于master分支在本地创建goodslist子分支，用来开发商品列表相关的功能，调用getGoodsList方法获取商品列表数据：将

goods_list

页面中，关于商品item项相关的UI结构、样式、data数据，封装到my-goods组件中，在goods_list组件中，循环渲染my-goods组件即可，和data节点平级声明filters过滤器节点用来处理商品价格，REF_Ref17478\h图4.10商品列表组件实现方法。在data中定义isloading节流阀防止发起额外的请求，在请求数据前后，分别打开和关闭节流阀，为

view

组件，并绑定

click

点击事件处理函数，定义goodsDetail事件处理函数点击商品item项跳转到详情页面。REF_Ref17687\h图4.11商品列表成功页面。图4.SEQ图4.\*ARABIC10商品列表组件实现方法图4.SEQ图4.\*ARABIC11商品列表成功页面4.2.6商品详情实现基于master分支在本地创建goodsdetail子分支，用来开发商品详情页相关的功能，REF_Ref18072\h图4.12商品详细页面组件引用在onLoad中获取商品的Id，并调用请求商品详情方法在methods声明getGoodsDetail方法，为轮播图中的image图片绑定click

事件处理函数实现轮播图的预览效果，在页面结构中，使用rich-text组件，将带有HTML标签的内容，渲染为小程序的页面结构，使用字符串的replace()方法，为img标签添加行内的style样式，从而解决图片底部空白间隙的问题，使用字符串的replace()方法，将webp的后缀名替换为jpg的后缀名，用基于uni-ui提供的

组件来实现商品导航区域的效果，点击商品导航组件左侧的按钮，会触发uni-goods-nav的

@click

事件处理函数，事件对象e中会包含当前点击的按钮相关的信息跳转到购物车页面。REF_Ref18686\h图4.13商品详情成功页面图。图4.SEQ图4.\*ARABIC12商品详细页面组件引用图4.SEQ图4.\*ARABIC13商品详情成功页面4.2.7购物车实现基于master分支在本地创建cart子分支，用来开发购物车相关的功能，根目录中创建

store

文件夹，REF_Ref18885\h图4.14购物车实现Vuex构造。专门用来存放vuex相关的模块，在

main.js

中导入

store

实例对象并挂载到Vue的实例上，在store.js模块中，导入并挂载购物车的vuex模块。封装一个将商品信息加入购物车的mutations方法，命名为addToCart。根据提交的商品的Id，查询购物车中是否存在这件商品，如果不存在，则findResult为undefined；否则，为查找到的商品信息对象，如果购物车中没有这件商品，则直接push，如果购物车中有这件商品，则只更新数量即可。REF_Ref19166\h图4.15添加购物车成功图。图4.SEQ图4.\*ARABIC14购物车实现Vuex构造图4.SEQ图4.\*ARABIC15添加购物车成功图通过mapState辅助函数，将Store中的cart数组映射到当前页面中使用，在UI结构中，REF_Ref19430\h图4.16购物车页面实现方法。通过v-for指令循环渲染自定义的my-goods组件，为商品的左侧图片区域添加radio组件，封装名称为showRadio的props属性，来控制当前组件中是否显示radio组件，当点击radio组件，希望修改当前商品的勾选状态，此时用户可以为my-goods组件绑定事件，获取当前商品的

goods_id

和

goods_state，在mutations声明updateGoodsState

方法，用来修改对应商品的勾选状态更新购物车中商品的勾选状态。为my-goods组件封装uni-ui提供的NumberBox组件，动态为

NumberBox

组件绑定商品的数量值，封装名称为showNum的props属性，来控制当前组件中是否示

NumberBox

组件，用到uni-ui的uni-swipe-action组件和uni-swipe-action-item组件来实现滑动删除的UI效果，mutations节点中声明removeGoodsById方法，从而根据商品的Id从购物车中移除对应的商品。REF_Ref19819\h图4.17购物车成功页面。图4.SEQ图4.\*ARABIC16购物车页面实现方法图4.17购物车成功页面4.2.8登录与支付实现基于

master

分支在本地创建

settle

子分支，用来开发登录与支付相关的功能，点击了结算按钮之后，需要先后判断是否勾选了要结算的商品、是否选择了收货地址、是否登录。在

my-settle

组件中，为结算按钮绑定点击事件处理函数，组件的methods节点中声明settlement事件处理函数settlement方法。user.js

模块的

state

节点中，声明

token

字符串，组件中，使用

mapState

辅助函数，从

m_user

模块中将

token

映射到当前组件中使用，在

components

目录中新建登录组件和用户信息组件，来实现在

my.vue

页面中，实现登录组件和用户信息组件的按需展示。为登录的

button

按钮绑定

open-type

属性，表示点击按钮时，希望获取用户的基本信。user.js

模块的state节点中，声明

userinfo

的信息对象，REF_Ref20208\h图4.18userinfos映射使用方法。通过在methods中的方法saveUserInfoToStorage来持久化存储用户登录数据。在

methods

中定义

getToken

方法，调用登录相关的API，实现登录的功能，调用登录接口，换取永久的token。在购物车页面，当用户点击“结算”按钮时，在

my-settle

组件的

methods

节点中，声明一个叫做showTips

的方法，专门用来展示倒计时的提示消息，如果用户没有登录，则3秒后自动跳转到登录页面。REF_Ref20779\h图4.19一键登录页面成功图。在自动跳转到登录页面成功之后，把返回页面的信息存储到vuex中，从而方便登录成功之后，根据返回页面的信息重新跳转回去，返回页面的信息对象，主要包含{openType,from}两个属性，其中openType表示以哪种方式导航回之前的页面；from表示之前页面的url地址。REF_Ref21008\h图4.20个人信息成功界面。图4.18userinfos映射使用方法图4.19一键登录页面成功图图4.SEQ图4.\*ARABIC20个人信息成功界面系统测试5.1测试计划5.1.1测试范围与主要内容主要测试范围为小程序页面加载内容，页面布局，页面响应速度，页面跳转，页面跳转数据传递，功能按钮作用已经小程序的兼容适配。5.1.2测试方法正因为黑盒测试仅仅对软件的功能模块进行测试，所以黑盒测试也称为功能测试REF_Ref29879\r\h[18]。使用边界值法把输入条件规定范围，取范围的边界的值作为测试用例的输入数据。使用场景法把程序的实际运行环境进行模拟尽可能考虑到用户使用场景进行用例设计。在页面功能完善情况下，为后面性能测试打下测试基础。5.1.3测试环境通过表格的形式给出系统测试所需的软硬件环境，可以更鲜明的了解本微信小程序使用的硬软件相关配置。本微信小程序基于uni-app框架进行开发，使用HBuilderX进行编写代码，微信开发者工具进行运行，选用访问服务器数据库的方式获取数据，对于测试运行环境要求相对较低。REF_Ref1038\h表5.1测试环境表5.SEQ表5.\*ARABIC1测试环境软件环境操作系统Windows10技术搭建JavaScript+VueX+uni-app+Vue2+Postman数据库平台服务器测试平台HBuilderX3.7.3+微信开发者工具2.26.2硬件环境处理器骁龙8+Gen1内存8GB硬盘空间128GB5.2功能测试5.2.1一键登录授权测试表5.SEQ表5.\*ARABIC2一键登录授权测试编号功能项测试点预期结果测试结果1一键登录授权点击一键允许，允许登录成功通过2点击一键授权，取消登录失败通过测试分析最后结果当取消授权登录提示：图5.SEQ图5.\*ARABIC1消授权登录提示5.3兼容性测试性能测试是用户需求、系统响应时间的需求，是否超出使用者所能承受的限度，它是对交易地、速度、效率等与时间有关的性能要求进行评估，以检验系统的性能满足用户的要求，并通过试验证明系统能满足预定的要求。总体上，各个功能模块都能正常工作，系统的设计基本满足了系统的要求；界面简洁，操作简单，系统易用。总体上，整个系统的研制过程很顺利，各部分功能均得到了良好的应用。此项设计的发展将极大地促进和完成下一步的改善，并将使我们的系统性能得到进一步提高。5.4测试结论本小程序通过在微信开发者工具中模拟环境下进行测试，通过功能测试，本小程序各功能模块功能正常。通过接口测试，本小程序各接口请求数据返回正常。通过代码审查，本小程序符合编码规范。通过兼容性测试，本小程序可以兼容安卓、苹果不同机型。需求文档中所描述的相应功能全部实现正常，通过测试已达到可发布测试标准。总结与展望为期三个多月的毕业论文写作已经接近尾声。在写作过程中一路跌跌撞撞，最终也还算是圆满；整个写作的过程可以说是紧张而又充实的。10月初，在系部和指导老师的督促下完成了对论文题目的确定，随后我们进行了线上开题答辩；在答辩过程中，老师们在聆听了我们开题答辩中提到的行文思路、技术路线、整体框架过后。就我们不成熟的构思进行梳理，帮助我们明确论文的核心要素，充实论文的工作量。论文中出现的许多问题也在导师的指导下得到了及时的解决，慢慢的论文开始成型。3月到4月，主要是论文的修订完善过程，通过与指导老师的不断沟通，初稿基本完成，随后便是查重降重的过程。在这个过程中我深刻的感受到了知识的强大，在论文的修改中我发现我们应该深入的探讨问题，而不仅仅局限于表面，这样创作出来的文章才是有所价值的。本篇论文主要运用到JavaScript语言、Vuex、uni-app技术、Vant框架，微信开发者工具、HBuilderX代码编辑工具、GIT管理项目工具、MySQL数据存储。在通过不断地查阅资料后，我对这些知识也有了更深的理解，深刻明白除了搞清楚书本上现有的知识外，自学自钻也是十分重要的。后者的过程往往更能产生强大的效果。参考文献逯连静,陈国荣,徐琳君.新媒体环境下科技期刊微信小程序应用探究[J].传播与版权,2022(04):78-80.DOI:10.16852/ki.45-1390/g2.2022.04.025.王艳君,高宇乾.讲座管理微信小程序的设计与实现[J].自动化技术与应用，2022,41(09):153-156.DOI:10.20033/j.1003-7241.(2022)09-0153-04.胡梦佳.微信小程序的场景化研究[D].武汉理工大学,2019.DOI:10.27381/ki.gwlgu.2019.002023.张春玲.移动APP下母婴产品知识推广平台的设计与实现[D].中国地质大学(北京),2017.朱玉强,马继业,范翠丽.数字人文视域下图书馆实体展览数字化推广实践——以搭建微信小程序框架下JSPWiki等为例[J].图书馆研究与工作,2022(09):33-37.康鲜菜.大学生综合素质测评系统的设计与研究[J].信息与电脑(理论版),2018(15):50-52.常昊.基于微服务架构的建材电商的设计与实现[D].北京交通大学,2021.DOI:10.26944/ki.gbfju.2021.003241.胡玉凤.网络消费者在线购物车使用及放弃行为影响因素研究[D].西南交通大学,2013.李霞.基于微信小程序的高校新生预报到系统设计与实现[J].微型电脑应用,2022,38(07):12-15.于丁一.基于混合开发的手工艺品电子商务系统的设计与实现[D].北京邮电大学,2019.吴自力,徐苗桑,潘安.基于公众号的小程序搭建与应用分析[J].中国数字医学,2022,17(07):35-38+61