螺蛳粉电子商务平台开发与实现.docx

《螺蛳粉电子商务平台开发与实现.docx》由会员分享，可在线阅读，更多相关《螺蛳粉电子商务平台开发与实现.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、螺狮粉电子商务平台开发与实现摘要：针对疫情期间柳州螺狮粉产品及其原材料依托传统线下贸易模式存在的 交流滞后、信息不全、协同互动欠缺等困难问题，根据微信小程序的开发成本 低、易触达客户、无需下载等特点，设计开发一款基于微信小程序的销售柳州 螺狮粉特色产品的电子商务平台。通过市场调查研究，需求分析、系统设计、 系统实现等开发流程，以微信小程序开发工具及WXML、WXSS. JavaScript 作为技术栈，实现了平台商品展示、商品收藏、添加购物车、购买、查询订单 详情等功能开发，利用信息化手段推动了螺狮粉全产业链信息化智能化管理， 为区域农产品扶贫电子商务平台建设提供了有效信息模型。关键词：微信小

2、程序；电子商务；螺狮粉；Web开发者工具随着移动互联网的发展，移动设备的普及，在手机上购物已成为一 种不受空间、时间以及位置限制的新型购物方式。小程序依赖微信而生，自带 社交属性。用户无需下载，也可跳过注册的繁琐，提升了用户的购物体 验，以及通过微信社交圈的信任度可大幅度的提升成交率。基于移动互联网+ 当地农产品采用电商微信二合一的全新商业模式，融合云计算、大数据，5G 等，在销售产品的同时，增加农民的收入，带动地方经济的发展1。微信小程 序作为一款无需下载就可以直接使用的前端软件，相比于其他一般App来说， 带来了 更方便，体验好”的便利。目前小程序的应用也非常的广泛，范围超 过200多个行

3、业2。利用微信小程序技术能够有效推动螺狮粉的推广和销售30柳州螺狮粉的爆火,可以追溯到2012年，螺狮粉作为柳州的特色小吃登 上舌尖上的中国。之后更是以非物质文化遗产的身份进入走遍中国等 电视节目。柳州螺狮粉的爆红，也离不开柳州工业城市的工业思维的基因和柳 州市政府的大力支持。从柳州市政府政策来看，自2016年柳州市人民政府发 布促进柳州螺蛔粉产业发展的实施方案确立了 20162020年柳州螺狮粉 产业发展的目标。以推动柳州螺狮粉的品牌化、标准化、产业化发展。再到20 21年2月广西壮族自治区楼宇数字经济发展规划（20212025年）规戈I 建设螺蛔粉产业园，推进融合互联网+螺狮粉上中下游产业

4、信息数据的总 部楼宇建设，依托楼宇建立柳州螺狮粉产业大数据平台。依托目前的柳州市政 府政策，开发螺狮粉电商小程序，致力于拓展螺狮粉线上销售渠道，为新冠疫 情期间宅经济形势下，柳州市经济发展尽一份力4-6。1螺蛔粉电商小程序需求分析1.1 功能需求螺狮粉电商小程序的主要功能包含四大功能模块：首页、分类、购物车、我。 其中首页模块中又包含了搜索框、商品轮播图、特惠商品三个小模块；特惠商 品中又分别添加了超级秒杀和螺狮粉精选等功能。分类模块中复用了首页中的 搜索框，增设了一个分类列表模块，通过分类列表可以选择不同类型的商品， 又可以点击商品，进入查看商品详情，在商品详情模块中又可以添加到购物处 或收

5、藏商品。另外螺狮粉电商小程序购物车可以对添加的商品进行增加和减 少；也可以删除添加的商品；在购物车中对添加的商品进行结算，当结算时需 要添加用户的收货地址。在我模块包含了授权登录，登录后拥有查看我收藏店 铺和商品列表，也能够查看当前订单的状况。具体的功能模块如图1所示。1.2 性能需求 系统稳定性：多用户在购物时出现的系统卡顿、页面错误代码提示，以及闪退 等。需要在页面容错处理、服务器负载均衡等方面提升系统稳定性，增加用户 购物体验。系统可靠性：随着用户的增多，也许会因网络拥堵，造成信息没有 及时更新，造成用户购买时商品还有库存，下单完成后，出现库存不足的情 况。系统界面：整个系统页面主题风格

6、的统一，会给用户带来一定的好感度。 还要考虑网络卡顿时，图片资源未加载时，占位图片的使用，增强用户体验， 获取用户信任。13可行性分析为推广柳州螺狮粉等产品，帮助农民改善生活，带动区域经济发展引。将当地 特有农产品，例如：酸豆角、腐竹、螺蛔粉等信息，作为系统开发的数据支 持。2020年5月28日在柳州职业技术学院成立柳州螺狮粉产业学院，得 到了柳州市委、市政府的大力支持。在螺狮粉产业学院调研位于河西工业园区 的螺狮粉产业园区时，企业也提出目前螺狮粉产品已实现自动化、智能化、规 模化生产，但对于销售渠道来说，还没有专门为销售螺狮粉而开发的应用程 序，为拓展螺狮粉线上销售渠道，本文从开发一款专门销

7、售螺狮粉的电商小程 序为例，介绍软件开发的可行性。经济可行性：小程序无需下载客户端，依赖 微信就可以使用，用户使用微信也能轻松地把螺狮粉电商小程序分享给其他微 信用户，同时对于中小型企业的螺狮粉厂商也有利于减少推广成本。技术可行 性：开发该系统使用MINA框架。结合JavaScript嵌入式脚本语言及微信小程 序开发文档提供了系统的教程及使用规范。操作可行性：微信用户月活量非常 庞大，使用该系统时在微信中直接搜索即可使用，随开随用，符合现在人们的 生活习惯。2螺蛔粉电商小程序设计2.1 系统设计原则在互联网+螺狮粉”的背景下，螺狮粉电商小程序在设计时，结合柳州螺狮 粉产业学院联系的螺狮粉企业，

8、以螺狮粉自身特色，以螺狮粉销售,从而带动 酸笋、酸豆角、腐竹等农产品是使用量，达到扶贫的目标。通过螺狮粉电商小 程序，可以帮助用户了解产品详情，实现购买等活动。在设计螺狮粉电商小程 序页面时坚持以下原则：（1）以用户为中心；（2）页面布局简单明了；（3 ）主题风格统一；（4 ）系统稳定可靠。2.2 系统技术架构微信小程序原生MINA框架前端技术栈为WXSS （样式）、WXML（结构）、 JavaScript （逻辑）。MINA框架通过封装文件系统、网络通信、任务管理、 数据安全等基础功能提供微信客户，对上层提供一整套JavaScriptAPI,让开 发者专注与系统业务，快速构建一个应用。微信小

9、程序中每一个页面都包含四 个文件，分别是：WXSS文件、WXML文件、JS文件和JSON文件，其中W XML文件用来搭建页面基础视图结构，类似与HTML; WXSS文件来控制页面 展示的样式,类似于CSS ; JS文件是逻辑（脚本）文件，通过调用API接口实 现业务逻辑；JSON文件是页面的配置文件。微信小程序项目也包含app.wxss（全局样式文件）、叩p.js （全局入口文件）、叩p.json （全局配置文件）7o从图2看，微信小程序系统由逻辑层和视图层组成。MINA框架为页面组 件提供了 bindtap、bindinput bind-change等事件监听相关的属性，与事 件处理函数绑定

10、到一起，实现页面同步交互数据。通过数据绑定的机制，使得 视图会随着数据的变化而变化。响应的数据绑定机制也是小程序原生框架的核 心，通过这个机制使数据被修改时，视图会实现相应的更新。微信小程序为了 方便开发者，封装了很多操作，提供了丰富的API,让开发者可以通过简单的 几句代码，就可以实现丰富的功能。通过API接口的调用，可以方便地实现文 件操作、数据存储、支付等。微信小程序中的组件，作为微信小程序原生框架 的视图层的基础单元，类似于积木，可以通过组件的组合实现快速的开发。2.3 系统逻辑结构设计螺狮粉电商小程序是在微信原生框架MINA的基础上进行开发，微信小程序在 框架上实现页面、业务逻辑和接

11、口调用。螺狮粉电商小程序进行前后端分离， 使用J SON格式的数据进行前后端的交互。后台基于HTTPS提供API接口， 前端小程序通过API访问数据库，结合关系型数据库中存储的螺狮粉及其他配 料商品信息，将从数据库获取的信息以J SON格式的数据返回到微信小程序前 端，使用JS、WXML、WXSS展示给用户。2.4 数据库设计螺狮粉电商小程序，主要使用的数据表有：商品信息表、订单信息表、用户信 息表、收货地址信息表。2.4.1实体联系图设计使用实体-联系图（E-R图）， 来描述现实世界中螺狮粉这款商品的概念模型。如图3所示。图3螺狮粉商品 信息的E-R图订单信息包含：订单编号、买家ID、商品I

12、D编号、品牌名称、 商品价格、订单状态、购买数量、收货地址。2.4.2数据库物理设计在表1中， 以订单信息表为例，其结构如表1所示。3螺狮粉电商小程序的实现3.1 开发环境搭建开发步骤为：（1）打开小程序注册页面，注册账号并申请微信小程序AppI D； （2）下载安装微信开发者工具；（3）通过微信开发者工具进行项目搭 建；（4）项目成员及权限，项目管理人员负责整个项目的把控，包括进展及风 险。小程序项目通过产品、设计、开发、测试相互协调完成。3.2 功能模块实现根据实现思路和需求分析，包括一些关键代码实现了首页、分类、购物车和个 人中心四大模块。3.2.1用户登录模块用户进入微信小程序，如果需

13、要购买某件 商品时，需要进行微信小程序授权登录，首先获取用户信息，返回encrypted Data、rawDa-ta、iv、singature ;（其中 encryptedData 是加密数据,raw Data是用于计算签名，iv是加密算法的初始向量，singature是签名）然后执 行微信登录,获取code ;接着使用POST请求发送到后台users/wxlogin ;最 后将token和用户数据rawData存入本地。用户登录模块如图4所示。3.2.2 功能模块（1）首页模块，即在螺狮粉电商小程序的首页面通过自定义组件实现 搜索框功能。使用view , swiper及image组件实现轮播

14、图，同时展示特惠商 品。在WXSS中采用rpx，作为尺寸单位,能够实现微信小程序自适应屏幕尺 寸。（2）分类模块，在分类模块中同样复用首页自定义的组件搜索框，使用s croll-view及es7的async和await实现加载分类页面数据，并实现点击左侧 菜单，右侧数据动态渲染。（3 ）购物车模块，使用小程序选择收货地址API 及复选框组件实现渲染购物车数据，修改商品数量及单选和全选功能。在购物 处中实现支付首先获取微信的登录信息，创建待支付订单,获取。rdejnumb er0然后准备预支付，获取自己后台返回的支付相关的参数pay。发起微信支 付,提交获取的参数pay调用微信API支付接口，完

15、成支付。支付成功后,创 建待发货订单。（4）个人中心，获取登录信息，并显示收藏信息和查询订单状 态等功能。同时还包含了一个“意见反馈”模块，用户可以针对当前小程序的 使用过程中遇到的问题，提出建议和意见。以促使小程序从性能到美观程度更 加的优化。在该模块使用自定义组件实现封装图片组件。其中自定义搜索框组 件实现代码如下。要使用自定义组件，先需要在组件的JSON文件中进行自定 义组件声明自定义组件的JSON : komponent:true图4用户登录自定义组 件的 WXML : 搜索/navigator 在自定义组件 的JS文件中，需要使用Component。来注册组件，并提供组件的属性定义、

16、内 部数据和自定义方法。自定义组件的引入方法是，在使用自定义组件的面的J SON文件中进行引用声明。还要提供对应的组件名和组件路径。如首页中引入 使用自定义组件下方代码所示:usingComponents,:SearchInput:././c omponents/Searchlnput/Searchlnput在首页页面中使用自定义标签的方 法如下。从上述代码可看出,自定义组件的 使用方法就是将自定义的组件名当作标签一样去使用。4螺蛔粉电商小程序测试4.1 功能测试使用软件测试方法，对螺狮粉电商小程序进行功能和性能进行综合测试，在测 试过程中以系统需求作为测试依据，来判断程序是否满足预期结果8。

17、4.2 性能测试用户对小程序的满意度，另外一部分还取决于小程序的性能，小程序性能测试 包括页面响应速度、资源消耗、组件响应时间等。4.3兼容性测试从操作系 统、屏幕尺寸、微信版本三个方面进行测试，对螺狮粉电商小程序使用不同的 手机和微信版本进行真机调试，其兼容性测试如表2所示。表2兼容性测试测 试内容结果操作系统兼容性(iOS、Android. HarmonyOS )兼容屏幕尺寸兼 容性兼容微信版本兼容性兼容4.4 测试结论功能测试总结：系统主要的功能能正常运行，基本实现了系统初期设计的系统 需求，能够较好地满足用户的需求9。性能测试总结：系统能够更好地满足用 户运行需求，在压力测试下，能达到预期的设计指标。测试结果表面，螺狮粉 电商小程序在功能和性能上满足需求。5结论本文研究的主要目的是开发专门销售螺狮粉的电商小程序，运用微信小程序原 生MINA框架来实现一款面向螺狮粉销售的电子商务平台。微信小程序是一种 轻量级的应用，用户只需要扫一扫或搜一搜即可随开随用，实现了各 种应用触手可及的梦想。本文针对地方特色产品-螺狮粉，开发螺狮粉的电商小 程序，实用性强、开发推广成本低、能够更轻松的触达用户，推动柳州区域经 济发展，为当地农产品扶贫电子商务平台建设提供了有效模型。