基于H5的任務派發系統的設計與實現

黃華明 梁小滿

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

1 設計文檔的結構安排

針對市面上現有任務派發系統邏輯較為復雜、操作比較繁瑣的情況，本設計致力于為開發一套針對校園場景而言簡單好用的任務派發系統而努力。

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

2 可行性分析

2.1 技術可行性分析

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

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

2.2 操作可行性分析

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

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

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

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

2.3 風險分析

首當其沖的就是半停止服務或者完全停止服務帶來的風險，系統可能因為并發數過高、黑客攻擊、服務器損壞導致系統不能打開，打開緩慢，甚至永久停止服務。

其次是由于數據問題帶來的風險，黑客可能通過系統漏洞盜刷用戶余額、非法篡改數據甚至完全清除數據，導致用戶數據錯亂無法正常使用服務。

最后因為系統自身設計缺陷帶來的風險，系統可能因為交互界面缺陷造成客戶有不好的體驗，甚至因為致命邏輯缺陷導致用戶完全不能夠使用服務。

2.4 小程序

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

2.4.1 與H5 文件組成異同

js 擴展名文件相當于H5 當中的JavaScript 腳本語言，也是小程序中最主要的一個部分，大部分功能通過js 文件來實現。wsml文件相當于H5 當中的html 頁面，主要用來描述頁面的基本結構。wxss 文件相當于H5 頁面當中的樣式描述，能夠實現CSS 的大部分特性，并且進行一定的優化升級。

2.4.2 與H5 標簽異同

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

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

2.4.3 改進與發展

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

2.5 基本測試方法

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

2.5.1 黑盒測試

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

2.5.2 白盒測試

白盒測試是指在測試時能夠了解被測對象的結構，可以查閱被測代碼內容的測試工作。它需要知道程序內部的設計結構及具體的代碼實現，并以此為基礎來設計測試用例。

3 需求分析

3.1 需要解決的問題

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

4 系統開發實現

4.1 開發環境

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

表2：服務端環境

表3：客戶端環境

4.2 開發工具

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

4.3 搭建后端環境

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

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

4.4 小程序賬號申請

（1）安裝微信開發者工具。

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

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

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

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

（6）正式進行開發，重復細節進行省略。

5 經驗總結

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