莫文旭 張巧嶺

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

關(guān)鍵詞：城鄉(xiāng)共享；平臺設(shè)計(jì)；uni-app

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

1? 功能分析

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

2? 框架結(jié)構(gòu)

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

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

3? 界面設(shè)計(jì)與實(shí)現(xiàn)

3.1? 頁面配置

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

globalStyle用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等，具體代碼如下：

"globalStyle"： {

"navigationBarTextStyle"： "black"，//導(dǎo)航欄標(biāo)題顏色，僅支持 black/white

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

"navigationBarBackgroundColor"： "#F8F8F8"，//導(dǎo)航欄背景顏色

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

}

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

"pages"： [

{

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

"style"： {

"navigationBarTitleText"： "首頁"

}

}

]

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

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

┌─pages

│? ? ?├─index

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

│? ? ?└─need

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

│? ? ?└─mine

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

tabBar用于設(shè)置底部的選項(xiàng)按鈕，包括文字內(nèi)容、文字默認(rèn)顏色、文字選中狀態(tài)的顏色、背景顏色、默認(rèn)圖標(biāo)、選中狀態(tài)的圖標(biāo)以及跳轉(zhuǎn)鏈接。底部按鈕的個數(shù)需要通過tabBar中的list數(shù)組實(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? 首頁設(shè)計(jì)

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

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

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

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

便民服務(wù)

地方特產(chǎn)

鄉(xiāng)村文化

鄉(xiāng)村旅游

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

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

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

3.3? 發(fā)布需求頁設(shè)計(jì)

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

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

3.4? 個人中心頁設(shè)計(jì)

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

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

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

4? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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

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