zoukankan      html  css  js  c++  java

  • 用phonegap和jquery-mobile写android应用

    今天纪录的是学习用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>
    复制代码
    好了运行一下：


    嗯，成功了，学习正式开始吧！










  • 相关阅读:
    k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-4
    k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-2
    Mysql索引最佳实践笔记0524
    Mysql 5.6 编译报错
    MySQL 源码安装规范
    CentOS 7.3安装Zabbix3.2
    Mysql for Mac 安装及环境配置
    win10下Resin安装--入门（1）
    React---入门（1）
    SVN简介与安装
  • 原文地址：https://www.cnblogs.com/suizhikuo/p/3279605.html
Copyright © 2011-2022 走看看