“農創樂”微信小程序的設計與開發

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

關鍵詞：互聯網+；uni-app；云開發；小程序；鄉村振興

中圖分類號：TP311.5 文獻標識碼：A 文章編號：2096-4706（2024）08-0020-04

0 引 言

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

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

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

1 開發環境

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

發[4，5]。后端部分采用微信云開發提供的JSON數據庫來進行數據傳輸與存儲，使用HBuilderX進行開發[6]。

微信小程序具有使用方便、占用存儲空間小的優點，用戶可以通過掃描二維碼或點擊分享等多種方式輕松進入小程序。相比傳統APP，用戶無須下載安裝即可使用小程序，大大降低了用戶的使用門檻。同時，微信的龐大用戶群體為小程序提供了充足的潛在用戶基礎，有利于小程序推廣和傳播，擴大農產品銷售渠道。利用微信小程序開發助農平臺，可以吸引更多用戶下載使用，學習分享農業知識，推廣農產品，實現農業信息服務與電子商務的有機結合。

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

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

2 功能設計與實現

2.1 系統結構設計

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

2.2 數據庫設計

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

在軟件開發的過程中，我們創建了多個JSON數據集合，例如Goods、Papers、Users、Critic等數據集合。

Goods集合用于存儲商品的相關信息，集合擁有goods_id、goods_latitude、goods_longitude、goods_name、goods_price、goods_price、pics、cate等字段，其中goods_id用于表示商品的唯一id，goods_latitude用于表示商品產地的緯度信息，goods_longitude用于表示商品產地的經度信息，goods_name用于表示商品名稱，goods_price用于表示商品的銷售價格，pics用于表示商品圖片的存儲路徑，cate用于表示商品的分類。

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

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

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

以下以Goods集合為例，Goods集合的詳細設計如表1所示。

2.3 首頁模塊設計與實現

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

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

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

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

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

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

5）“circular”：表示是否啟用輪播圖循環播放。

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

2.4 產品分類模塊設計與實現

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

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

通過active變量記錄當前選中的商品分類，并使用如下表達式設置不同的CSS樣式表示選中狀態“lass=\"['left-view-item'，i=== active ？ 'active' ： '' ]\"”，當i等于active時，增加active樣式。

2.5 購物車模塊設計與實現

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

2.6 信息分享模塊設計與實現

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

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

2.7 個人中心模塊設計與實現

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

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

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

3 結 論

互聯網+助力鄉村振興有助于實現智慧農業的快速發展，設計開發的“農創樂”微信小程序，實現了農產品種植、生產、銷售等一體化服務，通過系統整合農產品信息、貨源信息，實現農產品購買全流程，信息分享模塊還為用戶提供了專業農業知識的學習渠道。同時小程序的設計還存在一定的不足，例如只能實現農產品的銷售，適應范圍較小，只能適合某個特定地區的農產品宣傳和銷售，同時對售后相關的功能還沒有實現。“農創樂”小程序的設計與開發，旨在為構建農產品一體化服務平臺提供新思路。

參考文獻：

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

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

[3] 羅桂花.網絡直播在農村電子商務發展的應用探究 [D].長沙：中南林業科技大學，2019.

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

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

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

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

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

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

[10] 董傲通，文俊浩.基于小程序·云開發的實驗室設備管理系統的設計與實現 [J].實驗技術與管理，2019，36（10）：282-284+288.

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

收稿日期：2023-09-22

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