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

首先必要的啰嗦几句,这几天写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  
ed2k://|file|21.android%E7%9A%84ui%E8%AE%BE%E8%AE%A1%E6%8A%80%E5%B7%A7.rar|31469120|eb9c2aa5c6b9148f83f400e3af97829b|h=dxrchv3adrzynucrnnf4desotxnbzeal|/  
 
3G手机Android应用开发第八天课程1.采用HTML设计软件界面.avi  
ed2k://|file|3G%E6%89%8B%E6%9C%BAAndroid%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%AC%AC%E5%85%AB%E5%A4%A9%E8%AF%BE%E7%A8%8B1.%E9%87%87%E7%94%A8HTML%E8%AE%BE%E8%AE%A1%E8%BD%AF%E4%BB%B6%E7%95%8C%E9%9D%A2.avi|45930496|fff4499772c89db13d1ea8492ba52086|/  
 
Android开发视频教程]02_12_JSON数据解  
ed2k://|file|%5BAndroid%E5%BC%80%E5%8F%91%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B%5D02_12_JSON%E6%95%B0%E6%8D%AE%E8%A7%A3%E6%9E%90.mp4|61184962|e183bbb0e241dd21ed534afdab84b5e4|h=c7n7qzrmvutyt34z2xlt73irudlkqrhg|/  

由于这里是第一阶段的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 的函数中获得一个返回值。文章内容不多,还请见谅

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的小碗汤

用go语言爬取珍爱网 | 第三回

Seed把需要爬的request送到engine,engine负责将request里的url送到fetcher去爬取数据,返回utf-8的信息,然后engine...

20330
来自专栏何俊林

FFmpeg实现多段小视频合成

45420
来自专栏吴伟祥

一些免费的学习资源 原

HTML5 Canvas编程:http://blog.csdn.net/column/details/canvas-programming.html GTK编...

45930
来自专栏潇涧技术专栏

Android Heroes Reading Notes

最近有幸认识了很多国内安卓开发的大神,每每想到这里都感觉自己总算是找到了组织,步入了正轨。(^o^) 前段时间购入了几位大牛们写的书,这些书都是好评如潮啊,哈哈...

10220
来自专栏FreeBuf

又见卡死图,竟然一个“小黑点”就能干掉QQ?

前一阵子QQ群里流行了一个东西,一段话加上一个黑点(表情),点击之后QQ就会卡死。(文内链接请点击“阅读原文”查看)

13750
来自专栏编程

那些有趣的 Linux 命令

英文:mylinuxbook,译文:快乐的骚年, www.cnblogs.com/sukai/archive/2013/06/08/3127031.html 1...

253100
来自专栏Windows Community

Windows Community Toolkit 3.0 - CameraPreview

Windows Community Toolkit 3.0 于 2018 年 6 月 2 日 Release,同时正式更名为 Windows Community...

10110
来自专栏CRPER折腾记

Vue 折腾记 - (8) 写一个挺靠谱的多地区选择组件

本来想写个props映射下regionName,regionId,child; 但是感觉作用不大,就没写了,(一般公司的地区JSON格式定下来了之后变动的可能性...

11010
来自专栏Golang语言社区

go语言chan 和 routine活用

这里,我们以游戏中的一个情况为例。比如魔兽世界里的40人团队副本BOSS战,很多玩家同时攻击BOSS,BOSS的血量会进行频繁修改,我们要记录对BOSS的致命一...

35460
来自专栏Python数据科学

Python爬虫之一个海贼迷的呐喊

海贼王已经10年了,一路陪伴了我们的点点滴滴。它热血,激情,感人,欢乐,吸引了无数男女老少的紧紧跟随。

12730

扫码关注云+社区

领取腾讯云代金券