WebView(一)之WebView与服务器端的Js交互

最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可。当然在这里我们当然用webview控件喽

WebApp的好处:

在应用里嵌套web的好处有这么几点,1,跨平台,不仅可以在Android上运行,也可以在ios上运行,而且样式什么的绝对统一,因为都是加载的html,用的都是同一套html

2,修改灵活,容易更新版本。例如大家常看到的app里面的广告页,大多是嵌套的html,这样只要后台替换一下页面的内容,手机端就会改变展现内容,跟新版本也是如此,因为界面什么得成了在服务器端,所以要是想跟新界面什么得,只需要在后台修改在发布即可,不需要用户再重新下载app。这个好处我觉得对ios是有很大帮助的,哈哈,绕开苹果审核嘛,由于html我们可以随意替换,审核时可以把违规的部分隐藏,上线之后就可以随意改了,哈哈,你们懂得。

当然,开发webapp当然也有局限,就是网速什么的,这个咱无法改变,这里也不废话。不过在开发中呢,如果只是页面之间的交互的话,我们只需提供一个webview控件即可,

可是要是涉及到和手机设备或软件交互的话(如打开相册,摄像头等等),这就需要我们和页面经行js交互,js交互可以说是双向的,一种是,我们调用页面的,就是调用服务端的js方法,另一个呢则是服务端调用我们Android里面的代码,调用其实很简单,下面说一下怎样调用。

当然我们先等有一个WebView,先创建一个Activity,然后设置布局,穿件WebView,布局和Activity如下:

activity_webview.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><WebViewandroid:id="@+id/webview"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

然后是activity,

WebViewActivity.activity

import android.app.Activity;import android.os.Bundle;import android.webkit.WebSettings;import android.webkit.WebView;public class WebViewActivity extends Activity {private static final String url = ":8080/song/test.html";private WebView mWebView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_webviw);initView();}private void initView() {mWebView = (WebView) findViewById(R.id.webview);//或的WebView的SettingWebSettings settings = mWebView.getSettings();//设置支持js,看方法名字就知道啥意思settings.setJavaScriptEnabled(true);//加载网页路径mWebView.loadUrl(url);}}

上面就是一个简单的webview,然后很常规的设置属性,然后再加载要加载的页面路径,这样一般就可在网页里面自由点击跳转了,但是要和手机交互的话需要我们写js交互的代码了。

首先说怎样调用服务器端的js方法,很简单,和加载网页路径基本上一样如下:

mWebView.loadUrl("javascript:forSmallPhoto()");

就这么简单的一句话你就可以调用服务器端的js方法了,其中javascript:是固定写法forSmallPhoto()则是服务端的js方法名字,这是一个无参数的方法,当然也可以传参,这需要我们拼凑字符串,mWebView.loadUrl("javascript:forSmallPhoto(‘" + data + "’)");其中data就是一个变量,也就是你要传的参数值,当然也可以支持多参数传送,这得看你服务器端的js方法有几个参数了,其实就是我们调用一个方法一样,只不过这个方法是在服务器端的。我们调用服务器js,是为了,当Android完成某些功能后,需要告诉服务器,则我们可以调用js来告诉他我们完成了。

在一种就是,服务端调用我们的Android代码了,这里Android中也是封装好了接口

我们可以通过void android.webkit.WebView.addJavascriptInterface(Object object, String name)的方法来实现服务器端调用我们的代码,其中这个方法有两个参数,一个是object,另一个是String类型的; 只要webview调用了这个方法就可以调用我们的代码了。而要调用的代码我们写在Object里面,首先我们就先实现这个Object,我们创建一个类,JavaScriptInterface。Android中APi Guides中提供的Demo中取得累的名字是JavaScriptInterface,那我们也用这个名字把。然后实现它,然后随便在里面写一个方法,如下面

JavaScriptInterface.java类

import java.util.HashMap;import java.util.Map;import android.content.Context;import android.os.Handler;import android.os.Message;import android.text.TextUtils;import android.util.Log;import android.webkit.JavascriptInterface;import android.widget.Toast;/** * * Title: JavaScriptInterface.java Description: * * @author Liusong * @version V1.0 */public class JavaScriptInterface {/** Instantiate the interface and set the context */public JavaScriptInterface() {}/** Show a toast from the web page */@JavascriptInterfacepublic void showToast() {Log.i("TAG", "调用成功==================》》》》》");}}

这样就完成了一个简单的JavaScriptInterface类,这个类的方法是自己随便写的,其中,先说一下这里要注意的几点,首先重要的@JavascriptInterface这个注解,你会发现去掉也不会报错,但是这个是很早重要的,如果你想让服务器端调用你的方法,,你就要加上这个注解@JavascriptInterface。在4.4api中说道,一定要加这个注解,负责调用不会成功,其实我在开发中,用红米1s,4.3的系统,就没法调用成功了,当时还纳闷,因为当时手里的文档是4.2的,很是郁闷。所以在这里强掉,一定要在自己写的方法前面加上@JavascriptInterface。

有一种旅行,叫单车旅行。它没有奢侈准备,

WebView(一)之WebView与服务器端的Js交互

相关文章:

你感兴趣的文章:

标签云: