基于可視化農業的“新農場”微信小程序開發

姚永忠 趙曉凡 陳燕

【摘 要】近年來，隨著微信小程序的興起，為農產品電商提供了新的平臺。利用微信小程序提供的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.