基于可视化农业的“新农场”微信小程序开发

姚永忠 赵晓凡 陈燕

【摘 要】近年来，随着微信小程序的兴起，为农产品电商提供了新的平台。利用微信小程序提供的API接口以及10亿的用户数量，根据消费者的需求，结合可视化农业，设计一款能让消费者实时监控农产品生产过程并且能够亲自体验模拟种植收获的“新农场”微信小程序。

【关键词】可视化农业;新农场;微信小程序

一、引言

现代社会，人们对食品质量要求越来越高。为了能够足不出就能购买到农产品，消费者常常会通过互联网渠道购买，质量问题也成为消费者最为关心的话题，因此开发一款质量有保障的农产品电商应用APP非常有必要。2020年7月14日，阿里巴巴发布的《2020农产品电商报告》中显示2019年阿里平台农产品交易额为2000亿元。由报告可见，新零售时代下，传统的农产品销售方式正在由实体市场向电商平台转型，智慧农业环境下可以为农产品电商商品提供质量保障，农产品电商平台在未来具有广阔的市场空间。

二、系统概述

（一）微信小程序

微信小程序是一种不需要安装即可使用的应用，可跨平台访问。微信小程序是新零售最好的落地工具，推广速度快，背靠着微信10亿用户，能够带来巨大的用户量。并且成本低，可以有效降低运营成本。微信小程序的架构包括View视图层和AppService逻辑层，View视图层由WXML和WXSS编写来渲染页面结构，AppService逻辑层用来进行逻辑处理、数据请求、接口调用等功能，接受视图层的事件反馈，并将数据进行处理后发送给视图层。视图层通过WebView进行渲染，逻辑层通过JSCore运行。微信小程序可通过微信开发者工具来进行编辑开发，可以实现代码编辑、模拟手机调试、显示调试信息，也可以连接手机，在手机上预览调试。

（二）系统结构

整个系统分为小程序用户端和后台管理端，采用微信小程序/服务器架构为用户提供服务。利用微信小程序提供的API接口，小程序用户端主要实现登录、广告轮播图、查看商品详情、添加购物车、购买商品、模拟农场种植、查看农场监控、查看订单等功能。后台管理端主要实现登录注销、商品信息管理、订单信息管理、模拟农场种植信息管理等功能。其系统结构如下图1所示。

三、功能实现

（一）小程序用户端

1.页面设计

小程序页面共有三个导航页面，分别为商城页面、农场页面、我的页面。商城页面主要实现用户浏览商品信息、添加购物车、下单支付、查看广告轮播图等功能。购物车在页面底部，可以通过点击来控制显示与隐藏，购物车中可通过点击结算跳转到支付页面，支付成功后可看到订单详情及物流信息。农场页面可以实现用户的模拟种植收获，实时监控自己种植产品的生长状态及过程，也可以查看商城商品的生产收获过程。我的页面包含用户详情信息、常用收货地址、订单详情信息以及系统的基础设置。

2.功能模块

功能根据前后端的不同需求分为两大模块，其中小程序用户端分为七大功能模块，每个功能模块又分为若干子功能，如图2所示，后台管理端也为七大功能模块，每个功能模块又分为若干子功能，如图3所示。

以首页商城为例，重要功能模块实现如下：

1、点击左侧商品分类，右侧商品切换：用一个stats数组记录每一项index分类的状态，如被点击则设为true，并通过class="{{categoryStates[index] ？ 'category-item-active' ： ''}}"对页面进行渲染。

2、判断购物车中是否存在商品：可以通过try{}catch（err）{}来进行判断，根据_id尝试从购物车集合中获取数据，await carts.doc（item._id）.get（）尝试是否能取到值，若carts集合中没有数据，须添加一条记录再进行判断。

3、商品添加到购物车按钮：点击商品后的加号，相应商品数量+1，数组cartData[]，键为Goods表的objectId，值为数量。具体js代码如下：

add： function （e） {

var goodsId = e.currentTarget.dataset.goodsId;// 获得所点商品id

console.log（goodsId）;

var cartData = this.data.cartData;// 读取目前购物车数据

var goodsCount = cartData[goodsId] ？cartData[goodsId] ： 0;// 获取当前商品数量

cartData[goodsId] = ++goodsCount;// 自增1后存回

this.setData（{

cartData： cartData// 设值到data数据中

}）;

}

4、购物车显示与隐藏：通过点击控制显示与隐藏，<view>层级通过z-index来使底部购物车区别权重最高，设为999，其次是弹窗主体，具体JS代码如下：

cascadeToggle： function （） {

if （that.data.maskVisual == 'show'） {

that.cascadeDismiss（）;

} else {

that.cascadePopup（）;

}

}，

5、購物车中商品增减：首先读取购物车数据cartData，需将数量为value的object转换为数组，再add方法末尾中调用就可以将购物车键值对转换成对象数组，从数组找到该商品，并修改它的数量，然后通过购物车弹窗将cartObjects渲染即可。

（二）后台管理端

1.功能设计

结合可视化农业，使用IP高清监控摄像头，经过RTSP协议采集监控摄像头对视频进行编码，通过局域网上传到EasyNVR服务器，再进行推流到EasyNVS云管理平台，最后发送到连接公网的设备显示。实现用户对农产品生产过程的了解，对农产品质量的监督保障有着积极作用。用户也可以实现模拟农场种植，体验忙碌工作后的休闲线上田园生活，收获自己的果实，有效的吸引用户使用。

2.功能实现

在摄像头为RTSP协议时，有管理系统公网服务器并且要将EasyNVR的视频分发到公网实时显示的情况下，EasyNVR+EasyNVS联合方案无疑是最合适的方案，EasyNVS视频管理平台能够对EasyNVR进行统一管理，获取EasyNVR的所有能力，工作原理如圖4所示。运营商提供网络支持搭建无线局域网，绑定IP地址使用RTSP协议开通一个RTSP通道，将监控摄像头的实时视频通过局域网传输到EasyNVR服务器中，并且推流存储到EasyNVS云管理平台，最后运用EasyNVR平台提供的api将视频监控分发到终端设备进行播放。

后台主要用PHP语言开发搭建，通过session会话保持用户登录状态，运用MySQL数据库来存储数据，上传部署到第三方云服务器上，实现数据的可视化管理。采用B/S架构，通过浏览器连接服务器实现对后台数据的可视化管理，管理员可以对后台数据进行添加、删除、修改、查询、审核等操作。MySQL数据库中共建立六张表，分别为小程序用户信息表、商品信息表、订单信息表、广告信息表、管理员信息表、权限管理表。

四、结束语

随着互联网+农业的发展，利用可视化农业的技术，让用户可以实时监控农场生产过程，对产品的质量及安全问题有深入的了解。根据用户的需求，新农场微信小程序可以实现消费者足不出户购买到健康农产品，可有效的带动农产品的生产销售，对可视化智慧农场的发展具有重大意义。

【参考文献】

[1]郭学超.基于微信小程序的土特产商城开发[J].安徽电子信息职业技术学院学报.2019.18（06）：6-11.

[2]傅伟，涂刚，张贤龙.基于微信小程序的电子商城设计与实现[J].电脑编程技巧与维护.2020（03）：60-62.

[3]黄有志.移动互联网时代下的微信商城创新模式分析[J].2016.（16）：145-146.

[4]明日科技.PHP项目开发实战入门[M]，吉林大学出版社.2017.3.

[5]王建伟.智慧农业微信公众平台的构建与应用[D].吉林农业大学.2016.

[6]倪兴国.农业统计数据可视化系统设计与实现[J].河北农业大学.2018.