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

黃華明 梁小滿

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

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

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

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

2 可行性分析

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

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

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

2.2 操作可行性分析

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

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

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

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

2.3 風(fēng)險(xiǎn)分析

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

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

最后因?yàn)橄到y(tǒng)自身設(shè)計(jì)缺陷帶來的風(fēng)險(xiǎn)，系統(tǒng)可能因?yàn)榻换ソ缑嫒毕菰斐煽蛻粲胁缓玫捏w驗(yàn)，甚至因?yàn)橹旅壿嬋毕輰?dǎo)致用戶完全不能夠使用服務(wù)。

2.4 小程序

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

2.4.1 與H5 文件組成異同

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

2.4.2 與H5 標(biāo)簽異同

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

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

2.4.3 改進(jìn)與發(fā)展

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

2.5 基本測(cè)試方法

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

2.5.1 黑盒測(cè)試

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

2.5.2 白盒測(cè)試

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

3 需求分析

3.1 需要解決的問題

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

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

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

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

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

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

4.2 開發(fā)工具

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

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

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

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

4.4 小程序賬號(hào)申請(qǐng)

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

（2）申請(qǐng)小程序賬號(hào)，獲取APPID，密鑰。

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

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

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

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

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

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