android软件开发之webView.addJavascriptInterface循环渐进【一】
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 的函数中获得一个返回值。文章内容不多，还请见谅