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控件加入到页面布局中,
如图:
然后,我们需要在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目录下的。如下图所示:
如图所示:其中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.恭喜你,应该可以正常使用了!!
好了,我们的界面出来了::