uni-app移動應(yīng)用開發(fā)課件 7-智慧環(huán)保項目

智慧環(huán)保

項目UniApp智慧環(huán)保項目第7章本章以智慧環(huán)保項目為例介紹uni-app開發(fā)的流程，綜合應(yīng)用uni-app的組件、API、擴(kuò)展組件uView等。智慧環(huán)保項目包括首頁、回收分類、分類查詢結(jié)果頁等各種頁面。本章導(dǎo)讀學(xué)習(xí)目標(biāo)知識目標(biāo)uView2.0的使用API的使用flex布局能力目標(biāo)能夠查看uView的官方文檔使用各組件能夠理解scss代碼能夠?qū)崿F(xiàn)常規(guī)的移動頁面開發(fā)素質(zhì)目標(biāo)具有使用uView開發(fā)實用項目的素質(zhì)具有積極探索新知、自主學(xué)習(xí)與鉆研的精神培養(yǎng)學(xué)生節(jié)能控制、綠色發(fā)展的理念具有精益求精、自主解決問題的素質(zhì)具有團(tuán)隊協(xié)作、善于溝通的素質(zhì)項目介紹第

一

節(jié)7.1.1項目概述如今，城市化速度越來越快，社會發(fā)展形態(tài)也在發(fā)生變化，因此，我國提出了創(chuàng)造智慧城市、提高城市管理水平以及提供多元化城市服務(wù)的發(fā)展戰(zhàn)略。在此背景下，人們利用各種先進(jìn)信息技術(shù)，有效整合城市各項配套系統(tǒng)和功能模塊，進(jìn)一步促進(jìn)城市朝工業(yè)化、信息化、城鎮(zhèn)化方向發(fā)展。黨的二十大報告指出“加快構(gòu)建廢棄物循環(huán)利用體系”“打造宜居、韌性、智慧城市”。城市環(huán)境保護(hù)工作有序開展，本項目實現(xiàn)一個簡潔版的智慧環(huán)保系統(tǒng)，主要包括的頁面如下。首頁：展示環(huán)境宣傳信息和快捷功能。（1）訂單頁：登錄后，用戶可以查看訂單信息。普通用戶可以查詢待接單、已接單、已完成、已取消的訂單信息，并可以修改訂單狀態(tài)。企業(yè)用戶可以查看相應(yīng)的訂單信息、處理客戶提交的訂單信息。（2）公司回收頁：用戶可以查看附近的回收公司，還可以查看回收公司的詳情。（3）個人中心頁：展示登錄用戶的個人信息。（4）回收分類頁：讓用戶了解哪些垃圾屬于可回收的，以便于選擇回收類型。（5）分類查詢結(jié)果頁：顯示回收分類頁中點擊“搜索”按鈕后的結(jié)果。（6）7.1.1項目概述注冊頁和登錄頁：當(dāng)處于需要登錄才能查看的頁面時，如未登錄，會跳轉(zhuǎn)到登錄頁。注冊頁用于注冊新用戶。（7）下單頁：選擇需要回收的垃圾的類別，填寫預(yù)約上門信息，讓工作人員上門服務(wù)。（8）公司搜索結(jié)果頁：顯示在公司回收頁中點擊“搜索”按鈕后的結(jié)果。（9）公司詳情頁：顯示單個回收公司的詳細(xì)信息。（10）訂單詳情頁：顯示單個訂單的詳細(xì)信息。（11）7.1.1項目概述7.1.2項目效果首頁包括搜索框、輪播圖、快捷功能、回收操作流程、【預(yù)約上門回收】按鈕、愛心活動等首頁17.1.2項目效果在已登錄的情況下，用戶可在訂單頁查看所有待接單信息。點擊某一訂單，將進(jìn)入相應(yīng)的訂單詳情頁。點擊頂部的“待接單”、“已接單”、“已完成”、“已取消”，將展示對應(yīng)的訂單信息列表。訂單頁17.1.2項目效果該頁面顯示所有的回收公司信息。點擊上方搜索框進(jìn)入搜索結(jié)果頁面，點擊信息列表，將進(jìn)入公司詳情頁。公司回收頁37.1.2項目效果在未登錄的情況下，個人中心頁顯示未登錄。如已登錄將顯示用戶的相關(guān)信息。個人中心頁47.1.2項目效果在未登錄的情況下，個人中心頁顯示未登錄。如已登錄將顯示用戶的相關(guān)信息。回收分類頁5在首頁的搜索框或本頁的搜索框中輸入查詢關(guān)鍵字進(jìn)行查詢，進(jìn)入查詢結(jié)果頁。分類查詢結(jié)果67.1.2項目效果要查看訂單、預(yù)約上門回收等都必須先登錄才可以進(jìn)行。如果沒有登錄，則會跳轉(zhuǎn)到登錄頁。如果沒有注冊，則會跳轉(zhuǎn)到注冊頁。注冊頁和登錄頁77.1.2項目效果在公司回收頁點擊【立即下單】按鈕，或在公司詳情頁中點擊【預(yù)約上門回收】按鈕，會跳轉(zhuǎn)到下單頁。下單頁8在公司回收頁的搜索框中輸入關(guān)鍵字進(jìn)行搜索，可進(jìn)入公司搜索結(jié)果頁。公司搜索結(jié)果頁97.1.2項目效果在公司回收頁的公司列表中點擊公司列表項，則會打開公司詳情頁。公司詳情頁10在訂單頁中點擊訂單列表項，則會打開訂單詳情頁。訂單詳情頁11環(huán)境配置第

二

節(jié)7.2.1安裝json-servernpminstall-gjson-server在任意地方新建一個文件夾（提供的源代碼中為smartEpserver文件夾），進(jìn)入該文件夾，在地址欄中輸入“cmd”并按“Enter”鍵，則在命令提示符窗口中進(jìn)入該文件夾。執(zhí)行下列命令啟動一個Web服務(wù)器。執(zhí)行以上命令后，可以看到新建的文件夾中多了一個db.json文件，里面有一些默認(rèn)數(shù)據(jù)。在瀏覽器中輸入http://localhost:3000，可以打開對應(yīng)頁面。7.2.1安裝json-server7.2.2配置json-server如果不想用3000端口，可以在啟動服務(wù)器時指定端口。以下命令將服務(wù)器端口地址改為3004。

json-server--watchdb.json--port3004smartEpserver新建一個package.json，將啟動命令寫到文件中，代碼如下：

{"scripts":{"mock":"json-serverdb.json--port3004"}}以后啟動服務(wù)器就用“npmrunmock”命令運行。如果要停止服務(wù)，只需關(guān)閉cmd窗口。在smartEpserver的跟目錄下新建一個public文件夾，將圖片資源放入public文件夾。修改db.json文件，將數(shù)據(jù)填入7.2.2配置json-server通過訪問http://localhost:3004/users

可以得到users里面的所有記錄。若訪問成功，返回的res的結(jié)構(gòu)，其中返回的數(shù)據(jù)res.data為數(shù)組。7.2.2配置json-server接口列表序號名稱接口請求方式1用戶列表http://localhost:3004/usersget2訂單列表http://localhost:3004/ordersget3分類列表http://localhost:3004/typesget4熱點宣傳列表http://localhost:3004/hotDotsget5活動列表http://localhost:3004/actionsget6公司列表http://localhost:3004/companysget7注冊用戶http://localhost:3004/userspost8下單http://localhost:3004/orderspost9取消訂單http://localhost:3004/orders/訂單編號patch7.2.2配置json-server項目開發(fā)第

三

節(jié)新建項目1用默認(rèn)模板新建一個vue2的uni-app項目smartEpApp。新建其他三個tabBar頁面，分別為訂單頁面order.vue、公司回收company.vue、個人中心頁me.vue。修改pages.json文件，增加tabBar配置項，實現(xiàn)底部導(dǎo)航欄。查看pages.json文件。安裝插件2在插件市場搜索前端組件uView，使用HBuilderX導(dǎo)入插件的方式安裝uView2.0。安裝完成后，在項目根目錄下多了一個uni_modules文件夾，uView的組件都在“/uni_modules/uview-ui”文件下面。uView依賴scss，必須安裝scss插件，uView才能正確運行。在插件市場找到“scss/sass編譯”插件，進(jìn)行安裝。如果已安裝，則略過此步。7.3.1創(chuàng)建初始項目配置uView3引入uView主js庫。在項目根目錄中的main.js中，添加以下代碼

importuViewfrom'@/uni_modules/uview-ui'Vue.use(uView)引入主題文件。在項目根目錄下的uni.scss文件中引用uView的全局scss主體文件theme.scss。

@import'@/uni_modules/uview-ui/theme.scss';引入uView樣式文件。在App.vue中的<style>部分，應(yīng)用uView基礎(chǔ)樣式文件index.scss。

<stylelang="scss">

@import"@/uni_modules/uview-ui/index.scss";/*注意要寫在第一行*/</style>配置easycom。在項目根目錄的pages.json中添加easycom字段。如果您是通過HBuiderX導(dǎo)入安裝的uView，可以此配置。

"easycom":{ "^u-(.*)":"@/uni_modules/uview-ui/components/u-$1/u-$1.vue" },7.3.1創(chuàng)建初始項目配置全局baseUrl4在smartEpApp根目錄下新建common文件夾，在common文件夾下新建文件app.jsconstbaseUrl='http://localhost:3004';exportdefault{ baseUrl}將服務(wù)器url地址在main.js中進(jìn)行全局掛載。在main.js中在創(chuàng)建Vue實例之前，添加代碼importbaseUrlfrom'@/common/api.js'Vtotype.$baseUrl=baseUrl7.3.1創(chuàng)建初始項目應(yīng)用頁面的文件路徑5序號頁面文件路徑1首頁pages/index/index.vue2訂單頁pages/order/order.vue3公司回收頁pages/company/company.vue4個人中心頁pages/me/me.vue5回收分類頁childPages/type/recyclingMenu.vue6分類查詢結(jié)果頁childPages/type/searchRes.vue7登錄頁pages/login/login.vue8注冊頁pages/login/register.vue9公司詳情頁childPages/company/detail.vue10公司搜索結(jié)果頁childPages/company/searchRes.vue11下單頁childPages/company/fillIn.vue12訂單詳情頁childPages/order/waiting.vue7.3.1創(chuàng)建初始項目首頁首頁共有六個部分：搜索框、輪播、快捷入口、流程、預(yù)約按鈕、愛心活動，輪播、愛心活動的數(shù)據(jù)來源訪問后端服務(wù)器。請求地址如下，具體數(shù)據(jù)格式參見7.2.2節(jié)的db.json文件（查看）。查看代碼輪播的圖片：http://localhost:3004/hotDots

愛心活動的信息：http://localhost:3004/actions7.3.1創(chuàng)建初始項目搜索框用了uView中search組件，該組件雙向綁定了data屬性keyword。輪播用到了uView中的u-swiper組件。其中l(wèi)ist屬性為輪播數(shù)據(jù)，keyName為list數(shù)組中對象的目標(biāo)屬性名。代碼解析這里有四個快捷入口，其中回收分類的功能實現(xiàn)，點擊此處執(zhí)行g(shù)oto方法，跳轉(zhuǎn)到回收分類頁面。預(yù)約上門回收按鈕使用了u-Button組件，color屬性設(shè)置背景顏色，type屬性可以設(shè)置不同顏色的按鈕樣式有：default、primary、success、info、waring、error。size設(shè)置按鈕大小，這里用了large大按鈕，shape設(shè)置按鈕是circle圓角還是square直角。7.3.1創(chuàng)建初始項目回收流程與快捷入口一樣，使用flex布局。這里用了u-icon圖標(biāo)，u-icon基于字體的圖標(biāo)集，包含了大多數(shù)場景的圖標(biāo)。其中，name表示圖標(biāo)名稱，讀者可以查詢官網(wǎng)查看圖標(biāo)集。size設(shè)置圖標(biāo)大小，默認(rèn)單位px，默認(rèn)值16px。Label設(shè)置圖標(biāo)周圍的文字可以用labelPos設(shè)置文字的位置，取值為left、top、right、bottom。愛心活動的數(shù)據(jù)來源與后端服務(wù)器，具體的數(shù)據(jù)格式查看7.2.2節(jié)的db.json文件。圖片顯示使用了uView的u-image組件，其中圖片的url地址是一個相對地址，前面需要添加“http://localhost:3004”，用全局屬性$baseUrl.baseUrl得到。代碼解析7.3.1創(chuàng)建初始項目回收分類、分類搜索這兩個頁面都是對分類進(jìn)行操作，是首頁的子頁面。這里將頁面放在“childPages/type”目錄下，為項目的分包處理提供支持?；厥辗诸惖臄?shù)據(jù)來源后端數(shù)據(jù)，數(shù)據(jù)格式請參考7.2.2節(jié)中db.json文件中types屬性。url地址：http://localhost:3004/types。回收分類頁的這種手風(fēng)琴式的導(dǎo)航效果，在uView中提高了一個模板。讀者可以在HBuilderX插件安裝頁面搜索uView，導(dǎo)入示例來獲得相關(guān)代碼。7.3.1創(chuàng)建初始項目回收分類的層級關(guān)系通過parentId來體現(xiàn)。其中parentId為0的類型為左側(cè)菜單項，parentId不為0，則表示該類為id號為parentId類的子項。這里首先查詢parentId為0的分類，將這些他們存儲在parentlist數(shù)組中，同時查詢該項的子項，將其所有的子項作為一個數(shù)組存儲childlist數(shù)組中。所以childlist為一個二維數(shù)組。子項和其父項通過數(shù)組下標(biāo)進(jìn)行關(guān)聯(lián)。代碼解析Js代碼中，getChildlist(id)方法實現(xiàn)將對應(yīng)子項存入childlist數(shù)組。getTypelist方法，實現(xiàn)查找parentId為0的項，然后調(diào)用getChildlist(id)找其子項。7.3.1創(chuàng)建初始項目代碼解析搜索結(jié)果頁面，顯示包含關(guān)鍵字的所有子項和包含關(guān)鍵字的大類的子項。當(dāng)搜索不到時，顯示提示“暫無搜索數(shù)據(jù)”的提示。childlist數(shù)組：用了存儲查詢到所有的子項。getChildlist(id)方法：實現(xiàn)將parentId為id的子項存入childlist數(shù)組。getTypelist方法，搜索所有含有搜索關(guān)鍵字的分類項，包含大類和大類對應(yīng)的子項。實現(xiàn)查找parentId為0的項，然后調(diào)用getChildlist(id)找其子項。<template>中根據(jù)childlist.length>0，則顯示搜索到所有子項、否則顯示“暫無數(shù)據(jù)”。7.3.1創(chuàng)建初始項目7.3.4注冊、登錄、個人中心注冊頁面用來注冊新用戶，用戶類型分普通用戶和企業(yè)用戶，頁面效果如圖7-7所示。本實例主要實現(xiàn)的是普通用戶的功能。注冊成功會彈一個提示框，然后自動登錄到系統(tǒng)，并打開個人中心頁。1注冊功能用post方法請求“http://localhost:3004/users”。查看代碼2注冊代碼解析隨機(jī)圖像1在提交之前，使用js代碼進(jìn)行驗證，當(dāng)達(dá)到驗證通過，進(jìn)行注冊，注冊的數(shù)據(jù)頭像avatar的值為：'/image/avatar/'+Math.ceil(Math.random()*14)+'.jpeg'。在服務(wù)器的public/image/avatar目錄中存放了14個后綴為jpeg的圖片。使用隨機(jī)值Math.ceil(Math.random()*14)得到1~14的整數(shù)值。7.3.4注冊、登錄、個人中心autoLogin()方法：

實現(xiàn)登錄，登錄成功調(diào)用“uni.setStorageSync('info',res.data[0]);”將用戶信息存入緩存，并跳轉(zhuǎn)到個人中心頁面。submitReg()方法：

實現(xiàn)注冊功能，注冊成功，則調(diào)用autoLogin()進(jìn)行自動登錄，并跳轉(zhuǎn)到個人中心頁面。注冊代碼解析自動登錄、注冊方法27.3.4注冊、登錄、個人中心

該頁面用了兩者輕量彈框，一個是uni-upp的內(nèi)置組件Toast，還用到了uView中u-Toast組件。在界面中的最后放置了一個彈框“<u-toastref='uToast'/>”，js中通過this.$refs.uToast得到該組件實例。注冊代碼解析輕量彈框Toast37.3.4注冊、登錄、個人中心登陸頁【代碼解析】

單選按鈕用了uView中的組件u-radio，u-radio需配合u-radio-group一起使用。customStyle屬性可以自定義單選按鈕的樣式。U-radio-group雙向綁定roleVal，單選按鈕被選中，則值為label屬性的值。下單功能、查看訂單狀態(tài)都需要處于登錄狀態(tài)。登錄成功，將用戶信息出入緩存。查看代碼7.3.4注冊、登錄、個人中心登陸頁【代碼解析】

列表使用了uView的u-cel組件，該組件需要搭配u-cell-group使用，用u-cell-group實現(xiàn)列表組的上下邊框。這里icon表示左側(cè)圖標(biāo)，title為左側(cè)標(biāo)題，默認(rèn)情況下，右側(cè)有箭頭。iconStyle、righticonStyle、titleStyle屬性分別設(shè)置左側(cè)圖標(biāo)、右側(cè)箭頭、左側(cè)標(biāo)題的樣式。個人中心頁為導(dǎo)航欄中“我的”頁，頁面中點擊用戶圖像，會跳轉(zhuǎn)到登錄界面。查看代碼7.3.4注冊、登錄、個人中心7.3.5公司回收、公司詳情、搜索結(jié)果公司回收頁展示回收公司的信息，可以由此頁可以進(jìn)入下單頁面。公司信息數(shù)據(jù)來源請求地址：http://localhost:3004/companys。點擊公司信息進(jìn)入公司詳情頁。另外，有可能公司比較多，在公司信息列表外面加了一個sroll-view容器，當(dāng)頁面顯示不下時，可以往下滑動。1公司詳情頁展示單個公司的詳細(xì)信息。Api接口地址為：http://localhost:8080/companys?id=id號。2公司回收頁、搜索結(jié)果頁中的搜索框輸入搜索關(guān)鍵字進(jìn)行搜索公司名稱含有關(guān)鍵字的公司，顯示在搜索結(jié)果頁中，界面效果如圖7-10所示。api接口地址為：http://localhsot:3004/company?name_like。3從公司相關(guān)的頁面進(jìn)入下單頁，跳轉(zhuǎn)時會攜帶公司的id號、名稱，下單的操作就是在訂單列表中增加一條記錄。使用post請求的方式訪問api接口地址：http://localhost:3004/companys。7.3.6下單、訂單頁、訂單詳情【代碼解析】

該頁面使用了uView的表單組件u-form。u-form標(biāo)簽內(nèi)放表單項u-form-item，u-form-item標(biāo)簽內(nèi)除input外，其他的元素都可以放置。本頁面中應(yīng)用到的u-form屬性的含義:

model：表單數(shù)據(jù)對象

labelWidth：標(biāo)簽的寬度，默認(rèn)單位px。

labelPosition：標(biāo)簽的位置，可選top、left，默認(rèn)left

rules：表單規(guī)則，這里對應(yīng)的是一個規(guī)則對象。7.3.6下單、訂單頁、訂單詳情【代碼解析】本頁面中應(yīng)用到的u-form-item屬性含義：

label：表單項的文本標(biāo)簽。

borderBottom：是否顯示表單項的底部邊框。prop：表單數(shù)據(jù)對象的屬性名，在使用validate、resetFields方法的情況下，該屬性是必填的。7.3.6下單、訂單頁、訂單詳情【代碼解析】這里物品類型選擇用的是uView的u-picker組件，實現(xiàn)多級關(guān)聯(lián)選擇。上門時間選擇用的是u-Action-Sheet操作菜單組件。7.3.6下單、訂單頁、訂單詳情訂單頁展示當(dāng)前用戶的待接單、已接單、已完成、已取消等多種狀態(tài)的訂單信息，如圖-2所示。這里只列舉了當(dāng)前用戶的待接單信息，通過get請求得到api接口得到數(shù)據(jù)。api接口地址：http://localhost:3004/orders?userId=用戶id號&state=17.3.6下單、訂單頁、訂單詳情查看代碼【代碼解析】使用了uView中的分段器u-subsecton組件，點擊頂部分段器時，current屬性對應(yīng)變化current，雙向綁定的js代碼data中屬性swiperCurrent會跟著變化。1.實現(xiàn)分段顯示7.3.6下單、訂單頁、訂單詳情查看代碼【代碼解析】每段顯示的內(nèi)容，使用輪播組件，輪播組件的current屬性同樣綁定該屬性swiperCurrent。這樣分段器和輪播的當(dāng)前項進(jìn)行同步。1.實現(xiàn)分段顯示7.3.6下單、訂單頁、訂單詳情查看代碼【代碼解析】訂單可能一屏顯示不下，所以需要使用<scroll-view>組件，達(dá)到滾動的效果。點擊訂單項會跳到訂單詳情waiting.vue頁。這里只實現(xiàn)了待接單的訂單詳情信息，其他狀態(tài)訂單詳情與之雷同。2.顯示數(shù)據(jù)7.3.6下單、訂單頁、訂單詳情查看代碼【代碼解析】