用phonegap和jquery-mobile寫android應用

時間  2019-11-07
標籤 phonegap jquery mobile android 應用 欄目 JQuery 简体版
原文   原文鏈接
今天紀錄的是學習用phonegap和jquery-moblie來寫android的過程。環境搭建。
個人習慣是直接上官網看文檔，看get-started guide之類的文檔。而後在看參考手冊。而後就按本身的
學習習慣入門了。
首先是：phonegap。介紹的話baidu知道。網站：phonegap.com。
               http://phonegap.com/start
而後跟着教程走就能夠了。
對於不太喜歡看英文的同窗。
值得注意的是：1.下面假設已經下載了phonegap並解壓了。打開了Android目錄。
（目錄既文件夾）
                 2. 注意phonegap.js實際上是phonegap-version.js。version用具體的版本號代替。我這裏是1.2.0
                 3. phonegap.jar實際上是phonegap-version.jar，並且要記得把這個jar包添加到eclipse的build-path中去喔。
                 4. 特別注意：loadUrl("file:///")中是3條槓，而不是兩條。（我對於file協議爲何要設計成這樣，有疑問！）
我簡單的翻譯一下：
寫道
In the root directory of the project, create two new directories:

/libs
/assets/www
1. 在項目的根目錄下新建兩個目錄。
/libs
/assets/www

Copy phonegap.js from your PhoneGap download earlier to /assets/www
2.將phonegap.js從剛纔下載下來的phonegap文檔中拷貝到/assets/www目錄下。
Copy phonegap.jar from your PhoneGap download earlier to /libs
3.將phonegap.jar從剛纔下載下來的phonegap文檔中拷貝到/libs目錄下。
Copy xml folder from your PhoneGap download earlier to /res
4.將xml文件夾從剛纔下載下來的phonegap文檔中拷貝到/res目錄下。
Make a few adjustments too the project's main Java file found in the src folder in Eclipse: (view image below)
在src源代碼文件中的main java源代碼文件中作作一些修改。
Change the class's extend from Activity to DroidGap
將類由繼承Activity改爲繼承DroidGap。
Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
將setContentView()一行用super.loadUrl("file:///android_asset/www/index.html");替換
Add import com.phonegap.*;
添加: import com.phonegap.*;
Remove import android.app.Activity;
刪除import android.app.Activity


下面是項目截圖：





對照上面的項目截圖。若是尚未jquery-mobile，不要緊。
注意
而後。
1.在AndroidManifest.xml中添加以下xml代碼：
Xml代碼
  1. <supports-screens
  2. android:largeScreens="true"
  3. android:normalScreens="true"
  4. android:smallScreens="true"
  5. android:resizeable="true"
  6. android:anyDensity="true"
  7. />
  8. <uses-permission android:name="android.permission.CAMERA" />
  9. <uses-permission android:name="android.permission.VIBRATE" />
  10. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  12. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  13. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  14. <uses-permission android:name="android.permission.INTERNET" />
  15. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  16. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  17. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  18. <uses-permission android:name="android.permission.READ_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  20. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  21. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  22. <uses-permission android:name="android.permission.GET_ACCOUNTS" />
複製代碼
2.將以下 [size=1em]android:configChanges="orientation|keyboardHidden"添加到默認的activity標籤中。
3. 添加另一個activity以下。：
Xml代碼
  1. <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden">
  2. <intent-filter> </intent-filter>
  3. </activity>
複製代碼
4.而後在/assets/www/目錄下建立一個index.html文檔內容以下：
Html代碼
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>PhoneGap</title>
  5. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  6. </head>
  7. <body>
  8. <h1>Hello World</h1>
  9. </body>
  10. </html>
複製代碼
加入jquery-moblie支持。
很簡單了。把jquery-moblie和jquery下載下來就能夠了。

修改index.html以下：
Html代碼
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>html app</title>
  7. <script type="text/javascript" charset="utf-8"
  8.         src="js/phonegap-1.2.0.js"></script>

  10. <!--<link rel="stylesheet"
  11.         href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  12. <script type="text/javascript"
  13.         src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  14. <script type="text/javascript"
  15.         src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  16. -->
  17. <link rel="stylesheet"
  18.         href="css/jquery.mobile-1.0.min.css" />
  19. <script type="text/javascript"
  20.         src="js/jquery-1.6.4.min.js"></script>
  21. <script type="text/javascript"
  22.         src="js/jquery.mobile-1.0.min.js"></script>
  23. </head>
  24. <body>
  25. <div data-role="page">

  27.         <div data-role="header">
  28.                 <h1>My Title</h1>
  29.         </div><!-- /header -->

  31.         <div data-role="content">       
  32.                 <p>Hello world</p>               
  33.         </div><!-- /content -->
  34.         <ul data-role="listview" data-inset="true" data-filter="true">
  35.         <li><a href="#">Acura</a></li>
  36.         <li><a href="#">Audi</a></li>
  37.         <li><a href="#">BMW</a></li>
  38.         <li><a href="#">Cadillac</a></li>
  39.         <li><a href="#">Ferrari</a></li>
  40. </ul>

  42. </div><!-- /page -->
  43. </body>
  44. </html>
複製代碼
好了運行一下：
嗯，成功了，學習正式開始吧！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程