基于可視化農(nóng)業(yè)的“新農(nóng)場(chǎng)”微信小程序開發(fā)

姚永忠 趙曉凡 陳燕

【摘 要】近年來，隨著微信小程序的興起，為農(nóng)產(chǎn)品電商提供了新的平臺(tái)。利用微信小程序提供的API接口以及10億的用戶數(shù)量，根據(jù)消費(fèi)者的需求，結(jié)合可視化農(nóng)業(yè)，設(shè)計(jì)一款能讓消費(fèi)者實(shí)時(shí)監(jiān)控農(nóng)產(chǎn)品生產(chǎn)過程并且能夠親自體驗(yàn)?zāi)M種植收獲的“新農(nóng)場(chǎng)”微信小程序。

【關(guān)鍵詞】可視化農(nóng)業(yè);新農(nóng)場(chǎng);微信小程序

一、引言

現(xiàn)代社會(huì)，人們對(duì)食品質(zhì)量要求越來越高。為了能夠足不出就能購買到農(nóng)產(chǎn)品，消費(fèi)者常常會(huì)通過互聯(lián)網(wǎng)渠道購買，質(zhì)量問題也成為消費(fèi)者最為關(guān)心的話題，因此開發(fā)一款質(zhì)量有保障的農(nóng)產(chǎn)品電商應(yīng)用APP非常有必要。2020年7月14日，阿里巴巴發(fā)布的《2020農(nóng)產(chǎn)品電商報(bào)告》中顯示2019年阿里平臺(tái)農(nóng)產(chǎn)品交易額為2000億元。由報(bào)告可見，新零售時(shí)代下，傳統(tǒng)的農(nóng)產(chǎn)品銷售方式正在由實(shí)體市場(chǎng)向電商平臺(tái)轉(zhuǎn)型，智慧農(nóng)業(yè)環(huán)境下可以為農(nóng)產(chǎn)品電商商品提供質(zhì)量保障，農(nóng)產(chǎn)品電商平臺(tái)在未來具有廣闊的市場(chǎng)空間。

二、系統(tǒng)概述

（一）微信小程序

微信小程序是一種不需要安裝即可使用的應(yīng)用，可跨平臺(tái)訪問。微信小程序是新零售最好的落地工具，推廣速度快，背靠著微信10億用戶，能夠帶來巨大的用戶量。并且成本低，可以有效降低運(yùn)營(yíng)成本。微信小程序的架構(gòu)包括View視圖層和AppService邏輯層，View視圖層由WXML和WXSS編寫來渲染頁面結(jié)構(gòu)，AppService邏輯層用來進(jìn)行邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用等功能，接受視圖層的事件反饋，并將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層。視圖層通過WebView進(jìn)行渲染，邏輯層通過JSCore運(yùn)行。微信小程序可通過微信開發(fā)者工具來進(jìn)行編輯開發(fā)，可以實(shí)現(xiàn)代碼編輯、模擬手機(jī)調(diào)試、顯示調(diào)試信息，也可以連接手機(jī)，在手機(jī)上預(yù)覽調(diào)試。

（二）系統(tǒng)結(jié)構(gòu)

整個(gè)系統(tǒng)分為小程序用戶端和后臺(tái)管理端，采用微信小程序/服務(wù)器架構(gòu)為用戶提供服務(wù)。利用微信小程序提供的API接口，小程序用戶端主要實(shí)現(xiàn)登錄、廣告輪播圖、查看商品詳情、添加購物車、購買商品、模擬農(nóng)場(chǎng)種植、查看農(nóng)場(chǎng)監(jiān)控、查看訂單等功能。后臺(tái)管理端主要實(shí)現(xiàn)登錄注銷、商品信息管理、訂單信息管理、模擬農(nóng)場(chǎng)種植信息管理等功能。其系統(tǒng)結(jié)構(gòu)如下圖1所示。

三、功能實(shí)現(xiàn)

（一）小程序用戶端

1.頁面設(shè)計(jì)

小程序頁面共有三個(gè)導(dǎo)航頁面，分別為商城頁面、農(nóng)場(chǎng)頁面、我的頁面。商城頁面主要實(shí)現(xiàn)用戶瀏覽商品信息、添加購物車、下單支付、查看廣告輪播圖等功能。購物車在頁面底部，可以通過點(diǎn)擊來控制顯示與隱藏，購物車中可通過點(diǎn)擊結(jié)算跳轉(zhuǎn)到支付頁面，支付成功后可看到訂單詳情及物流信息。農(nóng)場(chǎng)頁面可以實(shí)現(xiàn)用戶的模擬種植收獲，實(shí)時(shí)監(jiān)控自己種植產(chǎn)品的生長(zhǎng)狀態(tài)及過程，也可以查看商城商品的生產(chǎn)收獲過程。我的頁面包含用戶詳情信息、常用收貨地址、訂單詳情信息以及系統(tǒng)的基礎(chǔ)設(shè)置。

2.功能模塊

功能根據(jù)前后端的不同需求分為兩大模塊，其中小程序用戶端分為七大功能模塊，每個(gè)功能模塊又分為若干子功能，如圖2所示，后臺(tái)管理端也為七大功能模塊，每個(gè)功能模塊又分為若干子功能，如圖3所示。

以首頁商城為例，重要功能模塊實(shí)現(xiàn)如下：

1、點(diǎn)擊左側(cè)商品分類，右側(cè)商品切換：用一個(gè)stats數(shù)組記錄每一項(xiàng)index分類的狀態(tài)，如被點(diǎn)擊則設(shè)為true，并通過class="{{categoryStates[index] ？ 'category-item-active' ： ''}}"對(duì)頁面進(jìn)行渲染。

2、判斷購物車中是否存在商品：可以通過try{}catch（err）{}來進(jìn)行判斷，根據(jù)_id嘗試從購物車集合中獲取數(shù)據(jù)，await carts.doc（item._id）.get（）嘗試是否能取到值，若carts集合中沒有數(shù)據(jù)，須添加一條記錄再進(jìn)行判斷。

3、商品添加到購物車按鈕：點(diǎn)擊商品后的加號(hào)，相應(yīng)商品數(shù)量+1，數(shù)組cartData[]，鍵為Goods表的objectId，值為數(shù)量。具體js代碼如下：

add： function （e） {

var goodsId = e.currentTarget.dataset.goodsId;// 獲得所點(diǎn)商品id

console.log（goodsId）;

var cartData = this.data.cartData;// 讀取目前購物車數(shù)據(jù)

var goodsCount = cartData[goodsId] ？cartData[goodsId] ： 0;// 獲取當(dāng)前商品數(shù)量

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

this.setData（{

cartData： cartData// 設(shè)值到data數(shù)據(jù)中

}）;

}

4、購物車顯示與隱藏：通過點(diǎn)擊控制顯示與隱藏，<view>層級(jí)通過z-index來使底部購物車區(qū)別權(quán)重最高，設(shè)為999，其次是彈窗主體，具體JS代碼如下：

cascadeToggle： function （） {

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

that.cascadeDismiss（）;

} else {

that.cascadePopup（）;

}

}，

5、購物車中商品增減：首先讀取購物車數(shù)據(jù)cartData，需將數(shù)量為value的object轉(zhuǎn)換為數(shù)組，再add方法末尾中調(diào)用就可以將購物車鍵值對(duì)轉(zhuǎn)換成對(duì)象數(shù)組，從數(shù)組找到該商品，并修改它的數(shù)量，然后通過購物車彈窗將cartObjects渲染即可。

（二）后臺(tái)管理端

1.功能設(shè)計(jì)

結(jié)合可視化農(nóng)業(yè)，使用IP高清監(jiān)控?cái)z像頭，經(jīng)過RTSP協(xié)議采集監(jiān)控?cái)z像頭對(duì)視頻進(jìn)行編碼，通過局域網(wǎng)上傳到EasyNVR服務(wù)器，再進(jìn)行推流到EasyNVS云管理平臺(tái)，最后發(fā)送到連接公網(wǎng)的設(shè)備顯示。實(shí)現(xiàn)用戶對(duì)農(nóng)產(chǎn)品生產(chǎn)過程的了解，對(duì)農(nóng)產(chǎn)品質(zhì)量的監(jiān)督保障有著積極作用。用戶也可以實(shí)現(xiàn)模擬農(nóng)場(chǎng)種植，體驗(yàn)忙碌工作后的休閑線上田園生活，收獲自己的果實(shí)，有效的吸引用戶使用。

2.功能實(shí)現(xiàn)

在攝像頭為RTSP協(xié)議時(shí)，有管理系統(tǒng)公網(wǎng)服務(wù)器并且要將EasyNVR的視頻分發(fā)到公網(wǎng)實(shí)時(shí)顯示的情況下，EasyNVR+EasyNVS聯(lián)合方案無疑是最合適的方案，EasyNVS視頻管理平臺(tái)能夠?qū)asyNVR進(jìn)行統(tǒng)一管理，獲取EasyNVR的所有能力，工作原理如圖4所示。運(yùn)營(yíng)商提供網(wǎng)絡(luò)支持搭建無線局域網(wǎng)，綁定IP地址使用RTSP協(xié)議開通一個(gè)RTSP通道，將監(jiān)控?cái)z像頭的實(shí)時(shí)視頻通過局域網(wǎng)傳輸?shù)紼asyNVR服務(wù)器中，并且推流存儲(chǔ)到EasyNVS云管理平臺(tái)，最后運(yùn)用EasyNVR平臺(tái)提供的api將視頻監(jiān)控分發(fā)到終端設(shè)備進(jìn)行播放。

后臺(tái)主要用PHP語言開發(fā)搭建，通過session會(huì)話保持用戶登錄狀態(tài)，運(yùn)用MySQL數(shù)據(jù)庫來存儲(chǔ)數(shù)據(jù)，上傳部署到第三方云服務(wù)器上，實(shí)現(xiàn)數(shù)據(jù)的可視化管理。采用B/S架構(gòu)，通過瀏覽器連接服務(wù)器實(shí)現(xiàn)對(duì)后臺(tái)數(shù)據(jù)的可視化管理，管理員可以對(duì)后臺(tái)數(shù)據(jù)進(jìn)行添加、刪除、修改、查詢、審核等操作。MySQL數(shù)據(jù)庫中共建立六張表，分別為小程序用戶信息表、商品信息表、訂單信息表、廣告信息表、管理員信息表、權(quán)限管理表。

四、結(jié)束語

隨著互聯(lián)網(wǎng)+農(nóng)業(yè)的發(fā)展，利用可視化農(nóng)業(yè)的技術(shù)，讓用戶可以實(shí)時(shí)監(jiān)控農(nóng)場(chǎng)生產(chǎn)過程，對(duì)產(chǎn)品的質(zhì)量及安全問題有深入的了解。根據(jù)用戶的需求，新農(nóng)場(chǎng)微信小程序可以實(shí)現(xiàn)消費(fèi)者足不出戶購買到健康農(nóng)產(chǎn)品，可有效的帶動(dòng)農(nóng)產(chǎn)品的生產(chǎn)銷售，對(duì)可視化智慧農(nóng)場(chǎng)的發(fā)展具有重大意義。

【參考文獻(xiàn)】

[1]郭學(xué)超.基于微信小程序的土特產(chǎn)商城開發(fā)[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào).2019.18（06）：6-11.

[2]傅偉，涂剛，張賢龍.基于微信小程序的電子商城設(shè)計(jì)與實(shí)現(xiàn)[J].電腦編程技巧與維護(hù).2020（03）：60-62.

[3]黃有志.移動(dòng)互聯(lián)網(wǎng)時(shí)代下的微信商城創(chuàng)新模式分析[J].2016.（16）：145-146.

[4]明日科技.PHP項(xiàng)目開發(fā)實(shí)戰(zhàn)入門[M]，吉林大學(xué)出版社.2017.3.

[5]王建偉.智慧農(nóng)業(yè)微信公眾平臺(tái)的構(gòu)建與應(yīng)用[D].吉林農(nóng)業(yè)大學(xué).2016.

[6]倪興國.農(nóng)業(yè)統(tǒng)計(jì)數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].河北農(nóng)業(yè)大學(xué).2018.