混合编程，安卓程序加载网页内容

最新推荐文章于 2022-02-13 10:49:45 发布

ck1298677502

最新推荐文章于 2022-02-13 10:49:45 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/ck1298677502/article/details/52016183

版权

public class MainActivity extends AppCompatActivity {

  ProgressBar mProgressBar;
    WebView mWebView;
    //第二步 定义JAVAScript交互接口

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mProgressBar = (ProgressBar) findViewById(R.id.http_progressbar);
        mWebView = (WebView) findViewById(R.id.http_webview);

        setJavascriptInterface();
        setWebVieClient();

        loadData();

    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();// 返回前一个页面
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }


    public void setWebVieClient(){
        mWebView.setWebViewClient(new WebViewClient(){
            /**
             * 请求的url嵌入webview显示
             */
            @Override
            public boolean shouldOverrideUrlLoading(WebView webview, String url) {
                webview.loadUrl(url);
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

        });

        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                Logs.e("onProgressChanged :"+newProgress);
                mProgressBar.setProgress(newProgress);
                if(newProgress == 100){
                    mProgressBar.setVisibility(newProgress);
                }

            }
        });

    }


    /**
     * 设置javaScript与android原生应用交互接口
     */
    public void setJavascriptInterface() {
        //第一步 设置javascript 可用
        mWebView.getSettings().setJavaScriptEnabled(true);

        //第三步 添加javaScript交互接口到webview
        MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface() {
            @JavascriptInterface

            public void showToast() {
                Logs.e("showToast");
                startActivity(new Intent(MainActivity.this, Come_Activity.class));

            }

            @Override
            public String htmlToNativeToJs() {
                Logs.e("htmlToNativeToJs");
                return "http://it.warmtel.com";
            }
        };
        /**
         * WebView.addJavascriptInterface(Object,String)方法
         * Object 交互接口对象
         * String 交互接口名称
         */
        mWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface");
    }

    /**
     * webView加载数据三种方式
     */
    public void loadData() {
//      mWebView.loadUrl("http://192.168.5.5:8080/webapp/login.html");
        mWebView.loadUrl("http://192.168.5.10/serv-app/langyabang.html");
//      mWebView.loadDataWithBaseURL(null,"<html><body><h1>你好 loadDataWithBaswUrl</h1></body></html>","text/html","UTF-8",null);
    }
    interface MyJavaScriptInterface {
        void showToast();
        String htmlToNativeToJs();
    }


}

<head>
    <title>琅琊榜</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
   
   <meta name="apple-mobile-web-app-capable" content="YES">
   <link rel="stylesheet" href="mycss.css" type="text/css" />
   <style type="text/css">
       .bz{
           width: 320px;
       margin-left: -10px;
       margin-right: -10px;
       min-height: 385px;
       border:4px #BCBDC0 solid;
       background-image:url(lyb.jpg);
       background-repeat:no-repeat;
       background-position:center;
       }
       .divstory{
           margin-left:20px;
           margin-top:1px;

           }
       .actor{
           margin-left:40px;
           margin-top:5px;

           }
    </style>
   <script>Java scirpt 语言的function方法，类似于swich - case语法
              function mylog()
           {
               //alert("Hello World!");
              //var url = window.MyJavaScriptInterface.htmlToNativeToJs();接口定义的方法
               //window.location.href = url; //跳转到指定url
              //window.MyJavaScriptInterface.showToast();
              window.location.href = "http://192.168.5.10/serv-app/story.html"; //跳转到指定url
           }
           function myFunction()
           {

               window.MyJavaScriptInterface.showToast();
              }
           function seevidio()
           {
               window.location.href = "http://www.le.com/ptv/vplay/23544897.html?ch=baidu_v&frp=v.baidu.com%2Fv&vfm=bdvppzq";
           }
           function huge()
           {
               window.location.href = "http://192.168.5.10/serv-app/胡歌.html"
           }
       </script>
</head>

<body bgcolor="#C6CDD3">
<div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#C6CDD3">
   <div class="bz">

   </div>
   <div class="divstory" >
       <button οnclick="mylog()">故事情节</button>
        <button οnclick="myFunction()">人物设定</button>
        <button οnclick="seevidio()">点击观看</button>
    </div>
    <div class="actor">
       <img οnclick="huge()" src="hg.jpg"/>
         <img src="wangkai.jpg"/>
       <img src="liutao.jpg"/>
        <img src="feiliu.jpg"/>
       <img src="moushi.jpg"/>
    </div>


</div>
</body>
</html>
xml文档

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"  >
    <ProgressBar
        android:id="@+id/http_progressbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:max="100"
        />
    <WebView
        android:id="@+id/http_webview"
        android:layout_below="@id/http_progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>