AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2014-01-06 1066
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 首先必要的啰嗦几句，这几天写VC写的累的要死，突然间不想再写想VC了，手里面有一个andriod的手机天天玩到半夜，却从来没有写过这方面的程序，真的是悲哀啊。所以我就想写这方面的程序，用管了VC的习程序的习惯，第一个程序当然是hello world。刚开始还没有什么大的问题，当到后面想写一刷Q*会员的程序的时候却发现，android的界面布局是真的难啊，怎么摆都不好看。弄得和....什么似

首先必要的啰嗦几句，这几天写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这个视频做基础。如果你也是大牛的话你也肯定看的懂的。下面就进入我们小菜阶级的开发教程了。

[plain] view plain copy print ?
  1. 21.android的ui设计技巧.rar  
  2. ed2k://|file|21.android%E7%9A%84ui%E8%AE%BE%E8%AE%A1%E6%8A%80%E5%B7%A7.rar|31469120|eb9c2aa5c6b9148f83f400e3af97829b|h=dxrchv3adrzynucrnnf4desotxnbzeal|/  
  3.   
  4. 3G手机Android应用开发第八天课程1.采用HTML设计软件界面.avi  
  5. 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|/  
  6.   
  7. Android开发视频教程]02_12_JSON数据解  
  8. 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] view plain copy print ?
  1. <html>  
  2.         <script language="javascript">  
  3.             /* This function is invoked by the activity */  
  4.             /* 这个函数被Activity调用的活动 这里的图片我们可以在它的连接里面下载 android_waving.png */  
  5.                 function wave() {  
  6.                         /* 这里是一个javascript 自定义函数，这是由我们在android的程序里调用的，不在在HTML中调用*/  
  7.                         document.getElementById("droid").src="android_waving.png";  
  8.                 }  
  9.         </script>  
  10.         <body>  
  11.             <!-- Calls into the javascript interface for the activity -->  
  12.             <!-- 从HTML文件中调用activity中的函数 -->  
  13.             <!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->  
  14.             <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;  
  15.                         margin:0px auto;  
  16.                         padding:10px;  
  17.                         text-align:center;  
  18.                         border:2px solid #202020;" >  
  19.                                 <!-- 图片默认的为 android_normal.png -->  
  20.                                 <img id="droid" src="android_normal.png"/><br>  
  21.                                 Click me!  
  22.                 </div></a>  
  23.         </body>  
  24. </html>  

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

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

[javascript] view plain copy print ?
  1. package com.google.android.webviewdemo;  
  2.   
  3.   
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.os.Handler;  
  7. import android.util.Log;  
  8. import android.webkit.JsResult;  
  9. import android.webkit.WebChromeClient;  
  10. import android.webkit.WebSettings;  
  11. import android.webkit.WebView  
  12.   
  13. public class WebViewDemo extends Activity {  
  14.     private static final String LOG_TAG = "WebViewDemo";  
  15.     private WebView mWebView;  
  16.     private Handler mHandler = new Handler();  
  17.     @Override  
  18.     public void onCreate(Bundle icicle) {  
  19.         super.onCreate(icicle);  
  20.         setContentView(R.layout.main);  
  21.         mWebView = (WebView) findViewById(R.id.webview);  
  22.   
  23.   
  24.         WebSettings webSettings = mWebView.getSettings();  
  25.         webSettings.setSavePassword(false);  
  26.         webSettings.setSaveFormData(false);  
  27.         // 下面的一句话是必须的，必须要打开javaScript不然所做一切都是徒劳的  
  28.         webSettings.setJavaScriptEnabled(true);  
  29.         webSettings.setSupportZoom(false);  
  30.   
  31.   
  32.         mWebView.setWebChromeClient(new MyWebChromeClient());  
  33.   
  34.         // 看这里用到了 addJavascriptInterface 这就是我们的重点中的重点  
  35.         // 我们再看他的DemoJavaScriptInterface这个类。还要这个类一定要在主线程中  
  36.         mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");  
  37.   
  38.   
  39.         mWebView.loadUrl("file:///android_asset/demo.html");  
  40.     }  
  41.   
  42.     // 这是他定义由 addJavascriptInterface 提供的一个Object  
  43.     final class DemoJavaScriptInterface {  
  44.         DemoJavaScriptInterface() {  
  45.         }  
  46.   
  47.         /** 
  48.          * This is not called on the UI thread. Post a runnable to invoke 
  49.          * 这不是呼吁界面线程。发表一个运行调用 
  50.          * loadUrl on the UI thread. 
  51.          * loadUrl在UI线程。 
  52.          */  
  53.         public void clickOnAndroid() {        // 注意这里的名称。它为clickOnAndroid(),注意，注意，严重注意  
  54.             mHandler.post(new Runnable() {  
  55.                 public void run() {  
  56.                     // 此处调用 HTML 中的javaScript 函数  
  57.                     mWebView.loadUrl("javascript:wave()");  
  58.                 }  
  59.             });  
  60.         }  
  61.     }  
  62. // 线下的代码可以不看，调试用的  
  63. ///////////////////////////////////////////////////////////////////////////////////////////////////  
  64.     /** 
  65.      * Provides a hook for calling "alert" from javascript. Useful for 
  66.      * 从javascript中提供了一个叫“提示框” 。这是很有用的 
  67.      * debugging your javascript. 
  68.      *  调试你的javascript。 
  69.      */  
  70.     final class MyWebChromeClient extends WebChromeClient {  
  71.         @Override  
  72.         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {  
  73.             Log.d(LOG_TAG, message);  
  74.             result.confirm();  
  75.             return true;  
  76.         }  
  77.     }  
  78. }  

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

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

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

[javascript] view plain copy print ?
  1. mWebView.loadUrl("javascript:wave()");  
这句话就可以了。

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

在下一集里我将会带领大家来怎么使用 addJavascriptInterface  怎么样从一个JavaScript 的函数中获得一个返回值。文章内容不多，还请见谅
文章标签：
Android开发
JavaScript
前端开发
数据格式
XML
关键词：
Android webview
code_xzh
目录
相关文章
w风雨无阻w
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
w风雨无阻w
995 0
mzlogin
|
29天前
|
程序员 开发工具 Android开发
Android｜WebView 禁止长按，限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转，并禁用长按选择文字。
mzlogin
34 2
蓝色流星1000
|
5月前
|
安全 JavaScript 前端开发
kotlin开发安卓app，JetPack Compose框架，给webview新增一个按钮，点击刷新网页
在Kotlin中开发Android应用，使用Jetpack Compose框架时，可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角，点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要：
蓝色流星1000
134 1
蓝色流星1000
|
5月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview ， 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件，设置JavaScript交互：`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类，允许JavaScript调用Android方法如播放音频。当页面加载完成时，执行`onWebViewReady`回调。
蓝色流星1000
313 2
保山hh
|
4月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
保山hh
125 0
艾尼麻麻
|
5月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图：WebView
52. 【Android教程】网页视图：WebView
艾尼麻麻
93 1
蓝色流星1000
|
5月前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie，首先在`build.gradle`添加WebView依赖，如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`，通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
蓝色流星1000
650 0
快乐阿超
|
6月前
|
XML Android开发 数据格式
安卓和webview交互
安卓和webview交互
快乐阿超
61 0
小陆要努力
|
Android开发 iOS开发 UED
Android webView 实现阻尼回弹效果
iOS webView默认滑动到顶部或者底部的时候，还可以继续通过手指拉扯滑动，松手后回弹；而Android webView默认是不行的，要实现跟iOS一样的效果，就需要自定义webView。
小陆要努力
584 0
快乐阿超
|
6月前
|
XML Android开发 数据格式
安卓和webview交互
安卓和webview交互
快乐阿超
103 1