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

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

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

中圖分類號：TP316 文獻標志碼：A 文章編號：2095-2945（2017）27-0006-02

1 背景

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

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

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

2 開發(fā)工具介紹

2.1 HTML5

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

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

代碼中的"media"就是指特定的媒體類型，這一句是整個響應(yīng)式網(wǎng)站實現(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è)定的斷點。在中括號中添加具體響應(yīng)式代碼即可進行響應(yīng)式效果的調(diào)試編寫。

3.2 模擬Native App的導航效果

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

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

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

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

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

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

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

3.5 添加音頻、視頻

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

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

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

4 測試結(jié)果

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

5 結(jié)束語

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

參考文獻：

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

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

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

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

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

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

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

[7]李海峰.基于HTML5+jQuery Mobile的移動學習平臺Web App研究與實現(xiàn)[J].信息通信，2014（05）.

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