Android开发之--安卓原生与h5交互-基础篇
来源:互联网 发布:二维码在线设计软件 编辑:程序博客网 时间:2024/06/03 14:25
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
//例如:加载assets文件夹下的test.html页面mWebView.loadUrl("file:///android_asset/test.html")//例如:加载网页mWebView.loadUrl("http://www.baidu.com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { mWebView.loadUrl(url); return true; } } });
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView.getSettings(); //设置为可调用js方法 webSettings.setJavaScriptEnabled(true);
若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("javascript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value=" + value); } });
js代码如下:
<script type="text/javascript"> function sum(a,b){ return a+b; } function do(){ document.getElementById("p").innerHTML="hello world"; }</script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法
public class JsInteration { @JavascriptInterface public String back() { return "hello world"; }}
定义完这个方法后再调用mWebView.addJavascriptInterface()方法:
mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么来调用呢?
<script type="text/javascript"> function s(){ //调用Java的back()方法 var result =window.android.back(); document.getElementById("p").innerHTML=result; }</script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //判断url拦截事件 if (url.equals("file:///android_asset/test2.html")) { Log.e(TAG, "shouldOverrideUrlLoading: " + url); startActivity(new Intent(MainActivity.this,Main2Activity.class)); return true; } else { mWebView.loadUrl(url); return false; } } });
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
public class MainActivity extends AppCompatActivity {public static final String TAG = "MainActivity";private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webView); mWebView.loadUrl("file:///android_asset/test.html"); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); mWebView.addJavascriptInterface(new JsInteration(), "android"); mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url.equals("file:///android_asset/test2.html")) { Log.e(TAG, "shouldOverrideUrlLoading: " + url); startActivity(new Intent(MainActivity.this,Main2Activity.class)); return true; } else { mWebView.loadUrl(url); return false; } } });}//Android调用有返回值js方法@TargetApi(Build.VERSION_CODES.KITKAT)public void onClick(View v) { mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.e(TAG, "onReceiveValue value=" + value); } });}public class JsInteration { @JavascriptInterface public String back() { return "hello world"; }}}
test.html
<!DOCTYPE html><html><head><title></title><script type="text/javascript"> function sum(a,b){ return a+b; } function s(){ var result =window.android.back(); document.getElementById("p").innerHTML=result; } </script></head><body><button onclick="s()">调用本地方法</button><a href="file:///android_asset/test2.html">点击</a><p id="p"></p></body></html>
阅读全文
0 0
- Android开发之--安卓原生与h5交互-基础篇
- android 原生与h5交互
- 安卓混合开发——Android原生和H5数据交互,详细Demo
- iOS原生与H5交互开发
- H5与android原生的JS交互
- h5页面与Android原生页面交互
- Android原生与H5交互的实现
- H5页面与Android原生页面交互
- Android原生与H5交互的实现
- Android原生与H5交互的实现
- 安卓混合开发——原生Java和H5交互,保证你一看就懂!
- android开发与h5交互
- 安卓原生与H5交互用户丢失(Cookie丢失)现象解决方案
- Android之与h5交互
- h5与原生代码交互
- H5与iOS原生交互
- JavaScriptCore原生与H5交互
- android原生和H5交互
- Java学习之线程池
- react路由学习网站
- (封装get-Post)访问HTTP 接口1
- 表格、text文本域
- VMWare虚拟机三种网络模式的简介
- Android开发之--安卓原生与h5交互-基础篇
- 远程(局域网)链接windows桌面
- PLSQL中&符号处理
- 这是一篇最通熟易懂的Hadoop HDFS实践攻略
- TensorFlow学习笔记(9)--使用CNN做英文文本分类任务
- BestCoder Round #59 (div.1)
- 堆排序 思考
- 推荐一个好用的论文助手工具
- 连接linux的一些工具