【摘 要】隨著下一代移動(dòng)通信技術(shù)洶涌而來，智能終端設(shè)備得到普及，基于智能終端應(yīng)用開發(fā)的需求也越來越大。在校園生活中，移動(dòng)互聯(lián)網(wǎng)模式的發(fā)展趨勢(shì)，為校園師生的學(xué)習(xí)、生活帶來極大的便利。本文提供一種全新的web應(yīng)用體驗(yàn)方式，為師生創(chuàng)建校園生活軌跡內(nèi)容并允許他們獲取當(dāng)前用戶所在地理位置的坐標(biāo)信息。同時(shí)，用戶還可以瀏覽生活軌跡列表，如果記錄的生活軌跡內(nèi)容保存著當(dāng)前地理位置信息，瀏覽時(shí)便以地圖的方式展示，否則以文本形式顯示。

【關(guān)鍵詞】HTML5 校園生活軌跡 智能終端 Google maps

Abstract： With the next generation of mobile communications and other new technologies coming， The Intelligent terminal gain popularity. Based on the smart client application development is also growing demand， In campus life， the development trend of mobile Internet model， bring great convenience for teachers and students on learning and life. This paper provides a coordinate information of the web application of new experience for teachers and students to create campus life content and allow them to get the current user’s location. At the same time， the user can browse the life track list. if the life track record with the current location information， it is browsing and display in the way of map. Other wise， it showed in the form of text.

Keywords：HTML5 campus life Trajectory intelligent terminal Google maps

一、移動(dòng)應(yīng)用終端發(fā)展現(xiàn)狀及趨勢(shì)

隨著智能手機(jī)的價(jià)格越來越便宜，以及3G和4G網(wǎng)絡(luò)的發(fā)展，移動(dòng)手機(jī)用戶正在快速轉(zhuǎn)向智能手機(jī)。市場(chǎng)研究和咨詢公司Gartner發(fā)布最新調(diào)查報(bào)告，中國(guó)手機(jī)用戶總數(shù)在2013年首次超過10億。Gartner分析師預(yù)測(cè)，2014年，中國(guó)市場(chǎng)上將銷售4.435億部手機(jī)，而使用中的手機(jī)將超過10.75億部。eMarketer預(yù)測(cè)，智能手機(jī)采用率到2017年將一直保持快速增長(zhǎng)步調(diào)。將近2/5的移動(dòng)用戶——將近1/4的全球人口——在2014年將至少每月都會(huì)使用智能手機(jī)。

對(duì)于當(dāng)代大學(xué)生來說，手機(jī)的高度普及和功能的不斷增多，手機(jī)的開放性、隨身性，使得很多學(xué)生利用手機(jī)等智能移動(dòng)設(shè)備進(jìn)行學(xué)習(xí)交流，目前大多數(shù)的智能設(shè)備都具有網(wǎng)頁瀏覽、查詢資訊、即時(shí)通訊、資料共享甚至視頻音樂觀看下載等功能，移動(dòng)學(xué)習(xí)也將成為智能移動(dòng)終端的重要應(yīng)用之一。如何把傳統(tǒng)的學(xué)習(xí)生活方式轉(zhuǎn)移到智能移動(dòng)終端上來，給師生提供一個(gè)實(shí)時(shí)便捷的校園生活平臺(tái)，實(shí)現(xiàn)個(gè)性化的、實(shí)時(shí)性的生活應(yīng)用服務(wù)，具有很廣泛的實(shí)際意義。

二、HTML5移動(dòng)應(yīng)用技術(shù)

HTML5是超文本標(biāo)記語言的下一個(gè)修訂版 ，超文本標(biāo)記語言是用來描述網(wǎng)頁外觀和內(nèi)容的標(biāo)準(zhǔn)編程語言。HTML5 是近十年來 Web 標(biāo)準(zhǔn)發(fā)展巨大的飛躍。與以前的版本不同，HTML5 包含了更強(qiáng)大的用于交互、多媒體和本地化等各方面的標(biāo)簽以及應(yīng)用程序接口，HTML5 將把 Web 帶入一個(gè)視頻，音頻，圖像，動(dòng)畫，以及電腦的交互都被標(biāo)準(zhǔn)化的全新應(yīng)用平臺(tái)。HTML5 具有眾多優(yōu)勢(shì)，更多的描述性標(biāo)簽，良好的多媒體支持，更強(qiáng)大的 Web 應(yīng)用，跨文檔消息通信，Web Sockets，客戶端存儲(chǔ)，更加精美的界面，更強(qiáng)大的表單，提升可訪問性，先進(jìn)的選擇器等等?；?HTML5 的客戶端能夠?yàn)橛脩魩砀玫挠脩趔w驗(yàn)與更豐富的功能。因此基于 HTML5 的校園生活軌跡具有實(shí)際的應(yīng)用價(jià)值。

HTML5 是當(dāng)今互聯(lián)網(wǎng)最熱門的話題之一。其發(fā)展速度相當(dāng)迅速，各大瀏覽器開發(fā)商如微軟、Opera、谷歌、Apple、火狐等的最新版本瀏覽器都紛紛支持 HTML5標(biāo)準(zhǔn)規(guī)范。在桌面端 Web 技術(shù)領(lǐng)域，原來擁有絕對(duì)統(tǒng)治地位的 Adobe 公司的 Flash 插件現(xiàn)在也開始受到 HTML5 的威脅。HTML5 強(qiáng)大的特性在移動(dòng) Web 應(yīng)用當(dāng)中得到了非常好的發(fā)揮。

三、校園生活客戶端的設(shè)計(jì)與實(shí)現(xiàn)

3.1功能模塊設(shè)計(jì)及關(guān)鍵技術(shù)

本文主要功能就是給用戶創(chuàng)建校園生活軌跡內(nèi)容，并允許用戶獲取當(dāng)前所在的位置，提供實(shí)時(shí)定位功能，同時(shí)用戶還可以瀏覽自己的生活軌跡列表，也能下載及查詢學(xué)校的路況等相關(guān)信息。功能模塊圖1如下：

本次設(shè)計(jì)采用Sencha Touch的MVC開發(fā)模式，并導(dǎo)入Sencha Touch類庫和樣式文件，同時(shí)在app.js中創(chuàng)建一個(gè)application 對(duì)象作為整個(gè)客戶端的根節(jié)點(diǎn)對(duì)象。關(guān)鍵技術(shù)如下：

（1）創(chuàng)建首頁

創(chuàng)建一個(gè)HTML5 標(biāo)準(zhǔn)文檔格式HTML 文件，并將JavaScrip 類庫、自定義JavaScript

文件、CSS到文件，并命名為index.html。

（2）創(chuàng)建入口函數(shù)app.js

本論文以app.js作為整個(gè)Sencha Touch MVC 應(yīng)用程序的入口，屬于Web App的核心功能JS 文件，如代碼3-1所示。該文件內(nèi)只有一個(gè)創(chuàng)建Application 對(duì)象的方法，其中參數(shù)name 設(shè)置“app”作為命名空間名稱，同時(shí)launch參數(shù)設(shè)置應(yīng)用程序的初始化函數(shù)，這個(gè)函數(shù)將是整個(gè)應(yīng)用程序的入口函數(shù)。

Ext.regApplication（{

/* 定義應(yīng)用程序名稱，并作為命名空間 */

name ： 'app'，

/* 默認(rèn)目標(biāo)名稱 */

defaultTarget ： 'viewport'，

/* 初始化函數(shù) */

launch ： function（）{

this.viewport = new app.views.viewport（）；

}

}）；

（3）主視圖viewport

從代碼3-1中可以看到，在launch 初始化函數(shù)內(nèi)定義一個(gè)viewport 變量，并將變量指向繼承Ext.Panel 的自定義組件對(duì)象實(shí)例。app.views.viewport 是由Sencha Touch 定義的命名空間變量格式，同時(shí)也是所有視圖組件的父級(jí)對(duì)象，任何子視圖以及其他組件對(duì)象都定義在其屬性items 內(nèi)。由于使用Ext.Extend 方法繼承Panel 組件的方式創(chuàng)建一個(gè)新對(duì)象，因此app.views.viewport只是一個(gè)對(duì)象，而非對(duì)象實(shí)例。

3.2 手機(jī)客戶端的設(shè)計(jì)實(shí)現(xiàn)

移動(dòng)客戶端的系統(tǒng)主要是Android、Ios、Window Phone等系統(tǒng)。本次設(shè)計(jì)以貴州大學(xué)校園為例實(shí)現(xiàn)客戶端的相應(yīng)服務(wù)程序。

（1）列表視圖

在Web App 應(yīng)用程序中，最主要的視圖就是內(nèi)容列表視圖，同時(shí)也是所有功能模塊的入口，它位于主視圖viewport 下的子視圖。該視圖實(shí)現(xiàn)的界面效果如圖2 所示：

列表視圖主要分成兩部分：頂部的工具欄模塊和列表模塊。工具欄模塊左右兩側(cè)分別有一個(gè)按鈕，中間是一個(gè)標(biāo)題。列表模塊主要是顯示生活軌跡內(nèi)容清單。

（2）表單視圖

表單視圖的功能是給用戶提供標(biāo)題、內(nèi)容的輸入以及獲取當(dāng)前所在的位置地理經(jīng)緯度信息。

在表單視圖組件的工具欄右側(cè)有一個(gè)“提交”按鈕，該按鈕的主要功能是提交表單視圖的所有表單內(nèi)容，并存儲(chǔ)到localStorage對(duì)象。獲取地理定位信息是通過一個(gè)開關(guān)按鈕控制的，在默認(rèn)情況下，該開關(guān)按鈕是關(guān)閉狀態(tài)，用戶需要自行開啟并確認(rèn)獲取當(dāng)前地理位置信息。在代碼中使用開關(guān)按鈕的change 事件，實(shí)時(shí)監(jiān)聽開關(guān)按鈕的狀態(tài)變化，以確定地理位置信息是否允許獲取。該視圖實(shí)現(xiàn)的界面效果如圖3 所示：

（3）瀏覽校園生活軌跡

瀏覽列表項(xiàng)的視圖主要提供兩種界面用于顯示該列表項(xiàng)的內(nèi)容。第一種視圖風(fēng)格是當(dāng)列表項(xiàng)中沒有地理位置信息時(shí)，視圖就只顯示文字內(nèi)容；第二種視圖風(fēng)格是當(dāng)列表項(xiàng)中含有地理位置信息時(shí)，視圖將顯示Google 地圖，并在中間位置顯示該地理位置標(biāo)記，當(dāng)點(diǎn)擊地圖上的標(biāo)記時(shí)會(huì)顯示你記錄過的生活軌跡內(nèi)容。

（4）實(shí)現(xiàn)視圖之間的切換

在介紹View視圖組件的時(shí)候，一共創(chuàng)建了三個(gè)頁面視圖：列表視圖、表單視圖、含Google地圖的視圖。通過添加showListPanel函數(shù)、showNoteForm函數(shù)和showViewNote函數(shù)實(shí)現(xiàn)視圖之間的切換功能。代碼如下3-2所示：

showListPanel：function（）{

Ext.getCmp（\"viewport\"）.setActiveItem（'listPanel'，{

type：'slide'，

direction：'left'

}）；

}

showNoteForm：function（）{

Ext.getCmp（'viewport'）.setActiveItem（'noteForm'，{

type：'slide'，

direction：'left'

}）；

}

showViewNote：function（）{

Ext.getCmp（\"viewport\"）.setActiveItem（'viewNote'，{

type：'slide'，

direction：'left'

}）；

}

（5）顯示校園生活軌跡

在顯示校園生活軌跡內(nèi)容視圖的時(shí)候，采用了兩種不同的視圖顯示類型。當(dāng)單擊列表項(xiàng)右側(cè)圖標(biāo)時(shí)將觸發(fā)onItemDisclosure 事件，事件將在handler 函數(shù)內(nèi)調(diào)用controller實(shí)例對(duì)象的showNote 函數(shù)，代碼如下3-3：

app.views.noteList = Ext.extend（Ext.List，{

……

onItemDisclosure：{

scope：this，

handler：function（record， btn， index）{

app.controllers.appController

.showNote（record， btn， index）；

}

}

……

}）；

showNote 函數(shù)的主要功能是判斷當(dāng)前生活軌跡內(nèi)容是否存在地理位置信息，當(dāng)不存在地理位置信息時(shí)，由視圖組件定義的tpl 模板轉(zhuǎn)化成實(shí)際HTML 代碼并顯示在視圖組件可視區(qū)域。

（6）顯示Google 地圖

一般情況下，通過Geolocation API 讀取的地理位置信息，latitude 和longitude 經(jīng)緯度值是同時(shí)存在的，不可能出現(xiàn)其中一個(gè)屬性為空而另外一個(gè)屬性不為空的情況。因此無須判斷兩個(gè)值是否同時(shí)存在空置等業(yè)務(wù)邏輯?？梢詫?shí)現(xiàn)更新地圖組件的坐標(biāo)位置、創(chuàng)建顯示地圖信息窗口、創(chuàng)建Google地圖標(biāo)記、注冊(cè)標(biāo)記事件。

四、總結(jié)

本文以Sencha Touch 框架作為整個(gè)應(yīng)用程序的基礎(chǔ)庫，利用HTML5 標(biāo)準(zhǔn)對(duì)移動(dòng)Web應(yīng)用程序的良好支持，使用Geolocation 特性獲取用戶當(dāng)前地理位置信息，并通過Google 地圖提供的API 接口將位置信息標(biāo)記到Google 地圖上，給學(xué)生提供各種與位置相關(guān)的信息，給他們提供了極大的便利。

參考文獻(xiàn)：

[1] 錢海軍. 基于HTML5 移動(dòng)Web 頁面開發(fā)技術(shù)研究[J].電腦與信息技術(shù)， 2013（1）.

[2] 魯學(xué)亮. 基于web APP的移動(dòng)應(yīng)用客戶端設(shè)計(jì)與實(shí)現(xiàn)[J].中國(guó)教育信息化， 2012（1）

[3] 唐俊開. HTML5移動(dòng)web開發(fā)指南[M].電子工業(yè)出版社， 2013.4