基于节气文化的服饰商城微信小程序的设计与实现

2023-12-11李梓璇马慧珍

科学与信息化 2023年21期

李梓璇马慧珍

郑州电力职业技术学院河南郑州 450000

1 绪论

1.1 国内研究现状及分析

各种纷繁复杂的App﹑软件，虽然可以实现完整的功能，但需要下载安装，安装于手机内存，一直占用着内存空间，太多的App可能会导致内存不足，造成功能不能实现，影响用户使用。当前的App市场基本饱和，几乎所有的领域均已覆盖。微信小程序的出现，是智能手机端的一次革新。微信小程序无须下载安装，几乎不占用的内存空间和占用微信公共使用的内存空间。除此之外，微信小程序一次开发，可以适配多终端。开发周期短，容易推广成本低等特点，让微信小程序可以迅速占领空白领域客户渠道。

通过社会调查，几乎人人使用智能手机端来随时查看天气预报，单纯的预报温度范围﹑下雨或者下雪量已不能很好满足客户需求。目前天气预报App已有详细规划穿搭的建议的趋势。但是没有根据实时温度和节气准确推荐穿衣的App，比如今天你是穿衬衫还是毛衣，穿羽绒服还是风衣。所以，将天气预报与服饰推荐相结合是十分必要的。让人们在查看天气之后，浏览建议穿衣搭配，用形象直观的图片来详细建议和规划出适合次日天气状况的穿搭指南，有需要的可以直接购买。

1.2 系统开发技术

1.2.1 使用的开发平台。“微天气时尚记”微信小程序，主要由两个部分组成。分别是响应数据绑定和页面管理。响应的数据绑定系统又是响应数据绑定的核心，基于微信的MINA框架，将数据逻辑和页面这两部分合起来组成了响应的数据绑定系统。在该系统上进行小程序开发时，该框架会将逻辑层和视图层进行绑定，当在视图层点击按钮的时候，视图层会直接发送相应的事件给逻辑层，逻辑层找到并执行对应的事件处理函数；然后触发回调函数，逻辑层执行相应的操作，快捷迅速。页面管理框架，管理了整个小程序的页面路由。该微信小程序页面的数据﹑方法﹑生命周期函数都注册到了页面管理中。该框架可以处理很多复杂的操作以提高开发者开发效率[1]。“微天气时尚记”微信小程序的框架系统分为用户端（前端）和管理员段（后端）。用WXML和WXSS作为该程序的视图层描述语言。WXML结合地图﹑表单﹑视图容器等组件，在响应的数据绑定系统上，构建页面[2]。同时运用 JavaScript的逻辑层框架，为视图层与逻辑层间提供了数据传输和事件系统，这样在开发过程中可以更多地专注于数据与逻辑，省略一些复杂的过程。使用WXSS选择合适的CSS选择器，来进行全局样式和局部样式来作用小程序所有页面，并且采用底层支持的新的尺寸单位rpx，省略了换算的麻烦。除了全局页面展示，还用JS进行交互，相应用户的点击，获取用户的位置（用于天气预报定位）等[3]。基于该程序特点和各类数据库特点﹑操作难度，采用了云数据库这种开放源码的关系型数据库管理系统。使用微信公众平台提供的云开发和API实现快速上线和迭代。运用面向JAVA语言的编程接口，进行增添﹑修改﹑查询﹑删除等操作。搭建云数据库。

后端运用restful接口来接收前端发过来的request请求。再用Spring Boot框架封装的方法来调用数据库，最后将经过一系列操作过的数据传送给前端。

2 系统分析

对开发项目的系统化的分析，决定了开发项目的性质﹑开发项目的功能和开发项目的必要性。经济﹑操作﹑技术可行性以及需求分析对是否开发该项目的问题起决定性作用。

2.1 可行性分析

2.2.1 经济可行性。“微天气时尚记”微信小程序，采用微信公众平台提供的云开发平台，拥有完整的云端支持，从而弱化了后端和运维的概念。再运用云开发开发微信小程序时，不需要费时费力甚至花费钱财的搭建服务器。开发者可以借助云服务相互兼容﹑并不互斥的特点，同时使用微信公众平台提供的接口进行核心业务开发。除此之外，微信公众平台提供的组件﹑框架﹑服务端接口和开发小程序所需要的工具都是免费的，可以在微信公众平台自主下载。

微信通讯软件，为小程序开发者提供了便利和资源，大大提高了小程序开发效率，缩短开发时间，降低生产成本。

2.2.2 技术可行性。本微信小程序用WXML和WXSS作为该程序的视图层描述语言。采用逻辑层和视图层交互的矿及系统。WXML结合地图﹑表单﹑视图容器等组件，在响应的数据绑定系统上，构建页面。同时运用JavaScript的逻辑层框架来视图层与逻辑层间的数据传输和事件系统，专注于数据与逻辑，省略一些复杂的过程。使用WXSS选择合适的CSS选择器，来进行全局样式和局部样式来作用小程序所有页面，并且采用底层支持的新的尺寸单位rpx，省略了换算的麻烦。除了全局页面展示，还用JS裸机交互，相应用户的点击，获取用户的位置（用于天气预报定位）等。对于大多数开发者，上述技术都可以实现[4]。

2.2.3 操作可行性。微信通讯软件，为小程序开发者提供了开发指南。开发者可以根据开发指南，并在该平台自主下载所需要的组件﹑服务端接口﹑开发工具。开发者还可以使用云端能力进行云开发。云开发控制台提供：云开发概览（查看云开发基础使用数据）﹑用户管理（查看小程序用户信息）﹑数据库（管理数据库，可查看﹑增加﹑更新﹑查找﹑删除数据﹑管理索引﹑管理数据库访问权限等）﹑存储管理（查看和管理存储空间）﹑云函数（查看云函数列表﹑配置﹑日志和监控）﹑统计分析（查看云开发资源具体使用统计信息）的功能[5]。为开发者提供了很好的开发平台，大大降低开发者操作难度。

综上所述，“微天气时尚记”微信小程序的开发是完全可行的。

2.3 需求分析

根据前面国内的研究现状及分析，为符合用户需求，小程序需要实现的功能有：

自动识别用户登录﹑天气查看功能﹑商品浏览功能（季节专区为特色，会提示节气）﹑订单功能﹑购物车功能﹑收货地址管理功能﹑支付功能。

2.4 系统结构分析

2.4.1 系统模块功能。根据需求分析，该微信小程序一共详细分了7个模块：用户登录模块﹑天气预报模块﹑商品浏览模块﹑订单模块﹑购物车模块﹑收货地址管理模块﹑微信支付模块。

2.4.2 系统功能结构图。“微天气时尚记”微信小程序系统整体分为两大部分，一部分是前台用户模块，另一部分是后台用户模块。

前台用户模块又细分为会员登录注册模块﹑查看天气模块﹑查询商品模块﹑浏览商品模块﹑购物车模块﹑购买模块。

后台管理层模块，又详细分为登录模块﹑天气模块﹑店铺管理模块﹑商品管理模块﹑订单模块﹑退出模块。其中商品管理模块中的商品的状态以及商品的详情信息，由管理员写在数据库的数据决定。在实际开发过程中，该校小程序使用了微信公众平台提供的组件﹑服务端接口﹑开发工具﹑接口等开发者所需元素，在该平台上下载开发“微天气时尚记”小程序所需组件和接口等。在逻辑层和视图层组成的框架之上，用WXML和WXSS作为该程序的视图层描述语言。WXML结合地图﹑表单﹑视图容器等组件，在响应的数据绑定系统上，构建页面。用云端构建数据库，实现了用户查看天气﹑浏览商品﹑订单﹑购物和﹑收货地址管理的功能。

该程序的开发过程避免的很多复杂的操作。简化了开发过程后期小程序上线时，可直接在腾讯云中申请域名与服务器，不需要考虑后台的布置等。

3 系统实现

根据需求，本系统分为前台用户﹑后台管理员两个大模块。两大模块又细分为6个功能模块，用户登录﹑天气预报﹑订单管理﹑商品浏览﹑收货地址模块和订单模块。除此之外，界面设计的简洁明了，操作交互按照用户习惯进行设计，节约了用户对应用的学习时间。

根据前面描述的系统设计，本章主要对个功能模块的设计界面和该界面是如何实现功能的进行了详细的介绍。

3.1 用户登录模块

打开“微天气时尚记”微信小程序，该程序会自动直接获取微信用户的微信头像﹑微信名称等信息。这个是微信内部自带的认证方法。用户可以通过首页的“欢迎进入”按键进入该校程序主页。如果用户是首次登陆，会返回false，弹出允许授权的对话框，选择允许授权，会返回true，然后小程序就会获得用户微信信息。小程序是在微信中打开的，不支持js的跳转因此减少了用户进入恶意网站的可能性，保障了用户的安全性。同时，通过扫码的方式就能打开小程序，对手机性能和内存的要求也大大降低。

3.2 天气预报模块

天气预报页面位于主页的天气页面，是用户点击首页的“欢迎进入”按键才显示的页面。当用户进入首页后，小程序通过接口自动定位用户当前位置，获取该地区气温变化，该页面将会显示当天及未来三天的天气情况。

3.3 购物车模块

购物车模块主要用于登录用户进行商品的选择和管理。

3.4 商品浏览模块

在商品浏览模块在衣柜页面。进入衣柜界面首先是商品分类界面。3个主要分类，分别是：女装专区﹑男装专区﹑季节专区。用户可以通过点击分类找到指定类别的商品。男装专区和女装专区包含了一年四季的衣服。

季节专区是本小程序的特色专区，这些商品是根据气温变化而提供的。提供商品的依据是根据适合中国人的“穿衣公式”——温度+衣服=26°。这是最适合中国人体表的温度。商品的信息由管理员直接写在数据库中，形成了一个电子微商城。如果用户注册登录了会员，支持在商品详情页面直接加入购物车和立即购买功能，商品详情页面会显示购物车已有商品数量。

季节专区功能实现是通过前端向后端输入一天变化的最高温度和最低温度，取平均值，根据“穿衣公式”和中国节气，推荐适合天气穿搭。比如春雨惊春清谷天，夏满芒夏暑相连，秋处露秋寒霜降，冬雪雪冬小大寒。不同材质﹑不同厚度的衣服能给人体表增加不同的温度。衣服种类和所代表的不同温度直接写在数据库中。