姚永忠 趙曉凡 陳燕
【摘 要】近年來,隨著微信小程序的興起,為農(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.