JQuery Mobile+cordova构建一个Android项目
浏览数：22 /
时间：2015年06月11日
1.安装Android开发环境
Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.google.com，dl-ssl.google.com对应的ip可能改变。用的时候搜索最新的IP地址就行了。
然后用eclipse或者myeclipse更新站点信息：https://dl-ssl.google.com/android/eclipse。
具体教程网上很多,我比较喜欢的是：http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html
2.安装cordova
cordova是一个实现JavaScript和后台通信（Android的Java）的框架，通过相应的cordova插件,提供给Web前端调用移动平台底层功能API的能力。
cordova通过WebChromeClient拦截js的prompt的内容来实现前端js对后端程序功能的调用。
在最开始的时候，我只是下载了cordova的源码,把相关java类(喜欢只加入源java类，没有打成jar包，便于修改)和js加入android工程，但是需要一些系统插件时,会很难处理,只好重新安装cordova。
1).安装node.js,去官网上下载安装后，把安装路径加入path
2).安装npm,如果是最新的node.js已经带了npm了不用安装，否则就要安装一下
3)安装cordova,这里一定要注意你的android sdk版本,查看一下是多少,应为默认安装最新的版本，而最新的版本需要的sdk版本很高，加入的cordova的java源代码需要的类有很大不同。
a).安装cordova
npm install -g [email protected]
b).创建一个cordova工程
cordova create hello com.example.hello HelloWorld
c).添加android平台
进入hello工程目录
cordova platform add android
d).将相关内容加入myeclipse
hello\platforms\android\CordovaLib的java源类加入src中
hello\platforms\android\assets\www中内容加入assets/www中
hello\platforms\android\res\xml\config.xml中内容加入res/xml中
e).编写MainActivity
public class MainActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
f).授权
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission android:name="android.permission.SEND_SMS" />
g).启动程序，就能看见cordova主页面了
3.JQuery Mobile
JQuery Mobile是专门为移动平台创建一组UI框架。
特别注意的是，JQuery Mobile是用Ajax的方式加载所有HTML中的标记data-role="page"的DIV元素中，第一个HTML页面一般都是完全加载，包括 HEAD 和BODY 都会被加载到DOM中，完成后便是链接到的其他页面内容的加载。 第二个HTML页面只有 BODY 中的内容会被以Ajax的方式加载到头一个HTML的 DOM中。 并且第二HTML页面的 BODY 中的内容也并非全部加载，而仅仅是其中的第一个带data-role="page"属性的DIV会被加载进去，其余的东西则无缘进入页面渲染
a).下载JQuery Mobile
b).将css、js、images装入android工程
4.第一个演示项目
5.自定义插件
下面这个插件实现通过一个按钮结束应用程序。
1).插件定义
public class ExitPlugin extends CordovaPlugin{
private static final String EXIT = "exit";
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
if (EXIT.equals(action)) {
System.exit(0);
}
return true;
}
}
2).xml配置
<feature name="Exit">
<param name="android-package" value="com.tomsnail.webtest.ExitPlugin"/>
</feature>
3).js定义
var Exit = {
exitSystem: function(){
cordova.exec(function(data){ }, function(e){}, "Exit", "exit", [""]);
}
};
4).js调用
function exitSystem(){
Exit.exitSystem();
}
<a href="javascript:exitSystem();" class="ui-btn">退出</a>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
