jQuery Mobile之入门

    大四了,终于有时间把一些该学习的知识学习一下了。前一段时间学习了android,发现布局真的好烦。最近学习了jQuery Mobile,发现它真的省去了好多事。

     今天,就让我总结一下我的jQuery Mobile入门遇到的一些问题。

     首先,在运行代码之前,我们需要配置运行环境。运行环境很简单了,就是android模拟器了,要按照Java JDK----Android SDK的顺序来了,然后就是创建Android模拟器了。最后我们还要去jquery官网上去下载jqeury.zip和jquery mobile.zip文件。另外推荐几款,jQuery Mobile的开发工具:Notepad++,DreamWeaver。

      我们在运行代码前,需要先新建一个Android项目,然后将webView控件加入到页面布局中,

如图:
jQuery Mobile之入门
 然后,我们需要在AndroidMainfest.xml文件中加入网络权限:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

最后我们需要需要在MainActivity文件中加入如下代码:

protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		webview=(WebView)findViewById(R.id.webView1);
		WebSettings webSettings = webview.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);
        webview.loadUrl("file:///android_asset/test2.html");//本地
        
	}

  注意一点:我们的html文件和jquery文件都是保存在我们所建立android项目的assets目录下的。如下图所示:
jQuery Mobile之入门
 

如图所示:其中css和js路径是jQuery Mobile的文件包。

我们开始写第一个入门程序了:保存在test2.html文件中,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<title>无标题文档</title>
</head>

<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="content">
    <p>现在我已经成为一名移动开发者!</p>
  </div>

  <div data-role="footer">
  <h1>页脚文本</h1>
  </div>
</body>
</html>

代码中:<!DOCTYPE html>:是HTML5新的标签定义I,表示一个HTML5文档的开始。在任何使用jQuery Mobile实现的页面中,必须以<!DOCTYPE html>中开始;接下来定义jQuery mobile的路径。之后的代码:

<div data-role ="page">表示一个页面,<div data-role="content">表示页面中的征文部分。

<header>表示页面中的页眉,<footer>表示页面中的页脚。

最后我们就可以在模拟器中运行我们的第一个程序了:

 要是遇到下面的问题,解决办法在下面:

 [2014-07-18 16:18:26 - ] You must restart adb and Eclipse.
    [2014-07-18 16:18:26 - ] Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be executed.

 

解决问题:

百度google大家多说的是任务管理器 kill掉adb 或者重启adb server,但我任务管理器就没有adb ,猜测是某个程序占用了adb端口。于是按此思路查找。

解决步骤:

1.打开cmd界面,输入命令 netstat -ano  ,获取如下界面

 

其中发现了

 

进程id为4136的进程占用了adb的默认端口5037,这时候就发现了问题的所在

2.打开任务管理器,点击查看,进入选择列选项界面,如下

 

将pid的显示勾上

3.根据对应的pid将占用端口的进程结束,然后重启eclipse

4.恭喜你,应该可以正常使用了!!

 好了,我们的界面出来了::
jQuery Mobile之入门
 

相关推荐