本篇文章由：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. PC-启动慢的解决好方法！

    你试试这样看行不行:­ 首先,打开“系统属性”(在我的电脑上点右键-属性,或者在控制面板里打开“系统”,快捷键win+pause break)点“高级”选项卡,在“启动和故障恢复”区里打开“设置”,去 ...

  2. 问题-delphi在某电脑(win7)上是界面超乱 DPL

    问题现象:本机运行正常,但是在WIN7或个别的XP上,界面显示控件大小不一,界面超乱 问题原因:可以百度“delphi dpi”或者“delphi 控件自适应分辨率” 问题处理:将窗体的Scaled设 ...

  3. JDBC与SQL SERVER各个版本的连接方法

    转至:blog.csdn.net/ying5420/article/details/4488246 1.SQL SERVER 2000 JDBC驱动程序:msbase.jar.mssqlserver. ...

  4. iOS不勾选设置，实现某个界面强制横屏

    1.在不勾选横屏的前提下,实现某一个界面横屏显示,比如播放视频.图表显示等. 2.只能Present跳转,Push会无效. 3.实现代码 在需要横屏的VC里,添加如下代码 #pragma mark 强 ...

  5. 拼接<a>标签相关属性

    <s:iterator value="#session.funcs" id="sonbean"> <s:if test="%{#so ...

  6. Android_消息机制

    Android通过Looper.Handler来实现消息循环机制. Android的消息循环是针对线程的,每个线程都可以有自己的消息队列和消息循环. Android系统中的Looper负责管理线程的消 ...

  7. ubuntu彻底卸载搜狗拼音输入法

    ubuntu彻底卸载搜狗拼音输入法,ubuntu安装搜狗输入法后如果觉得搜狗不是很适合自己,那应该怎么样彻底的卸载搜狗输入法呢?下面我们就来一步步彻底卸载掉搜狗输入法... 方法/步骤 1 找到安装的 ...

  8. oncopy和onpaste

    在Javascript中,有对应的事件能够监听复制和粘贴,那就是oncopy和onpaste. oncopy: demo: <body oncopy="alert('不能复制');re ...

  9. Android - TextView Ellipsize属性

    Android - TextView Ellipsize属性 本文地址: http://blog.csdn.net/caroline_wendy android:ellipsize属性: If set ...

  10. 三期_day12_其它+jetty的使用

    1.大致总结 行程管理和留言反馈和前面的思路差点儿相同,这里就不多啰嗦了.经过十几天的写写停停.有了一个初步的进展了,再往下写也没有啥欲望了.还是研究下android和server,设计模式和网络这些 ...