本篇文章由：http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gradual-one/

说明

文章列表

android软件开发之webView.addJavascriptInterface循环渐进【一】： http://www.sollyu.com/?p=302

android软件开发之webView.addJavascriptInterface循环渐进【二】： http://www.sollyu.com/?p=586

首先必要的啰嗦几句，这几天写VC写的累的要死，突然间不想再写想VC了，手里面有一个andriod的手机天天玩到半夜，却从来没有写过这方面的程序，真的是悲哀啊。所以我就想写这方面的程序，用管了VC的习程序的习惯，第一个程序当然是hello world。刚开始还没有什么大的问题，当到后面想写一刷Q*会员的程序的时候却发现，android的界面布局是真的难啊，怎么摆都不好看。弄得和....什么似的。气得头都大了，想想自己写了这么长时间的VC还真的没有碰到这样的界面问题，真可谓..

在verycd上看人家大牛的视频的时候听到人家说可以用html来做android的UI界面，这不仅让我眼前一亮。 :-) 因为我学过html开发，虽然学的不咋的，但却要比这XML好的太多了，真的是对XML头大...于是乎就入手andriod的HTML界面可是后来发现在这方面的文章那叫一个少的可惜啊，老外那边要不就是看不懂，要不就基本和我看的内容无关。因为自己是菜鸟所以就想到找个群，蹭进去找个大牛问问，谁知道进去之后，我XXX他的，居然收费,我XX它的OO，人家android都开源了问你个破问题还收费，什么道德啊。当时个气氛,,,发誓要学会，在网上写文章，让你收费,XX你个OO的。

发泄了一通舒服多了， :-) OK，啰嗦的话我就不多说了。下面就开始我们的android的webView 的HTML界面教程吧。这里我给大家一个国内大牛的HTML做界面的视频教程，不过他老人家讲的我没有听懂。

21.android的ui设计技巧.rar或者看3G手机Android应用开发第八天课程1.采用HTML设计软件界面.avi他老人家的的视频还要 [Android开发视频教程]02_12_JSON数据解析.mp4这个视频做基础。如果你也是大牛的话你也肯定看的懂的。下面就进入我们小菜阶级的开发教程了。

21.android的ui设计技巧.rar

3G手机Android应用开发第八天课程1.采用HTML设计软件界面.avi

Android开发视频教程02_12_JSON数据解

代码

由于这里是第一阶段的webView所我就写个最简单的文章，这样大家可以循环渐进的来了解addJavascriptInterface这句话是怎么用的。

在这里我们引用Google的一个事例下面是我Google给提供的一个dome的地址：点击打开链接

我们先看它的HTML文件，HTML的文件路径是在：点击打开链接

他的代码为：

<html>

        <script language="javascript">

            /* This function is invoked by the activity */

            /* 这个函数被Activity调用的活动 这里的图片我们可以在它的连接里面下载 android_waving.png */

                function wave() {

                        /* 这里是一个javascript 自定义函数，这是由我们在android的程序里调用的，不在在HTML中调用*/

                        document.getElementById("droid").src="android_waving.png";

                }

        </script>

        <body>

            <!-- Calls into the javascript interface for the activity -->

            <!-- 从HTML文件中调用activity中的函数 -->

            <!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->

            <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;

                        margin:0px auto;

                        padding:10px;

                        text-align:center;

                        border:2px solid #202020;" >

                                <!-- 图片默认的为 android_normal.png -->

                                <img id="droid" src="android_normal.png"/><br>

                                Click me!

                </div></a>

        </body>

</html>

这里我做了注释,可能你会看不懂，没有关系，下面我们就再看的activity的代码吧。点击打开链接

由于他的源码比较长，我就不多全部都贴进来了，我只贴一下重要的部分就好了.......貌似都重要，还是全贴吧

package com.google.android.webviewdemo;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView

public class WebViewDemo extends Activity {

    private static final String LOG_TAG = "WebViewDemo";

    private WebView mWebView;

    private Handler mHandler = new Handler();

    @Override

    public void onCreate(Bundle icicle) {

        super.onCreate(icicle);

        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        webSettings.setSavePassword(false);

        webSettings.setSaveFormData(false);

        // 下面的一句话是必须的，必须要打开javaScript不然所做一切都是徒劳的

        webSettings.setJavaScriptEnabled(true);

        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new MyWebChromeClient());

        // 看这里用到了 addJavascriptInterface 这就是我们的重点中的重点

        // 我们再看他的DemoJavaScriptInterface这个类。还要这个类一定要在主线程中

        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("file:///android_asset/demo.html");

    }

    // 这是他定义由 addJavascriptInterface 提供的一个Object

    final class DemoJavaScriptInterface {

        DemoJavaScriptInterface() {

        }

        /**

         * This is not called on the UI thread. Post a runnable to invoke

         * 这不是呼吁界面线程。发表一个运行调用

         * loadUrl on the UI thread.

         * loadUrl在UI线程。

         */

        public void clickOnAndroid() {        // 注意这里的名称。它为clickOnAndroid(),注意，注意，严重注意

            mHandler.post(new Runnable() {

                public void run() {

                    // 此处调用 HTML 中的javaScript 函数

                    mWebView.loadUrl("javascript:wave()");

                }

            });

        }

    }

// 线下的代码可以不看，调试用的

///////////////////////////////////////////////////////////////////////////////////////////////////

    /**

     * Provides a hook for calling "alert" from javascript. Useful for

     * 从javascript中提供了一个叫“提示框” 。这是很有用的

     * debugging your javascript.

     *  调试你的javascript。

     */

    final class MyWebChromeClient extends WebChromeClient {

        @Override

        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

            Log.d(LOG_TAG, message);

            result.confirm();

            return true;

        }

    }

}

这里我也做了注释，在这里他在他的类中定义了一个 clickOnAndroid() 的函数，我记不记得我们在HTML中看到的 window.demo.clickOnAndroid()这句话。如果忘记了就翻上去再看一下，特别是我说注意的地方。是的，这里的 clickOnAndroid() 是我们android程序中的一个函数。可能你会问那.为什么是windows.demo.这里demo我们可以看到在

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

这句话 中后面它加了一个demo这个字符.我可以理解成 addJavascriptInterface 的前一个参数为HTML中的一个方法，当然我更喜欢说他为函数。demo就是个对象...呵呵，我对这也不是怎么的熟悉。至于这个window我也不知道是为什么我只知道这样写程序就可以正确的运行，如果你知道这是什么那么请你在下面的留言版里告诉我一下好吗？

现在知道怎么在HTML中怎么调用Android程序的一个方法了吧。其实就是这这么的简单，不过demo这个字符我没有试他是不是区分大小写。如果你有兴趣那么你可以去试一下它有没有区分大小写。知道了怎么样从HTML中怎么样调用Android中的方法，下面我就再研究一下，它是怎么样从Android到HTML的吧。其实这个很简单，只要使用

mWebView.loadUrl("javascript:wave()");

这句话就可以了。 这样我主解读完Google给我提供的一个demo了。下面就是让我来试一下吧，试试他的这个demo吧，因为人家给提供了源码，所以我就不贴的啦，大家把他的源码贴上去就可以实现这个啦

在下一集里我将会带领大家来怎么使用 addJavascriptInterface 怎么样从一个JavaScript 的函数中获得一个返回值。文章内容不多，还请见谅

android软件开发之webView.addJavascriptInterface循环渐进【一】的更多相关文章

  1. android软件开发之webView.addJavascriptInterface循环渐进【二】

    本篇文章由:http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gra ...

  2. Android安全开发之WebView中的地雷

    Android安全开发之WebView中的地雷 0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者 ...

  3. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  4. Android混合开发之WebView使用总结

    前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...

  5. android基础开发之WebView

    WebView 是android平台沟通 http & H5 页面的桥梁. 但是google对这块的表述不是很清晰,而且SDK里面基本看不到源码,只有一个接口而已. 传送:http://dev ...

  6. Android软件开发之ListView 详解【转】

    ListView的使用方法  ListView是Android软件开发中非常重要组件之一,基本上是个软件基本都会使用ListView ,今天我通过一个demo来教大家怎么样使用ListView组件 绘 ...

  7. 【Android】Android软件开发之ListView 详解

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xys289187120.blog.51cto.com/3361352/65717 ...

  8. Android安全开发之WebView中的大坑

    0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者简单的展示一些在线内容等.WebView功能强大 ...

  9. Android 软件开发之 PreferenceActivity 中的组件

    1.PreferenceActivity 介绍 PreferenceActivity 继承ListActivity 它是以一个列表的形式在展现内容,它最主要的特点是添加Preference可以让控件的 ...

随机推荐

  1. 解决android锁屏或解锁后activity重启的问题

    If your target build version is Honeycomb 3.2 (API Level 13) or higher you must put the screenSize f ...

  2. CSS入门基础

    认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...

  3. .NET中常见对象

    .NET中六大内置对象:1.Response    2.Request   3.Session   4.Appliction  5.Server  6.Cookie System.Web.HttpCo ...

  4. 第一步 配置D2RQ环境

    ​第一步 配置D2RQ环境 Getting Started 2013年10月15日 15:16:55 老套路,还是先配置环境,没查到什么中文资料,写在这里,供大家参考.有需要交流的可以加QQ: 1q7 ...

  5. Objective-C-使用NSMutableURLRequest发送POST请求,使用NSJSONSerialization解析JSON字符串

    NSString *reqData = @"Data="; NSData *postDatas = nil; NSString *urlPath = @"url" ...

  6. iOS开发 落地消息多的处理办法（仅供参考）

    1.首先要知道一点,你的消息储存是用数据库储存的! 看了一下微信和qq的消息处理,一般情况下第三方(亲加,容云,环信都会有本地的数据库)处理过的! 但是我发现,最近一个需求要求开发@"消息已 ...

  7. 基于 OAuth 安全协议的 Java 应用编程1

    原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-oauth/index.html 參考博客:http://www.cnblogs.com/wan ...

  8. 在Apache Tomcat 7设置redis作为session store

    在Apache Tomcat 7设置redis作为session store  //输出tomcat控制台日志 root@ubuntu:~# cd /usr/tomcat/apache-tomcat- ...

  9. 在其它路径新建cocos2d-x项目

    打开vs2010程序,然后选择“文件—新建—项目”,如图 改了一下位置,放在D:\Program Files\cocos2d-x\ ,确定 然后点下一步 这个程序不需要物理引擎,所以可以把上面红色的圈 ...

  10. 安装完Kali linux 之后 需要配置的一些 常用软件 记录

    apt 阿里云开源镜像站 deb http://mirrors.aliyun.com/kali sana main non-free contribdeb http://mirrors.aliyun. ...