城鄉共享平臺設計與實現

莫文旭 張巧嶺

摘? 要：鄉村振興戰略背景下，具有創新精神的大學生是助推城鄉融合發展的重要力量。文章以城鄉資源有機融合為落腳點，創建基于uni-app的城鄉共享平臺。主要通過uni-app常用組件、uni-ui擴展組件和API跨平臺封裝，實現一套代碼同時運行到iOS模擬器、Android模擬器、支付寶小程序Studio、微信開發者工具、百度開發者工具、字節跳動開發者工具、QQ開發者工具。多平臺探索大學生返鄉與城鄉融合發展的有效機制，共同實現大學生返鄉助力城鄉融合發展的總目標。

關鍵詞：城鄉共享；平臺設計；uni-app

中圖分類號：TP311? 文獻標識碼：A? 文章編號：2096-4706（2023）17-0112-05

Design and Implementation of Urban and Rural Shared Platform

MO Wenxu， ZHANG Qiaoling

（School of Design and Art， Shandong Huayu University of Technology， Dezhou? 253034， China）

Abstract： Under the background of rural revitalization strategy， innovative college students are an important force in promoting urban-rural integrated development. This paper focuses on the organic integration of urban-rural resources and creates a uni-app-based urban and rural shared platform. A set of code can be run to iOS simulator， Android simulator， Alipay applet Studio， WeChat developer tool， Baidu developer tool， ByteDance developer tool and QQ developer tool at the same time mainly through uni-app common components， uni-ui extension components and API cross platform packaging. Explore effective mechanisms for college students' return to their hometowns and urban-rural integrated development through multiple platforms， and jointly achieve the overall goal of college students' return to their hometowns to assist in urban-rural integrated development.

Keywords： urban-rural sharing; platform design; uni-app

0? 引? 言

城鄉發展的重點體現在資源配置上，城鎮有先進的技術和資金，鄉村有得天獨厚的環境、土地和勞動力，而大學生返鄉創業帶動人才、技術和資金等要素流向鄉村，優化農村產業結構，同時將鄉村服務、農產品帶回城市，實現“技術下鄉、農貨進城”的戰略目標。本文基于大學生返鄉帶動城鄉資源有機融合創建城鄉共享平臺。本平臺基于uni-app框架開發，基于通用的前端技術棧，采用Vue語法+微信小程序API，實現一套代碼同時運行到iOS模擬器、Android模擬器、微信開發者工具、支付寶小程序Studio、百度開發者工具、字節跳動開發者工具、QQ開發者工具。

1? 功能分析

城鄉共享平臺主要用于城鄉資源整合并建立共享機制。城市可以租賃或承包農戶土地構建現代化農業園區，也可以為農戶提供技術支持、資金支持，使農民能夠獲取所需的社會服務。城市可以通過本平臺發布惠民信息、便民服務、企業招聘和短期雇傭等信息。鄉村可以通過本平臺發布鄉村文化、地方特產、生態園區、鄉村旅游、農機租賃和農產品加工等服務，同時也可以發布自己的需求信息。通過“便民服務—鄉村文化—地方特產—農產品加工—農機租賃”等環節實現“技術下鄉、農貨進城”的戰略目標。

2? 框架結構

該平臺選用uni-app進行程序設計，頁面內容通過uni-app組件完成，主要包含視圖容器（view）、滑塊視圖容器（swiper）、表單組件（form）、頁面跳轉（navigator）、地圖組件（map）、通告欄組件（uni-notice-bar）、宮格組件（uni-grid）、分組組件（uni-group）等，主要目錄結構如圖1所示。需要特別注意的是，static目錄中只存放靜態資源。通過image、video等標簽的src屬性在template標簽中引入靜態資源時，可以使用相對路徑或絕對路徑。代碼如下：

static目錄中的js文件不會被編譯，如果目錄中有es6的代碼，如若不經過轉換直接運行，在手機設備上會報錯。css、less/scss等資源也不要放在static目錄中，這些公用的資源可以放在common目錄下。

3? 界面設計與實現

3.1? 頁面配置

該平臺主要由首頁頁面（index.vue）、發布需求頁面（need.vue）、個人中心頁面（mine.vue）三個主頁面和其他輔助頁面構成。uni-app的頁面路由為框架統一管理，程序開發者需要在pages.json中進行配置。pages.json文件決定著頁面文件的路徑、窗口樣式、導航欄、底部的切換按鈕tabbar等，具體配置內容如表1所示。

globalStyle用于設置應用的狀態欄、導航條、標題、窗口背景色等，具體代碼如下：

"globalStyle"： {

"navigationBarTextStyle"： "black"，//導航欄標題顏色，僅支持 black/white

"navigationBarTitleText"： "鄉村共享"，//導航欄標題文字內容

"navigationBarBackgroundColor"： "#F8F8F8"，//導航欄背景顏色

"backgroundColor"： "#F8F8F8"http://下拉顯示出來的窗口的背景色

}

pages用于配置頁面路徑和頁面窗口表現，其中文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源。具體代碼如下：

"pages"： [

{

"path"： "pages/index/index"，

"style"： {

"navigationBarTitleText"： "首頁"

}

}

]

此處為原生導航欄設計，一般情況下背景顏色、文字顏色均為默認狀態，只需通過style中的navigationBarTitleText設置導航欄顯示的文字內容即可。如果原生導航欄不能滿足需求，推薦使用uni-ui的uni-nav-bar自定義導航欄。

該平臺的頁面增加或減少需要通過pages節點來完成，pages節點用于配置該平臺的頁面組成，頁面目錄如下：

┌─pages

│? ? ?├─index

│? ? ?│? ? ?└─index.vue

│? ? ?└─need

│? ? ?│? ? ?└─need.vue

│? ? ?└─mine

│? ? ? ? ? ? ?└─mine.vue

tabBar用于設置底部的選項按鈕，包括文字內容、文字默認顏色、文字選中狀態的顏色、背景顏色、默認圖標、選中狀態的圖標以及跳轉鏈接。底部按鈕的個數需要通過tabBar中的list數組實現，list數組只能配置不少于2個且不多于5個tab，tab按數組的順序排序。具體代碼如下：

"tabBar"： {

"color"： "#7A7E83"，

"selectedColor"： "#1296db"，

"borderStyle"： "black"，

"backgroundColor"： "#ffffff"，

"list"： [{

"pagePath"： "pages/index/index"，

"iconPath"： "static/image/home1.png"，

"selectedIconPath"： "static/image/home2.png"，

"text"： "首頁"

}， {

"pagePath"： "pages/need/need"，

"iconPath"： "static/image/need.png"，

"selectedIconPath"： "static/image/need2.png"，

"text"： "發布需求"

}，{

"pagePath"： "pages/mine/mine"，

"iconPath"： "static/image/mine1.png"，

"selectedIconPath"： "static/image/mine2.png"，

"text"： "我的"

}]

}

3.2? 首頁設計

首頁主要包含內容搜索、輪播圖設計、快捷導航、卡片式內容設計，具體頁面效果如圖2所示。

首頁中搜索功能使用的是uni-easyinput增強輸入框組件，uni-app原生input組件也具有輸入功能，但是沒有圖標功能。而uni-easyinput組件是input組件的增強，uni-easyinput組件內置了邊框、圖標等，同時包含input組件的所有功能。具體代碼如下：

uni-easyinput組件屬于uni-ui擴展組件，不包含基礎組件，它是基礎組件的補充。使用uni-ui擴展組件可以在創建uni-app項目的時候創建uni-ui項目，內含各種擴展組件，可以免注冊、免引用直接使用。但是如果在創建uni-app項目時選擇了創建默認模板，那么uni-ui擴展組件則需要通過uni_modules單獨安裝。可以直接通過插件市場導入所需的擴展組件，也可以把所有uni-ui擴展組件導入項目，只需導入一個uni-ui擴展組件即可。

首頁中快捷導航主要使用的是uni-grid宮格組件，具體代碼如下：

便民服務

地方特產

鄉村文化

鄉村旅游

生態園區

農產品加工

首頁主要內容通過uni-card卡片組件實現，具體代碼如下：

3.3? 發布需求頁設計

點擊城鄉共享平臺底部標簽欄中的加號按鈕可以實現需求發布功能，類似于微信朋友圈發布信息功能，主要包括信息輸入、上傳視頻或照片、開啟定位、設置查看人群的權限、定時發布、同步到QQ空間和微信朋友圈等功能，具體效果如圖3所示。

信息輸入功能主要通過uni-easyinput增強輸入框組件實現，照片或視頻上傳功能主要通過uni-file-picker文件上傳組件實現。可以選擇圖片、視頻等任意文件并上傳到當前綁定的服務空間，如果沒有綁定服務空間，autoUpload默認為false且不可更改，auto-upload屬性為false時會停止自動上傳，可通過ref調用upload方法手動上傳。具體代碼如下：

3.4? 個人中心頁設計

個人中心顯示用戶的基本情況，也可以在此頁面查看用戶發布過的需求或關注的人和事，效果如圖4所示。

本頁面主要通過uni-list列表組件實現，uni-list和uni-list-item需要配套使用，不支持單獨使用。具體代碼如下：

to="/pages/vue/index/index" @click="onClick（$event，1）" >

4? 結? 論

城鄉共享平臺由返鄉大學生管理，城市可以通過資本入鄉，建立城市和村民之間緊密利益聯結機制，租賃農戶土地構建生態園區，從傳統種植業中解放出來的農戶除了獲得土地租金收益外，還可以通過入園打工、租種大棚，實現“家門口”就業致富。由城市提供“育苗、農資、技術、管理、銷售”一體化“家門口”指導服務，最終的產品銷往城市，實現城鄉產業協同發展的目標。同時城市還可以通過該平臺發布和共享惠民政策、招聘信息等，村民可以通過該平臺查閱相關的惠民政策和企業動態，同時還可以通過該平臺共享農產品、勞動力、土地等。有了該平臺，城市和村民均可在網絡上表達自己的需求。該平臺可促進城市資源和鄉村資源的有機融合，服務于城鎮、服務于鄉村、服務于村民。

參考文獻：

[1] 竇皓.共建和諧城鄉 共享區域發展 [N].人民日報，2022-12-05（11）.

[2] 趙志營，李盛竹，李倩.中國公共資源城鄉共享、網絡化與城鎮化的耦合協調發展研究 [J].調研世界，2021（6）：3-11.

[3] 溫鐵軍，蘭永海，楊帥.組織創新與租值社會化——“新常態”下杭州公共資源治理的案例分析 [J].國家行政學院學報，2016（2）：51-57.

[4] 杜保亮.大學生返鄉就業創業帶動鄉村協同發展 [J].中國果樹，2022，225（7）：126.

[5] 劉旭，李明磊.基于鄉村振興背景下大學生返鄉創業的意義研究——以蘭考縣張莊村為例 [J].山西農經，2022，325（13）：105-107.

[6] 葉懿蛟.鄉村振興背景下大學生返鄉創業助力茶產業發展研究 [J].福建茶葉，2023，45（4）：138-140.

[7] 張巧嶺.“求捎帶”校園訂餐系統前端設計 [J].現代信息科技，2022，6（3）：14-17.

[8] 周建輝.基于uni-app的場館預約微信小程序的設計與開發 [J].江蘇工程職業技術學院學報，2022，22（4）：7-11.

作者簡介：莫文旭（2002—），男，漢族，山東濟寧人，本科在讀，研究方向：交互設計；張巧嶺（1989—），女，漢族，山東德州人，講師，本科，研究方向：數字媒體技術、程序設計。