方鈺敏，徐海蛟，符水梅，葉夢(mèng)嘉，何佳蕾

摘要：隨著移動(dòng)通信技術(shù)的不斷發(fā)展以及移動(dòng)智能終端的日益便捷化，移動(dòng)閱讀成為人們獲取信息資源的日?；顒?dòng)。為了還原用戶閱讀的近乎真實(shí)書籍的閱讀體驗(yàn)，該文以Vue.js技術(shù)及Epub.js閱讀器引擎為基礎(chǔ)，結(jié)合HTML5技術(shù)、LocalStorage及LocalForage的離線緩存機(jī)制等技術(shù)開發(fā)了一款基于Vue.js技術(shù)的移動(dòng)閱讀WebApp。通過Epub.js框架搭建出WebApp功能模塊，驗(yàn)證了該設(shè)計(jì)的可行性和實(shí)用性。

關(guān)鍵詞： 移動(dòng)閱讀;Vue.js;Epub.js;離線緩存機(jī)制;Web App

中圖分類號(hào)：TP399? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）20-0083-03

Be Based on Epub.js Design of Mobile Reading Webapp Based on Framework

FANG Yu-min， XU Hai-jiao， FU Shui-mei，YE Meng-jia， HE Jia-lei

（School of Computer， Guangdong University of Education， Guangzhou 510303， China）

Abstract ：With the continuous development of mobile communication technology and the increasing convenience of mobile intelligent terminals， mobile reading has become a daily activity for people to obtain information resources. In order to restore the user's reading experience of almost real books， this paper develops a mobile reading web app based on vue.js technology and epub.js reader engine， combined with HTML5 technology， LocalStorage and offline caching mechanism of LocalForage. Through the framework of epub.js， the web app function module is built， which verifies the feasibility and practicability of the design.

Key words： mobile reading; Vue.js; Epub.js; offline caching mechanism; Web App

1引言

1.1研究背景

隨著技術(shù)的提升，移動(dòng)互聯(lián)網(wǎng)的閱讀類應(yīng)用具有更高的便捷性。經(jīng)調(diào)查，移動(dòng)閱讀類應(yīng)用在移動(dòng)應(yīng)用市場(chǎng)中占有巨大份額。

現(xiàn)今，移動(dòng)閱讀的方式有兩種。第一種是使用專業(yè)的電子閱讀器來閱讀書籍。不過電子閱讀器的價(jià)格昂貴，且閱讀功能簡(jiǎn)單。第二種是在移動(dòng)智能終端上下載閱讀類app來實(shí)現(xiàn)日常閱讀活動(dòng)。它能夠開拓出巨額市場(chǎng)，但同時(shí)存在不便，于是本文研究的焦點(diǎn)關(guān)注于如何增強(qiáng)閱讀功能，提高App使用質(zhì)量[1]。

我們將以Vue.js技術(shù)為基礎(chǔ)的HTML5開發(fā)移動(dòng)閱讀Web App，同時(shí)以Epub.js閱讀器引擎模擬出電子閱讀器，增強(qiáng)視覺效果及交互細(xì)節(jié)。第一，根據(jù)我們的預(yù)測(cè)，下一輪課程教學(xué)改革中，信息技術(shù)教育的目標(biāo)將會(huì)由現(xiàn)今的以信息技術(shù)操作教育為主體的信息素養(yǎng)、媒體素養(yǎng)、數(shù)字化素養(yǎng)教育轉(zhuǎn)向以信息文化、媒體文化、數(shù)字化文化識(shí)讀與創(chuàng)造為基礎(chǔ)的信息文化素養(yǎng)、媒體文化素養(yǎng)、數(shù)字化文化素養(yǎng)教育。

1.2國(guó)內(nèi)研究現(xiàn)狀

在國(guó)內(nèi)，對(duì)移動(dòng)閱讀App在界面設(shè)計(jì)優(yōu)化及用戶使用質(zhì)量上的合理性方面的研究并不多，能夠參考學(xué)習(xí)的理論資料也是寥寥無幾，因此非常需要我們來分析研究并創(chuàng)新移動(dòng)閱讀應(yīng)用程序的設(shè)計(jì)與實(shí)現(xiàn)。

國(guó)內(nèi)學(xué)者徐延章從多方面研究移動(dòng)閱讀應(yīng)用程序在用戶使用上的體驗(yàn)，介紹了眾多功能。張曼舒借鑒了傳統(tǒng)紙質(zhì)書的特征，結(jié)合移動(dòng)互聯(lián)網(wǎng)高新技術(shù)，嘗試閱讀界面設(shè)計(jì)進(jìn)行創(chuàng)新[2]。從界面設(shè)計(jì)和操作感受上看，國(guó)內(nèi)的移動(dòng)閱讀應(yīng)用在使用質(zhì)量上相似[3]。

1.3國(guó)外研究現(xiàn)狀

國(guó)外學(xué)者Liu和Chan在多個(gè)角度比較分析了用戶對(duì)各種移動(dòng)閱讀應(yīng)用程序的滿意度并對(duì)移動(dòng)閱讀應(yīng)用程序進(jìn)行了深入研究和對(duì)用戶行為和互聯(lián)網(wǎng)流量進(jìn)行分析。而Maynard得出了移動(dòng)閱讀與紙質(zhì)化閱讀之間的關(guān)聯(lián)性。Leopoldina Fortunati等國(guó)外出色學(xué)者則發(fā)現(xiàn)了移動(dòng)閱讀與紙質(zhì)化閱讀之間的互補(bǔ)性[4]。

2研究前期

2.1需求分析

通過對(duì)移動(dòng)閱讀WebApp的網(wǎng)頁布局進(jìn)行了深入研究，該系統(tǒng)的主要功能需求如下：

1） 書籍列表的呈現(xiàn)與書籍資源的獲取。在用戶進(jìn)入系統(tǒng)后，將推薦一些受用戶歡迎度比較高的書籍。書城首頁會(huì)將書籍按分類進(jìn)行呈現(xiàn)，以便用戶精確瀏覽書籍。并且系統(tǒng)會(huì)提供隨機(jī)推薦的功能，將會(huì)推薦一本書給有需要的用戶;

2） 用戶個(gè)人書架的功能相關(guān)設(shè)置。設(shè)置私密閱讀以及將書籍提前離線下載到本地。另外，用戶能夠?qū)苌系臅M(jìn)行整理、分組，從而實(shí)現(xiàn)簡(jiǎn)潔個(gè)性的書架。對(duì)于不需要的書籍，可以一鍵移出書架;

3） 書籍的詳情概況。當(dāng)用戶點(diǎn)進(jìn)一本書時(shí)，將進(jìn)入這本書的詳情概況頁面，該頁面介紹了本書的書名、作者等內(nèi)容，以及內(nèi)容的試讀;