JobPlus知识库 IT 软件开发 文章
Android五分钟轻松教会你掌握WebView与JS交互

背景:Android API中提供了WebView组件来实现对html的渲染。现在HTML5、CSS3、jS的相关开发技术,以及数据交换格式json/XML。Web开发工程师的技能。为了减少对android的过度依赖,通常会在原生的Android 嵌入部分的html了。

这样一来就避免不了为js数据交互。

我们新建一个简单的布局,只有一个webview控件

1. <android:id="@+id/webView" 

2. android:layout_width="fill_parent" 

3. android:layout_height="wrap_content" 

4. /> 

我们找到这个webView,并加上载本地的main.html,其中main.html存储在工程文件的assets根目录下。

1. WebView webView = (WebView) findViewById(R.id.webView); 

2. webView.addJavascriptInterface(newJSObject(context), "aikaifa"); 

3. WebSettings webSettings = webView.getSettings(); 

4. webSettings.setJavaScriptEnabled(true);// 支持js 

5. Handler handler = new Handler(); 

6. handler.postDelayed(new Runnable() { 

7. public void run() { 

8. webView.loadUrl("file:///android_asset/main.html"); 

9. } 

10. }, 500); 

1.js调用Android方法

细心的你应该会注意到上面有个JSObject类,没错,就是这个开启了入口,前端js 才可以调用我们Android这边写的方法。其中的“aikaifa” 可以理解成一个标示,可以随便改成你喜欢的。

我们来看一下JSObject这个类:

1. public class JSObject { 

2.  private Context context; 

3.  public JSObject(Context context){ 

4.  this.context=context; 

5. } 

6. @JavascriptInterface 

7.  public void goBack({ 

8.  Activity activity = (Activity) context; 

9.  activity.finish(); 

10.  } 

11. } 

该类定义了goBack方法,注入JS可以调用。

js如果想要调用goBack这个方法。可以这个aikaifa.goBack() 这样调用即可。

这样前端就可以很方便调用我们Android这边的方法了。

2.Android调用JS方法

既然js可以调用我们的方法,那我们同样也调用js方法

例如我们想调用js 中getName方法。

我们可以这样写。

1. public void getTestJS() 

2. { 

3.    Timertimer = new Timer(); 

4.    final Handler handler = new Handler(){ 

5.    public void handleMessage(Message msg) { 

6.        switch (msg.what) { 

7.           case 1: 

8.          webView.loadUrl("javascript:getName()"); 

9.          break; 

10.     } 

11.    super.handleMessage(msg); 

12.   } 

13. }; 

14.    timer.schedule(new TimerTask() { 

15.    public void run() { 

16.             Message msg = new Message(); 

17.             msg.what = 1; 

18.              handler.sendMessage(msg); 

19.        } 

20.     }, 500, 500); 

21. } 

其中getName方法是js中的一个方法,我们可以在需要的地方调用getTestJS方法就可以了。

这样WebView与js交互就大致完成了。

 


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持
169人赞 举报
分享到
用户评价(0)

暂无评价,你也可以发布评价哦:)

扫码APP

扫描使用APP

扫码使用

扫描使用小程序