PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码




0人收藏此文章,





发表于8小时前(2013-09-06 00:39) ,

已有13次阅读 ,共0个评论

依照我一惯得套路,我会先说一点废话。

PhoneGap和Cordova什么关系?为什么有的地方叫Cordova而有的地方叫PhoneGap ?PhoneGap是一款HTML5平台。通过它,开发商能够使用HTML、CSS及JavaScript来开发本地移动应用程序。因此,眼下开发商能够仅仅编写一次应用程序,然后在6个基本的移动平台和应用程序商店(app store)里进行公布,这些移动平台和应用程序商店包含:iOS、Android、BlackBerry、webOS、bada以及Symbian。Apache
Cordova是PhoneGap贡献给Apache后的开源项目。是从PhoneGap中抽出的核心代码。是驱动PhoneGap的核心引擎。大概意思也就是说:Cordova是由PhoneGap发展而来的,如今的Cordova就是当年的PhoneGap。

所下面文中我来回的切换叫法,事实上都是一个东西而已。

以下言归正传。怎样在PhoneGap或者Cordova框架下实现JS调用Android原生代码?(这里就不再啰嗦怎样在Android程序中集成PhoneGap了)

1.在你的html5中config.js定义你的Plugin的名称和方法。

名为MyPlugin,有两个插件:一个为自己主动更新(Update)。一个为password锁定(PassLock)

var MyPlugin = {

             UpDate: function (success, fail, url) {

             return  PhoneGap.exec(function (args) {

             success(args);

           }, function (args) {

            fail(args);

          }, ‘UpDate’, ‘Update’, [url]);

       },      

     PassLock: function (success, fail, url){

        return  PhoneGap.exec(function (args) {

            success(args);

        }, function (args) {

            fail(args);

        }, ‘PassLock’, ‘PassLock’, [url]);

     

     }

};

2.在xml目录下的plugin里注冊你的Plugin.

<plugin name=”UpDate” value=”com.gapsh.plugin.UpdatePlugin”/>

    <plugin name=”PassLock” value=”com.gapsh.plugin.PassLockPlugin”/>

3.自己定义你的Plugin类和处理方法.(这里仅仅贴出了自己主动更新插件的代码,非常easy。仅仅是作了一个跳转)

public class UpdatePlugin extends Plugin {

      @Override

      public PluginResult execute(String arg0, JSONArray arg1, String arg2) {

        /*

       * 跳转到UpdateActivity

       */

          Intent intent = new Intent(ctx.getContext(),UpdateActivity.class);

          ctx.startActivity(intent);  

          String result = “跳转至UpdateActivity”; 

          PluginResult pluginResult = new PluginResult(Status.OK, result);

          return pluginResult;

       }

    }

4.在你的JS中调用你的插件。

//自己主动更新

    upDate: function () {

        //调用android原生的方法检查并更新

       MyPlugin.UpDate(function(){},function(){},’这里是一个參数,我这里不涉及參数的使用,所以随便写’);

    },

    passLock: function(){

      //调用android原生的方法进行password锁定有关操作

        MyPlugin.PassLock(function(){},function(){},’这里是一个參数,我这里不涉及參数的使用,所随便写‘);

    },

5.測试,当你点击你的某个button或者链接运行你的update:function这个JS。然后在JS里调用了MyPlugin下的Update插件,这个插件在config.js里被定义。在plugin.xml中被注冊,插件详细运行的地方时UpdatePlugin里的execute()方法。运行完这种方法后,你就已经调用了Android的原生代码咯。当然我这里是设置成了跳转到另外一个Activity.

所需工具打包下载:http://pan.baidu.com/share/link?shareid=1636341858&uk=2937351404

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码的更多相关文章

  1. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  2. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  3. Android原生代码与html5交互

    一.首先是网页端,这个就是一些简单的标签语言和JS函数: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  4. C# winForm webBrowser页面中js调用winForm类方法(转)

      有时我们在winform项目中嵌入了网页,想通过html页面调用后台方法,如何实现呢?其实很简单,主要有三部:   1.在被调用方法类上加上[ComVisible(true)]标签,意思就是当前类 ...

  5. CEF3中js调用delphi内部方法

    2015-01-20修改:以下方法不适合delphi7,在CEF3源码中限制了delphi_14 up,对于被我误导的朋友说声抱歉 在CEF1中JS调用delphi的方法已经贴过:http://www ...

  6. 用HTML5/CSS3/JS开发Android/IOS应用框架大全

    现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...

  7. .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  8. 在webView 中使用JS 调用 Android / IOS的函数 Function

    最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...

  9. iOS UIWebView 中 js调用OC 打开相册 获取图片, OC调用js 将图片加载到html上

    线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...

随机推荐

  1. unity3d 捕获系统日志,来处理一些问题

    注册系统日志回调,根据日志内容和类型处理一些特殊问题 using UnityEngine; using System.Collections; public class SetupVerificati ...

  2. TS流PAT/PMT详解

    一 从TS流开始 从MPEG-2到DVB,看着看着突然就出现了一大堆表格,什么PAT.PMT.CAT……如此多的表该怎样深入了解呢? 我们知道,数字电视机顶盒接收到的是一段段的码流,我们称之为TS(T ...

  3. Gridview 多重表头 (二)

    多重表头之排序 这是个有点忧桑的故事...Cynthia告诉我,研究一个问题,我们不可能有超过一天的时间... 结果好好几天过去鸟~~还没有完成... 由于不再使用Gridview自带的表头行,于是无 ...

  4. VisualStudio.DTE 对象可以通过检索 GetService() 方法

    DTE dte = (DTE)GetService(typeof(DTE)); string solutionDir = System.IO.Path.GetDirectoryName(dte.Sol ...

  5. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  6. ios ColorLUT滤镜

    通过这种方格图片实现滤镜 代码: "CIFilter+ColorLUT.h" "CIFilter+ColorLUT.m" #import "CIFil ...

  7. autoresizing代码实现

    主要解决父子控件之间的布局关系: /*     Flexible 灵活的,自由的          typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) ...

  8. ASP.NET,Razor语句中@符号的意义

    比较下面两段代码的区别: <td> @if (item.ModifyTime.HasValue) { @item.ModifyTime.GetValueOrDefault().ToStri ...

  9. linux学习笔记之线程

    线程同步机制:http://www.cnblogs.com/zheng39562/p/4270019.html 一.基础知识 1:基础知识. 1,线程需要的信息有:线程ID,寄存器,栈,调度优先级和策 ...

  10. 创建view

    IF EXISTS(SELECT 1 FROM sys.views WHERE name='V_PARENT_CLIENT') DROP VIEW V_PARENT_CLIENT GO create ...