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

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

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

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

1 背景

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

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

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

2 開發(fā)工具介紹

2.1 HTML5

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

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

代碼中的"media"就是指特定的媒體類型，這一句是整個響應式網站實現的關鍵。然后在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就是針對不同的終端設備面設定的斷點。在中括號中添加具體響應式代碼即可進行響應式效果的調試編寫。

3.2 模擬Native App的導航效果

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

3.3 客戶端本地存儲數據

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

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

3.4 加快網頁響應速度

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

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

3.5 添加音頻、視頻

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

3.6 音視頻留言的實現

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

4 測試結果

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

5 結束語

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

參考文獻：

[1]陳婉凌.HTML5+CSS3+jQuery Mobile輕松構造APP與移動網站

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

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

[3]Phil Dutson. jQuery Mobile入門經典[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]陳光軍.數字音頻技術及應用[M].北京：北京郵電大學出版社，2011.

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

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