WebView的简单使用

　

webview

webView是一个网络视图，能加载显示网页，可以将其视为一个浏览器。在使用的过程中需要加入网络权限。

【想看源码点这里】

以下是整理的webView的基础使用

• webView加载Url （加载url将页面显示到APP上，点击时不会跳到浏览器）
• webView显示页面的title （加载url，切换网页会动态显示title）
• webView调用java方法 (点击页面按钮，将页面输入框的内容传到App界面的TextView中)
• webView调用Js方法 (点击App按钮，将App的EditText中的内容传到页面的输入框中)

1.开发准备

（1）在Androidmanifest.xml中开启权限

 <!--上网权限-->
 <uses-permission android:name="android.permission.INTERNET" />

2.开始写代码啦

（1）调用Url

加载url将页面显示到App上，点击时不会跳到浏览器

页面代码，webview.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="WebView的简单使用"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margintop="50dp"></WebView>
</RelativeLayout>

Activity代码

public class WebViewByURL extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(@Nullable Bundle savedinstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        webView = findViewById(R.id.myWebView);
        webView.loadUrl("https://www.baidu.com");
        //重回下面俩个方法，就会在App中打开页面，而不是跳转到浏览器
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onreceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }
        });
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }
}

(2)显示Url的Title

加载url，切换网页会动态显示title

界面布局，webview1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorPrimaryDark">

        <Button
            android:id="@+id/btn_back"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:text="返回" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="20sp"/>

        <Button
            android:id="@+id/btn_refresh"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:text="刷新" />

    </RelativeLayout>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1" />
</LinearLayout>

Activity方法

在加载Url的基础上，修改 webView.setWebChromeClient(new WebChromeClient(){});

 webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onReceivedTitle(WebView view, final String title) {
                Log.e("WebViewTitle","title==="+title);
                if(!TextUtils.isempty(title)){
                    textView.setText(title);
                }else{
                    textView.setText("获取失败");
                }
                super.onReceivedTitle(view, title);
            }
        });

(3)调用Java方法

点击页面按钮，将页面输入框的内容传到App界面的TextView中

开发步骤：

1.允许WebView加载js

webView.getsettings().setJavaScriptEnabled(true);

2.编写js接口类

3.给WebView添加js接口

webView.addJavascriptInterface(obj,name);

界面布局，webview2.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    

<TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="test"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="10dp"/>
</LinearLayout>

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebView</title>
    <style type="text/css">
body {
	background: #e3e7fd;
}

.btn {
	line-height: 40px;
	margin: 10px;
	background: #cccccc;
}


    </style>
</head>
<body>
<h2>WebView</h2>
<span>请输入要传入的值</span>
<p>
    <input type="text" id="input">
</p>
<p id="btn">
    <span class="btn">点我</span>
</p>

<script type="text/javascript">

	/* 点击webView中的按钮之后，将输入框的内容显示到原生app的textView中 */

	var btnEle = document.getelementbyid("btn");
	var inputEle = document.getElementById("input");
	btnEle.addeventlistener("click", function(){
		var str = inputEle.value;
		/* alert(str) */
		if(window.ImoocJsInterface){
			ImoocJsInterface.setValue(str);
		}else{
			alert("ImoocJsInterface找不到，可能不存在");
		}
	});

    <!-- webView的js调用-->
    var remote = function(str){
        inputEle.value=str;
    }

</script>
</body>
</html>

Activity代码

public class WebViewByJava extends AppCompatActivity implements JsBridge {
  //  private static String base_url="http://lj1757620885.6655.la:54746/huashengke/";
    private WebView webView;
    private TextView textView;
    private handler myHandler;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview2);
        //初始化
        initWidgets(savedInstanceState);
        //主线程和页面加载线程不一样
        Log.e("MainActivity","onCreate");

    }

    private void initWidgets(Bundle savedInstanceState) {
        webView = findViewById(R.id.myWebView);
        textView = findViewById(R.id.tv_result);
        myHandler = new Handler();
        //1.允许WebView加载js的代码
        webView.getSettings().setJavaScriptEnabled(true);
        //2.编写js接口类--创建接口类，写接口方法
        //3.给WebView添加js接口
        webView.addJavascriptInterface(new ImoocJsInterface(this),"ImoocJsInterface");
        webView.loadUrl("file:///android_asset/index.html");
    }

    //实现JsBridge的方法
    @Override
    public void setTextViewValue(final String value) {
        //通过handle将页面的value值传到主线程
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                textView.setText(value);
            }
        });
    }
}

(4)调用Js方法

点击App按钮，将App的EditText中的内容传到页面的输入框中

开发步骤：

使用loadUrl方法调用javascript 【 webView.loadUrl(javascript:jsString);】

jsString是调用js代码的字符串

页面布局同上

界面布局，webview3.xml

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    

<EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:hint="test"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确定"/>

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="10dp"/>
</LinearLayout>

Activity代码

public class WebViewByJs extends AppCompatActivity {
    private WebView webView;
    private EditText editText;
    private Button button;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview3);
        initWidgets(savedInstanceState);

    }
    private void initWidgets(Bundle savedInstanceState) {
        webView = findViewById(R.id.myWebView);
        editText = findViewById(R.id.edit);
        button = findViewById(R.id.button);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
        //点击按钮之后，将EditText的内容传到webView的输入框中
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String str = editText.getText().toString().trim();
                //''或者\""
                webView.loadUrl("javascript:if(window.remote){window.remote('"+str+"')}");
            }
        });
    }
}

3.补充

调用java方法时，将页面输入框的内容显示到App组件上，要注意线程问题。

可以通过log看一下，是在不同的线程，若想达到目的，可以通过Handle处理。

4.界面

(1)(2)加载url，动态修改title

(3)java调用

(4)Js调用

文章最后发布于: 2018-09-21 12:04:00

相关阅读

CreateThread使用说明

函数原型： HANDLE CreateThread( LPSECURITY_ATTRIBUTES lpThreadAttributes, SIZE_T dwStackSize, LP

java集合技巧(二)---使用entrySet遍历Map集合KV

HashMap的遍历有两种常用的方法，那就是使用keyset及entryset来进行遍历，但两者的遍历速度是有差别的。第一种: Map map = new Hash

使用心得：文章相似度检测工具靠谱吗？

现如今做SEO最难的不是技术，而是网站内容。拥有高质量的文章对SEO排名帮助很大。很多人以为原创文章就是高质量文章，所以出现了很多

MYSQL使用PMM进行性能监控

文章目录简介安装安装PMMServerPMM client 安装使用pmm-adminOPTIONSpmm-admin add查看各种信息是否能够连接pmm服务器获取PMM客

ActiveMQ消息中间件使用

ActiveMQ介绍 ActiveMQ 是Apache出品，最流行的，能力强劲的开源消息总线。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Prov