“农创乐”微信小程序的设计与开发

known 发布于 2025-08-25 阅读(322)

摘 要:“互联网+”助力乡村振兴是目前推进农村经济发展的有效途径之一。设计开发了“农创乐”微信小程序,基于uni-app框架,采用HBuilderX开发工具,利用微信云开发提供的JSON数据库实现后台数据存储,实现了包括首页、分类、购物车、信息分享等功能模块。该小程序具备界面简洁、操作方便、功能齐全等特点,用户能够实现农产品交易,以及进行农产品生产销售经验分享,小程序的使用有助于提高农户收入,为助力乡村振兴提供思路。

关键词:互联网+;uni-app;云开发;小程序;乡村振兴

中图分类号:TP311.5 文献标识码:A 文章编号:2096-4706(2024)08-0020-04

0 引 言

随着互联网与传统产业的融合发展,农村电商也迎来了快速发展,“互联网+农业”逐渐成为现代农业发展的新趋势,同时也为我国助力乡村振兴、推进农村经济发展提供了新思路[1]。我国农村地区的互联网用户规模不断扩大,根据《中国数字乡村发展报告(2022年)》的数据,截至2022年6月,农村网民数量已达到2.93亿,农村互联网普及率达到58.8%,较十三五初期增长了一倍[2,3],互联网技术为农村提供了便捷的信息获取渠道。农民可以通过互联网了解农业科技知识,掌握先进的种植技术。同时,互联网电商平台也为农产品销售提供了新的商业模式,农民可以通过电商平台销售农产品,扩大销售范围,增加收入。尽管互联网在农村地区发展迅速,但是专注于农产品销售的平台相对较少,相对专业的农产品种植、生产、销售等环节没有统一规范的流程,种植和销售信息不对称,这些问题限制了农村经济的进一步发展。

从上述分析可见,目前市场上缺乏一款综合农产品种、产、销一体化流程的助农平台,为了促进农村电子商务的发展,推动农业现代化,设计开发一个集农业知识获取、农产品销售等多功能于一体的农业服务平台非常必要。这不仅可以帮助农民获取专业知识,提高种植技术和劳动生产率,也可以拓宽农产品销售渠道,增加农民收入。

我们利用uni-app+云开发技术,根据农村农产品特点,设计开发了“农创乐”微信小程序,该平台集合了农业知识获取、农产品销售等多种功能,可使用户便捷地获取农业种植和销售方面的专业知识,帮助农户更好地销售农产品,从而提升农户的收入水平。

1 开发环境

为了满足多平台的需求,该设计的前端部分采用了基于Vue.js的uni-app跨平台UI框架技术进行开

发[4,5]。后端部分采用微信云开发提供的JSON数据库来进行数据传输与存储,使用HBuilderX进行开发[6]。

微信小程序具有使用方便、占用存储空间小的优点,用户可以通过扫描二维码或点击分享等多种方式轻松进入小程序。相比传统APP,用户无须下载安装即可使用小程序,大大降低了用户的使用门槛。同时,微信的庞大用户群体为小程序提供了充足的潜在用户基础,有利于小程序推广和传播,扩大农产品销售渠道。利用微信小程序开发助农平台,可以吸引更多用户下载使用,学习分享农业知识,推广农产品,实现农业信息服务与电子商务的有机结合。

uni-app是一个使用Vue.js开发所有前端应用的框架,可发布到IOS、Android、H5以及微信小程序、百度小程序、头条小程序、支付宝小程序等多个平台,开发者只需编写一套代码就可以发布到多个平台上,具有极强的跨平台能力,并且由于采用Vue.js进行开发,开发者只需要学习Vue即可上手进行开发,学习成本和难度较低。此外,作为一款国产软件,uni-app具有较为活跃的社区,插件资源较为丰富,可以较好地满足开发需要[7]。

该小程序主要分为视图层、逻辑层、数据存储层3个层次,视图层部分主要由Vue.js的HTML、css部分组成,当用户在视图层进行操作时,视图层将数据和操作发送到逻辑层,逻辑层通过JavaScript和云函数从数据存储层中获取数据,并返回到视图层进行渲染[8,9]。系统层次图如图1所示。

2 功能设计与实现

2.1 系统结构设计

该平台包括首页模块、产品分类模块、购物车模块、信息分享模块、个人中心模块,系统功能图如图2所示。

2.2 数据库设计

平台采用腾讯云开发提供的云数据库来存储商品信息、用户信息、文章信息等相关数据,微信云开发是微信与腾讯云联合开发的一种基于Node环境的原生Serverless云服务,代码运行的服务器环境都由云端平台实现,云开发可以使开发者专注于业务逻辑的实现,无须理会服务器搭建、域名注册、后端数据接口实现等繁缛末节,开发门槛更低,效率更高,云开发提供了云数据库、云存储、云函数3大基础能力支持,此外还提供数据可视化的支持,云数据库是一种JSON数据库,数据库中使用多个JSON格式的对象进行数据存储;云存储提供了一块存储空间,提供了文件的上传下载能力,开发者可以通过小程序端或云函数调用相关的API使用云存储功能;云函数是一套操作接口,开发者可以通过编写代码上传到云函数,通过微信提供的API接口调用上传的代码可以方便地操作数据和文件资源[10]。

在软件开发的过程中,我们创建了多个JSON数据集合,例如Goods、Papers、Users、Critic等数据集合。

Goods集合用于存储商品的相关信息,集合拥有goods_id、goods_latitude、goods_longitude、goods_name、goods_price、goods_price、pics、cate等字段,其中goods_id用于表示商品的唯一id,goods_latitude用于表示商品产地的纬度信息,goods_longitude用于表示商品产地的经度信息,goods_name用于表示商品名称,goods_price用于表示商品的销售价格,pics用于表示商品图片的存储路径,cate用于表示商品的分类。

Users集合用于存储用户的相关信息,集合拥有_id、_openid、avatarUrl、nickName等字段,_opendid字段通过调用云函数获取,用于表示用户使用小程序时的唯一身份标识,avatarUrl字段用于表示用户头像的存储路径,nickName字段用于表示用户的名称。

Papers集合用于存储文章的相关信息,集合拥有_id、paperid、title、cTime、content、img、author、_openid等字段,_id字段用于表示文章的唯一标识id,paperid字段用于表示文章的所属分类,title字段用于表示文章的标题,cTime字段用于表示文章的发布时间,采用yyyy-MM-dd的日期格式进行存储,content字段用于表示文章的内容、img字段用于表示文章封面图片的存储路径,author字段用于表示文章发布的作者,_openid字段用于表示评论发布者的唯一id。

Critic集合用于存储文章的评论信息,集合拥有_id、_openid、authorname、cTime、content、title、wzid等字段,_id字段用于表示评论的唯一标识id,_openid字段用于表示评论发布者的唯一表示id,authorname字段用于表示发布者的名称,cTime字段用于表示评论的发布时间,content字段用于表示评论的内容,title字段用于表示评论发布者头像的存储路径,wzid字段用于表示被评论文章的唯一标识id。

以下以Goods集合为例,Goods集合的详细设计如表1所示。

2.3 首页模块设计与实现

首页模块包括搜索栏、轮播图、产品推荐、气象预警,主要是用户可以搜索感兴趣的农产品或者查看产品推荐,同时可以根据气象预警购买时令果蔬。

uni-app中提供了自带的swiper滑块组件以及其附带组件的swiper-item视图容器组件。本文使用这两个组件实现轮播图效果,在开发小程序的过程中主要用到了swiper组件的以下几个属性:

1)“indicator-dots”:该属性用于显示swiper组件内部的下半部分显示灰色圆点,代表当前是第几张轮播图,设置“:indicator-dots=true”表示启用灰色圆点。

2)“autoplay”:代表是否启用轮播图自动播放,属性默认值为“1”,将值设置为“true”,表示启用轮播图自动播放。

3)“interval”:此属性用于设置轮播图自动切换图片的间隔,单位为毫秒,设置“:interval=\"3000\"”表示设置3秒自动切换当前轮播图。

4)“duration”:表示轮播图切换动画的持续时长。

5)“circular”:表示是否启用轮播图循环播放。

产品推荐功能通过JavaScript从云数据库中获取到符合推送条件的商品信息,存入变量floorList中,并通过v-for循环渲染页面信息,并为每一项商品添加@click事件gotodetail(item.id),将每一项商品的id作为页面参数传递到商品详情页面,商品详情页面通过小程序的生命周期函数onLoad()获取传递的页面参数,通过传递的页面参数商品id查询对应商品的详细信息并渲染到视图层。首页页面如图3所示。

2.4 产品分类模块设计与实现

产品分类模块主要包括自种蔬菜、新鲜水果、特色产品三个模块,分类页面左侧部分用于展示商品的不同类别,而右侧部分则显示当前选中类别下所包含的商品,该功能主要通过函数getCateList()获取后端数据实现。

左右两侧栏目使用uni-app的scroll-view组件实现,设置scroll-y属性使其可沿y轴滑动。由于不同设备的逻辑像素和物理像素可能不一致,调用uni.getSystemInfoSync()方法动态获取当前屏幕信息,将sysInfo.windowHeight-50设置为scroll-view的高度。

通过active变量记录当前选中的商品分类,并使用如下表达式设置不同的CSS样式表示选中状态“lass=\"[left-view-item,i=== active ? active : ]\"”,当i等于active时,增加active样式。

2.5 购物车模块设计与实现

购物车模块允许用户将感兴趣的商品加入购物车,并最终进行订单结算。其实现流程如下:首先通过uni.chooseAddress()获取用户微信中保存的收货地址信息,并用uni.setStorageSync()将购物车商品信息存储在本地。同时用uni.getStorageSync()方法获取本地存储的购物车数据。当用户点击结算时,首先验证是否选择了需要结算的商品,然后判断是否已选择收货地址,最后校验用户是否已登录。符合条件后,将购物车中勾选的商品生成订单,并跳转到结算支付页面。生成订单的逻辑在payOrder()自定义函数中实现。该函数从购物车商品数组中过滤出goods_state为true的对象,生成包含订单商品信息的新数组,同时添加订单状态,最后将数据上传到数据库的order表保存。

2.6 信息分享模块设计与实现

信息分享模块包括三个板块:选种、种植和销售,选种板块:主要涵盖有关农作物种子选择方面的相关经验信息。种植板块:主要提供各类农作物的种植经验分享。销售板块:分享有关农产品销售经验,包括时下流行的直播电商等销售方式。所有的文章都由真实用户编辑和分享。效果如图4所示。

信息分享页面分为分类栏和文章列表两部分。分类栏通过scroll-view组件实现,设置scroll-x属性使其能横向滑动,内部插入3个view组件显示分类标签。文章列表从云数据库获取数据渲染,点击文章后跳转到详情页面。文章详情页面采用rich-text组件显示内容和评论。页面内嵌Button组件,绑定@click事件,点击后跳转到发布评论页面。发布评论功能通过RichText富文本编辑器实现。

2.7 个人中心模块设计与实现

个人中心模块包含以下功能:订单管理、收货地址管理、发布文章、我的文章以及联系客服。订单管理功能允许用户对未付款订单进行付款操作,同时也提供了对已支付和已收货订单的申请售后操作。效果图见图4。

订单管理功能分为待付款、待收货、退款/售后和全部订单四个板块。通过使用JavaScript,根据当前板块向云数据库发送请求,获取符合条件的订单信息,并将订单信息渲染到页面上。

联系客服功能通过微信的Button组件提供的接口能力open-type=“contact”实现。为了实现界面样式的统一,将Button组件的style属性设置为透明样式,并在其上方覆盖view组件。当用户点击该组件时,系统将自动跳转到客服咨询页面。

3 结 论

互联网+助力乡村振兴有助于实现智慧农业的快速发展,设计开发的“农创乐”微信小程序,实现了农产品种植、生产、销售等一体化服务,通过系统整合农产品信息、货源信息,实现农产品购买全流程,信息分享模块还为用户提供了专业农业知识的学习渠道。同时小程序的设计还存在一定的不足,例如只能实现农产品的销售,适应范围较小,只能适合某个特定地区的农产品宣传和销售,同时对售后相关的功能还没有实现。“农创乐”小程序的设计与开发,旨在为构建农产品一体化服务平台提供新思路。

参考文献:

[1] 陈晓琴,王钊.“互联网+”背景下农村电商扶贫实施路径探讨 [J].理论导刊,2017(5):94-96.

[2] 蒋洪杰,欧阳曦.《中国数字乡村发展报告(2022年)》发布 [J].乡村科技,2023,14(4):2.

[3] 罗桂花.网络直播在农村电子商务发展的应用探究 [D].长沙:中南林业科技大学,2019.

[4] 李英玲,牛美雅,兰宏富.基于uni-app+SpringBoot的移动智能办公系统设计与实现 [J].西南民族大学学报:自然科学版,2022,48(3):313-321.

[5] 李书明,万然,崔童谣,等.基于uni-app框架的一部手机管生产APP的开发和应用 [J].现代信息科技,2023,7(15):35-38.

[6] 王晓星,黄建昌.基于微信小程序的应用开发浅析 [J].信息技术与信息化,2021(3):23-25.

[7] 廖黎莉,王磊,李太,等.基于uni-app框架的校园极简生活跨平台移动应用的设计与实现 [J].无线互联科技,2021,18(12):38-40.

[8] 洪运维,方世巧,李艳伟.数字化在传统手工艺传承与保护中的应用研究——以广西乡村为例 [J].现代信息科技,2021,5(1):113-116+120.

[9] 苏海阔,孙强.基于微信小程序的《易起学》平台的设计与实现 [J].现代信息科技,2021,5(15):148-152.

[10] 董傲通,文俊浩.基于小程序·云开发的实验室设备管理系统的设计与实现 [J].实验技术与管理,2019,36(10):282-284+288.

作者简介:梁粟钧(2003—),男,汉族,广西钦州人,本科在读,研究方向:计算机科学与技术;宁贵(2002—),男,汉族,广西玉林人,本科在读,研究方向:计算机科学与技术专业;查敏(1995—),女,汉族,安徽来安人,硕士研究生,助教,研究方向:人工智能;通讯作者:马秋宇(1991—),女,汉族,河北沧州人,硕士研究生,讲师,研究方向:模式识别与机器视觉。

收稿日期:2023-09-22

基金项目:广西科技师范学院自治区级大学生创新创业训练计划项目“轻松的农场主——种、产、销一体化助农扶贫平台”(S202311546086);2020年度广西高校中青年教师科研基础能力提升项目(2020KY23023)

DOI:10.19850/j.cnki.2096-4706.2024.08.005

Design and Development of“Benefits of Agricultural Innovation”WeChat Mini Program

LIANG Sujun, NING Gui, ZHA Min, MA Qiuyu

(College of Vocational and Technical Education, Guangxi Science amp; Technology Normal Univerity, Laibin 546199, China)

Abstract:“Internet +”is one of the effective ways to promote rural economic development. It designs and develops the “Benefits of Agricultural Innovation” WeChat Mini Program. The mini program is based on the uni-app framework and the HBuilderX development tool, utilizes the JSON database provided by WeChat Cloud Development to implement background data storage, and implementing functional modules including homepages, classification, shopping cart, information sharing. This mini program has the characteristics of simple interface, convenient operation, and complete functions. Users can engage in agricultural product trading and share their experience in agricultural product production and sales. The use of the mini program helps to increase the income of farmers, and provide ideas for supporting rural revitalization.

Keywords: Internet+; uni-app; cloud development; mini program; rural revitalization

标签:  表示 

免责声明

本文来自网络,不代表本站立场。如有不愿意被转载的情况,请联系我们。

iidomino cuppor