Android与Js相互调用基础篇
16lz
2021-01-23
随着H5的使用越来越广泛，逐渐替换App原生的页面。有的商城类App甚至1/4或1/3都是用网页做的，所以有的App会有频繁的与网页交互。我曾经有个做Android的同事，项目经理说给一个月的期限不会写H5就走人，可见H5的重要性了。
按照国际惯例贴出github代码
效果请看大屏幕：
giphy.gif 如上四个按钮操作分别为：
- Android调用Js方法
- Android调用Js方法并传参
- Js调用Android方法
- Js调用Android方法并传参
功能实现步骤：
1. 主界面布局
<?xml version="1.0" encoding="utf-8"?> 截取预览图为：
image.png 2. 在main下创建assets资源文件，并创建html.html文件，项目路径如下图：
image.png 3. 给Webview写最最简单的html页面，body里面2个按钮,javascript里面有2个插入文本的function
Web模块
调用js显示结果
在浏览器中预览一下：
image.png 
image.png 4. 给WebView加入设置：
WebSettings webSettings = webview.getSettings(); //与js交互必须设置 webSettings.setJavaScriptEnabled(true); webview.loadUrl("file:///android_asset/html.html"); webview.addJavascriptInterface(MainActivity.this,"android");理解：
- webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js；
- webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件（因为没有网络地址所以加载的本地文件）
- webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口，第一个参数为类对象，第二个参数为自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。
html中用到：
5. Android调用Js代码，javacalljs()为javascript代码中的一个方法。
tvJs.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webview.loadUrl("javascript:javacalljs()"); } });如上html中代码，向id为showmsg的h3大小标题中写入字符串
function javacalljs(){ document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数"; }同理，Android调用Js代并传参数
webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");6. Js调用Android方法和传参数
点击html按钮，通过onclick="window.android.jsCallAndroid()事件，通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息，为安全起见，在Android4.4以上并且必须加入@JavascriptInterface才有响应。
@JavascriptInterface public void jsCallAndroid(){ tvShowmsg.setText("Js调用Android方法"); } @JavascriptInterface public void jsCallAndroidArgs(String args){ tvShowmsg.setText(args); }MainActivity完整代码：
import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.TextView;public class MainActivity extends AppCompatActivity { private WebView webview; private TextView tvJs; private TextView tvJsArgs; private TextView tvShowmsg; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setWebview(); initView(); } private void initView() { tvJs = (TextView) findViewById(R.id.tv_androidcalljs); tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs); tvShowmsg = (TextView) findViewById(R.id.tv_showmsg); tvJs.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webview.loadUrl("javascript:javacalljs()"); } }); tvJsArgs.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")"); } }); } private void setWebview() { webview = (WebView) findViewById(R.id.webview); WebSettings webSettings = webview.getSettings(); webSettings.setBuiltInZoomControls(true); webSettings.setSupportZoom(true); //与js交互必须设置 webSettings.setJavaScriptEnabled(true); webview.loadUrl("file:///android_asset/html.html"); webview.addJavascriptInterface(MainActivity.this,"android"); } @JavascriptInterface public void jsCallAndroid(){ tvShowmsg.setText("Js调用Android方法"); } @JavascriptInterface public void jsCallAndroidArgs(String args){ tvShowmsg.setText(args); }}打完收工，还不太明白的童鞋可以下载代码来看并运行测试。
更多相关文章
- android app耗电分析方法
- Android真机测试，连接到本地服务器的方法
- 移动开发者最爱的9个优秀Android代码编辑器
- 电池驱动调试总结，电池服务+电量计驱动+调试方法
- Android应用程序通用自动脱壳方法研究
- android下创建文件夹和修改其权限的方法
- Eclipse与Android源码中ProGuard工具的使用（代码混淆）
- Anroid-vlc开源播放器代码编译及简单调用手把手
- 解决eclipse中android添加重载函数时参数为arg0,arg1的问题