基于微信小程序的連連看小游戲的設計與實現

1、 題目（中文）：基于微信小程序的連連看小游戲的 設計與實現 畢業(yè)設計（論文）任務書題目（中文）：基于微信小程序的連連看小游戲的 設計與實現 （英文）：Design and Implementation of Lianliankan Games Based on WeChat Small Program 一、 畢業(yè)設計（論文）的主要內容與具體要求（任務及背景、工作環(huán)境、成果形式、著重培養(yǎng)的能力、有實驗環(huán)節(jié)的要提出主要技術指標、要求）（一）、畢業(yè)設計（論文）主要內容及主要技術指標、要求1. 主要內容本課題為基于微信小程序的連連看小游戲的設計與實現。課題研究內容如下：（1）了解并掌握連連看小游戲邏輯

2、算法；（2）掌握微信小程序原理、功能與發(fā)開流程；（3）完成系統(tǒng)設計，實現客戶端與服務器的交互，完成系統(tǒng)實現與測試。2. 主要技術指標、要求（1）使用微信小程序APPID和Web開發(fā)者工具；（2）建立連連看游戲系統(tǒng)，構建完整的小程序組成:一個入口文件:app.js，一個全局樣式:app.wxss，一個全局配置:app.Json。（二）、畢業(yè)設計（論文）的基本要求1. 認真、獨立完成3000-5000漢字或10000以上字符的外文科技文獻譯文，按照學校規(guī)定的譯文要求和格式撰寫。2. 認真、獨立完成不少于10000字的畢業(yè)設計（論文）報告的寫作，按照學校規(guī)定的論文要求和格式撰寫。3. 畢業(yè)設計報告要

3、求包含：（1）開題報告一份； （2）畢業(yè)設計一份； 4. 及時與指導老師進行溝通，按計劃完成畢業(yè)設計（論文）報告的寫作和答辯工作。二、畢業(yè)設計（論文）進度安排起訖日期工作內容備 注第七學期第14周第七學期第15-17周第七學期第18周第八學期第1-3周第八學期第4周第八學期第5-10周第八學期第11周第八學期第12周接受畢業(yè)設計（論文）任務書。調研，完成英文資料翻譯。完成畢業(yè)設計（論文）開題報告。按照畢業(yè)設計要求,開展研究，完成設計方案。畢業(yè)設計中期檢查。整理、撰寫畢業(yè)論文。答辯資格審查。答辯。三、所需的資料和主要參考文獻1劉曉.移動端小游戲的發(fā)展與問題應對J.傳媒,2018(23):50-5

4、2.2蘇濤,陳力,王麟閣.基于微信小程序平臺的手機校園NFC支付設計J.信息技術與信息化,2019(03):52-53.3程子珍. 基于微信小程序的網上購物系統(tǒng)的設計與實現D.首都經濟貿易大學,2018.4孔祥龍.Android平臺連連看游戲控制邏輯設計與實現J.電腦知識與技術,2017,13(03):206-208.5朱亞玲,張睿敏.基于java的連連看游戲設計與實現J.數字技術與應用,2016(03):161-162.6李麗惠,莊楊波.連連看游戲搜索算法的研究與改進J.漳州職業(yè)技術學院學報,2016,18(04):17-20.7黎利輝.基于深度優(yōu)先搜索的連連看游戲路徑查找算法J.福建電腦,

5、2019,35(01):16-18.8邢榕珊,匡芳君.微信小程序設計J.計算機時代,2018(08):9-12.9張文敏.微信小程序游戲的發(fā)展現狀及其社交屬性J.新聞研究導刊,2018,9(14):108.10陶宇.基于用戶體驗的游戲復雜界面設計分析及可用性評價研究J.工業(yè)設計,2019(03):126-127.11孫宇嬌. 手機游戲交互界面設計的優(yōu)化研究D.北京交通大學,2017.注：1. 本任務書需雙面打印，由指導教師填寫并經所在學院審核確認；2. 本任務書按畢業(yè)設計（論文）裝訂要求，裝訂在學生的“畢業(yè)設計（論文）”文本內，學院存檔；3. 指導教師、學生可各執(zhí)一份復印件，供檢查論文進度時使

6、用。上海師范大學天華學院2015屆畢業(yè)設計（論文）開題報告設計（論文）題目基于微信小程序的連連看小游戲的設計與實現學生姓名學 號專業(yè)、班級網絡工程學院工學院指導教師姓名建議從以下方面填寫：1. 簡述課題的作用和意義2. 國內外的現狀和發(fā)展趨勢等情況(文獻綜述)，尚待解決的問題；3. 重點介紹完成任務的可能思路、方案和計劃；4. (工科類專業(yè)需填寫)所需的主要儀器和設備等。1、課題的作用和意義娛樂是人類的天性,每個時代都有各種不同的娛樂活動供人消遣,游戲更是隨著時代的變化在不停的進化演變。由于手機擁有龐大的潛在用戶群體以及便攜性、網絡化等特點,手機游戲的出現就是一個必然的結果。游戲本身的普及性和

7、普遍性是其生存之道,像最初的“貪吃蛇”、“俄羅斯方塊”等為大家耳熟能詳。然而,隨著移動通信技術的飛速發(fā)展,這些簡單的黑白類游戲已經滿足不了用戶的需要。連連看游戲作為一款益智類游戲,在機上就早已成為上班族的熱寵。據相關調查,手機游戲市場各類型游戲中益智類游戲占市場的43%。手機游戲是在手機上運行的游戲軟件。手機游戲分為單機游戲和網絡游戲。單機游戲是只使用一個設備就可以獨立運行的游戲。它不同于手游和在線游戲，不需要專門的服務器就可以正常運行，部分游戲軟件也支持多手機互聯(lián)以及多人對戰(zhàn)。網絡游戲是指以互聯(lián)網為傳輸媒介，以游戲運營商服務器和用戶設備為終端來作為信息交流窗口，實現娛樂、休閑游戲、交流和取得

8、虛擬成就的，可持續(xù)性的個人線上游戲。移動網絡游戲尚處于市場導入期，未來幾年，手機網絡游戲將進入快速發(fā)展階段。雖然隨著智能機的普及以及移動網絡的覆蓋率增加，手機網游日益興起，但是網游難免涉及到一些金錢交易，在進行手機網游交易的時候還是存在一定的風險，除了小心謹慎防止上當之外，也有不少玩家始終忠于無需網絡的單機游戲，這主要得益于單機游戲無需溝通的懶人特質和相對安全的操作保障。智能手機游戲的其中一個特點是便攜性和移動性。移動便攜性、移動性特征能更好的滿足用戶隨時玩游戲的需求，用戶能夠很好的利用排隊或者類似等車的時間玩游戲，因此，手機游戲碎片化的特性明顯突出。連連看游戲就屬于這種類型,因此完全可以移植

9、到手機平臺上。連連看游戲適用于各個年齡層的人群,可以使人們在緊張的工作之余放松一下心情,具有一定的應用和商業(yè)價值。2、國內外現狀和發(fā)展趨勢，尚待解決的問題微信小程序是一種c2p形式的app，是一種用戶與服務相互對應的軟件模式，與傳統(tǒng)的 B2C 或 P2P 模式不同，這種模式是針對小程序而新產生的一種模式。用戶可以通過所需的服務選取小程序，而因為小程序多數是依賴于其他 APP 平臺，且所占內存小，操作方便等原因，小程序的使用就像選擇服務一樣，方便且簡潔。微信小程序在 17 年初上市，但是小程序模式軟件卻已經出現很久，在支付寶和微信界面中，存在大量的服務按鈕，如買車票，買電影票，充值話費等，這些都

10、屬于小程序范疇，內存小，即搜即用是其主要特點。但是在 2017 年微信小程序正式提出來之前，小程序并不可以自行開發(fā)，都是由微信或者支付寶等公司自動開發(fā)，并融合在相應的 APP 之上的。在 2017 年初后，微信提供了可以研發(fā)小程序的平臺，用戶可以自行開發(fā)小程序，并發(fā)布。在微信小程序提出一年后，即 2017 年底，微信小程序因為一些微信小游戲而備受關注，據統(tǒng)計以微信跳一跳，最強大腦為首的微信小游戲使用用戶達到近千萬。“全民娛樂”的游戲背景下，小程序最大的優(yōu)勢就是吸引了微信本身龐大基數的“非游戲玩家”群體，借助于微信強社交朋友關系網，小程序的發(fā)展有著游戲客戶端發(fā)展不可比擬的優(yōu)勢，在該特點下，本文就

11、微信小程序游戲的發(fā)展現狀和其社交屬性進行嘗試性的歸納總結，最后得出了小程序游戲在某種程度上不能完全取代游戲APP，反而兩者之間更多的是相輔相成的關系，未來小程序游戲如果想要得到更大的發(fā)展，勢必離不開游戲作為新媒體社交平臺的方向，如何利用好社交動機、競爭動機，是小程序未來的發(fā)展方向。3、重點介紹完成任務的可能思路、方案和計劃首先設計系統(tǒng)框架，如下圖所示：根據上圖系統(tǒng)結構，選用微信小程序開發(fā)流程為：(1)注冊小程序開發(fā)賬號，獲取小程序開發(fā)的ID，同時下載開發(fā)工具；創(chuàng)建空白小程序，并了解小程序的項目結構和文件構成；研究項目的wxml，wxss和js代碼（js推薦多用ES5、ES6），頁面如何跳轉，事

12、件如何觸發(fā)2.1.1小程序的文件結構使用微信Web開發(fā)工具新建一個項目，框架會自動生成描述整體程序的APP和多個描述頁而的pag改件。完整的小程序主要組成有:一個入口文件:app.js，一個全局樣式:app.wxss，一個全局配置:app.Json。(2)在頁面pages下將頁而安裝文件夾劃分，每個頁而存在4個文件，分別是:視圖層:wxml文件、wxs墳件;邏輯層:Json交件(頁面配置，不是必須)。以及WXML如何編寫等。閉合標簽，css動畫對<<textarea/>組件無效。(3)<navigator/>是頁面鏈接，和HTML中超鏈接標簽<a/>一

13、樣，主要進行頁而跳轉控制。鏈接的內容可以是一個字、詞或者一幅圖片，通過點擊內容實現頁而的跳轉。(4) <canvas/>主要用于繪制圖形，其本身是一塊無色透明區(qū)域，并沒有繪制的能力，僅僅是圖形容器，需要調節(jié)相關的應用程序編程接口(Application ProgrammingInterface, API)來完成實際的繪圖任務。完成微信小程序開發(fā)之后，將其接入服務器，步驟如下：(1)小程序注冊:在微信公眾平臺官網首頁()注冊并提交注冊信息、完善主體信息和管理員信息。(2)完善小程序信息:完善小程序的基本信息如名稱、頭像及服務范圍等。開發(fā)前需綁定開發(fā)者并獲取APPID，以保證程序可以通

14、過手機進行掃碼測試。(3)開發(fā)小程序:下載安裝微信開發(fā)者工具，微信官方提供了一套完整的開發(fā)框架，開發(fā)者可以根據微信開發(fā)文檔進行小程序的開發(fā)與調試。(4)代碼審核及發(fā)布:小程序開發(fā)完成后，不能夠直接發(fā)布，需提交代碼與開發(fā)配置信息提交審核，完成后尚可發(fā)布。之后根據下圖實現客戶端與服務器的交互設計。在微信 Web 開發(fā)工具中，視圖和邏輯分開配置，卻能相互聯(lián)系 , 選用 MVC 模式的開發(fā)。這樣開發(fā)起來邏輯分明，更有助于開發(fā)者的技術實現。本設計的小程序客戶端的MVC模式設計原理如下圖：4、所需的主要儀器和設備等微型計算機，Windows系統(tǒng)，微信小程序APPID，騰訊云小程序主機，微信Web開發(fā)者工具

15、。5、所需的資料和主要參考文獻1張文敏.微信小程序游戲的發(fā)展現狀及其社交屬性J.新聞研究導刊,2018,9(14):108.2程子珍. 基于微信小程序的網上購物系統(tǒng)的設計與實現D.首都經濟貿易大學,2018.3孔祥龍.Android平臺連連看游戲控制邏輯設計與實現J.電腦知識與技術,2017,13(03):206-208.4范光明. 基于微信小程序的行車記錄系統(tǒng)的設計與實現D.吉林大學,2018.5王玉洋. 基于微信小程序的移動學習平臺環(huán)境構建與系統(tǒng)設計開發(fā)D.南京大學,2018.6任丕明. 基于Anbroid平臺的教育游戲的研究與實現D.東北石油大學,2013.7趙海國,屈洋.連連看游戲的設

16、計及其實現J.湖南理工學院學報(自然科學版),2015,28(03):39-41+51.8李婧. 基于Android平臺的手機游戲設計與實現D.東南大學,2017.9黃日勝,王偉強,陳樂,何瑞龍.基于P2P與PV3D的3D連連看游戲設計J.軟件導刊,2012,11(06):77-79.10郭毅棋.基于WEB的紙鈔連連看游戲的設計與實現J.福建電腦,2010,26(09):136-137+100.11孫宇嬌. 手機游戲交互界面設計的優(yōu)化研究D.北京交通大學,2017.12高廣宇.手機游戲交互界面的設計與實現研究J.北京印刷學院學報,2018,26(09):32-35+53. 學生姓名 （簽名）日

17、期： 年 月 日指導教師評語：（建議填寫內容：對學生提出的方案給出評語，明確是否同意開題，提出學生完成上述任務的建議、注意事項等） 指導教師 _（簽名）日期： 年 月 日注：1. 本開題報告，須雙面打印。由學生填寫并經指導老師審核、評價；2. 本開題報告應按畢業(yè)設計（論文）裝訂要求，裝訂在“畢業(yè)設計（論文）”文本內，學院存檔。摘要連連看是一款界面友好，操作簡單，富有趣味性的小游戲。用戶在任何時間、任何地點都能通過電腦或者手機等終端登錄游戲并且進行游戲操作，所以該游戲成為如今世界范圍內最受歡迎的游戲之一。本文基于微信“小程序”對連連看游戲進行了設計與實現，通過在微信平臺注冊的APPID和下載的W

18、eb開發(fā)者工具作為設計環(huán)境，選用分類搜索算法作為游戲邏輯算法，完成小游戲系統(tǒng)原型搭建，并且在客戶端和服務器之間實現交互。最后對小游戲進行功能測試和不同手機終端運行性能的測試，測試結果表明小游戲可正常運行，完全符合設計要求。關鍵詞：微信小程序，連連看游戲，圖形用戶界面IAbstractLianliankan is a small game with friendly interface, simple operation and interesting taste. The user can log in to the game and play games through a terminal

19、 such as a computer or a mobile phone at any time and any place, so the game becomes one of the most popular games in the world today.This paper designs and implements Lianliankan games based on WeChat "small program". Through the APPID registered on WeChat platform and downloaded Web deve

20、loper tools as the design environment, the classification search algorithm is selected as the game logic algorithm to complete the prototype construction of the small game system. And interacting between the client and the server. Finally, the function test of the small game and the test performance

21、 of different mobile terminals are tested. The test results show that the small game can run normally and fully meet the design requirements.Keywords: WeChat applet，Lianliankan Game，graphical user interfaceII目錄摘要IAbstractII第1章 緒論11.1 研究背景11.2 微信小程序游戲的發(fā)展現狀11.3 前景意義21.4 小游戲帶來的思考21.5 本章小結3第2章 相關技術簡介42.

22、1 微信小程序42.2 小程序與小游戲42.3 小游戲引擎62.4 微信小游戲Adapter6第3章 需求分析73.1 小程序開發(fā)流程73.2 系統(tǒng)業(yè)務流程分析73.3 系統(tǒng)框架83.4 小游戲邏輯算法8第4章 總體設計114.1 概述114.2 系統(tǒng)功能11第5章 詳細設計與系統(tǒng)實施135.1 常用API135.2 程序流程圖135.3 連連看小游戲的系統(tǒng)設計與實現145.4 客戶端與服務器的交互設計155.5 客戶端的MVC模式設計16第6章 系統(tǒng)測試256.1 測試方案256.2功能測試256.3性能測試266.4本章小結27第7章 總結與展望286.1 總結286.2 展望28參考文獻

23、30致謝32畢業(yè)設計（論文）1 緒論基于微信小程序客戶端的網上單詞查詢系統(tǒng)是web2.0與微信小程序相結合的共同產出物，它集合了微信小程序開發(fā)、ThinkPHP5 服務器開發(fā)、數據庫、網絡等多種當下的流行技術于一體，用戶可以通過掃一掃小程序碼快速查詢單詞，背單詞，充分利用碎片化時間來達到學單詞記單詞的目的。1.1項目研究的背景和意義微信是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序，截止到2016年第二季度，微信已經覆蓋中國 94% 以上的智能手機，月活躍用戶達到 8.06億。微信平臺提供公眾平臺、小程序、朋友圈、消息推送等功能，作為連接10億用戶

24、社交平臺，微信擁有著無限的可能性。本文主要通過微信提供小程序平臺，完成基于微信小程序的單詞查詢系統(tǒng)的設計與實現。在這個信息無比發(fā)達、充滿誘惑的時代，我們如何充分利用移動互聯(lián)網鼓勵人們把時間充分利用學習上。本文基于對這個問題的基本思考，提出基于微信小程序的單詞查詢系統(tǒng)設計理念，針對在英文單詞學習中普遍存在著缺乏語言環(huán)境的情況，以ThinkPHP5 為編程語言，結合MYSQL設計并開發(fā)了一個功能比較完善的英文單詞綜合學習系統(tǒng)。該系統(tǒng)在實現查詢單詞、學習單詞、復習單詞等功能的同時，也為學習者提供了豐富的語段，從而創(chuàng)造了良好的語言環(huán)境，提高學習英文單詞的效率。也意圖通過單詞學習小程序的設計即實現，呼吁

25、人們不要沉迷于這個花花世界不能自拔，要多利用如此優(yōu)越的移動互聯(lián)網環(huán)境進行學習。1.2論文的主要研究工作本文所研究的小程序單詞查詢系統(tǒng)是一個簡潔實用的單詞查詢系統(tǒng)，設計風格主要以簡潔實用為主，主要想通過設計簡單實用的單詞查詢系統(tǒng)，幫助用戶提高學習單詞的興趣以及單詞記憶的效率。本系統(tǒng)由后臺服務器、微信小程序單詞查詢客戶端、數據管理系統(tǒng)三部分組成。由于系統(tǒng)的系統(tǒng)模塊較多，本文的主要工作為設計及實現微信小程序客戶端和后臺服務的交互及數據庫的設計。根據以上的需求，整個微信小程序單詞查詢系統(tǒng)項目采用 B2C 的架構，開發(fā)方法采用服務端、客戶端、數據管理三端分離的架構模式。其中服務端采用 ThinkPHP5

26、 和 MySQL 構建 REST API；客戶端采用微信小程序來實現，通過向服務器 API 發(fā)送 http 通信請求獲取數據，來完成自身的功能行為邏輯；數據管理系統(tǒng)作為管理或者運營人員的數據管理后臺，同樣通過向服務端請求數據，實現商品信息、訂單數據和狀態(tài)的管理。其中論文的主要工作是在微信小程序單詞查詢客戶端系統(tǒng)實現獲取用戶息，單詞查詢、單詞語境學習，歷史單詞，單詞復習等模塊。本文重點描述了以上幾大模塊的設計與實現。1.3論文的特色主要有以下幾點：（1）微信小程序單詞查詢系統(tǒng)針對在英文單詞學習中普遍存在著缺乏語言環(huán)境的情況，在實現查詢單詞、學習單詞、復習單詞等功能的同時，也為學習者提供了豐富的語

27、段，從而創(chuàng)造了良好的語言環(huán)境，提高學習英文單詞的效率。（2）本系統(tǒng)設計實現采用面向對象的開發(fā)方法，小程序客戶端采用了全局的 MVC 模式設計控制，頁面實現采用 template 模板增加模塊的復用性，客戶端通過向服務器REST API 發(fā)送 http 請求獲取數據。1.4論文結構第 1 章：引言。從本文主要研究內容出發(fā)，闡述了項目的背景及意義，結合分析國內外的現狀以及目前單詞學些領域面臨的機遇和挑戰(zhàn)，給出項目概述以及本文的主要工作和本文組織結構。第 2 章：系統(tǒng)架構和關鍵技術。主要介紹了項目總的系統(tǒng)架構和開發(fā)環(huán)境，并對開發(fā)過程中所需的關鍵技術做了簡要介紹。第 3 章：微信小程序單詞查詢系統(tǒng)的需

28、求分析。進行了系統(tǒng)的業(yè)務及數據流分析， 將系統(tǒng)分成多個不同的功能模塊進行 UML 分析，并描述每一模塊需要實現的功能。第 4 章：微信小程序網上單詞查詢系統(tǒng)的詳細設計與功能實現。介紹了項目的總體架構以及開發(fā)環(huán)境，數據庫的設計與實現，單詞查詢系統(tǒng)開發(fā)過程中客戶端與服務器的交互原理、客戶端的 MVC 模式設計以及各個模塊設計與實現的詳細介紹。第 5 章：單詞查詢系統(tǒng)軟件測試與分析。結合 postman 測試工具和微信開發(fā)者工具對系統(tǒng)各個模塊的進行測試，使系統(tǒng)的功能和性能達到運行要求。第 6 章：總結與展望。結合本論文已完成的各項工作進行總結，并提出需要注意的問題。1.5本章小結本章為引言部分。1.

29、1 節(jié)中主要闡述了微信小程序單詞查詢系統(tǒng)的項目背景及其意義；1.2 小節(jié)研究國內相關系統(tǒng)的研究現狀，體現了微信小程序單詞查詢系統(tǒng)面向中小型商店對比傳統(tǒng)線上單詞查詢系統(tǒng)的優(yōu)勢；1.3 小節(jié)中明確了本文在項目中的主要研究工作；1.4 小節(jié)總結了論文的主要特色；1.5 小節(jié)列出了論文的撰寫組織結構，進一步明確了本文的組織框架和系統(tǒng)模塊實現設計計劃。502 系統(tǒng)相關技術研究本章主要安介紹了本微信小程序單詞查詢系統(tǒng)在其開發(fā)過程中所用到的關鍵技術，其中包括微信小程序的 MINA 框架、ThinkPHP5 框架、REST API 的構造、微信支付技術、MySQL 數據庫五部分。本課題的設計與實現主要就是建立

30、在這些理論知識的掌握和應用之上。2.1 微信小程序微信小程序是一種全新的連接用戶與服務的方式。小程序為用戶提供了觸手可及、用完即走的輕便服務，主要體現在用戶獲取小程序、使用小程序方便快捷的服務理念上。用戶可以在線下掃一掃或者公眾號關聯(lián)小程序碼獲取小程序應用，或者可以在微信的發(fā)現頁面搜索小程序，由于小程序的整個文件占用內存空間很小，用戶下載安裝小程序的過程消耗幾乎感知不到，所以從用戶獲取小程序到點擊進入開始使用小程序應用的速度非?？臁Ｐ〕绦蚨嗳肟讷@取和觸手可及用完即走的使用體驗降低了器傳播和獲取用戶的成本，并且可以實現原生 APP 的基本功能，更加適合單詞查詢等學習類系統(tǒng)的呈現。MINA 框架是

31、微信團隊為小程序開發(fā)提供的框架名字，通過下面的 MINA 框架圖我們可以看到三大部分：邏輯層、視圖層和系統(tǒng)層。如圖2.1。圖 2.1微信 MINA 框架架構圖（1）邏輯層邏輯層是 MINA 的服務中心，由微信客戶端啟用異步線程單獨加載運行。頁面渲染所需的數據、頁面交互處理邏輯都在邏輯層中實現。小程序中的各個頁面可以通過邏輯層的函數實現數據管理、網絡通信、應用生命周期管理和頁面路由。其中，小程序中的每個頁面都有與其業(yè)務邏輯相對應的生命周期，這個由頁面邏輯層的 page()函數實現， 生命周期控制中主要包括以下方法：onLoad 方法監(jiān)聽頁面加載，onShow 方法監(jiān)聽頁面的顯示，onReady

32、方法監(jiān)聽頁面初次渲染完成，onHide 方法監(jiān)聽頁面的隱藏，onUnload 方法監(jiān)聽頁面卸載，不同的業(yè)務要在不同的生命周期方法函數內實現。微信小程序開發(fā)框架的邏輯層是由 JavaScript 實現。在 JavaScript 的基礎上，微信團隊針對小程序項目做了一些適當的修改，以便提高開發(fā)小程序的效率。主要修改包括： 增加 app 和 page 方法，進行程序和頁面的注冊；提供豐富的 API,如掃一掃、支付等微信特有的能力；每個頁面有獨立的作用域，并提供模塊化能力等。邏輯層的實現就由各個頁面的.js 腳本文件負責，微信小程序的邏輯層響應視圖層的事件處理，并將處理結果返回到視圖層。但由于小程序并

33、非運行在瀏覽器中，所以JavaScript 在 Web 中的一些能力無法使用，如 document、window 等。（2）視圖層視圖層提供了一套類似 HTML 標簽的語言以及一系列基礎組件。開發(fā)者使用WXML 文件來搭建頁面的基礎視圖結構，使用 WXSS 文件來控制頁面的展現樣式。視圖層就是頁面.wxml 文件與.wxss 文件的集合，由組件來進行設計展示。微信小程序在邏輯層將數據進行處理后發(fā)送給視圖層展現出來，同時監(jiān)聽視圖層的事件。數據在視圖層借助組件的設計展現，組件是視圖的基本組成單元。（3）系統(tǒng)層系統(tǒng)層主要包括臨時數據或緩存、文件存儲、網絡存儲與調用。例如頁面臨時數據緩存需要在 pag

34、e()中使用 setData 函數將數據從邏輯層發(fā)送到視圖層。文件存儲和網絡存儲與調用則需要調用相應的微信 API 接口來實現，如 wx.request 接口可以進行 http 網絡請求，通過定義請求的 url、請求參數、請求方法以 json 配置，將請求結果分為 success 和 fail 兩種方式處理。除此之外，項目根目錄下的三個 app.wxss、app.js、app.json 文件是全局性的系統(tǒng)文件，負責小程序項目的全局公共樣式、小程序公共邏輯和小程序公共配置的實現。2.2 ThinkPHP 5 框 架ThinkPHP 是一個開源的、面向對象的輕量級 PHP 開發(fā)框架，ThinkPH

35、P5 主要特性包括：1、遵循 PSR-2、PSR-4 規(guī)范。2、支持 Composer。3、支持單元測試。4、安全機制，詳細的日志能幫你輕輕松松的做到問題定位。5、減少核心依賴，增加了擴展的靈活性，支持命令行指令擴展。6、具備優(yōu)秀的性能和 REST 支持，支持遠程調試，優(yōu)化了 API 開發(fā)工作。7、惰性加載機制。8、路由、配置和自動加載的緩存機制。Think PHP 在項目中的配置，一個項目下可以容納多個子系統(tǒng)，例如前端系統(tǒng)和后端管理系統(tǒng)等等。在項目中包括公共函數文件夾 Common、系統(tǒng)配置文件夾 Conf（其中包含該項目的所有配置信息，包括數據庫和系統(tǒng)常量以及模板選擇和緩存、調試、日志等等

36、）、源代碼儲存文件夾 Lib（分數據庫表達與處理的 Model 文件夾和程序源代碼的 Action 文件夾）、支持多種語言的 Lang 文件夾、文件緩存的 Runtime 文件夾以及網頁模板的 Tpl 文件夾。此外 index.php 是 Think PHP 的入口文件夾。2.3 MySQL 數據庫MySQL數據庫被非常多的編程人員使用，MySql數據庫適用于中小型程序的數據存儲，可以和JAVA技術進行很好的搭配使用。MySql數據庫非常適合剛學習編程的人進行學習，首先從下載上來說，直接到官方網站或者百度上搜索就能搜索到MySql的下載地址，下載完成之后直接點擊安裝文件，傻瓜式一鍵安裝完成就可

37、以正常使用了，非常的簡單。MySql語句也是通俗易懂，都有固定的語句格式，建數據庫、建表、刪除表、添加、修改、刪除、查詢等語句直接套用格式就可以正常使用。最重要的是JAVA、PHP、ASP等目前主流的編程語言，都支持和MySql數據庫的連接，這對于程序中各種數據的相互傳輸以及存儲有很大的幫助。Mysql數據庫非常重視對于數據安全的保護，可以給予程序中的運行的大量數據充分的安全保證。2.4本章小結在本章中，主要研究了本文工作中主要用到的微信小程序框架關鍵技術闡述了選擇 MySQ L 作為項目的數據庫的優(yōu)勢以及其系統(tǒng)架構介紹。這些都是本文在項目中所做工作的關鍵理論基礎。畢業(yè)設計（論文）析3 系統(tǒng)分

38、析軟件工程活動是“生產一個最終滿足需求且達到工程目標的軟件產品所需要的步驟”。軟件工程包括了需求、設計、編碼實現、測試等內容，需求分析作為軟件工程中重要的一步，主要作用是對用戶想要解決的問題和想法進行詳細的分析，分層次的分析問題，從輸入、問題處理到結果的輸出，準確的表述系統(tǒng)必須完成那些工作，對系統(tǒng)的的分析形成完整具體的要求。本章正是通過系統(tǒng)需求分析和 UML 用例圖模型兩方面研究了微信小程序小程序單詞查詢系統(tǒng)的設計。3.1系統(tǒng)業(yè)務流程分析本文在項目系統(tǒng)中的主要工作是完成小程序單詞查詢系統(tǒng)客戶端、服務器和數據庫的開發(fā)和設計。在微信小程序單詞查詢系統(tǒng)客戶端部分，消費者用戶可以進入到微信小程序單詞查

39、詢系統(tǒng)客戶端，進行商品瀏覽、商品分類檢索、添加單詞查詢車，管理單詞查詢車和個人信息，下單等主要網上單詞查詢操作。在數據庫部分，通過合理的設計，使各個數據表之間擁有可靠的關聯(lián)關系，并具備一定的數據庫可擴展性。圖 3. 1 小程序客戶端系統(tǒng)的業(yè)務流程圖微信小程序客戶端系統(tǒng)的單詞查詢流程圖 3.1 所示，當用戶獲取到小程序后，可以選擇獲取是否允許獲取個人信息，也可以瀏覽小程序的各個頁面或者商品。當用戶在瀏覽和分類檢索商品的過程中，遇到符合自己心意的商品時，則可以選擇把商品加到單詞查詢車， 當用戶結束挑選商品后，可以進入到單詞查詢車頁面進行結算商品，結算商品時，用戶若為未登錄狀態(tài)，需要返回第一步允許微

40、信獲取個人信息，并補充具體的個人信息（如地址、電話等），此時，則可以進行下單，進入到支付界面進行訂單結算，根據不同的支付結果生成不同的歷史訂單信息。至此單詞查詢流程結束。3.2系統(tǒng)數據流分析本微信小程序單詞查詢工具項目的數據主要包括用戶和單詞數據。用戶在小程序客戶端界面發(fā)生的交互動作是業(yè)務的數據來源，根據用戶行為和查詢系統(tǒng)的架構設計分析，業(yè)務系統(tǒng)的數據流處理主要包括客戶端與本地緩存、客戶端與系統(tǒng)服務器兩部分。圖 3.2 系統(tǒng)業(yè)務數據流圖如上圖 3.2 統(tǒng)業(yè)務數據流圖所示，用戶可以通過微信小程序待查詢系統(tǒng)客戶端攜帶個人信息請求單詞信息。小程序客戶端接收用戶的行為請求，在控制層進行相應的業(yè)務邏輯處

41、理，并將處理結果以頁面展示的方式返回給用戶，如果用戶請求的數據涉及到數據庫的查詢和更新，客戶端會將用戶需求的請求參數通過模型層與服務器通信，在服務器部分進行數據的校驗和處理，如果用戶的請求合法則會在數據庫中進行相應的響應操作，服務器處理完畢后會將結果返回給客戶端。在系統(tǒng)設計中，由于查詢歷史的數據量較小，與查詢歷史相關的數據存放在小程序本地緩存中，可以為用戶提供更快速的數據反饋效果。系統(tǒng)功能總體功能分析根據分析用戶查詢單詞的基本需求，對比分析單詞查詢 APP 和 PC 單詞查詢網站上的主要功能模塊，本著小程序開發(fā)設計的三大原則：在功能方面，小程序要比原生 APP 更單一；設計方面，小程序要比原生

42、 APP 更簡潔；在使用場景方面，小程序應比原生 APP 更明確?；谛〕绦虻闹饕ㄎ唬〕绦驊獮橛脩籼峁└又黝}明確的服務，盡量減少與查詢無關的不必要的功能模塊，為用戶提供用完即走、方便快捷的使用體驗。根據以上分析，本小程序系統(tǒng)的業(yè)務邏輯模塊分為用戶登錄、單詞搜索、歷史記錄、查詢結果功能模塊，總體的系統(tǒng)功能模塊如下圖所示，本章將對各個功能模塊進行詳細的需求分析。圖 3.3小程序客戶端整體功能結構圖從圖 3.3 功能結構圖中，我們可以大致總結出小程序客戶端單詞查詢系統(tǒng)的幾個主要功能，包括用戶用戶登錄、單詞搜索、歷史記錄、查詢結果四大模塊，本文也主要是圍繞著這些功能模塊的設計和實現而展開。3.3

43、 本章小結本章中主要對微信小程序單詞查詢系統(tǒng)客戶端的功能進行了需求分析，其中 3.1、3.2小節(jié)是對小程序客戶端系統(tǒng)的業(yè)務流程圖和整個項目的數據流和整體的功能結構進行了分析，隨后在此基礎上，我們對小程序客戶端單詞查詢系統(tǒng)的主要功能模塊進行了功能需求分析。這為接下來的小程序客戶端的功能設計和實現做好了基礎。4 系統(tǒng)設計與實現4.1項目總體架構本項目在總體架構上主要分為微信小程序客戶端、服務器、數據管理三大部分。其中微信小程序客戶端部分主要利用微信小程序的“MINA”框架（WXML，WXSS，JavaScript）以及其提供的豐富組件，采用 MVC 的設計模式來完成客戶端界面和功能設計與實現，客戶

44、端可與消費者用戶直接交互，提供流暢的單詞查詢體驗。服務器端主要采用ThinkPHP5 和 MySQL 構建 REST API 為客戶端提供數據接口，其中 ThinkPHP5 作為服務器開發(fā)的一個外部框架，可在消費者用戶使用微信小程序單詞查詢系統(tǒng)瀏覽商品、加入單詞查詢車、下單等的業(yè)務邏輯中，實現客戶端與數據庫數據請求以及數據處理的關鍵部分。除了本地服務器的支持之外，微信小程序的客戶端實現的部分功能還需要服務器編寫業(yè)務邏輯調用微信服務器的 API 接口來實現。MySQL 主要擔任數據庫的角色，可實現數據存儲、數據表設計等功能， MySQL 數據庫在與 TP5 服務器配合下向客戶端提供可訪問的數據接

45、口。數據管理作為管理或者運營人員的數據管理平臺，通過調用 API 從服務器的數據庫中獲取商品信息、訂單數據等。系統(tǒng)總體架構圖如圖 4.1。圖 4.1系統(tǒng)總體架構圖畢業(yè)設計（論文）現4.2項目開發(fā)方法及環(huán)境部署項目客戶端的開發(fā)過程采用面向對象的開發(fā)方法，充分利用面向對象方法中的封裝性、繼承性和多態(tài)性的特點，將系統(tǒng)劃分為相對獨立的多個模塊，每個模塊具有自己的功能設計和實現要求，在開發(fā)過程中可以分模塊集中開發(fā)實現，然后最后再將各個模塊組織和集成，這樣使得整個系統(tǒng)的結構層次分明，也便于開發(fā)工作的管理。面向對象的軟件開發(fā)方法是解決軟件設計過程中所出現基礎性問題的的解決方案, 避免在開發(fā)中做重復的工作。進

46、行可重復使用性設計,在軟件的總體框架中可以將同一個功能模塊的不同業(yè)務部分的應用通過面向對象的設計,以及模塊的復用來實現重復利用,減少開發(fā)得重復工作,提高開發(fā)效率。例如分析系統(tǒng)中通用的處理方法，將其封裝設計成相對獨立可重復使用的代碼作為基類，當功能在系統(tǒng)中多個模塊應用時,直接調用基類就可以。這樣會減少因為重復功能的代碼的復制修改而帶來的代碼質量問題，同時也避免了代碼的冗余。從系統(tǒng)的角度進行分析,利用對象的單位作為基本構造單元,可以使軟件系統(tǒng)變得模塊化、可復用性能好、易于維護，同時便于優(yōu)化軟件結構和質量。項目的基礎環(huán)境基于 XAMPP（Apache+MySQL+PHP+PERL）一個功能強大的建站

47、集成軟件包，本項目采用的是 XAMPP 的 7.1.12 版本 xampp-win32-7.1.12-0-VC14-installer 安裝包，選擇安裝的組件有 PHP、MySQL 和 Apache 服務器。項目選擇ThinkPHP 5 作為 web 開發(fā)框架，在 Git 倉庫中下載 ThinkPHP 5 5.0.7 版本的應用項目和核心框架，與XAMPP 集成作為主要的業(yè)務邏輯和 API 的開發(fā)語言和框架。在開發(fā)工具選擇上，單詞查詢系統(tǒng)客戶端采用的是微信 web 開發(fā)者工具來編寫微信小程序單詞查詢系統(tǒng)的主界面，采用PHPstorm 來開發(fā)服務器的 PHP API 代碼，使用 PostMan

48、作為服務器接口的測試工具，選用 Navicat 連接數據庫作為 MySQL 的可視化管理工具。4.3微信小程序單詞查詢系統(tǒng)的數據庫設計數據庫的設計是軟件系統(tǒng)開發(fā)和建設中最基礎和最核心的部分，良好的數據庫設計可以讓系統(tǒng)具有更快更好的運行速度。目前關系型數據庫是我國中小型系統(tǒng)的主流選擇。關系型數據庫的設計要有嚴格的設計規(guī)范，對軟件系統(tǒng)中的各類數據進行有效的組織存儲和維護，為軟件系統(tǒng)運行中的數據需求提供高效準確的處理速度。在實現這個目標的過程中數據庫的規(guī)范設計就顯得尤為重要，保持數據存儲的一致性和完整性是提高數據存儲和處理效率的重要保障之一。在數據庫設計時，不僅需要滿足數據庫的設計準則，還需要結合具

49、體的業(yè)務知識分析出系統(tǒng)中的不同實體之間的關系，并確定這些實體之間的關系類型。本文根據小程序單詞查詢系統(tǒng)的功能需求分析，按照規(guī)范設計的要求，將對數據庫設計的概念結構設計、邏輯結構設計、數據庫配置與實施進行詳細分析與設計。4.3.1數據庫概念結構設計數據庫的概念結構設計的過程是將用戶的需求綜合抽象為一個信息結構的過程，概念結構是各類數據模型的共同基礎。E-R 圖是描述概念模型的有效工具。E-R 圖由實體、屬性、聯(lián)系三個要素組成，例如本系統(tǒng)中單詞信息就是一個實體，它包含描述單詞的眾多屬性，聯(lián)系表示實體之間的關系，實體與實體之間的聯(lián)系可以分為三種：一對一、一對多、多對多。本文從系統(tǒng)的業(yè)務和功能模塊分析

50、確定系統(tǒng)需要的實體集，以及實體與實體之間的聯(lián)系。小程序單詞查詢系統(tǒng)中關鍵的實體信息如下：（1）單詞查詢系統(tǒng)的單詞信息實體圖的屬性包含單詞 id、單詞英文拼寫、單詞音標、單詞中文翻譯、單詞屬性、單詞短語，如圖 4.2 所示：圖 4.2單詞信息實體圖（2）單詞查詢系統(tǒng)的用戶信息實體圖的屬性主要包含用戶 id，openid，用戶昵稱等信息， 如圖 4.3 所示：圖 4.3用戶信息實體圖（3）單詞查詢系統(tǒng)的單詞音標信息實體圖的屬性主要包含音標 id，音標類別、音標拼寫等信息， 如圖 4.4 所示：圖 4.4音標信息實體圖（4）單詞查詢系統(tǒng)的單詞屬性信息實體圖的屬性主要包含屬性 id，屬性類別、中文翻譯

51、等信息， 如圖 4.5 所示：圖 4.5屬性信息實體（5）單詞查詢系統(tǒng)的單詞短語信息實體圖的屬性主要包含短語 id，英文短語、中文翻譯等信息， 如圖 4.6 所示：圖 4.6短語信息實體圖由系統(tǒng)的實體以及實體與實體之間的聯(lián)系可得出系統(tǒng) E-R 圖，小程序單詞查詢系統(tǒng)的總體 E-R 圖如圖 4.7 所示：圖 4.7系統(tǒng)總體 E-R 圖在概念模型的設計中，采用 E-R 圖來表示系統(tǒng)需求所抽象成的信息結構，其中用矩形表示 E-R 圖中的實體，橢圓形表示屬性，菱形表示聯(lián)系。一個單詞信息表對應多個屬性。4.3.2數據庫邏輯結構設計根據概念結構設計中的 E-R 圖進行數據庫的規(guī)則轉換，將 E-R 圖實體和

52、實體間的聯(lián)系轉換為關系模式，并確定關系模式中的屬性和碼。實體中的屬性與關系模式中的屬性相對應，實體中的碼與關系中的碼相對應。本系統(tǒng)最后的數據模型以數據表的形式展現， 具體說明了數據表中屬性名稱、主鍵、含義、約束條件，是否為空等信息，系統(tǒng)中主要的數據庫表設計詳細如下：（1）用戶信息表 user 基本數據表，如表 4.8。idint11否用戶idnamevrachar255否用戶昵稱openidvrachar255否openidcreate_attimestamp是注冊時間remarkvarchar255是拓展備注update_attimestamp是更新時間delete_attimestamp是

53、刪除時間表 4.8專題商品信息表（user）字段名 類型 大小 是否為空字段描述（2）用戶信息表 user 基本數據表，如表 4.9。idint11否單詞主鍵wordvarchar255否英文單詞voice_idvarchar255否單詞音標propertyvarchar255否單詞屬性pharsevarchar255是單詞短語表 4.9單詞信息表（user）字段名類型大小是否為空字段描述（3）單詞音標表voice基本數據表，如表 4.10。idint11否主題外鍵catvarchar255否類別voidvarchar255是英標拼寫表 4.10單詞音標信息表（user）字段名類型大小是否為空

54、字段描述（4）單詞屬性表voice基本數據表，如表 4.11。idint11否主題外鍵catvarchar255否類別voidvarchar255英標拼寫表 4.11單詞屬性信息表（user）字段名類型大小是否為空字段描述（5）單詞短語表 pharse 基本數據表，如表 4.12。idint11否單詞短語idpharsevarchar255否英文短語translatevarchar255中文翻譯表 4.12單詞短語信息表（user）字段名類型大小是否為空字段描述4.3.3數據庫的配置與實施本文結合本微信小程序單詞查詢系統(tǒng)業(yè)務的實際情況，在項目開發(fā)環(huán)境中建立 MySQL 數據庫，并使用 Navi

55、cat 圖形化管理數據庫，開源數據庫 MySQL 作為關系型數據庫系統(tǒng)可實現網絡化，滿足本系統(tǒng)的實際需要，并且 PHP 中所有函數對 MySQL 數據庫給予支持。由數據庫的概念結構和邏輯結構分析，根據數據表設計進行 MySQL 數據庫的設計與實現。建立數據庫為translate，以 root 為用戶名，在本數據庫中共建立了 14 張表，創(chuàng)建與數據表相對應的 SQL 語句，并輸入了相應表的測試數據。在項目服務器中建立服務器連接數據庫的配置文件 database.php，其中主要的配置參數如下：'type'=> 'mysql',/數據庫類型'hostname'=> '',/ 服務器地址'database'=> translate,/ 數據庫名'username'=> 'root',/ 用戶名'password'=> '123456',/ 密 碼'hostport'=> '3306',/ 端 口'charset'=>