PhoneGap+jQm webapp本地化(1)--環境搭建以及資源介紹

時間 2019-11-08

標籤 phonegap+jqm phonegap jqm webapp 本地化環境搭建以及資源介紹欄目無線简体版

原文原文鏈接

前言

上個月我設計一個基於JQM的webapp做爲個人畢業設計javascript

jQuery moible 開發筆記之項目設計html

http://www.cnblogs.com/youxilua/archive/2012/01/03/2310963.htmljava

結果…固然是作完了…效果嘛,做爲畢業設計還能夠,可是實際使用起來實在不給力,例如,窗口的浮動,流量的消耗,還有對於設備配置的依賴(例如,在局域網中HTC 野火跑起來那叫一個慢死…),不過,在一些高端設備運行還能夠,例如,小米(咱們班仍是挺多人買了),iphone,三星的銀河系列…android

工欲善其事,必先利其器

咱們不必學習苦行僧那樣,用記事原本打代碼.目前而言呢,phonegap的IDE工具最好的固然是DW CS 5.5.web

不過,我這裏使用eclipse做爲個人開發IDE,由於以前使用過DW CS 5.5 ,此次就換個IDE工具.數據庫

Eclipse 的配置

1,一站式新建項目

phonegap + jqmapi

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/app

這個插件仍是很給力的,已經支持默認支持最新版本的phonegap,jqm,sencha框架

安裝完之後選擇這個圖標eclipse

2,選擇要建何種類型的phoneGap

(1),默認已經支持直接建立最新版本的phoneGap

(2),這個插件支持兩大移動js框架jqm & Sencha Touch,固然..這兩個框架只能二選一了,你不選也行…

(3),我這裏選擇我最爲熟悉的jQm框架,默認已經支持最新版本了

3,接着,建立android項目便可

接下來就不囉嗦了…

完成之後:項目結構,activity都已經寫好的了..

代碼也已經寫好了.

注意:新建完之後,可能androidmainifest會報錯,你把報錯的那行代碼刪掉便可,你也能夠根據那個代碼要求找一個支持xlarge包的android版本(4.0吧)(貌似2.2沒有這玩意),我這裏省事直接刪掉算了…

自帶例子簡單介紹

在新建一個page,想使用插件幫你打包好的API你須要如下步驟

1,準備JS文件,滑輪到index.html文件最後幾行;

//這個JS是必須的,調用的是設備的初始化
<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
//如下API本身按照本身的喜愛調用和修改吧
<script type="text/javascript" charset="utf-8" src="apis/accelerometer.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/capture.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/compass.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/connection.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/contacts.js"></script>
	
	<script type="text/javascript" charset="utf-8" src="apis/events.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/file.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/geolocation.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/media.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/notification.js"></script>
	<script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>

2,在body上調用init()方法,具體使用參見device.js.

<body onload="init();">

3,順便你寫了…

例子演示

感受,這個跟這個jqm一塊兒的例子,我的感受比官方那個好不少…截個圖,結束吧…

順便介紹兩本有關於phonegap的書

http://book.douban.com/subject/6954116/

http://book.douban.com/subject/6915788/

下載?反白可見…不但願外傳…

http://www.kuaipan.cn/file/id_2622545685705289.html

http://www.kuaipan.cn/file/id_2622545685705398.html

下次講講數據庫的調用和攝像頭的本地保存吧…