智慧環保

項目UniApp智慧環保項目第7章本章以智慧環保項目為例介紹uni-app開發的流程，綜合應用uni-app的組件、API、擴展組件uView等。智慧環保項目包括首頁、回收分類、分類查詢結果頁等各種頁面。本章導讀學習目標知識目標uView2.0的使用API的使用flex布局能力目標能夠查看uView的官方文檔使用各組件能夠理解scss代碼能夠實現常規的移動頁面開發素質目標具有使用uView開發實用項目的素質具有積極探索新知、自主學習與鉆研的精神培養學生節能控制、綠色發展的理念具有精益求精、自主解決問題的素質具有團隊協作、善于溝通的素質項目介紹第

一

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

二

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

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

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

可以得到users里面的所有記錄。若訪問成功，返回的res的結構，其中返回的數據res.data為數組。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項目開發第

三

節新建項目1用默認模板新建一個vue2的uni-app項目smartEpApp。新建其他三個tabBar頁面，分別為訂單頁面order.vue、公司回收company.vue、個人中心頁me.vue。修改pages.json文件，增加tabBar配置項，實現底部導航欄。查看pages.json文件。安裝插件2在插件市場搜索前端組件uView，使用HBuilderX導入插件的方式安裝uView2.0。安裝完成后，在項目根目錄下多了一個uni_modules文件夾，uView的組件都在“/uni_modules/uview-ui”文件下面。uView依賴scss，必須安裝scss插件，uView才能正確運行。在插件市場找到“scss/sass編譯”插件，進行安裝。如果已安裝，則略過此步。7.3.1創建初始項目配置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>部分，應用uView基礎樣式文件index.scss。

<stylelang="scss">

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

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

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

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

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

該頁面用了兩者輕量彈框，一個是uni-upp的內置組件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屬性的值。下單功能、查看訂單狀態都需要處于登錄狀態。登錄成功，將用戶信息出入緩存。查看代碼7.3.4注冊、登錄、個人中心登陸頁【代碼解析】

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

該頁面使用了uView的表單組件u-form。u-form標簽內放表單項u-form-item，u-form-item標簽內除input外，其他的元素都可以放置。本頁面中應用到的u-form屬性的含義:

model：表單數據對象

labelWidth：標簽的寬度，默認單位px。

labelPosition：標簽的位置，可選top、left，默認left

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

label：表單項的文本標簽。

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