“農(nóng)創(chuàng)樂”微信小程序的設(shè)計與開發(fā)

摘 要：“互聯(lián)網(wǎng)+”助力鄉(xiāng)村振興是目前推進(jìn)農(nóng)村經(jīng)濟(jì)發(fā)展的有效途徑之一。設(shè)計開發(fā)了“農(nóng)創(chuàng)樂”微信小程序，基于uni-app框架，采用HBuilderX開發(fā)工具，利用微信云開發(fā)提供的JSON數(shù)據(jù)庫實現(xiàn)后臺數(shù)據(jù)存儲，實現(xiàn)了包括首頁、分類、購物車、信息分享等功能模塊。該小程序具備界面簡潔、操作方便、功能齊全等特點，用戶能夠?qū)崿F(xiàn)農(nóng)產(chǎn)品交易，以及進(jìn)行農(nóng)產(chǎn)品生產(chǎn)銷售經(jīng)驗分享，小程序的使用有助于提高農(nóng)戶收入，為助力鄉(xiāng)村振興提供思路。

關(guān)鍵詞：互聯(lián)網(wǎng)+；uni-app；云開發(fā)；小程序；鄉(xiāng)村振興

中圖分類號：TP311.5 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2024）08-0020-04

0 引 言

隨著互聯(lián)網(wǎng)與傳統(tǒng)產(chǎn)業(yè)的融合發(fā)展，農(nóng)村電商也迎來了快速發(fā)展，“互聯(lián)網(wǎng)+農(nóng)業(yè)”逐漸成為現(xiàn)代農(nóng)業(yè)發(fā)展的新趨勢，同時也為我國助力鄉(xiāng)村振興、推進(jìn)農(nóng)村經(jīng)濟(jì)發(fā)展提供了新思路[1]。我國農(nóng)村地區(qū)的互聯(lián)網(wǎng)用戶規(guī)模不斷擴(kuò)大，根據(jù)《中國數(shù)字鄉(xiāng)村發(fā)展報告（2022年）》的數(shù)據(jù)，截至2022年6月，農(nóng)村網(wǎng)民數(shù)量已達(dá)到2.93億，農(nóng)村互聯(lián)網(wǎng)普及率達(dá)到58.8%，較十三五初期增長了一倍[2，3]，互聯(lián)網(wǎng)技術(shù)為農(nóng)村提供了便捷的信息獲取渠道。農(nóng)民可以通過互聯(lián)網(wǎng)了解農(nóng)業(yè)科技知識，掌握先進(jìn)的種植技術(shù)。同時，互聯(lián)網(wǎng)電商平臺也為農(nóng)產(chǎn)品銷售提供了新的商業(yè)模式，農(nóng)民可以通過電商平臺銷售農(nóng)產(chǎn)品，擴(kuò)大銷售范圍，增加收入。盡管互聯(lián)網(wǎng)在農(nóng)村地區(qū)發(fā)展迅速，但是專注于農(nóng)產(chǎn)品銷售的平臺相對較少，相對專業(yè)的農(nóng)產(chǎn)品種植、生產(chǎn)、銷售等環(huán)節(jié)沒有統(tǒng)一規(guī)范的流程，種植和銷售信息不對稱，這些問題限制了農(nóng)村經(jīng)濟(jì)的進(jìn)一步發(fā)展。

從上述分析可見，目前市場上缺乏一款綜合農(nóng)產(chǎn)品種、產(chǎn)、銷一體化流程的助農(nóng)平臺，為了促進(jìn)農(nóng)村電子商務(wù)的發(fā)展，推動農(nóng)業(yè)現(xiàn)代化，設(shè)計開發(fā)一個集農(nóng)業(yè)知識獲取、農(nóng)產(chǎn)品銷售等多功能于一體的農(nóng)業(yè)服務(wù)平臺非常必要。這不僅可以幫助農(nóng)民獲取專業(yè)知識，提高種植技術(shù)和勞動生產(chǎn)率，也可以拓寬農(nóng)產(chǎn)品銷售渠道，增加農(nóng)民收入。

我們利用uni-app+云開發(fā)技術(shù)，根據(jù)農(nóng)村農(nóng)產(chǎn)品特點，設(shè)計開發(fā)了“農(nóng)創(chuàng)樂”微信小程序，該平臺集合了農(nóng)業(yè)知識獲取、農(nóng)產(chǎn)品銷售等多種功能，可使用戶便捷地獲取農(nóng)業(yè)種植和銷售方面的專業(yè)知識，幫助農(nóng)戶更好地銷售農(nóng)產(chǎn)品，從而提升農(nóng)戶的收入水平。

1 開發(fā)環(huán)境

為了滿足多平臺的需求，該設(shè)計的前端部分采用了基于Vue.js的uni-app跨平臺UI框架技術(shù)進(jìn)行開

發(fā)[4，5]。后端部分采用微信云開發(fā)提供的JSON數(shù)據(jù)庫來進(jìn)行數(shù)據(jù)傳輸與存儲，使用HBuilderX進(jìn)行開發(fā)[6]。

微信小程序具有使用方便、占用存儲空間小的優(yōu)點，用戶可以通過掃描二維碼或點擊分享等多種方式輕松進(jìn)入小程序。相比傳統(tǒng)APP，用戶無須下載安裝即可使用小程序，大大降低了用戶的使用門檻。同時，微信的龐大用戶群體為小程序提供了充足的潛在用戶基礎(chǔ)，有利于小程序推廣和傳播，擴(kuò)大農(nóng)產(chǎn)品銷售渠道。利用微信小程序開發(fā)助農(nóng)平臺，可以吸引更多用戶下載使用，學(xué)習(xí)分享農(nóng)業(yè)知識，推廣農(nóng)產(chǎn)品，實現(xiàn)農(nóng)業(yè)信息服務(wù)與電子商務(wù)的有機結(jié)合。

uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架，可發(fā)布到IOS、Android、H5以及微信小程序、百度小程序、頭條小程序、支付寶小程序等多個平臺，開發(fā)者只需編寫一套代碼就可以發(fā)布到多個平臺上，具有極強的跨平臺能力，并且由于采用Vue.js進(jìn)行開發(fā)，開發(fā)者只需要學(xué)習(xí)Vue即可上手進(jìn)行開發(fā)，學(xué)習(xí)成本和難度較低。此外，作為一款國產(chǎn)軟件，uni-app具有較為活躍的社區(qū)，插件資源較為豐富，可以較好地滿足開發(fā)需要[7]。

該小程序主要分為視圖層、邏輯層、數(shù)據(jù)存儲層3個層次，視圖層部分主要由Vue.js的HTML、css部分組成，當(dāng)用戶在視圖層進(jìn)行操作時，視圖層將數(shù)據(jù)和操作發(fā)送到邏輯層，邏輯層通過JavaScript和云函數(shù)從數(shù)據(jù)存儲層中獲取數(shù)據(jù)，并返回到視圖層進(jìn)行渲染[8，9]。系統(tǒng)層次圖如圖1所示。

2 功能設(shè)計與實現(xiàn)

2.1 系統(tǒng)結(jié)構(gòu)設(shè)計

該平臺包括首頁模塊、產(chǎn)品分類模塊、購物車模塊、信息分享模塊、個人中心模塊，系統(tǒng)功能圖如圖2所示。

2.2 數(shù)據(jù)庫設(shè)計

平臺采用騰訊云開發(fā)提供的云數(shù)據(jù)庫來存儲商品信息、用戶信息、文章信息等相關(guān)數(shù)據(jù)，微信云開發(fā)是微信與騰訊云聯(lián)合開發(fā)的一種基于Node環(huán)境的原生Serverless云服務(wù)，代碼運行的服務(wù)器環(huán)境都由云端平臺實現(xiàn)，云開發(fā)可以使開發(fā)者專注于業(yè)務(wù)邏輯的實現(xiàn)，無須理會服務(wù)器搭建、域名注冊、后端數(shù)據(jù)接口實現(xiàn)等繁縟末節(jié)，開發(fā)門檻更低，效率更高，云開發(fā)提供了云數(shù)據(jù)庫、云存儲、云函數(shù)3大基礎(chǔ)能力支持，此外還提供數(shù)據(jù)可視化的支持，云數(shù)據(jù)庫是一種JSON數(shù)據(jù)庫，數(shù)據(jù)庫中使用多個JSON格式的對象進(jìn)行數(shù)據(jù)存儲；云存儲提供了一塊存儲空間，提供了文件的上傳下載能力，開發(fā)者可以通過小程序端或云函數(shù)調(diào)用相關(guān)的API使用云存儲功能；云函數(shù)是一套操作接口，開發(fā)者可以通過編寫代碼上傳到云函數(shù)，通過微信提供的API接口調(diào)用上傳的代碼可以方便地操作數(shù)據(jù)和文件資源[10]。

在軟件開發(fā)的過程中，我們創(chuàng)建了多個JSON數(shù)據(jù)集合，例如Goods、Papers、Users、Critic等數(shù)據(jù)集合。

Goods集合用于存儲商品的相關(guān)信息，集合擁有g(shù)oods_id、goods_latitude、goods_longitude、goods_name、goods_price、goods_price、pics、cate等字段，其中g(shù)oods_id用于表示商品的唯一id，goods_latitude用于表示商品產(chǎn)地的緯度信息，goods_longitude用于表示商品產(chǎn)地的經(jīng)度信息，goods_name用于表示商品名稱，goods_price用于表示商品的銷售價格，pics用于表示商品圖片的存儲路徑，cate用于表示商品的分類。

Users集合用于存儲用戶的相關(guān)信息，集合擁有_id、_openid、avatarUrl、nickName等字段，_opendid字段通過調(diào)用云函數(shù)獲取，用于表示用戶使用小程序時的唯一身份標(biāo)識，avatarUrl字段用于表示用戶頭像的存儲路徑，nickName字段用于表示用戶的名稱。

Papers集合用于存儲文章的相關(guān)信息，集合擁有_id、paperid、title、cTime、content、img、author、_openid等字段，_id字段用于表示文章的唯一標(biāo)識id，paperid字段用于表示文章的所屬分類，title字段用于表示文章的標(biāo)題，cTime字段用于表示文章的發(fā)布時間，采用yyyy-MM-dd的日期格式進(jìn)行存儲，content字段用于表示文章的內(nèi)容、img字段用于表示文章封面圖片的存儲路徑，author字段用于表示文章發(fā)布的作者，_openid字段用于表示評論發(fā)布者的唯一id。

Critic集合用于存儲文章的評論信息，集合擁有_id、_openid、authorname、cTime、content、title、wzid等字段，_id字段用于表示評論的唯一標(biāo)識id，_openid字段用于表示評論發(fā)布者的唯一表示id，authorname字段用于表示發(fā)布者的名稱，cTime字段用于表示評論的發(fā)布時間，content字段用于表示評論的內(nèi)容，title字段用于表示評論發(fā)布者頭像的存儲路徑，wzid字段用于表示被評論文章的唯一標(biāo)識id。

以下以Goods集合為例，Goods集合的詳細(xì)設(shè)計如表1所示。

2.3 首頁模塊設(shè)計與實現(xiàn)

首頁模塊包括搜索欄、輪播圖、產(chǎn)品推薦、氣象預(yù)警，主要是用戶可以搜索感興趣的農(nóng)產(chǎn)品或者查看產(chǎn)品推薦，同時可以根據(jù)氣象預(yù)警購買時令果蔬。

uni-app中提供了自帶的swiper滑塊組件以及其附帶組件的swiper-item視圖容器組件。本文使用這兩個組件實現(xiàn)輪播圖效果，在開發(fā)小程序的過程中主要用到了swiper組件的以下幾個屬性：

1）“indicator-dots”：該屬性用于顯示swiper組件內(nèi)部的下半部分顯示灰色圓點，代表當(dāng)前是第幾張輪播圖，設(shè)置“：indicator-dots='true'”表示啟用灰色圓點。

2）“autoplay”：代表是否啟用輪播圖自動播放，屬性默認(rèn)值為“1”，將值設(shè)置為“true”，表示啟用輪播圖自動播放。

3）“interval”：此屬性用于設(shè)置輪播圖自動切換圖片的間隔，單位為毫秒，設(shè)置“：interval=\"3000\"”表示設(shè)置3秒自動切換當(dāng)前輪播圖。

4）“duration”：表示輪播圖切換動畫的持續(xù)時長。

5）“circular”：表示是否啟用輪播圖循環(huán)播放。

產(chǎn)品推薦功能通過JavaScript從云數(shù)據(jù)庫中獲取到符合推送條件的商品信息，存入變量floorList中，并通過v-for循環(huán)渲染頁面信息，并為每一項商品添加@click事件gotodetail（item.id），將每一項商品的id作為頁面參數(shù)傳遞到商品詳情頁面，商品詳情頁面通過小程序的生命周期函數(shù)onLoad（）獲取傳遞的頁面參數(shù)，通過傳遞的頁面參數(shù)商品id查詢對應(yīng)商品的詳細(xì)信息并渲染到視圖層。首頁頁面如圖3所示。

2.4 產(chǎn)品分類模塊設(shè)計與實現(xiàn)

產(chǎn)品分類模塊主要包括自種蔬菜、新鮮水果、特色產(chǎn)品三個模塊，分類頁面左側(cè)部分用于展示商品的不同類別，而右側(cè)部分則顯示當(dāng)前選中類別下所包含的商品，該功能主要通過函數(shù)getCateList（）獲取后端數(shù)據(jù)實現(xiàn)。

左右兩側(cè)欄目使用uni-app的scroll-view組件實現(xiàn)，設(shè)置scroll-y屬性使其可沿y軸滑動。由于不同設(shè)備的邏輯像素和物理像素可能不一致，調(diào)用uni.getSystemInfoSync（）方法動態(tài)獲取當(dāng)前屏幕信息，將sysInfo.windowHeight-50設(shè)置為scroll-view的高度。

通過active變量記錄當(dāng)前選中的商品分類，并使用如下表達(dá)式設(shè)置不同的CSS樣式表示選中狀態(tài)“l(fā)ass=\"['left-view-item'，i=== active ？ 'active' ： '' ]\"”，當(dāng)i等于active時，增加active樣式。

2.5 購物車模塊設(shè)計與實現(xiàn)

購物車模塊允許用戶將感興趣的商品加入購物車，并最終進(jìn)行訂單結(jié)算。其實現(xiàn)流程如下：首先通過uni.chooseAddress（）獲取用戶微信中保存的收貨地址信息，并用uni.setStorageSync（）將購物車商品信息存儲在本地。同時用uni.getStorageSync（）方法獲取本地存儲的購物車數(shù)據(jù)。當(dāng)用戶點擊結(jié)算時，首先驗證是否選擇了需要結(jié)算的商品，然后判斷是否已選擇收貨地址，最后校驗用戶是否已登錄。符合條件后，將購物車中勾選的商品生成訂單，并跳轉(zhuǎn)到結(jié)算支付頁面。生成訂單的邏輯在payOrder（）自定義函數(shù)中實現(xiàn)。該函數(shù)從購物車商品數(shù)組中過濾出goods_state為true的對象，生成包含訂單商品信息的新數(shù)組，同時添加訂單狀態(tài)，最后將數(shù)據(jù)上傳到數(shù)據(jù)庫的order表保存。

2.6 信息分享模塊設(shè)計與實現(xiàn)

信息分享模塊包括三個板塊：選種、種植和銷售，選種板塊：主要涵蓋有關(guān)農(nóng)作物種子選擇方面的相關(guān)經(jīng)驗信息。種植板塊：主要提供各類農(nóng)作物的種植經(jīng)驗分享。銷售板塊：分享有關(guān)農(nóng)產(chǎn)品銷售經(jīng)驗，包括時下流行的直播電商等銷售方式。所有的文章都由真實用戶編輯和分享。效果如圖4所示。

信息分享頁面分為分類欄和文章列表兩部分。分類欄通過scroll-view組件實現(xiàn)，設(shè)置scroll-x屬性使其能橫向滑動，內(nèi)部插入3個view組件顯示分類標(biāo)簽。文章列表從云數(shù)據(jù)庫獲取數(shù)據(jù)渲染，點擊文章后跳轉(zhuǎn)到詳情頁面。文章詳情頁面采用rich-text組件顯示內(nèi)容和評論。頁面內(nèi)嵌Button組件，綁定@click事件，點擊后跳轉(zhuǎn)到發(fā)布評論頁面。發(fā)布評論功能通過RichText富文本編輯器實現(xiàn)。

2.7 個人中心模塊設(shè)計與實現(xiàn)

個人中心模塊包含以下功能：訂單管理、收貨地址管理、發(fā)布文章、我的文章以及聯(lián)系客服。訂單管理功能允許用戶對未付款訂單進(jìn)行付款操作，同時也提供了對已支付和已收貨訂單的申請售后操作。效果圖見圖4。

訂單管理功能分為待付款、待收貨、退款/售后和全部訂單四個板塊。通過使用JavaScript，根據(jù)當(dāng)前板塊向云數(shù)據(jù)庫發(fā)送請求，獲取符合條件的訂單信息，并將訂單信息渲染到頁面上。

聯(lián)系客服功能通過微信的Button組件提供的接口能力open-type=“contact”實現(xiàn)。為了實現(xiàn)界面樣式的統(tǒng)一，將Button組件的style屬性設(shè)置為透明樣式，并在其上方覆蓋view組件。當(dāng)用戶點擊該組件時，系統(tǒng)將自動跳轉(zhuǎn)到客服咨詢頁面。

3 結(jié) 論

互聯(lián)網(wǎng)+助力鄉(xiāng)村振興有助于實現(xiàn)智慧農(nóng)業(yè)的快速發(fā)展，設(shè)計開發(fā)的“農(nóng)創(chuàng)樂”微信小程序，實現(xiàn)了農(nóng)產(chǎn)品種植、生產(chǎn)、銷售等一體化服務(wù)，通過系統(tǒng)整合農(nóng)產(chǎn)品信息、貨源信息，實現(xiàn)農(nóng)產(chǎn)品購買全流程，信息分享模塊還為用戶提供了專業(yè)農(nóng)業(yè)知識的學(xué)習(xí)渠道。同時小程序的設(shè)計還存在一定的不足，例如只能實現(xiàn)農(nóng)產(chǎn)品的銷售，適應(yīng)范圍較小，只能適合某個特定地區(qū)的農(nóng)產(chǎn)品宣傳和銷售，同時對售后相關(guān)的功能還沒有實現(xiàn)?！稗r(nóng)創(chuàng)樂”小程序的設(shè)計與開發(fā)，旨在為構(gòu)建農(nóng)產(chǎn)品一體化服務(wù)平臺提供新思路。

參考文獻(xiàn)：

[1] 陳曉琴，王釗.“互聯(lián)網(wǎng)+”背景下農(nóng)村電商扶貧實施路徑探討 [J].理論導(dǎo)刊，2017（5）：94-96.

[2] 蔣洪杰，歐陽曦.《中國數(shù)字鄉(xiāng)村發(fā)展報告（2022年）》發(fā)布 [J].鄉(xiāng)村科技，2023，14（4）：2.

[3] 羅桂花.網(wǎng)絡(luò)直播在農(nóng)村電子商務(wù)發(fā)展的應(yīng)用探究 [D].長沙：中南林業(yè)科技大學(xué)，2019.

[4] 李英玲，牛美雅，蘭宏富.基于uni-app+SpringBoot的移動智能辦公系統(tǒng)設(shè)計與實現(xiàn) [J].西南民族大學(xué)學(xué)報：自然科學(xué)版，2022，48（3）：313-321.

[5] 李書明，萬然，崔童謠，等.基于uni-app框架的一部手機管生產(chǎn)APP的開發(fā)和應(yīng)用 [J].現(xiàn)代信息科技，2023，7（15）：35-38.

[6] 王曉星，黃建昌.基于微信小程序的應(yīng)用開發(fā)淺析 [J].信息技術(shù)與信息化，2021（3）：23-25.

[7] 廖黎莉，王磊，李太，等.基于uni-app框架的校園極簡生活跨平臺移動應(yīng)用的設(shè)計與實現(xiàn) [J].無線互聯(lián)科技，2021，18（12）：38-40.

[8] 洪運維，方世巧，李艷偉.數(shù)字化在傳統(tǒng)手工藝傳承與保護(hù)中的應(yīng)用研究——以廣西鄉(xiāng)村為例 [J].現(xiàn)代信息科技，2021，5（1）：113-116+120.

[9] 蘇海闊，孫強.基于微信小程序的《易起學(xué)》平臺的設(shè)計與實現(xiàn) [J].現(xiàn)代信息科技，2021，5（15）：148-152.

[10] 董傲通，文俊浩.基于小程序·云開發(fā)的實驗室設(shè)備管理系統(tǒng)的設(shè)計與實現(xiàn) [J].實驗技術(shù)與管理，2019，36（10）：282-284+288.

作者簡介：梁粟鈞（2003—），男，漢族，廣西欽州人，本科在讀，研究方向：計算機科學(xué)與技術(shù)；寧貴（2002—），男，漢族，廣西玉林人，本科在讀，研究方向：計算機科學(xué)與技術(shù)專業(yè)；查敏（1995—），女，漢族，安徽來安人，碩士研究生，助教，研究方向：人工智能；通訊作者：馬秋宇（1991—），女，漢族，河北滄州人，碩士研究生，講師，研究方向：模式識別與機器視覺。

收稿日期：2023-09-22

基金項目：廣西科技師范學(xué)院自治區(qū)級大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目“輕松的農(nóng)場主——‘種、產(chǎn)、銷’一體化助農(nóng)扶貧平臺”（S202311546086）；2020年度廣西高校中青年教師科研基礎(chǔ)能力提升項目（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