基于jQuery Mobile的移動(dòng)電子畢業(yè)紀(jì)念冊的設(shè)計(jì)與實(shí)現(xiàn)

趙蒙婷++楊根福++雷文杰

摘 要：隨著移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展，越來越多的人在生活中使用APP，隨處可以見到人們在使用移動(dòng)設(shè)備來學(xué)習(xí)、購物。因此，基于智能手機(jī)的電子紀(jì)念冊設(shè)計(jì)與開發(fā)應(yīng)運(yùn)而生，電子畢業(yè)紀(jì)念冊包含了大量的視頻和音頻，很好解決在使用紙介質(zhì)時(shí)難永久保存、易破損、信息不豐富等缺點(diǎn)。本設(shè)計(jì)使用jQuery Mobile、HTML5與PHP 快速開發(fā)基于微信公眾平臺(tái)的Web App的方案，在多個(gè)瀏覽器上測試之后，界面都能正常運(yùn)行顯示。從測試效果來看，運(yùn)行流暢、界面簡潔、數(shù)據(jù)傳輸穩(wěn)定，能很好地滿足應(yīng)屆畢業(yè)生對于該Web App的需求。

關(guān)鍵詞：jQuery Mobile；移動(dòng)電子畢業(yè)紀(jì)念冊；設(shè)計(jì)

中圖分類號：TP316 文獻(xiàn)標(biāo)志碼：A 文章編號：2095-2945（2017）27-0006-02

1 背景

隨著移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展，越來越多的人在生活中使用APP。根據(jù)預(yù)測，移動(dòng)網(wǎng)站的流量在未來幾年將會(huì)超越桌面網(wǎng)站的流量。即使是現(xiàn)在，隨處可以見到人們在使用移動(dòng)設(shè)備來學(xué)習(xí)、購物、比價(jià)，以及在等待約會(huì)時(shí)作為消遣。移動(dòng)設(shè)備如此方便，可以隨意帶到任何地方。因此，基于智能手機(jī)的電子紀(jì)念冊設(shè)計(jì)與開發(fā)運(yùn)用，恰如其分地能解決在使用紙介質(zhì)時(shí)難永久保存、易破損、信息不豐富等缺點(diǎn)，為應(yīng)屆畢業(yè)生提供一個(gè)良好的紀(jì)念手段。

目前，在市場上流通的電子畢業(yè)紀(jì)念冊并不多，大多都是以網(wǎng)站的形式存在著的。但一個(gè)美觀、實(shí)用，被大家熟識(shí)的畢業(yè)紀(jì)念冊網(wǎng)站并沒有開始流行傳播。此外，現(xiàn)在的APP大多都是基于ios及Android的Native App，它存在著開發(fā)周期長、維護(hù)成本高、跨平臺(tái)麻煩的缺點(diǎn)。與其相比，Web App可以跨平臺(tái)開發(fā)，更新維護(hù)方便。而且，當(dāng)下流行的HTML5和JQM也為Web App的開發(fā)提供了許多方便。

此外，微信公眾平臺(tái)作為目前最火爆和最有影響力的信息傳播平臺(tái)，它擁有的用戶量是非常龐大的。微信公眾平臺(tái)是由騰訊公司開發(fā)的微信產(chǎn)品中的一個(gè)重要功能。利用微信公眾平臺(tái)，我們可以進(jìn)行一個(gè)簡單的宣傳，挖掘出用戶的潛在價(jià)值，更快更好的完善我們的項(xiàng)目。同時(shí)，作為應(yīng)屆畢業(yè)生們，他們對于微信的使用也是非常頻繁的。因此，在該平臺(tái)上建立公眾平臺(tái)能夠有效地吸引用戶，能在同學(xué)間流行傳播。

2 開發(fā)工具介紹

2.1 HTML5

HTML5是最新的HTML標(biāo)準(zhǔn)，它是由WHATWG（Web Hypertext Application Technology Group）組織和W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）共同合作開發(fā)的。相對于其他版本的HTML，它在架構(gòu)和網(wǎng)頁排版美化方面的標(biāo)記做了很大的改變，而且增強(qiáng)了互動(dòng)性，有效的減少了開發(fā)成本。目前支持HTML5的瀏覽器包括Firefox（火狐瀏覽器）、IE9及更高的版本、Chrome（谷歌瀏覽器）等?？梢哉fHTML5已然成了現(xiàn)在最火的超文本標(biāo)記語言。

HTML5是HTML技術(shù)發(fā)展的未來，它提供了許多可以優(yōu)化移動(dòng)應(yīng)用開發(fā)的手段，比如我們可以使用

代碼中的"media"就是指特定的媒體類型，這一句是整個(gè)響應(yīng)式網(wǎng)站實(shí)現(xiàn)的關(guān)鍵。然后在CSS文件中添加以下代碼：

@media screen and （min-width：1200px）{}

@media screen and （min-width：992px）{}

@media screen and （min-width：768px）{}

@media screen and （max-width：320px）{}

代碼中的min-width、max-width就是針對不同的終端設(shè)備面設(shè)定的斷點(diǎn)。在中括號中添加具體響應(yīng)式代碼即可進(jìn)行響應(yīng)式效果的調(diào)試編寫。

3.2 模擬Native App的導(dǎo)航效果

為了在手機(jī)屏幕有限的情況下可以實(shí)現(xiàn)更多的功能效果，我們使用了jQuery Mobile中的navbar控件。其可以實(shí)現(xiàn)與Native App類似的頁眉和頁尾的導(dǎo)航效果。首先使用標(biāo)記加上已有圖標(biāo)或者替換成其他圖標(biāo)，可以將其渲染為按鈕效果。之后使用屬性data-position="fixed"即可將導(dǎo)航欄固定。除外，文字的按鈕效果自帶jQuery Mobile的原效果，我們可以采用data-role="none"來清除原效果，然后加上我們所預(yù)期的設(shè)置。

3.3 客戶端本地存儲(chǔ)數(shù)據(jù)

Web Storage是一種將少量數(shù)據(jù)存儲(chǔ)在客戶端磁盤的技術(shù)。只要支持Web Storage API規(guī)格的瀏覽器，網(wǎng)頁設(shè)計(jì)者都能使用JavaScript來操作它。與Cookie相比，它可以存儲(chǔ)更多的數(shù)據(jù)，而Cookie只允許每個(gè)網(wǎng)站存儲(chǔ)4KB；此外Web Storage純粹在客戶端中運(yùn)行，安全性比較高。

Web Storage提供兩種方式將數(shù)據(jù)保存在客戶端：一種是sessionStorage（會(huì)話存儲(chǔ)）；另一種是localStorage（本地存儲(chǔ)）。兩者的主要差異在于生命周期和有效范圍。

3.4 加快網(wǎng)頁響應(yīng)速度

當(dāng)HTML 頁面中執(zhí)行JavaScript 時(shí)，都是單線程執(zhí)行的，這時(shí)頁面的狀態(tài)是不可響應(yīng)的，即頁面的UI會(huì)被鎖定，若執(zhí)行需要的時(shí)間過長，頁面甚至?xí)霈F(xiàn)假死狀態(tài)。給用戶使用帶來不便。

Web Workers 是 HTML5 提供的一個(gè)javascript多線程解決方案，我們可以將一些大計(jì)算量的代碼交由web Worker運(yùn)行而不凍結(jié)用戶界面。這樣既不會(huì)影響頁面的性能，又能讓用戶可以繼續(xù)做想做的事。

3.5 添加音頻、視頻

以前我們在網(wǎng)頁中播放影音時(shí)，需要使用ActiveX或Plug-in的方式來完成。但現(xiàn)在，HTML5提供了一個(gè)新的標(biāo)簽

3.6 音視頻留言的實(shí)現(xiàn)

我們采用的是脈沖代碼調(diào)制編碼，即PCM編碼。PCM通過抽樣、量化、編碼三個(gè)步驟將連續(xù)變化的模擬信號轉(zhuǎn)換為數(shù)字編碼。主要就是把一個(gè)時(shí)間連續(xù)，取值連續(xù)的模擬信號變換成時(shí)間離散，取值離散的數(shù)字信號后在信道中傳輸。脈沖編碼調(diào)制就是對模擬信號先抽樣，再對樣值幅度量化，編碼的過程。通過PCM低通濾波器實(shí)現(xiàn)譯碼。用戶在其中一個(gè)終端輸入了語音信息，編碼后，PHP通過mysql_query將此信號寫入數(shù)據(jù)庫，再將此信號解碼后輸送到另一個(gè)終端，實(shí)現(xiàn)音視頻留言。

4 測試結(jié)果

這個(gè)電子畢業(yè)紀(jì)念冊的系統(tǒng)包含了大量的視頻和音頻，信息頁面用于信息的傳遞和接收。在多個(gè)瀏覽器上測試之后，界面都能正常運(yùn)行顯示。從測試效果來看，運(yùn)行流暢、界面簡潔、數(shù)據(jù)傳輸穩(wěn)定，能很好地滿足應(yīng)屆畢業(yè)生對于該Web App的需求。下圖顯示該電子畢業(yè)紀(jì)念冊在安卓手機(jī)瀏覽器運(yùn)行結(jié)果。

5 結(jié)束語

本文使用jQuery Mobile、HTML5與PHP 快速開發(fā)基于微信公眾平臺(tái)的Web App的方案，其中響應(yīng)式Web設(shè)計(jì)、UI、模擬Native App 的各種效果和操作主要由jQuery Mobile 框架實(shí)現(xiàn)，網(wǎng)頁存儲(chǔ)使用Web Storage，客戶端存儲(chǔ)使用session。隨著HTML5、jQuery Mobile以及PHP 技術(shù)的不斷發(fā)展，越來越多的瀏覽器會(huì)支持它。基于HTML5、jQuery Mobile和PHP的Web App也會(huì)隨著這股熱潮越來越多。

參考文獻(xiàn)：

[1]陳婉凌.HTML5+CSS3+jQuery Mobile輕松構(gòu)造APP與移動(dòng)網(wǎng)站

[M].北京：清華大學(xué)出版社，2015.

[2]明日科技.PHP從入門到精通[M].北京：清華大學(xué)出版社，2014.

[3]Phil Dutson. jQuery Mobile入門經(jīng)典[M].鐘迅科，譯.北京：人民郵電出版社，2014.

[4]席新亮.微信公眾平臺(tái)JSSDK開發(fā)實(shí)戰(zhàn)：公眾號與HTML5混合模式揭秘[M].北京：電子工業(yè)出版社，2015.

[5]Jon Duckett，杜偉，柴曉偉.JavaScript and jQuery：Interactive Front-End Web Development[M].涂曙光，譯.清華大學(xué)出版社，2015.

[6]陳光軍.數(shù)字音頻技術(shù)及應(yīng)用[M].北京：北京郵電大學(xué)出版社，2011.

[7]李海峰.基于HTML5+jQuery Mobile的移動(dòng)學(xué)習(xí)平臺(tái)Web App研究與實(shí)現(xiàn)[J].信息通信，2014（05）.

[8]曾昭江，湯懷.HTML5與jQuery Mobile在校園移動(dòng)化學(xué)習(xí)平臺(tái)上的應(yīng)用研究[J].電腦知識(shí)與技術(shù)，2015（08）.