Android的webView和h5+js交互
16lz
2021-01-23
Android的webView和h5+js交互
现在开发越来越多的遇到Android本地代码和h5和js交互，于是写了个小demo记录一下，效果图如下：
上面图里里面的上面包括返回都是一个webView，底面的Android按钮是一个button。
布局文件如下：
<?xml version="1.0" encoding="utf-8"?>mainactivitty代码如下：
public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private WebView mWebView; private Button mButton; private WebAppInterface mAppInterface; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.wb); mButton = (Button) findViewById(R.id.button); mButton.setOnClickListener(this); mAppInterface = new WebAppInterface(this); initWeb(); } private void initWeb() { mWebView.loadUrl("file:///android_asset/index.html");//加载本地的html WebSettings settings = mWebView.getSettings();//获取WebSettings对象，利用WebSettings配置WebView settings.setJavaScriptEnabled(true);//设置允许执行JS脚本 mWebView.addJavascriptInterface(mAppInterface,"app");//添加HTML与AAndroid的通讯接口 } @Override public void onClick(View v) { if(v.getId() == R.id.button){ mAppInterface.showName("测试成功"); } } class WebAppInterface{ private Context context; public WebAppInterface(Context context) { this.context = context; } //-----------下面是JS调用安卓的的方法 @JavascriptInterface public void sayHello(String name){ if (name.equals("")){ Toast.makeText(context,"还没点本地按钮", Toast.LENGTH_SHORT).show(); }else { Toast.makeText(context,name, Toast.LENGTH_SHORT).show(); } } @JavascriptInterface public void back(){ Toast.makeText(context,"点击了h5的返回按钮", Toast.LENGTH_SHORT).show(); } //--------------下面是安卓调用js的的方法 @JavascriptInterface public void showName(final String name){ runOnUiThread(new Runnable() {//Android更新UI需要在主线程 @Override public void run() { mWebView.loadUrl("javascript:showName('"+name+"')"); } }); } }}上面的代码都有注释，总结一下就是：
1.注册一个和js交互的接口new WebAppInterface(this);
2.要设置webView的mWebView.getSettings()。settings.setJavaScriptEnabled(true)，允许加载js脚本。
3.mWebView.addJavascriptInterface(mAppInterface,”app”)，添加HTML与Android的通讯接口，app要和html里面调用的保持一致。
4.然后就可以在html写js方法调用或者在Android里面写方法调用js。
到现在为止我们就实现了Android和h5，js交互了 ##
下面是html，我放在了本地asset里面。
HTML 测试 H5和js交互
Demo下载
更多相关文章
- Android禁止横竖屏和解决切换屏幕时重启Activity的方法
- Android官方DrawerLayout 抽屉式侧滑菜单-简单使用方法
- Android Emulator 模拟器使用方法
- Android心得4.3--SQLite数据库--execSQL()和rawQuery()方法
- Android之ContextMenu的使用方法以及与OptionMenu的区别
- Android 摇一摇太灵敏的解决方法
- android 单选按钮组的使用
- Android加载Html的方法
- android window的requestWindowFeature()的使用方法