android和h5做交互设计,H5与Android之间的交互

H5与Android之间的交互

Custom Tab

现在简单整理一下：(直接贴代码，注释详细，应该能懂的)：

一、首先是网页端，这个就是一些简单的标签语言和JS函数：

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

H5 And Android

点击调用Android方法

效果展示

二、接下来就是Android中加载web网页，并且设置完成交互了，直接上代码，也有详细注释:

1 package com.lvyerose.h5andandroid;

2

3 import android.annotation.SuppressLint;

4 import android.os.Bundle;

5 import android.support.v7.app.AppCompatActivity;

6 import android.support.v7.widget.Toolbar;

7 import android.view.View;

8 import android.webkit.JavascriptInterface;

9 import android.webkit.WebView;

10 import android.widget.Toast;

11

12 public class MainActivity extends AppCompatActivity {

13     private WebView mWebView;

14     public void onCreate(Bundle savedInstanceState) {

15         super.onCreate(savedInstanceState);

16         setContentView(R.layout.activity_main);

17         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

18         setSupportActionBar(toolbar);

19

20         mWebView = (WebView) findViewById(R.id.webView);

21         initWeb();

22

23     }

24

25     @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})

26     void initWeb(){

27         //设置编码

28         mWebView.getSettings().setDefaultTextEncodingName("utf-8");

29         //支持js

30         mWebView.getSettings().setJavaScriptEnabled(true);

31

32         //设置本地调用对象及其接口

33         //第一个参数为实例化自定义的接口对象  第二个参数为提供给JS端调用使用的对象名

34         mWebView.addJavascriptInterface(new Contact() {

35

36             @JavascriptInterface    //必须加的注解

37             @Override

38             public void callAndroid(String phone) {

39                 Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();

40             }

41         }, "myObj");

42         //载入js

43         mWebView.loadUrl("

44

45         findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {

46             @Override

47             public void onClick(View v) {

48                 //Android调用Js方法，其中参数 'Android OK !!!' 可传入变量  效果如下：

49 //                mWebView.loadUrl("callH5('"+str+"')");

50                 mWebView.loadUrl("callH5('Android OK !!!')");

51

52             }

53         });

54     }

55     //定义接口，提供给JS调用

56     interface Contact {

57         @JavascriptInterface

58         void callAndroid(String phone);

59

60     }

61

62

63

64

}

由此2步，即可完成交互效果～～～如有疑问，欢迎FQ～～～