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

来源:互联网 发布:淘宝怎么绑定支付宝 编辑:程序博客网 时间:2024/05/14 16:42

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持!


WebView

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


2.png

3.png

Html调用java代码

4.png

如果网页要调用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

5.png

运行应用程序,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.onload= 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);

}


0 0