安卓高级 WebView的使用到 js交互

我们先来学习 怎么使用再到用js和安卓源生方法交互

WebView简单使用

此部分转载并做了补充 原博客
原因:比较简单不是很想在写,我只要写js交互部分

  1. WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用。

  2. webview有两个方法:setWebChromeClient 和 setWebClient

  3. setWebClient:主要处理解析,渲染网页等浏览器做的事情

  4. setWebChromeClient:辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等

  5. WebViewClient就是帮助WebView处理各种通知、请求事件的。

在AndroidManifest.xml设置访问网络权限:

<uses-permission android:name="android.permission.INTERNET"/>

控件:

<WebView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"
    />

用途一:加载本地/Web资源
安卓高级 WebView的使用到 js交互_第1张图片
example.html 存放在assets文件夹内

调用WebView的loadUrl()方法,

加载本地资源

webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/example.html");

加载web资源:

webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://baidu.com");

用途二:在程序内打开网页

安卓高级 WebView的使用到 js交互_第2张图片

创建一个自己的WebViewClient,通过setWebViewClient关联

package com.example.testopen;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);             
        init();

    }


    private void init(){
        webView = (WebView) findViewById(R.id.webView);
        //WebView加载web资源
       webView.loadUrl("http://baidu.com");
        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
       webView.setWebViewClient(new WebViewClient(){
           @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
               //返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
             view.loadUrl(url);
            return true;
        }
       });
    }

}

用途三:

如果访问的页面中有Javascript,则webview必须设置支持Javascript

//启用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

用途四:

如果希望浏览的网页后退而不是退出浏览器,需要WebView覆盖URL加载,让它自动生成历史访问记录,那样就可以通过前进或后退访问已访问过的站点。

//改写物理按键——返回的逻辑
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // TODO Auto-generated method stub
        if(keyCode==KeyEvent.KEYCODE_BACK)
        {
            if(webView.canGoBack())
            {
                webView.goBack();//返回上一页面
                return true;
            }
            else
            {
                System.exit(0);//退出程序
            }
        }
        return super.onKeyDown(keyCode, event);
    }

用途五:判断页面加载过程

webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                // TODO Auto-generated method stub
                if (newProgress == 100) {
                    // 网页加载完成

                } else {
                    // 加载中

                }

            }
        });

用途六:缓存的使用

优先使用缓存

webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

本人补充

还有一些用法由于原作者没写所以我在这里补充下 从这里开始就是原创部分:

需求:假设后台给你返回的是html标签(没有头尾标签 简单说就是没有)

//假设返回的字符传如下所示:

package a.com.jswebproject.bean;

/**

 */
public class JString {
    public static final String  CONTENT = "

\n" + "\t光阴荏苒,岁月飞逝如电。 \n" + "

\n"
+ "

\n" + "\t回眸花落时,2015就这样悄然而过…… \n" + "

\n"
+ "

\n" + "\t清浅时光,积聚如山的往事随风游走, \n" + "

\n"
+ "

\n" + "\t带着我们内心所有的牵念,尘封于深深的记忆里。 \n" + "

\n"
+ "

\n" + "\t记忆,从此被定格! \n" + "

\n"
+ "

\n" + "\t心生温暖,四季平安!每逢岁杪,将昔年一一盘点…… \n" + "

\n"
+ "

\n" + "\t那一路,我们曾经怎样走过? \n" + "

\n"
+ "

\n" + "\t那一程,谁又曾从心坎上路过? \n" + "

\n"
+ "

\n" + "\t诚然,认识了一些人,却也经历过许多的事。 \n" + "

\n"
+ "

\n" + "\t浮生若,尘缘辗转。 \n" + "

\n"
+ "

\n" + "\t在心里,就让那些愁殇,随风飘逝吧! \n" + "

\n"
+ "

\n" + "\t站在20152016年的界碑上,不禁忍不住再次回首—— \n" + "

\n"
+ "

\n" + "\t到底,有多少得失能够沉淀于心? \n" + "

\n"
+ "

\n" + "\t究竟,有多少回忆值得永久珍藏? \n" + "

\n"
+ "

\n" + "\t生命中,总有一些人会成为彼此的匆匆过客; \n" + "

\n"
+ "

\n" + "\t岁月里,总有一些事会流逝而淡出我们的心际; \n" + "

\n"
+ "

\n" + "\t经年间,总有一些情感在磨砺中教会我们成熟。 \n" + "

\n"
+ "

\n" + "\t经历人生中的点点滴滴,阅历因此而丰硕起来。 \n" + "

\n"
+ "

\n" + "\t学会淡定从容,坦然生活 \n" + "

\n"
+ "

\n" + "\t学会心存善念,静泊尘心。 \n" + "

\n"
+ "

\n" + "\t活在当下,最美!在当下, \n" + "

\n"
+ "

\n" + "\t给与自己一份简单的期许,又或是 \n" + "

\n"
+ "

\n" + "\t一个纯真的祈愿! \n" + "

\n"
+ "

\n" + "\t让明天安然,让未来更好! \n" + "

\n"
+ "

\n" + "\t跨年之,我倚窗凝望,北极星光,绚烂如花! \n" + "

\n"
+ "

\n" + "\t祈愿,2016年每一个阳光灿烂的日子, \n" + "

\n"
+ "佑你,佑我,佑他! \n" + "

\n" + "\t
\n"
+ "

"
; }

那我们看看 具体代码怎么加载上面的文字吧

package a.com.jswebproject;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

import qianfeng.com.jswebproject.bean.JString;

public class JsonActivity extends AppCompatActivity {
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_json);
        initView();
        setData();
    }

    private void setData() {
        //如果你直接new WebChromeClient() 或者 new WebClient()默认在程序内打开
        mWebView.setWebChromeClient(new WebChromeClient());
        //params1  baseUrl 基地址 如果你需要在加载的页面里面进行相应操作,那么提交的网址会在基地址的基础上进行添加
        //params2  你要加载的html
        //params3 你加载的html的类型 (text/html) (text/javascript)
        //params4 编码  "UTF-8" "GBK"
        //params5 你访问历史路径
        //http://baidu.com?username=lla&password=123456;
        mWebView.loadDataWithBaseURL(null, JString.CONTENT,"text/html","UTF-8",null);
    }

    private void initView() {
        mWebView = (WebView) findViewById(R.id.wv_json_test);
    }
}

再来看个有加载动画的案例 并具有刷新后退前进功能的
安卓高级 WebView的使用到 js交互_第3张图片

package qianfeng.com.jswebproject;

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.ProgressBar;

import qianfeng.com.jswebproject.client.MyChormeClient;
import qianfeng.com.jswebproject.client.MyWebViewClient;

public class NetActivity extends AppCompatActivity {
    private WebView mWebView;
    private ActionBar mActionBar;
    private ProgressBar mProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_net);
        initView();
        initData();
        setData();
        setListener();
    }

    private void initView() {
      mWebView = (WebView) findViewById(R.id.wv_net_test);
      mActionBar =  getSupportActionBar();
      mProgressBar = (ProgressBar) findViewById(R.id.pb_net_show);
    }

   public void onClick(View view){
       if (view!=null){
           switch (view.getId()){
               case R.id.bt_net_advance:
                   if (mWebView.canGoForward()){
                       mWebView.goForward();
                   }
                   break;
               case R.id.bt_net_back:
                   if (mWebView.canGoBack()){
                       mWebView.goBack();
                   }
                   break;
               case R.id.bt_net_refresh:
                   // WebView从新加载(刷新)
                   mWebView.reload();
                   break;
               case R.id.bt_net_stop:
                   // WebView停止加载
                   mWebView.stopLoading();
                   break;
               default:
                   break;
           }
       }
   }

    private void setListener() {
    }

    private void setData() {
        // 加载网址,要确定你的网址是正确的,然后网络正常,最后权限(联网权限)
        mWebView.loadUrl("http://baidu.com");
        // WebView在加载网页时候需要设置一个WebViewClient 用来监听网络加载开始和介绍的
        // 如果你不设置为客户端,他就会调用系统默认的浏览器来给你加载网页
        //mWebView.setWebViewClient(new WebViewClient());
        MyWebViewClient webViewClient = new MyWebViewClient();
        webViewClient.setClientListener(new MyWebViewClient.ClientCallBack() {
            @Override
            public void onStart(String url) {
                // 设置控件显示和隐藏或者消失
                mProgressBar.setVisibility(View.VISIBLE);
            }

            @Override
            public void onFinish(String url) {
             mProgressBar.setVisibility(View.GONE);
            }
        });
        mWebView.setWebViewClient(webViewClient);
        // 给WebView设置一个ChormeClient,来检测网页加载进度和收到的标题
       // mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebChromeClient(new MyChormeClient());
        MyChormeClient client = new MyChormeClient();
        client.setChormeListener(new MyChormeClient.ChormeCallBack() {
            @Override
            public void onProgressChanged(int progress) {
                // 给ProgressBar设置进度
                mProgressBar.setProgress(progress);

            }

            @Override
            public void onReceivedTitle(String title) {
              if (!TextUtils.isEmpty(title)){
                  mActionBar.setTitle(title);
              }
            }
        });
        mWebView.setWebChromeClient(client);
        // 获取WebView的基本设置
        WebSettings settings = mWebView.getSettings();
        // 设置和js交互是否可用
        settings.setJavaScriptEnabled(true);
        mWebView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

    }

    private void initData() {
    }
    // 当用户按下返回键的时候,系统就会调用这个方法
    @Override
    public void onBackPressed() {
        // 判断WebView是否能够返回
        if (mWebView.canGoBack()){
            // 如果能返回,就返回WebView的内容
            mWebView.goBack();
        }else {
            super.onBackPressed();
        }

    }
}

JS方法调用安卓方法

  1. 我们创建一个类 用于给js交互
    如果你的方法想给js调用,此方法必须加上注解@JavascriptInterface

     class JS {
    
            //如果此方法想 被js调用必须写此注解
            @JavascriptInterface
            public void showToast(String msg){
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
    
            @JavascriptInterface
            public void sub(int a,int b){
                Toast.makeText(MainActivity.this, (a+b)+"", Toast.LENGTH_SHORT).show();
            }
        }
  2. 添加此类到webView中

//第二个参数随意 当HTML5工程师想调用js方法时
// 第二个参数名字.方法名 
//如:Android.sub(20,30)
   JS js = new JS();
   webView.addJavascriptInterface(js,"Android");
  1. js 使用时 调用
    先来看看html 源码吧
<html>
<meta charset="UTF-8">
<head>
    <title>这是我的第一个htmltitle>
    <script type="text/javascript">
        function add (a ,b){
         var count = a+b;
         var textHtml = document.getElementById("result_text");
         textHtml.innerHTML = count;
        }
        function showToast(msg){
          Android.showToast(msg);
        }

        function sub(a,b){
          Android.sub(a,b);
        }
        function test(msg){
         var textHtml = document.getElementById("result_text");
         textHtml.innerHTML = msg;
        }


    script>
head>
<body>
<h1>这是啥啊h1>
<h2>这是啥啊h2>
<h3>这是啥啊h3>
<h4>这是啥h4>

<p>CSDN的朋友们一起学习p>
<input value="这是一个button" type="button" onclick="javascript:alert('大家好')"><br/>
<input value="点击我试试" type="button" onclick="add(20,10)"><br/>
<input value="点击调用Android显示一个Toast" type="button" onclick="showToast('这是来着网页的文本')"><br/>
<input value="点击调用Android 进行一个减法" type="button" onclick="sub(90,10)">

<a href="https://baidu.com">点击去百度a>

<form>
    <label><input type="text" name="username">label>
    <label><input type="text" name="password">label>
    <input type="submit" name="点击提交">

form>

<div id="result_text">div>

body>

html>

核心部分:

 <script type="text/javascript">

        function showToast(msg){
          Android.showToast(msg);
        }

        function sub(a,b){
          Android.sub(a,b);
        }
    script>

//感谢同学们
安卓高级 WebView的使用到 js交互_第4张图片

安卓调用JS

  webView.loadUrl("javascript:test('你好啊朋友')");

test为js中的方法

function test(msg){
         var textHtml = document.getElementById("result_text");
         textHtml.innerHTML = msg;
        }

好了大家看下完整一点的代码吧

package com.example.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private WebSettings settings;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebChromeClient(new WebChromeClient());
        settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/haha.html");
        JS js = new JS();
        webView.addJavascriptInterface(js,"Android");

    }


    class JS {

        //如果此方法想 被js调用必须写此注解
        @JavascriptInterface
        public void showToast(String msg){
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void sub(int a,int b){
            Toast.makeText(MainActivity.this, (a+b)+"", Toast.LENGTH_SHORT).show();
        }
    }

    public void onClick(View view) {
        webView.loadUrl("javascript:test('你好啊朋友')");
    }
}

源码:github源码

转载于:https://www.cnblogs.com/muyuge/p/6152108.html

你可能感兴趣的:(安卓高级 WebView的使用到 js交互)