【優(yōu)秀論文】基于微信小程序的電子閱讀器的設計與開發(fā)/小說閱讀
說明：由于圖片無法顯示，需要全文可聯(lián)系up主
前 ?言
在2017年微信推出微信小程序后，迅速以不需下載安裝即可使用，用完即走，幾乎不占用內(nèi)存等優(yōu)點獲得人們的青睞。越來越多的人傾向于使用更為便捷的小程序，而開發(fā)者亦是如此，希望通過微信小程序可以讓自己的產(chǎn)品廣為人知。本設計是一款基于微信小程序的電子閱讀應用，在其架構(gòu)上分為前端和后端，前端主要使用微信官方提供的微信Web開發(fā)者工具進行開發(fā)，主要內(nèi)容包括頁面布局，頁面跳轉(zhuǎn)以及api接口使用等。后端則使用微擎框架--基于目前最流行的WEB2.0架構(gòu)(PHP+MySQL)來進行后臺管理。
在功能上，本設計前端要實現(xiàn)書城、我的書架、個人中心、書籍頁面詳情等幾個模塊，這幾個模塊間又有許多子模塊相互連接和配合。后端實現(xiàn)小說分類管理，熱門推薦管理，頁面管理等。閱讀之余，還有一些熱門的小游戲或者小程序供用戶體驗。整個過程中擬采用模塊化設計，將系統(tǒng)分為幾個相對獨立的模塊，每個模塊具有自己的功能設計和實現(xiàn)要求，在開發(fā)過程中可以分模塊集中開發(fā)實現(xiàn)，然后最后再將各個模塊組織和集成，這樣使得整個系統(tǒng)的結(jié)構(gòu)層次分明，也便于開發(fā)工作的管理。
?
關(guān)鍵詞：微信小程序；微擎框架；PHP；模塊化
目??錄
1 引言
1.1 研究背景
1.2 國內(nèi)研究現(xiàn)狀
2 研究與實現(xiàn)中的關(guān)鍵技術(shù)
2.1 微信小程序
2.2 微擎框架
2.3 MySQL數(shù)據(jù)庫
2.4 開發(fā)環(huán)境
3 系統(tǒng)總體需求分析
3.1 可行性分析
3.2 系統(tǒng)需求分析
3.3 系統(tǒng)業(yè)務流程分析
4 數(shù)據(jù)庫設計
4.1 數(shù)據(jù)庫概念結(jié)構(gòu)設計
4.2 數(shù)據(jù)庫邏輯結(jié)構(gòu)設計
5 系統(tǒng)實現(xiàn)
5.1 個人中心界面設計
5.1.1?登錄界面
5.1.2?我的書架界面
5.2 小說首頁界面設計
5.3 書籍分類頁面設計
5.3.1?書城頁面布局
5.3.2 閱讀頁面設計
5.3.3?書籍詳情信息獲取
5.4 后臺管理設計
6 系統(tǒng)功能測試
6.1 系統(tǒng)測試目的及原則
6.2 系統(tǒng)測試
6.2.1 我的書架頁面測試
6.2.2?書籍分類及書籍詳情頁面測試
6.2.3?后臺管理測試
總 ?結(jié)
參考文獻：
致 ?謝
?
1?引言
1.1 研究背景
自微信上線以來，迅速獲得大量用戶的青睞，截止目前，微信用戶數(shù)量已經(jīng)達到10億之多。而且在2017年微信推出小程序之后，更是以不需要下載安裝即可使用，用戶掃一掃或搜一下即可打開應用等優(yōu)點迅速占領(lǐng)市場[1]，它實現(xiàn)了應用“觸手可及”的夢想，與普通app相比，它不用下載，打開微信就能使用，使用完關(guān)閉即可，大大減少了手機內(nèi)存的占用。因此，隨著微信小程序的推出，越來越多的開發(fā)者將自己的產(chǎn)品往小程序遷移，希望借助微信巨大流量以及信息傳播的便捷性，讓自己的產(chǎn)品廣為人知。同時，在網(wǎng)絡普及的時代，網(wǎng)上閱讀已經(jīng)走進人們的生活。相比傳統(tǒng)的書本，網(wǎng)上閱讀能讓用戶更方便快捷的選擇自己喜愛的書籍，擁有的龐大的書籍庫森羅萬象，能滿足用戶各方面的需求[2]。同時網(wǎng)絡閱讀器能將自己喜歡的書籍都存放在一部小小的手機中，同時能保存用戶書簽，記錄這些數(shù)據(jù)，方便用戶隨時查看。
1.2 國內(nèi)研究現(xiàn)狀
目前，小程序主要涉及五大類：零售、電商、生活服務、政務民生和小游戲，在不斷開發(fā)新的功能來滿足用戶的需求。國內(nèi)有大量對app的調(diào)查研究，微信小程序的出現(xiàn)及其用戶市場良好反饋無疑會對app造成一定影響[3]，而關(guān)于微信小程序的應用程度和未來發(fā)展方向的預測，對其用戶需求預測，企業(yè)在開發(fā)app和創(chuàng)建微信小程序上的選擇影響等方向的預測都對微信小程序的發(fā)展有著重要的意義。
就本課題而言，隨著網(wǎng)絡的普及化，越來越多的人傾向于電子閱讀，據(jù)統(tǒng)計顯示，當前使用電子閱讀方式的用戶已經(jīng)超出紙質(zhì)版閱讀用戶10個百分點，電子閱讀成為大多數(shù)人青睞的閱讀方式[4]。但是，伴隨著技術(shù)的不斷發(fā)展，目前移動端閱讀app種類甚多，彼此之間相互借鑒、彼此模仿，同質(zhì)化比較嚴重，用戶隨便下載安裝一個使用都差別不大[5]，而且所占用的手機內(nèi)存也會隨著使用時間而增加。
微信小程序的出現(xiàn)，則會改善這一不足之處，如果設計一款基于小程序的電子閱讀器，既避免了對于閱讀app的選擇安裝，隨時隨地，想看就看，看完即關(guān)，又不占用過多手機空間，甚至可以免費閱讀，可以充分利用碎片化時間來閱讀學習，充實自我。這對于大多數(shù)用戶來說，是一個很好地選擇。
2 研究與實現(xiàn)中的關(guān)鍵技術(shù)
2.1?微信小程序
微信小程序是騰訊微信推出的一種全新的用戶與服務之間的連接方式[6]。不用下載安裝，也不占用很多內(nèi)存，但可以享有和原生app基本功能的相同體驗。隨著技術(shù)的不斷發(fā)展，小程序的開發(fā)過程已經(jīng)有了一套成熟的流程體系。有微信自己提供的組件，框架，開發(fā)工具等。還有一些專業(yè)人士自己寫的組件來更好的進行微信小程序的開發(fā)。
為了使小程序開發(fā)變的更為方便、快捷、高效，微信團隊開發(fā)了一套小程序框架，命名為MINA。它通過封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡通信、任務管理、數(shù)據(jù)安全等基礎功能，而且對上層提供一整套JavaScript?API[7]，讓開發(fā)者能夠很方便地使用微信客戶端提供的各種基礎功能與操作，快速構(gòu)建一個應用。
如下圖所示，為MINA框架架構(gòu)圖。
?
?
圖2-1 微信MINA框架架構(gòu)圖
?
由圖可以看出該框架分為三大部分，分別為邏輯層、視圖層和系統(tǒng)層。
（1）邏輯層
邏輯層是MINA框架的核心內(nèi)容，也是其服務中心，在這一層中，主要是對頁面交互以及數(shù)據(jù)列表渲染等內(nèi)容的處理。在微信小程序里面，邏輯層就是所有.js腳本文件的集合，它和視圖層中的事件機制聯(lián)合起來共同完成整個小程序的數(shù)據(jù)管理，頁面交互以及網(wǎng)絡和文件的訪問。邏輯層里面還有兩個很重要的功能即生命周期和頁面路由[10]，其中生命周期是由頁面邏輯層的page()函數(shù)實現(xiàn)，生命周期控制中主要包括以下方法：
onLoad()方法--監(jiān)聽頁面加載，onShow()方法--監(jiān)聽頁面的顯示，onReady()方法--監(jiān)聽頁面初次渲染完成，onHide()方法--監(jiān)聽頁面的隱藏，onUnload()方法--監(jiān)聽頁面卸載，onPullDownRefresh()方法--監(jiān)聽用戶下拉動作，以及轉(zhuǎn)發(fā)設置等，不同的服務要在不同的生命周期方法函數(shù)內(nèi)實現(xiàn)。而頁面路由則主要用來進行頁面間跳轉(zhuǎn)的無縫連接，所有的頁面都要添加到app.json這個文件中進行統(tǒng)一管理。邏輯層的實現(xiàn)就由各個頁面的.js腳本文件負責，微信小程序的邏輯層響應視圖層的事件處理，并將處理結(jié)果返回到視圖層[11]。
（2）視圖層
視圖層則是對頁面的直觀布局，包括WXML和WXSS兩類文件，與HTML和CSS類似，WXML是對頁面基礎視圖進行布局設計，WXSS則對頁面要展示的樣式進行控制和美化。在這一層中還要通過數(shù)據(jù)綁定，進行列表及條件渲染，引用模板和組件對頁面進行合理美觀的布局，而后在邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層展現(xiàn)到頁面[12]，同時監(jiān)聽視圖層的事件。數(shù)據(jù)在視圖層借助組件的設計展現(xiàn)，組件是視圖的基本組成單元。
（3）系統(tǒng)層
系統(tǒng)層主要包括臨時數(shù)據(jù)或緩存、文件存儲、網(wǎng)絡存儲與調(diào)用[13]。除此之外，項目根目錄下的三個app.wxss、app.js、app.json文件是全局性的系統(tǒng)文件，也是小程序的入口文件，它們分別負責小程序項目的全局公共樣式、小程序公共邏輯和小程序公共配置的實現(xiàn)。
2.2 微擎框架
微擎是目前市面上很流行的第三方微信公眾號平臺運營管理系統(tǒng)--Web2.0架構(gòu)（MySQL+PHP）。它是一個開放的生態(tài)系統(tǒng)，支持在線升級和安裝模塊及模板，擁有良好的開發(fā)框架、成熟穩(wěn)定的技術(shù)解決方案、活躍的第三方開發(fā)者及開發(fā)團隊，另外，微擎還是多用戶版本的系統(tǒng)，擁有開發(fā)者入駐機制，用戶在安裝微擎后，可以綁定很多小程序和公眾號，而且也可以開通很多賬號，具備分配權(quán)限的功能，用戶可以基于微擎系統(tǒng)，發(fā)展客戶，發(fā)展代理等[14]。使用者只需下載微擎安裝包，安裝對應模塊便能輕松管理微信公眾號或者微信小程序，對于新手很是友好。
2.3 MySQL數(shù)據(jù)庫
MySQL是一個中小型關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，目前Internet上的中小型網(wǎng)站的數(shù)據(jù)庫大多是MySQL。支持多種操作系統(tǒng)，支持多線程，充分利用CPU資源，對SQL語句進行優(yōu)化，提高查詢速度，也提供了用于管理、檢查、優(yōu)化數(shù)據(jù)庫操作的管理工具。MySQL還具有體積小、開放源代碼、性能快捷、可移植性和開放源代碼、遵守國際標準和國際化支持、為多種編程語言提供API等特點[15]。
?
?
圖2-2 MySQL系統(tǒng)架構(gòu)圖
?
如圖2-2所示，MySQL內(nèi)部大致分為三層：
（1）最上層所包含的服務并不是MySQL所獨有的，而相反是大部分服務于C/S程序或者這些程序所需要的部分，比如連接處理、身份認證、安全性等[16]；
（2）中間層是MySQL的核心部分，通常也叫做SQL Layer。在MySQL數(shù)據(jù)庫系統(tǒng)處理底層數(shù)據(jù)之前的所有工作都是在這一層完成的，包括權(quán)限判斷，SQL解析，行計劃優(yōu)化，query cache的處理以及所有的內(nèi)置函數(shù)（如日期，時間，數(shù)字運算和加密）等等。跨存儲引擎的功能都在這一層實現(xiàn)，如存儲過程、觸發(fā)器、視圖等。
（3）底層是存儲引擎，主要對底層數(shù)據(jù)進行存取、操作實現(xiàn)，由多種存儲引擎共同組成，是數(shù)據(jù)庫中重要且核心的部分，也是MySQL不同于其他數(shù)據(jù)庫的一個重要特性[17]。
2.4 開發(fā)環(huán)境
（1）Windows 7旗艦版
（2）小程序開發(fā)工具：微信web開發(fā)者工具
（3）PHP調(diào)試環(huán)境：phpStudy
（4）PHP編碼工具：phpStorm
（5）數(shù)據(jù)庫及管理工具：MySQL數(shù)據(jù)庫 ?Navicat Premium 12
3 系統(tǒng)總體需求分析
3.1 可行性分析
（1）操作可行性
微信小程序提供了供開發(fā)使用的微信web開發(fā)者工具，在工具中可以進行代碼編寫，調(diào)試，預覽等功能，極大的簡化了開發(fā)難度，其開發(fā)有前端與后端操作，前端為騰訊微信推出的WXML，WXSS，JS等語言來布局，其實質(zhì)與HTML，CSS類似，其中也有一點不同，不過對于熟悉HTML和CSS的人來說，這就可以很快上手并進行小程序前端布局，而后端操作則有多種語言可選擇，比如Java，C#，PHP，NodeJs等[18]，而在本次設計中，我選擇用PHP，首先，PHP是可以將程序嵌入到HTML文檔中去執(zhí)行，執(zhí)行效率比完全生成HTML標記的CGI（通用網(wǎng)關(guān)接口）要高許多；其次，PHP還可以執(zhí)行編譯后的代碼，編譯可以達到加密和優(yōu)化代碼運行的功能，使代碼運行更快。PHP還支持幾乎所有流行的數(shù)據(jù)庫以及操作系統(tǒng)。最后PHP是開源軟件，所有PHP的源代碼每個人都可以看得到，很適合新手入門。
（2）經(jīng)濟可行性
微信小程序與原生app相比較來說，它開發(fā)周期短，一般兩周左右，而app開發(fā)周期則幾個月起步，同時在成本上，明顯小程序花費更少，即使是復雜一點的小程序，其成本也幾千到一萬左右，而同款app卻需幾十萬甚至百萬，因此在使用體驗相差無幾的條件下，很顯然小程序開發(fā)更占優(yōu)勢。
3.2 系統(tǒng)需求分析
通過需求分析確定本次設計在整個功能上分為前端和后端兩塊內(nèi)容，其中前端包括頁面布局以及API接口調(diào)用，后端用PHP和MySQL搭建管理。詳細功能如下：
?
?
圖3-1 系統(tǒng)功能結(jié)構(gòu)圖
?
由以上功能結(jié)構(gòu)圖可以知道本次設計要實現(xiàn)的主要有小說首頁，書城排行，熱門推薦，個人中心，以及后端管理系統(tǒng)。詳細功能如下：
（1）小說首頁
該頁面主要實現(xiàn)小說搜索，男女生排行榜顯示的功能，點擊搜索框可跳轉(zhuǎn)到搜索頁面，搜索頁面還會有推薦熱門搜索，點擊搜索后也會有搜索歷史記錄。
（2）書城排行
該頁面主要是各種分類包括男生，女生以及出版類，還包括已收錄的書籍數(shù)量，點擊可以跳轉(zhuǎn)到詳情頁面，可以閱讀，可以加入書架。
（3）熱門推薦
此版塊主要是推薦一些熱門的小程序或者小游戲，可以在后臺進行管理。
（4）個人中心
此版塊包括我的書架，我的粉絲，我的客服等內(nèi)容，加入書架的書籍可以從此處進入查看和閱讀。
3.3 系統(tǒng)業(yè)務流程分析
在本次設計中，用戶可以通過掃碼進入小程序，進行書籍瀏覽，添加到書架以及從書架移除，也能看到各種分類，排行榜等，下面是系統(tǒng)流程圖：
?
圖3-2 系統(tǒng)流程圖
?
4?數(shù)據(jù)庫設計
數(shù)據(jù)庫選擇MySQL數(shù)據(jù)庫，它不僅簡單易用，支持查詢語言（SQL），而且性能較高，多個客戶機可以同時使用數(shù)據(jù)庫，此外具有很好地連接性和安全性，運行速度快等。最重要的一點是，它與此次設計所采用的的后端語言PHP具有很好地支持，可以很好地交互。
4.1?數(shù)據(jù)庫概念結(jié)構(gòu)設計
數(shù)據(jù)庫概念結(jié)構(gòu)設計的過程是通過對用戶需求進行綜合、歸納與抽象，形成一個獨立于具體DBMS的概念模型。概念結(jié)構(gòu)設計是使用E-R模型和視圖集成設計法進行設計的，E-R圖是描述概念模型的有效工具[19]，E-R圖由實體、屬性、聯(lián)系三個要素組成，例如本系統(tǒng)中用戶信息就是一個實體，它包含描述用戶的眾多屬性，聯(lián)系表示實體之間的關(guān)系，實體與實體之間的聯(lián)系可以分為三種：一對一、一對多、多對多。
在本次設計中，規(guī)劃了以下幾個實體信息，分別是用戶信息實體，書籍分類信息實體，基礎配置信息實體，熱門推薦實體，閱讀記錄實體。下面是詳細信息：
（1）用戶信息實體
?
?
圖4-1 用戶信息實體圖
?
（2）書籍分類信息實體
?
圖4-2 書籍分類信息實體圖
（3）基礎配置信息實體
?
?
圖4-3 基礎配置信息實體圖
?
（4）閱讀記錄實體
?
?
圖4-4 閱讀記錄實體圖
?
（5）熱門推薦實體
?
?
圖4-5 熱門推薦信息實體圖
?
下面是實體關(guān)系的E-R圖：
?
?
圖4-6 實體E-R圖
?
4.2 數(shù)據(jù)庫邏輯結(jié)構(gòu)設計
根據(jù)概念結(jié)構(gòu)設計中的E-R圖進行數(shù)據(jù)庫的規(guī)則轉(zhuǎn)換，將E-R圖實體和實體間的聯(lián)系轉(zhuǎn)換為關(guān)系模式，并確定關(guān)系模式中的屬性和碼。實體中的屬性與關(guān)系模式中的屬性相對應，實體中的碼與關(guān)系中的碼相對應[20]。本系統(tǒng)最后的數(shù)據(jù)模型以數(shù)據(jù)表的形式展現(xiàn)，具體說明了數(shù)據(jù)表中屬性名稱、主鍵、含義、約束條件，是否為空等信息，系統(tǒng)中主要的數(shù)據(jù)庫表設計詳細如下：
（1）用戶信息表
表4-1 ?用戶信息表
序號
字段
數(shù)據(jù)類型
長度
主鍵
說明
1
id
int
11
是
用戶id
2
open_id
varchar
60
否
用戶id
3
img
varchar
255
否
頭像
4
nickname
varchar
255
否
昵稱
（2）書籍分類信息表
表4-2 ?書籍分類信息表
序號
字段
數(shù)據(jù)類型
長度
主鍵
說明
1
id
int
11
是
書籍id
2
title
varchar
255
否
分類標題
3
img
varchar
255
否
分類圖片
4
url
varchar
255
否
跳轉(zhuǎn)鏈接
5
urlType
tinyint
1
否
跳轉(zhuǎn)類型
（3）基礎配置信息表
表4-3 ?基礎配置信息表
序號
字段
數(shù)據(jù)類型
長度
主鍵
說明
1
id
int
11
是
主鍵id
2
indexShowNum
int
11
否
首頁顯示個數(shù)
3
img
varchar
255
否
背景圖片
4
shareTitle
varchar
255
否
分享標題
5
userCenter
varchar
255
否
個人中心
（4）熱門推薦信息表
表4-4 ?熱門推薦信息表
序號
字段
數(shù)據(jù)類型
長度
主鍵
說明
1
id
int
11
是
主鍵id
2
title
varchar
255
否
名稱
3
img
varchar
255
否
圖片信息
4
msg
varchar
255
否
跳轉(zhuǎn)信息
5
type
tinyint
1
否
跳轉(zhuǎn)類型
6
hot
int
11
否
熱度值
（5）閱讀記錄表
表4-5 ?閱讀記錄表
序號
字段
數(shù)據(jù)類型
長度
主鍵
說明
1
id
int
11
是
主鍵id
2
uid
int
11
否
用戶id
3
readtime
intr
10
否
首次閱讀時間
4
Novel_name
varchar
255
否
小說名稱
5 系統(tǒng)實現(xiàn)
5.1 個人中心界面設計
?
?
圖5-1 個人中心界面
如上圖所示，個人中心頁面包含我的書架，推薦好友，我的粉絲以及客服等功能，下面是具體設計內(nèi)容。
5.1.1 登錄界面
用戶在首次使用時先要登錄，常見的小程序登錄方式有三種，分別是自有賬號登錄、使用第三方平臺賬號登錄、使用微信賬號登錄[21]，由于小程序中沒有cookie的機制，所以在使用前兩種方式時要確認要使用的API是否有依賴，還有小程序中也不支持HTML頁面，那些需要使用頁面重定向來進行登錄的第三方API就需要改造。這里我們就采用微信賬號登錄。
使用微信賬號登錄，是官方推薦的登錄方式，畢竟小程序是基于微信，這種登錄方式在安全性也比其他的要高（微信對數(shù)據(jù)做了數(shù)據(jù)簽名和加密）。下面是微信小程序登錄時序流程圖：
?
?
圖5-2 小程序登錄時序流程
?
由以上圖可以看出首先調(diào)用wx.login()獲取臨時登錄憑證code，并回傳到開發(fā)者服務器。然后調(diào)用auth.code2Session()接口，換取用戶唯一標識OpenID和會話密鑰session_key。之后開發(fā)者服務器可以根據(jù)用戶標識來生成自定義登錄態(tài)，用于后續(xù)業(yè)務邏輯中前后端交互時識別用戶身份[22]。
通過用戶登錄小程序接受微信授權(quán)來獲取用戶的基本信息。這個過程需要先調(diào)用微信的微信登錄wx.login()API接口來獲取用戶的臨時登陸憑證code碼，在小程序中code碼可以作為用戶本小程序中的唯一標識。然后再調(diào)用微信的獲取用戶信息的wx.getUserInfo()API接口來獲取用戶的基本信息，此時若用戶接受微信登陸時的授權(quán)請求，則會在wx.getUserInfo()API接口中返回用的基本信息，主要包括：用戶昵稱、用戶頭像、以及所用的語言等信息。此時在我的信息頁面就會顯示用戶的微信頭像和昵稱信息，否則打印出登錄失敗。
5.1.2 我的書架界面
?
?
圖5-3 書架界面
?
在書架界面設置上，在bookShelf.wxml中myContainer類中又有bookshelfContainer和operation兩個分類，它們共同構(gòu)成整個界面的框架顯示，其中bookshelfContainer用于存放要添加的書籍，operation里面是一些可以進行的操作，比如編輯，刪除等。當添加完書籍后，在點擊書籍封面時可跳轉(zhuǎn)到對應閱讀界面，此時會調(diào)用getbookInfo()方法從API接口請求數(shù)據(jù)，成功則返回對應數(shù)據(jù)。
當用戶首次登錄時后，書架是空的，會提示去書城瀏覽添加書籍，我的書架主要實現(xiàn)存放用戶想看的書籍，可以進行移除，增加，顯示是否有更新等功能
5.2 小說首頁界面設計
小說首頁頁面主要實現(xiàn)小說搜索，男女生熱門榜單以及排行等內(nèi)容。所有的頁面都在app.json文件中定義，若想把某個頁面設置為首頁，則把它放置到最前面即可。點擊搜索框可跳轉(zhuǎn)到搜索頁面，并且會提供熱門搜索詞，若之前有搜索過，會保留歷史搜索記錄，點擊歷史搜索記錄便會跳轉(zhuǎn)到相應書籍詳情頁面，同樣熱門搜索詞也提供多組可供選擇。榜單設計使用list數(shù)組來綁定，然后通過wx:for等渲染對數(shù)組列表進行遍歷循環(huán)。數(shù)據(jù)的獲取則在邏輯頁面通過調(diào)用wx.request()來對api接口進行請求，成功后用setData()方法將數(shù)據(jù)打印出來，頁面顯示如下圖所示：
?
?
圖5-4 首頁頁面
?
5.3 書籍分類頁面設計
5.3.1 書城頁面布局
書城頁面是本次設計中的主要內(nèi)容，它包括各種分類以及書籍詳情頁，以及各個分類索收錄的書籍數(shù)量，點擊每個分類可獲取詳細書籍，然后可選擇閱讀或加入書架。頁面如下圖所示：
?
?
圖5-5 書城分類頁面
這個頁面的設計中使用了小程序中scroll-view這個組件，它是用來設置一個可滾動視圖區(qū)域。使用豎向滾動時，需要給<scroll-view>一個固定高度，通過WXSS設置height。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)[23]。它有兩個主要屬性分別是scroll-x，scroll-y，用來設置是否允許橫向或者縱向滾動，屬于布爾類型，默認值為false，此處是縱向滾動，因此scroll-y要設置為true。在頁面布局上使用了三個view視圖容器，相當于三個div，用于三大分類，然后對于詳細的分類信息則通過在wxml里面綁定數(shù)據(jù)和列表渲染，然后在js邏輯頁面中通過wx.request()方法來請求api接口，請求成功則返回結(jié)果給前端頁面中顯示。
而對于點擊頁面跳轉(zhuǎn)時則使用navigator這個導航組件，即跳轉(zhuǎn)頁面鏈接，通過設置不同屬性如target、url、open-type等，可以在點擊跳轉(zhuǎn)時有不同效果。
5.3.2 閱讀頁面設計
閱讀頁面是一個閱讀小程序核心的頁面，所有書籍的閱讀都需要它來完成，進入閱讀界面后，點擊屏幕可以喚起菜單，即目錄，閱讀模式和字體大小等。其中閱讀模式又分為正常模式，夜間模式和護眼模式，也可以通過Aa+，Aa-調(diào)整字體大小[24]，點擊目錄即可獲取對應目錄。
?
?
圖5-6 閱讀界面
?
（1）閱讀界面
首先，整個閱讀界面依然使用scroll-view這個組件來進行縱向滾動以實現(xiàn)閱讀功能，直到一章內(nèi)容完結(jié)停止，章節(jié)末有兩個按鈕，分別為上一章和下一章，點擊即可跳轉(zhuǎn)到對應頁面。
（2）菜單欄
對于點擊屏幕中心喚起菜單欄，這里設置了一個范圍，即在屏幕哪個區(qū)域內(nèi)點擊屏幕可以喚起菜單欄，下面是部分源碼：
openMenu:function(t){
Var?a=this.data.clientWidth/2,
e=this.data.clientHeight/2,
o=t.detail.x,s=t.detail.y;
a-100<o&&o<a+100&&s<e+100&&
e-100<s&&this.setData({
showMenu:!this.data.showMenu});},
這里面有幾個參數(shù)說明一下，a代表屏幕寬度的一半，e代表屏幕高度的一半，o和t分別表示橫向縱向點擊屏幕可喚起菜單欄的區(qū)域。
（3）閱讀模式設計
在閱讀模式上分為正常模式以及夜間模式與護眼模式，各自屬性如下：
正常模式：background:?#cb1c36;?color:?#fff;?width:?150rpx;?line-height:?60rpx;?font-size:15px;
夜間模式：frontColor:?"#ffffff",?backgroundColor:?"#080C10"?readerCss.color?="#696969"?backgroundColor="#080C10"
護眼模式：frontColor:"#ffffff",backgroundColor:"#000000"readerCss.color="#333"
backgroundColor="#C7EDCC"
5.3.3 書籍詳情信息獲取
本次設計中書籍信息的獲取是通過對第三方api接口的請求來實現(xiàn)的。首先，在api.js中對第三方api接口進行封裝，設置返回格式，然后在前端頁面通過wx.request()方法對已經(jīng)封裝好的api接口發(fā)起請求，成功則使用success：function()回調(diào)函數(shù)返回所請求到的內(nèi)容顯示在頁面上。如果請求失敗，則執(zhí)行失敗函數(shù)fail()。在詳情頁面還有加入書籍，點擊閱讀，推薦書籍等功能。界面顯示如下：
?
?
圖5-7 詳情頁面
?
5.4 后臺管理設計
本次后臺采用微擎框架管理，用PHP+MySQL搭建一個本地服務器，在前文中提到，此次后臺搭建是使用phpStudy這個程序集成包，包含PHP、MySQL、Apache、PHPMyAdmin等必需的一些環(huán)境，首先下載安裝PHPstudy，我們下載安裝后界面如下圖所示：
?
?
圖5-8 phpstudy操作界面
?
打開后顯示如圖，點擊其他選項菜單可是打開配置文件進行配置，打開php.ini文件將以下幾行內(nèi)容取消注釋，
?
?
圖5-9 修改配置文件
?
之后打開站點管理，設置自己的站點域名等信息并保存生成配置文件。
?
?
圖5-10 站點管理
?
然后打開navicat--一套高性能數(shù)據(jù)庫管理及開發(fā)工具。它可以用于任何版本3.21或以上的MySQL數(shù)據(jù)庫服務器，并支持大部份MySQL最新版本的功能，包括觸發(fā)器、存儲過程、函數(shù)、事件、視圖、管理用戶等。在連接名里面輸入所要鏈接的數(shù)據(jù)庫名，填入密碼即可連接，如下圖所示：
?
?
圖5-11 Navicat連接數(shù)據(jù)庫
?
在左邊可以看到其中的表及其它信息，
?
?
圖5-12 連接成功界面
?
接下來是微擎的安裝，但是這個安裝過程比較繁瑣，不過官網(wǎng)有給出詳細的安裝教程，在官網(wǎng)下載后按照教程一步一步的安裝并設置一些相關(guān)參數(shù)后，再把對應的應用添加到微擎管理平臺上，最終搭建好了后臺管理服務，如下圖：
?
?
圖5-13 后臺管理界面
?
至此，整個設計算是接近尾聲，接下來就是進行系統(tǒng)測試，對還存在的問題進行調(diào)試解決。
6 系統(tǒng)功能測試
6.1 系統(tǒng)測試目的及原則
一般來說，為了讓軟件開發(fā)更有價值，需要針對軟件進行測試，以便在使用過程中具備穩(wěn)定性，并確保用戶獲得最佳使用體驗。在小程序使用過程中，為了確保其智能性和準確性，就有必要對軟件進行不斷的開發(fā)和測試。這樣做的目的除了能夠保證軟件的正確運行之外，還可以根據(jù)測試結(jié)果適當提升軟件質(zhì)量[25]，高質(zhì)量的閱讀體驗更具普遍性，能夠大范圍推廣，所以更需要在軟件開發(fā)時、軟件使用前就做好軟件的反復測試。這樣，在軟件的使用過程中可以盡量減少出現(xiàn)問題的機率。
一般來說，檢測在開發(fā)過程中是能夠避免細節(jié)失誤的，而一旦細節(jié)上出現(xiàn)任何失誤，檢測都能夠妥善處理，不至于引發(fā)致命性的錯誤，所以在軟件的結(jié)構(gòu)、軟件的數(shù)據(jù)、軟件的業(yè)務流程上都需要進行一系列的測試，反復校對后才可以確保軟件功能的正確運行。
6.2 系統(tǒng)測試
6.2.1 我的書架頁面測試
用戶在打開小程序后，首先進行授權(quán)登錄，然后就可以進入個人中心頁面進行瀏覽及管理。如下圖所示，分別是首次進入和點擊登錄后的界面。
?
?
圖6-1 登錄頁面測試
點擊我的書架后則可以查看書架中的書籍，若書架中還未加入書籍，則可移步至首頁或書城進行搜索或點擊瀏覽并加入書架，具體如下圖所示：
?
?
圖6-2 書架頁面測試
點擊加入書架后則會在調(diào)試框內(nèi)顯示如下信息，
?
?
圖6-3 請求數(shù)據(jù)成功
?
再去到書架則可以看到已經(jīng)添加成功，如圖所示
?
?
圖6-4 加入書架成功
?
6.2.2 書籍分類及書籍詳情頁面測試
書籍詳情頁面是否能夠運行成功決定著這款小程序是否最終可以發(fā)布，因此這一塊的測試尤為重要，測試內(nèi)容主要是頁面間的跳轉(zhuǎn)是否流暢，點擊相應的按鈕或者界面是否會進行相應的操作，以及數(shù)據(jù)的獲取和頁面的顯示是否正確，在進入首頁后可以看到搜索框以及男女生榜單如下圖所示：
?
?
圖6-5 首頁搜索頁面測試
?
點擊搜索框后可以正常跳轉(zhuǎn)到搜索頁面并且對應的熱搜詞以及歷史搜索記錄都可以正常顯示，而在測試的過程中當然也存在網(wǎng)絡不好則也會導致延時或者請求失敗，這是一個普遍存在的問題。
書城頁面以及點擊對應分類跳轉(zhuǎn)頁面顯示如下圖所示：
?
?
圖6-6書城頁面測試
?
當點擊對應的小說去進行閱讀時，在console框會返回請求成功的信息，如下：
?
?
圖6-7 獲取數(shù)據(jù)成功
?
而且在后臺數(shù)據(jù)庫中也會相應的顯示剛才閱讀的書籍信息：
?
?
圖6-8數(shù)據(jù)庫信息
?
6.2.3 后臺管理測試
本次設計中后臺使用微擎框架管理，在前面也介紹了微擎框架，微擎是一款免費開源的微信公眾號和微信小程序管理系統(tǒng)，如下圖所示，是微擎后臺界面：
?
?
圖6-9后臺管理界面測試
在后臺添加如下信息：
?
?
?
圖6-10 后臺添加任務
?
我們返回到小程序前端頁面可以看到如下圖所示：
??
?
圖6-11 小程序頁面
從中可以看出后臺有一些基礎配置以及相應的功能設置，配置對應的功能即可在小程序頁面顯示，還可以在后臺添加管理操作人員，給與權(quán)限方便管理。
至此測試已經(jīng)基本完成，在這過程中，整個設計的基本功能上都可以達到預期的目標，沒有出現(xiàn)很嚴重的錯誤及問題，前后端也能夠進行良好的交互。還有一點，因為是基于在線的小說閱讀，因此頁面跳轉(zhuǎn)或者數(shù)據(jù)獲取會隨著網(wǎng)絡延遲而延時，總體來說，是一次比較成功的設計。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
總 ?結(jié)
本文通過對閱讀小程序的開發(fā)，從零開始一步一步學習并實際操作，完整的走了一個流程。從剛開始的需求分析，到架構(gòu)搭建與設計，到編碼實現(xiàn)，數(shù)據(jù)庫設計，以及服務器搭建，這個過程雖然不是很順利，但終究還是完成了預期目標。
本次設計通過微信web開發(fā)者工具與phpstudy+微擎框架搭建了一個帶有后臺管理的電子閱讀器，在實現(xiàn)基本功能的前提下，增加了一些其他休閑體驗。
在設計的過程中還是有很多地方去更加深入學習，比如在前端框架的選擇，以及后臺搭建語言的選擇，現(xiàn)在各種技術(shù)發(fā)展的很快，只掌握一種很顯然還不夠。還有對于數(shù)據(jù)庫的設計上尤顯生疏，對于概念結(jié)構(gòu)設計和邏輯結(jié)構(gòu)設計的掌握也略欠缺。最主要的一點是本次設計沒有實現(xiàn)在真機上使用，只是停留在模擬器上，真實的測試也得不到驗證。
作為當前生活中非?；馃岬奈⑿判〕绦颍舜握诞厴I(yè)設計，選擇這樣一個課題來作為自己這四年的大學生活的一個結(jié)束，還是很有成就感的，因為自己比較喜歡看小說，而且專業(yè)又是計算機相關(guān)，合適的時間，合適的環(huán)境，做一件合適的事。不過又說回來，這是一個好的開端，以后的學習生涯還很長，繼續(xù)努力。
在這次完成畢業(yè)設計和論文的過程中，遇到了很多困難，但克服困難的過程也是一次自我提高的機會，實踐使我對理論知識有了更深的理解，也提高了解決問題的能力。
參考文獻：
[1] 張小龍.微信小程序入口在哪?有什么用?[J].計算機與網(wǎng)絡,2017,43(4):50-50.
[2] 移動互聯(lián)時代有聲讀物的發(fā)展現(xiàn)狀、問題與對策——基于有聲讀物用戶的實證調(diào)查[D]. 河南大學, 2016.
[3] 劉紅衛(wèi).微信小程序應用探析[J].無線互聯(lián)科技,2016(23):11-12,40.
[4] 張福平.碎片化閱讀背景下全民閱讀的推進——電子閱讀與紙質(zhì)閱讀的對比分析及融合探討[J].鄭州輕工業(yè)學院學報(社會科學版),2016,17(1):43-51.
[5] 馬洪波.移動互聯(lián)網(wǎng)時代讀者閱讀習慣分析[J].中國報業(yè),2019(07):72-73.
[6] 王松基于用戶需求的高校圖書館微信小程序移動服務設計研究[D].東北師范大學,2018.
[7] 毛鑫渝.基于使用與滿足理論的小程序特征分析[J].新聞研究導刊,2017,8(22):89+102.
[8]?程子珍.基于微信小程序的網(wǎng)上購物系統(tǒng)的設計與實現(xiàn)[D].首都經(jīng)濟貿(mào)易大學,2018.
[9] 羅錦莉.微信小程序正式上線[J].金融科技時代,2017(2):86-86.
[10] 張茂林,白海濤,王鉑智.基于微信小程序的駕校預約系統(tǒng)[J].電子世界,2018(9):161-161.
[11] 帥志軍,陳園園.基于“微信小程序”調(diào)查測試類程序的研究與開發(fā)[J].電腦迷,2018,No.100(7):155.
[12] 陳世宇,鄧秋雪,陳正銘,等.試析微信小程序前端界面與網(wǎng)站前端界面實現(xiàn)技術(shù)的異同[J].電腦編程技巧與維護,2017(20):5-8.
[13] 張志強,鄭濤,王偉鈞,等.一種基于網(wǎng)絡請求的數(shù)據(jù)訪問接口設計與實現(xiàn)[J].成都大學學報(自然科學版),2018,v.37；No.126(2):60-64.
[14] 劉慶.基于WeChat和WebServer的考試信息查詢系統(tǒng)的設計與實現(xiàn)[J].電腦知識與技術(shù),2016,12(19):38-39.
[15] 程子珍.基于微信小程序的網(wǎng)上購物系統(tǒng)的設計與實現(xiàn)[D].首都經(jīng)濟貿(mào)易大學,2018.
[16] 王亮,鄒志鵬,姜虹.基于微信小程序的醫(yī)患交流平臺的設計與研究[J].中國數(shù)字醫(yī)學,2017,12(11):71-73+99.
[17] 羅啟強.基于PHP+MySQL的高校教務管理系統(tǒng)的設計與實現(xiàn)[D].吉林大學,2016.
[18] 面向Web2.0的web應用前端開發(fā)框架的設計與實現(xiàn)[D].北京郵電大學,2014.
[19] 孫卓.關(guān)于E-R圖向關(guān)系數(shù)據(jù)模型轉(zhuǎn)換的探討[J].電大理工,2011(04):23-24+27
[20] 李威.基于E-R圖的關(guān)系數(shù)據(jù)庫關(guān)鍵字查詢[D].山東建筑大學,2012.
[21] 微信公眾賬號服務平臺微服務的設計與研究[J].通訊世界,2017(6):84-85.
[22] 黃富就.基于微信的高校圖書管理系統(tǒng)的設計與實現(xiàn)[D].華南理工大學,2015.
[23] 龍政.基于微信小程序的圖書推薦前臺設計與實現(xiàn)[J].內(nèi)蒙古科技與經(jīng)濟,2018(08):71-73.
[24] 王玉洋.基于微信小程序的移動學習平臺環(huán)境構(gòu)建與系統(tǒng)設計開發(fā)[D].南京大學,2018.
[25] 郭金金.基于測試設計標準化的軟件質(zhì)量保證[D].西南大學,2011.
?
致 ?謝
時間如梭，四年大學生活轉(zhuǎn)眼便已到結(jié)束之時，在此次畢業(yè)設計中，同學們以及老師都給與我以最大限度的幫助。首先感謝老師的悉心指導，從開始選題，到中間設計過程中很多問題的指導，以及最后論文的撰寫都孜孜不倦的授予指導，最重要的是教授給我實踐經(jīng)驗和做事的方法。還有一起的同學也提供了莫大幫助，由于本人在前端頁面設計過程中的一些疏忽而導致出現(xiàn)bug，進而程序運行出錯，是他們幫我調(diào)試代碼，找到問題所在，成功運行。
其次，感謝學校的培養(yǎng)，在這四年中是您提供了良好的學習環(huán)境以及方便的學習平臺，似駕一帆船暢游在知識的海洋中，讓我有了更高的知識面，更寬廣的視野，為以后的學習生活打下更堅實的基礎。
最后要感謝父母，是你們一直以來默默付出，不僅僅是在經(jīng)濟上的支持，更重要的是在精神方面培養(yǎng)，讓我能夠健康成長，走向更遠的未來！
從中也悟出一個道理，不管一個人的力量有多強大，終究會遇到一些難題，有句話說的好，人多力量大，幾乎所有成功的背后都會有一大群支持你的人，給你幫助，給你力量，人生路漫漫，心齊比天高！
?
