基于H5的任務(wù)派發(fā)系統(tǒng)的設(shè)計與實現(xiàn)

黃華明 梁小滿

（1.衡陽師范學(xué)院南岳學(xué)院計算機系 湖南省衡陽市 421008 2.衡陽師范學(xué)院計算機科學(xué)與技術(shù)學(xué)院 湖南省衡陽市 421002）

1 設(shè)計文檔的結(jié)構(gòu)安排

針對市面上現(xiàn)有任務(wù)派發(fā)系統(tǒng)邏輯較為復(fù)雜、操作比較繁瑣的情況，本設(shè)計致力于為開發(fā)一套針對校園場景而言簡單好用的任務(wù)派發(fā)系統(tǒng)而努力。

設(shè)計文檔需要具有鮮明的結(jié)構(gòu)[1]，因此我們設(shè)計有以下板塊：引言、可行性分析使用到的技術(shù)和方法、需求分析、開發(fā)細節(jié)與過程、系統(tǒng)的測試與操作說明等核心板塊。

2 可行性分析

2.1 技術(shù)可行性分析

系統(tǒng)前端（以下簡稱前端）計劃采用微信小程序（以下簡稱小程序）、HTML5（以下簡稱H5）、JavaScript（以下簡稱Js）等開發(fā)工具進行混合開發(fā)；系統(tǒng)后端（以下簡稱后端）計劃采用PHP、H5、Js 等開發(fā)工具進行混合開發(fā)；數(shù)據(jù)庫計劃使用Mysql 數(shù)據(jù)庫進行開發(fā)。

從技術(shù)層面上分析，對于前端、后端的開發(fā)形式而言，小程序、H5、PHP、Js 等開發(fā)工具擁有授權(quán)免費、技術(shù)成熟、學(xué)習(xí)途徑廣泛、開發(fā)速度較快等特點，適合用來進行前端、后端開發(fā)[2]。Mysql 數(shù)據(jù)庫授權(quán)免費，技術(shù)成熟，支持多平臺，性能較好，兼容性較好，適合作為本次項目開發(fā)使用的數(shù)據(jù)庫[3]。

2.2 操作可行性分析

我們做的是一個主要針對校園場景的任務(wù)派發(fā)系統(tǒng)，前端跨平臺、跨操作系統(tǒng)、即點即開，具有良好的便攜性。

前端免傳統(tǒng)注冊，通過微信登錄接口直接獲取到openID，免去了傳統(tǒng)登錄的繁瑣，用戶首次點入小程序便能夠識別到用戶的身份，但是這個時候用戶對于平臺又是匿名的，保障了客戶隱私，實現(xiàn)了客戶的便捷性，利于推廣宣傳，可謂是一舉三得。

前端計劃針對校園進行場景適配，縮減了步驟，基本做到了即見即會、傻瓜式操作，預(yù)計將較大提升下單成功率。

前端計劃采用任務(wù)列表的形式進行訂單展示。所有用戶可以查看訂單非隱私部分信息，并通過該信息判斷是否接單。如果想要接單，可以在提交相關(guān)證件信息提交認證并審核后，獲取接單者身份后接單，這樣子可以實現(xiàn)全民接單模式，提高訂單被接單并完成的概率。

2.3 風(fēng)險分析

首當(dāng)其沖的就是半停止服務(wù)或者完全停止服務(wù)帶來的風(fēng)險，系統(tǒng)可能因為并發(fā)數(shù)過高、黑客攻擊、服務(wù)器損壞導(dǎo)致系統(tǒng)不能打開，打開緩慢，甚至永久停止服務(wù)。

其次是由于數(shù)據(jù)問題帶來的風(fēng)險，黑客可能通過系統(tǒng)漏洞盜刷用戶余額、非法篡改數(shù)據(jù)甚至完全清除數(shù)據(jù)，導(dǎo)致用戶數(shù)據(jù)錯亂無法正常使用服務(wù)。

最后因為系統(tǒng)自身設(shè)計缺陷帶來的風(fēng)險，系統(tǒng)可能因為交互界面缺陷造成客戶有不好的體驗，甚至因為致命邏輯缺陷導(dǎo)致用戶完全不能夠使用服務(wù)。

2.4 小程序

一個基本的小程序頁面至少包含四類文件，分別是json 擴展名文件、js 擴展名文件、wsml 擴展名文件、wxss 擴展名文件。json文件是每個頁面的靜態(tài)配置文件，值得一提的是app.json 是一個十分特殊的文件，是當(dāng)前小程序的一個全局配置文件，描述了全部頁面的路徑、視圖的總體風(fēng)格表現(xiàn)、底部標簽等參數(shù)。

2.4.1 與H5 文件組成異同

js 擴展名文件相當(dāng)于H5 當(dāng)中的JavaScript 腳本語言，也是小程序中最主要的一個部分，大部分功能通過js 文件來實現(xiàn)。wsml文件相當(dāng)于H5 當(dāng)中的html 頁面，主要用來描述頁面的基本結(jié)構(gòu)。wxss 文件相當(dāng)于H5 頁面當(dāng)中的樣式描述，能夠?qū)崿F(xiàn)CSS 的大部分特性，并且進行一定的優(yōu)化升級。

2.4.2 與H5 標簽異同

標簽名字上的差異，HTML 以div 為主。開發(fā)者能夠通過這些基礎(chǔ)的標簽組合成不一樣的微程序。比如時間選擇器、網(wǎng)頁播放器等。然如此，何不把這些標簽做一些天然的集合呢？而這個就是小程序組件的概念，現(xiàn)在可能大家已經(jīng)明白了小程序的標簽為啥和HTML 的標簽存在差異了吧，這并不是刻意而為之，小程序當(dāng)中的常用標簽，比如view、button，這些就是官方給我們封裝好的基本能力。除此之外，還有地圖、視頻等其他組件。WXSS 新增了rpx特性，能夠方便開發(fā)者多一步計算比例，天然適配移動設(shè)備。

小程序JSON 語法具有自己的特性，比如json 一般從一個大括號，通過關(guān)鍵值的方法對數(shù)據(jù)進行表達，關(guān)鍵值外面必須要有雙引號，另外值得一提的是JSON 文件中存在任何注釋都會報錯。

2.4.3 改進與發(fā)展

可以看到小程序和H5 是十分相似的，甚至可以認為是一種變種，可以說是下一代HTML 也毫不為過。他既有HTML 的可移動性能、快速開發(fā)特性，同時也因為騰訊的基礎(chǔ)庫，使其具備了原生APP 的一些特性，比如加載速度更快、同性能流暢性更好、系統(tǒng)資源開銷更小的一些特點，而這些還有微信小程序的審核機制有關(guān)系，小程序要想上架，必須符合微信的一些開發(fā)規(guī)范，有了規(guī)范的約束，小程序生態(tài)明顯比老大哥H5 生態(tài)更加健康一些。小程序和H5 具有非常多相似的天然特性，這得益于小程序本來就是基于網(wǎng)頁進行優(yōu)化的，在小程序的載體微信這個國民應(yīng)用之上，騰訊有能力把自己的標準進行推廣，這對于開發(fā)者而言是一件好事。

2.5 基本測試方法

軟件測試是軟件開發(fā)過程的重要組成部分，是用來確認一個程序的品質(zhì)或性能是否符合開發(fā)之前所提出的一些要求，軟件測試的目的，第一是確認軟件的質(zhì)量，其一方面是確認軟件做了你所期望的事情，另一方面是確認軟件以正確的方式來做了這個事件，主要測試方法如下：

2.5.1 黑盒測試

黑盒測試顧名思義就是將被測系統(tǒng)看成一個黑盒，從外界取得輸入，然后再輸出。整個測試基于需求文檔，看是否能滿足需求文檔中的所有要求。黑盒測試要求測試者在測試時不能使用與被測系統(tǒng)內(nèi)部結(jié)構(gòu)相關(guān)的知識或經(jīng)驗，它適用于對系統(tǒng)的功能進行測試。

2.5.2 白盒測試

白盒測試是指在測試時能夠了解被測對象的結(jié)構(gòu)，可以查閱被測代碼內(nèi)容的測試工作。它需要知道程序內(nèi)部的設(shè)計結(jié)構(gòu)及具體的代碼實現(xiàn)，并以此為基礎(chǔ)來設(shè)計測試用例。

3 需求分析

3.1 需要解決的問題

需求分析做的第一件事就是需要知道它能滿足什么需求。同時盡量減少操作界面復(fù)雜度的同時與我們的需求更加匹配。我們設(shè)計的任務(wù)派發(fā)系統(tǒng)，需要滿足在校師生的發(fā)單需求。新用戶在打開我們的系統(tǒng)以后，可以進行快捷的下單，這個新訂單向所有用戶進行展示。我們的用戶看到自己想的單后，可以進行接單。為了保障訂單的安全性，接單人需要進行認證以后才能接單，這個信息又管理員進行審核，因此我們還需要一個管理端，對整個系統(tǒng)進行管理。需求分析不能主觀臆測，需要認真的調(diào)研。根據(jù)我們的目的，結(jié)合一定調(diào)研以后對功能設(shè)計如下：

4 系統(tǒng)開發(fā)實現(xiàn)

4.1 開發(fā)環(huán)境

表1為個人電腦環(huán)境，即我自己使用的電腦配置；表2 后端環(huán)境，即數(shù)據(jù)庫、Nginx 的服務(wù)環(huán)境；表3 客戶端環(huán)境，即小程序宿主移動設(shè)備的環(huán)境。

表2：服務(wù)端環(huán)境

表3：客戶端環(huán)境

4.2 開發(fā)工具

微信開發(fā)者工具、Notepad+、360 極速瀏覽器、Photoshop 2019。微信開發(fā)者工具為微信小程序官方開發(fā)工具，用來進行小程序的調(diào)試、運行、上傳、預(yù)覽等操作。Notepad+用來對源代碼便捷管理，比如備份、全局查找、全局修改。360 極速瀏覽器用來查詢相關(guān)資料，和對系統(tǒng)進行相關(guān)調(diào)試，對小程序內(nèi)嵌網(wǎng)頁進行調(diào)試還有修改。Photoshop 2019 可以對小程序開發(fā)中的圖片素材進行處理、生成指定尺寸格式等操作。

4.3 搭建后端環(huán)境

（1）后端主要作用是為前端數(shù)據(jù)庫讀寫提供支持。這里將描述后端的一個搭建過程。

（2）在阿里云選購ecs 服務(wù)器，購買阿里云服務(wù)器后通過控制臺查看服務(wù)器，并且安裝CentOs（Linux 的一個流行分支）。

4.4 小程序賬號申請

（1）安裝微信開發(fā)者工具。

（2）申請小程序賬號，獲取APPID，密鑰。

（3）在開發(fā)者工具使用申請人賬號微信掃碼登錄，新建項目。

（4）配置全局js，小程序開發(fā)文檔要求每一個小程序都包含一個app.js 的文件，里面包含全局js。

（5）配置全局wxss，小程序開發(fā)文檔要求每一個小程序都包含一個wxss 的文件，即全局樣式表，里面包含小程序基本樣式。

（6）正式進行開發(fā)，重復(fù)細節(jié)進行省略。

5 經(jīng)驗總結(jié)

對于一個應(yīng)用而言，華麗的界面、以及功能具體的實現(xiàn)反而不是最重要的，更重要的是客戶體驗。是否滿足客戶的需求，是否讓客戶簡單易用。所以做出一個應(yīng)用的雛形，才算是剛剛開好頭。對于一個應(yīng)用開發(fā)而言。他的定位更為重要，定位客戶群體、定位網(wǎng)站是否盈利、以及放眼未來。