ym——Android从零开始(32)(WebView)(新)

最新推荐文章于 2017-05-31 14:13:30 发布

程序员码仔

最新推荐文章于 2017-05-31 14:13:30 发布

阅读量2k

点赞数

分类专栏： Android教学篇跟着ym学Android

本文链接：https://blog.csdn.net/cym492224103/article/details/38438945

版权

Android教学篇同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

跟着ym学Android

39 篇文章 3 订阅

订阅专栏

转载请注明本文出自Cym的博客（http://blog.csdn.net/cym492224103），谢谢支持！

WebView

WebView能加载显示网页，可以将其视为一个可以嵌入在Android界面中的浏览器。

Html调用java代码

如果网页要调用java代码需要通过javascript方法调用java对象传递给webview的对象点方法。

<!-- viewport的宽度等于设备宽度，viewport会根据屏幕宽度自动适应，并且对图片和文字进行缩放显示 -->
<meta name="viewport" content="initial-scale=1.0" />

Activity

public void onCreate(BundlesavedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       webview = (WebView) findViewById(R.id.webview);
        //加载网页
        webview.loadUrl("file:///android_asset/test.html");
       //webview默认是不能够执行javascript
       //允许webview能够执行javascript代码
       webview.getSettings().setJavaScriptEnabled(true);
       //把java对象传递给webview的插件
       webview.addJavascriptInterface(new Plug(),"plug" );
    }
   private class Plug{
   public void call(String phone){
   Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:"+ phone));
   startActivity(intent);
    }
    }

Html

<scripttype="text/javascript">
function call(){
plug.call('18888888888');
}
</script>
</head>
<body>

这是一个html页面,现在在WebView中运行

<ahref="javascript:call()">打电话给18888888888</a>

Java代码交互html

运行应用程序，onCreate方法中利用webview加载html页面

Html加载完毕后会调用window.onload函数，onload方法中调用java接口的方法生成数据

Java端生成完数据将集合转换为json，调用js的渲染页面方法，并将json作为参数传入

Js端渲染方法迭代json数组并且渲染数据至页面

用户点击网页中的拨号按钮调用java接口的拨号方法

Html

<scripttype="text/javascript">
       //保存模板html代码
       vartemplate;
       //让java调用,生成联系人数据
       functionshow(arr){
              for(var i=0;i<arr.length;i++){
                     varinnerHtml = document.body.innerHTML;
                     //利用模板替换生成每条数据
                     varrow = template;
                     row= row.replace('name',arr.name);
                     row= row.replace('amount',arr.amount);
                     row= row.replace('phone',arr.phone);
                     row= row.replace('phone',arr.phone);
                     //将html拼接到body标签中
                     document.body.innerHTML= innerHtml+row;
              }
       }
       //初始化并且调用showcontacts去java请求数据
       functioninitContacts(){
              template = document.body.innerHTML;
              document.body.innerHTML = "";
              contact.showcontacts();
       }
       //按钮点击 时调用java的call
       functioncall(phone){
              contact.call(phone);
       }
       //页面加载时调用
       window.οnlοad= initContacts;
</script>
</head>
<body>
       <!--模板项 -->
       <divclass="contact">
               <spanstyle="position:absolute;left:5px">name</span><br>
              <spanstyle="position:relative;top:5px;">phone</span><br>
              <input type="button"  value="电话"></button>
       </div>
</body>
</html>

Activity

/你可以把webview看成一个浏览器，webview里面有一个插件，可以把一个java对象传递给webview的插件，当插件得到这个对象之后，就可以让网页里面的
       //javascript代码对这个java对象进行调用
       webview = (WebView) findViewById(R.id.webview);
        
       //webview默认是不能够执行javascript
       //允许webview能够执行javascript代码
       webview.getSettings().setJavaScriptEnabled(true);
       //把java对象传递给webview的插件
       webview.addJavascriptInterface(new ContactPlugin(),"contact");
       //加载网页
       webview.loadUrl("file:///android_asset/contacts.html");
       service = new ContactService();
    }
   
   //准备传入webview,让js调用
   private final class ContactPlugin{
           //初始化数据,由js调用,获得数据后转换为json并且调用js的方法返回
           public void showcontacts(){
                  try {
                            List<ContactInfo> contacts =service.getContacts();
                            JSONArray jsonArray = new JSONArray();
                            for(ContactInfo info:contacts){
                                   JSONObjectjsonObject = new JSONObject();
                                   jsonObject.put("name",info.getName());
                                   jsonObject.put("phone",info.getPhone());
                                   jsonArray.put(jsonObject);
                            }
                            String json = jsonArray.toString();
                           
                            //webview执行javascript代码
                            webview.loadUrl("javascript:show("+ json + ")");
                     }catch (Exception e) {
                            e.printStackTrace();
                     }
           }
           
           //让js调用,打电话
           public void call(String phone){
                  Intentintent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));
                  startActivity(intent);
           }
}

ContactService：

   public static List<ContactInfo> getContacts() {
        List<ContactInfo>contactInfos = newArrayList<ContactInfo>();
        contactInfos.add(new ContactInfo("刘备", "13900123456"));
        contactInfos.add(new ContactInfo("关羽", "1867686878"));
        contactInfos.add(new ContactInfo("张飞", "18900888888"));
        contactInfos.add(new ContactInfo("曹操", "18000888888"));
        return contactInfos;
    }

ContactInfo：

public class ContactInfo {
    private String name;
    private String phone;
   
   
    public ContactInfo() {
        super();
        // TODO Auto-generated constructor stub
    }
   
   
    public ContactInfo(String name,String phone) {
        super();
        this.name = name;
     
        this.phone = phone;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
   
   
}

课后问题

1.要显示网页用什么控件

webView

2.java调用javaScrpit用什么方法？

// 允许webview能够执行javascript代码

wv.getSettings().setJavaScriptEnabled(true);
Webview对象.loadUrl("javascript:方法名");

3.javaScript调用java的实现步骤。

// 把java对象传递给webview的插件

Webview.addJavascriptInterface(new Contact(), "contact");

Html：

function call(phone){

contact.call(phone);