JQuery Mobile+cordova构建一个Android项目

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>

时间: 2024-10-01 02:51:35

JQuery Mobile+cordova构建一个Android项目的相关文章

Cocos2d-x 3.0 - Eclipse上构建一个Android项目

Cocos2d-x 3.0 - Eclipse上构建一个Android项目 2014年4月30日 4月末 本篇继续介绍Cocos2d-x 3.0的一些基础内容,前面一篇博客介绍了如何在Visual Studio 2012上编译我们的Cocos2d-x项目,也成功把Helloworld运行起来了.跟以往的版本是类似的,只不过创建空项目的时候命令变成了cocos.本篇博客带给大家的是,如何在Eclipse运行起我们的Cocos2d-x项目,如果童鞋们有看我写的Cocos2d-x 2.2.3版本的交叉

Cocos2dx 3.0开发环境搭建--Eclipse上构建一个Android项目

一.前言: 本篇主要介绍Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld运行起来了.看完本篇博客之后,你就会知道Cocos2d-x 3.0竟然发生了如此大的变化,变得如此简单,环境搭建.项目创建.编译的方式更加人性化了. 二.环境准备: 1.下载ADT Bundle(Eclipse捆绑了SDK和ADT),或者是Eclipse安装了ADT插件. 2.安装JDK.NDK.Ant .Python,然后配置环境. 3.Coco

【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: 1 <divdata-role="footer"> 2 <div data-role="navbar"data-grid="c"> 3 <ul> 4 <li><a id="chat" href="#"data-i

用Kotlin创建第一个Android项目(KAD 01)

原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:http://antonioleiva.com/create-first-android-project-kotlin/ 原文作者,开始Kotlin系列课程的第一课:用Kotlin创建第一个Android项目. 今天,我开始一组30篇针对Android开发者的Kotlin语言的论文(KAD).在这系列

Android官方入门文档[1]创建一个Android项目

Android官方入门文档[1]创建一个Android项目 创建一个Android项目 这节课教你1.创建与Android Studio中的一个项目2.创建使用命令行工具项目 你也应该阅读?管理项目 Creating an Android Project This lesson teaches you to1.Create a Project with Android Studio2.Create a Project with Command Line Tools You should also

创建一个android项目与创建一个android虚拟设备

创建一个android项目 Navigator面板区点击右键-->New-->Android Application Project,打开New Android Applicaton窗口.输入Application Name(应用程序的名称,就是显示在手机上的名称,比如:微信),Project Name(项目名称,一般显示在eclipse上的项目名称),Package Name(指定它的java包名,比如:com.qq.weixin).Minimum Required SDK表示运行应用程序所

Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目(Windows平台)

一.搭建Android开发环境 准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/ JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk7u9-downloads-1859576.html Android SDK:http://developer.android.com/sdk/index.html ADT:

3.创建第一个android项目

安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 3.创建第一个android项目 1.打开Eclipse,选择File——>new——>others... 2.在弹出的窗口中选择Android展开——>选择Android Application Project——>next 3.如下图所示:在弹出的窗口中依次输入应用程序名称,工程名称,包名,最低运行版本,最高运行版本,编译版本,窗体样式,点击下一步. 4.如下图所示:将Create custom

创建一个Android项目

创建一个Android项目 1.点击File-New Project 2.Next-选择Phone 这里的SDK选择Android7.1.1 3.Add no activity 4.错误解决 我们在建立完后经常会报如下的错误: 这里首先你需要查看你的SDK的版本,首先进行更改版本,我这里更改如下: 注释掉junit: 更改: allprojects { repositories { // jcenter() maven { url 'http://repo1.maven.org/maven2'