张家小丸子 發表於 2020-7-19 00:44:00

Android开发笔记（十二）——WebView

<p>加载网页</p>
<ul>
<li>加载URL（网络或者本地assets文件夹下面的html文件）</li>
<li>加载html代码</li>
<li>Native和JavaScript相互调用</li>
</ul>
<p>加载网络URL</p>
<pre><code>webview.loadUrl("http://www.tiantiantech.cn");
</code></pre>
<p>加载assets下的html文件</p>
<pre><code>webview.loadUrl("file:///android_asset/test.html");
</code></pre>
<p>加载html代码：</p>
<ul>
<li><code>webview.loadData();</code></li>
<li><code>webview.loadDataWithBaseURL();</code></li>
</ul>
<p>网页的前进后退的方法：</p>
<ul>
<li><code>webview.canGoBack()</code> ：判断当前页面是否还有上一级页面，是否需要返回</li>
<li><code>webview.goBack()</code> ：要后退</li>
<li><code>webview.canGoForward()</code> ：判断当前页面是否还有下一级页面，是否需要前进</li>
<li><code>webview.goForward()</code> ：要前进</li>
<li><code>webview.canGoBackOrForward(int steps)</code> ：是否返回或前进，传入的参数为整数，如果是2，表示向前走两步，如果是-2，表示向后退两步</li>
<li><code>webview.goBackOrForward(int steps)</code> ：要前进或者后退</li>
</ul>
<p>点击返回键，默认是退出当前的Activity，如果希望是Webview内网页后退，则要重写Activity中的 <code>onKeyDown</code> 方法：<br>
<img src="https://img2020.cnblogs.com/blog/1800795/202007/1800795-20200718113731273-1808953280.png" alt="" loading="lazy"></p>
<p><code>return true</code> 表示该事件处理完毕。</p>
<h2 id="具体操作">具体操作</h2>
<p>在 <code>activity_web_view.xml</code> 中写入webview控件，整个屏幕都是webview：</p>
<pre><code>&lt;WebView
    android:id="@+id/wv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    /&gt;
</code></pre>
<p>在 <code>WebViewActivity.java</code> 中添加声明和找到控件：<br>
<img src="https://img2020.cnblogs.com/blog/1800795/202007/1800795-20200718120442263-1610509923.png" alt="" loading="lazy"></p>
<h2 id="加载assets下的html文件加载本地html">加载assets下的html文件（加载本地HTML）</h2>
<p>在main下新建一个assets folder，如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/1800795/202007/1800795-20200718115317750-333479160.png" alt="" loading="lazy"></p>
<p>在这个建好的assets folder中放一个写好的HTML文件：</p>
<p><img src="https://img2020.cnblogs.com/blog/1800795/202007/1800795-20200718115806617-1477533917.png" alt="" loading="lazy"></p>
<p>在 <code>WebViewActivity.java</code> 中添加如下代码：</p>
<pre><code>//加载本地HTML
webview.loadUrl("file:///android_asset/test.html");
</code></pre>
<p>其中 <code>file:///android_asset</code> 是得到 <code>assets</code> 目录，接着后面是具体的文件名称。</p>
<p>运行看是否加载该HTML文件：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/09E08EDA07B74089BF201BCF1A0468BB?ynotemdtimestamp=1595119497747" height="415" width="209">
</div>
<h2 id="加载网络url">加载网络URL</h2>
<p>WebView加载页面需要js的支持，默认是不支持js的，这里需要在加载网络URL之前进行设置：</p>
<pre><code>//加载网络URL
mWvMain.getSettings().setJavaScriptEnabled(true);
mWvMain.loadUrl("https://m.baidu.com");
</code></pre>
<p>现在的效果如下：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/06BE95914F604F90ADCC9AEE061A8EC8?ynotemdtimestamp=1595124300284" height="415" width="209">
</div>
<p>但是退出的话不会退出到上一级页面，而是直接退出button</p>
<p>还有就是在搜索的时候会询问使用以下方式打开，这里是因为webview中的跳转默认不是在当前的webview中继续加载，而是要调用浏览器。<br>
希望在webview中继续加载，重写以下方法：</p>
<pre><code class="language-java">    class MyWebViewClient extends WebViewClient{
      @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            view.loadUrl(request.getUrl().toString());
            return super.shouldOverrideUrlLoading(view, request);
      }

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

      @Override
      public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            Log.d("WebView","onPageFinished!!!!!!!");
      }
    }
</code></pre>
<p>此时 <code>onCreate</code> 函数中的代码如下：</p>
<pre><code class="language-java">//加载网络URL
mWvMain.getSettings().setJavaScriptEnabled(true);
mWvMain.setWebViewClient(new MyWebViewClient());
mWvMain.loadUrl("https://m.baidu.com");
</code></pre>
<p>这时候的效果：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/2E68F024CE0841248112FD5752E4A52E?ynotemdtimestamp=1595124680852" height="415" width="209">
</div>
<p>可以看到在搜索框中进行搜索的时候可以顺利进行，不需要用别的浏览器打开。此时进入页面的时候可以再日志中捕捉到信息：什么时候开始加载，什么时候加载成功：<br>
<img src="https://img2020.cnblogs.com/blog/1800795/202007/1800795-20200718171311063-475589502.png" alt="" loading="lazy"></p>
<p>但是此时点击返回键的时候还是会直接返回上一级Activity而不是上级页面。重写Activity中的 <code>onKeyDown</code> 方法：</p>
<pre><code class="language-java">    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
      if(keyCode==KeyEvent.KEYCODE_BACK &amp;&amp; mWvMain.canGoBack()){
            mWvMain.goBack();
            return true;
      }
      return super.onKeyDown(keyCode, event);
    }
</code></pre>
<p>如果点击的是返回键并且webview可以回退，则回退一级，此时效果入下，可以满足返回上一级页面还没有退出Activity：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/F03814D6A3404FEBBD75B54F3062C367?ynotemdtimestamp=1595124993451" height="415" width="209">
</div>
<p>接下来重写以下方法来实现加载页面的进度条和title显示：</p>
<pre><code>    class MyWebChromeClient extends WebChromeClient{
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);//加载网页进度条的功能
      }

      @Override
      public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            setTitle(title); //把网页上的title设置到Activity的title上去
      }
    }
</code></pre>
<p>在加载网络URL的位置添加：</p>
<pre><code> mWvMain.setWebChromeClient(new MyWebChromeClient());
</code></pre>
<p>运行查看效果：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/FE4018B61FC94086823D246DFCCAA94C?ynotemdtimestamp=1595125332826" height="415" width="209">
</div>
<p>这里 <code>WebChromeClient.java</code> 中的方法可以实现Hybrid开发，使得Native和JavaScript相互调用（通信）。</p>
<h2 id="native和javascript相互调用">Native和JavaScript相互调用</h2>
<h3 id="native执行javascript代码">Native执行JavaScript代码</h3>
<p>在 <code>onPageFinished</code> 函数中添加：</p>
<pre><code>mWvMain.loadUrl("javascript:alert('hello')");
</code></pre>
<p>这里 <code>mWvMain</code> 调用一句js代码，在页面加载结束后弹出对话框，不是native的对话框，而是js弹出的对话框，效果如下：</p>
<div align="center">
<img src="https://note.youdao.com/yws/public/resource/9e302a5acc7b13b195e30b3a2dfcdd93/B48E87A1ABCC435990D85AA21A1BB7D9?ynotemdtimestamp=1595125648786" height="415" width="209">
</div>
<p>还可以使用另一种方法：</p>
<pre><code>mWvMain.evaluateJavascript("javascript:alert('hello')",null);
</code></pre>
<p>可以看到同样效果，就不贴图了。</p>
<h3 id="javascript调用native方法">JavaScript调用Native方法</h3>
<p>可以使用 <code>addJavascriptInterface()</code> 方法，可以在本地写一些java的方法，然后js就可以调用这些方法，这里没有演示</p>
<p>图粘贴不上来，下面的是有道笔记分享</p>
<p>文档：Android开发笔记（十二）——WebView.m...<br>
链接：http://note.youdao.com/noteshare?id=574fcb56d38301553ddbb9c9de6c716a</p><br><br>
来源：https://www.cnblogs.com/yangdd/p/13338355.html
頁: [1]
查看完整版本: Android开发笔记（十二）——WebView