城鄉(xiāng)共享平臺設計與實現(xiàn)

莫文旭 張巧嶺

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

關鍵詞：城鄉(xiāng)共享；平臺設計；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? 引? 言

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

1? 功能分析

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

2? 框架結構

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

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

3? 界面設計與實現(xiàn)

3.1? 頁面配置

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

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

"globalStyle"： {

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

"navigationBarTitleText"： "鄉(xiāng)村共享"，//導航欄標題文字內(nèi)容

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

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

}

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

"pages"： [

{

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

"style"： {

"navigationBarTitleText"： "首頁"

}

}

]

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

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

┌─pages

│? ? ?├─index

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

│? ? ?└─need

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

│? ? ?└─mine

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

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

"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"： "發(fā)布需求"

}，{

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

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

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

"text"： "我的"

}]

}

3.2? 首頁設計

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

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

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

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

便民服務

地方特產(chǎn)

鄉(xiāng)村文化

鄉(xiāng)村旅游

生態(tài)園區(qū)

農(nóng)產(chǎn)品加工

首頁主要內(nèi)容通過uni-card卡片組件實現(xiàn)，具體代碼如下：

3.3? 發(fā)布需求頁設計

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

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

3.4? 個人中心頁設計

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

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

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

4? 結? 論

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

參考文獻：

[1] 竇皓.共建和諧城鄉(xiāng) 共享區(qū)域發(fā)展 [N].人民日報，2022-12-05（11）.

[2] 趙志營，李盛竹，李倩.中國公共資源城鄉(xiāng)共享、網(wǎng)絡化與城鎮(zhèn)化的耦合協(xié)調(diào)發(fā)展研究 [J].調(diào)研世界，2021（6）：3-11.

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

[4] 杜保亮.大學生返鄉(xiāng)就業(yè)創(chuàng)業(yè)帶動鄉(xiāng)村協(xié)同發(fā)展 [J].中國果樹，2022，225（7）：126.

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

[6] 葉懿蛟.鄉(xiāng)村振興背景下大學生返鄉(xiāng)創(chuàng)業(yè)助力茶產(chǎn)業(yè)發(fā)展研究 [J].福建茶葉，2023，45（4）：138-140.

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

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

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