基于jQuery Mobile的移動電子畢業(yè)紀念冊的設計與實現(xiàn)

2017-09-19 12:37:31趙蒙婷楊根福雷文杰

科技創(chuàng)新與應用 2017年27期

關鍵詞：設計

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

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

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

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

1 背景

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

目前，在市場上流通的電子畢業(yè)紀念冊并不多，大多都是以網站的形式存在著的。但一個美觀、實用，被大家熟識的畢業(yè)紀念冊網站并沒有開始流行傳播。此外，現(xiàn)在的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已然成了現(xiàn)在最火的超文本標記語言。

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

、

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

3.2 模擬Native App的導航效果

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

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

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