论文总字数：18136字

摘 要

微信小程序由于更加贴近用户的日常生活，以及有着丰富的引流入口和便捷的用户体验，使得小程序在社交、娱乐、旅游出行、购物餐饮和支付理财等领域获得了更多的流量和更广阔的商机，而市场在当前的发展阶段里，购物和饮食仍然是用户们最主要的消费需求^[11]。

基于SpringBoot水果商城微信小程序就是这样一个顺应时代发展的轻应用平台。本项目旨在根据现有的微信小程序的设计特点和方向，完成水果商城在微信小程序平台上的设计。而本文则对项目中的UI设计部分进行了详细的阐述。在对美团，饿了么等成熟的食品外卖平台的UI设计进行研究后，把前端系统按功能分为商品列表模块，商品详情模块，订单模块，购物车模块和个人中心模块，并画出了它们的框架图。本文介绍了UI的概念、意义及现状，介绍了前端设计所使用的微信开发者工具，展示了微信界面的基本样式和所实现的基本功能。接着对这些功能的实现方法进行了阐述。最后叙述了在软件编程的过程中小程序所出现的各种问题，并对这些意外情况的产生原因以及解决办法进行了详细介绍。

关键词：微信小程序; UI设计; 功能; 小程序

Design and implementation of Wechat applet based on springboot fruit store

Abstract

Wechat applets are more close to the daily life of users, as well as rich drainage entrance and convenient user experience, which make the applets obtain more traffic and broader business opportunities in social, entertainment, travel, shopping, catering, payment and financial management and other fields. In the current development stage of the market, shopping and catering are still the most important consumption needs of users ^[11].

Based on the spring boot fruit mall wechat applet is such a light application platform that conforms to the development of the times. This project aims to complete the design of fruit mall on wechat applet platform according to the design characteristics and direction of existing wechat applet. In this paper, the UI design part of the project is described in detail. After studying the UI design of meituan, hungry and other mature food delivery platforms, the front-end system is divided into commodity list module, commodity details module, order module, shopping cart module and personal center module according to their functions, and their frame diagrams are drawn. This paper introduces the concept, significance and current situation of UI, introduces the wechat developer tools used in front-end design, and shows the basic styles and functions of wechat interface. Then, the realization methods of these functions are described. In the end, it describes the problems of small programs in the process of software programming, and introduces the causes and solutions of these unexpected situations in detail.

Key Words: WeChat; UI Design; Function; Applet

目 录

摘要 I

Abstract II

目录 III

第一章 绪论 1

1.1 设计背景 1

1.2 社会需求 1

1.3 主要工作 2

1.4 论文架构 2

第二章 UI设计概述 3

2.1 UI设计的概念 3

2.2 UI设计的意义 3

2.3 UI设计的发展与现状 3

2.4 主要技术 4

2.4.1 微信开发者工具 4

2.4.2 基于WebStorm使用Less的技术 6

第三章 需求分析与设计 10

3.1 消费者的需求 10

3.2 功能设计 10

3.3.1 商品列表模块 10

3.3.2 商品详情模块 11

3.3.3 订单模块 11

3.3.4 用户模块 11

3.3.5 购物车模块 12

第四章 UI的实现 13

4.1 项目文件说明 13

4.2 客户端界面 13

4.2.1 商品模块 13

4.2.2 购物车模块 15

4.2.3 个人信息模块 17

4.2.4 地址管理模块 18

4.2.5 收藏夹模块 19

4.2.6 历史订单模块 20

4.3 部分功能说明 21

4.3.1 商品列表左分类和右水果的联动的实现 21

4.3.2 购物车总价格的实现 21

4.3.3 地址管理中增加地址和修改地址的区别 23

4.3.4 历史足迹功能的实现 24

4.3.5 历史订单功能的实现 26

第五章 遇到的问题与方法 29

5.1 地址管理问题 29

5.2 点击事件和长按点击事件重叠问题 29

5.3 计算总价格时出现了多位小数 30

5.4 商品列表页面显示不完全 32

5.5 当弹窗提示和返回上一个页面的功能产生了重复 32

5.6 由于onShow函数和onLoad函数区别造成的错误 33

第六章 总结与展望 35

6.1 总结 35

6.2 展望 35

参考文献 36

致谢 38

第一章 绪论

1.1 设计背景

近几年，我国的电子商务蓬勃发展，而水果产业也伴随着电子商发展的浪潮而迅速前进，有着鲜明的时代特征。许多有着先进眼光的水果商家，开始依托着各式各样的外卖平台，开起了网上商城。在网络时代未到来之时，传统的水果销售一般以大型超市和农贸市场为基本途径，但随着时代的发展，生活节奏的加快，更加方便，更高效率的线上购物受到了人们的追求，线上销售的水果新渠道在不断发展^[13]。

伴随着水果行业在电商领域的发展，美团等大众外卖平台在这个方向产生激烈的竞争，而对用户来说，是否有着好的UI设计所带来的良好购物体验，对其选择何种App起着重要的作用。好的UI设计，能够帮助购物者及时有效的获取信息，抓住消费者的心，使得消费者在店内能快速准确的找到所需商品并迅速下单，进而提高消费者满意度，提高受众数量，提高商城的竞争地位，从而获得更多收入。

1.2 社会需求

传统的同城生鲜供应模式一般以农贸市场和连锁超市为主，但由于水果易腐烂变质的特点，如何快速的把最新鲜的水果迅速销售给消费者一直是困扰水果商的难题。因此，当电商行业兴起之时，水果商们很快的意识到了它正是此问题的解决办法。与此同时，对于消费者而言，在生活节奏日益加快的城市化进程中，他们更愿意追求高效率、节省时间的购物体验，线上线下的新模式应运而生^[6]。

1.3 主要工作

研究微信开发者工具的使用方法，将微信开发者工具所使用的语言和之前所学的语言进行对比学习。

请支付后下载全文，论文总字数：18136字