原生+H5開發之：Android webview配置

本文轉載自查看原文 2018-04-12 15:17 6720 H5/ Android

在上一篇文章Android 原生開發、H5、React-Native開發特點，我們可以了解到三種Android開發方式的區別和優缺點。[Android開發：原生+H5]系列的文章，將主要講解Android原生+H5開發相關，這一節主要是Android原生+H5開發時要使用WebView，要使WebView正確的顯示加載H5頁面和功能需要做相關的配置。

AndroidManifest權限添加

　　請一定、務必在AndroidManifest中添加如下權限，否則是無法正常打開顯示H5頁面的。
　　這個一定要單獨拿出來強調一下，以防你其他代碼啊，配置啊什么的都寫好了，但就是不顯示，然后你就各種找問題，發愁，惱怒，耽誤時間。因為樓主就曾經犯過這樣的錯誤，真的被自己粗心蠢哭，哭哭哭……

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

WebView使用步驟

1. 添加AndroidManifest權限。

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

2. 布局文件

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical"
 8     tools:context="com.app.www.webapp.SecondActivity">
 9 
10     <WebView
11         android:id="@+id/webView"
12         android:layout_width="match_parent"
13         android:layout_height="match_parent" />
14 
15 </LinearLayout>

3. 獲取WebView對象。

1 webView = this.findViewById(R.id.webView);

4. WebSettings配置WebView。下面有具體的配置說明。
5. 設置加載地址。

1 webView.loadUrl(url);

　　到這一步為止，WebView就可以正常的顯示了，如果我們想要對WebView做進一步的監聽處理，就需要下面的設置。
　　
6. 設置WebViewClient。 WebViewClient主要是監聽WebView加載進程，平常我們對webview加載的處理，例如加一些進度條、跳轉設置之類的都是通過WebViewClient類完成。在下面我們會講到。
7. 設置WebChromeClient。有時候我們不想原生去調用手機的拍照和相冊，如果我們想要用H5去掉用的話，我們需要去重新WebChromeClient類，並進行設置，這樣H5才能成功的調用拍照和相冊。下面會細講。

WebSettings類配置

 1         /**支持Js**/
 2         setting.setJavaScriptEnabled(true);
 3 
 4         /**設置自適應屏幕，兩者合用**/
 5         //將圖片調整到適合webview的大小
 6         setting.setUseWideViewPort(true);
 7         // 縮放至屏幕的大小
 8         setting.setLoadWithOverviewMode(true);
 9 
10         /**縮放操作**/
11         // 是否支持畫面縮放，默認不支持
12         setting.setBuiltInZoomControls(true);
13         setting.setSupportZoom(true);
14         // 是否顯示縮放圖標，默認顯示
15         setting.setDisplayZoomControls(false);
16         // 設置網頁內容自適應屏幕大小
17         setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
18 
19         /**設置允許JS彈窗**/
20         setting.setJavaScriptCanOpenWindowsAutomatically(true);
21         setting.setDomStorageEnabled(true);
22 
23         /**關閉webview中緩存**/
24         setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
25         /**設置可以訪問文件 **/
26         setting.setAllowFileAccess(true);
27         setting.setAllowFileAccessFromFileURLs(true);
28         setting.setAllowUniversalAccessFromFileURLs(true);

WebViewClient類

　　如果不進行設置WebViewClient的話，我們的WebView通常會跳轉到手機自帶的瀏覽器去進行顯示，但是我們想要的是在app內顯示，所以我們需要對WebViewClient進行設置。對這個類的使用我們之前在 Android 網絡連接——WebView這篇文章中也講過，這里我就只復制一下。

WebView加載失敗設置

　　我們在使用瀏覽器時，我們經常會看到，如果頁面加載失敗會出現一個提示的頁面。我們自己的瀏覽器當然也少不了這個功能。設置加載頁面失敗調用WebView的setWebViewClient()方法，傳入匿名WebViewClient對象，重寫onReceivedError()方法，在該方法內進行處理。

1 webView.setWebViewClient(new WebViewClient() {
2     /*
3     網絡連接錯誤時調用
4     */
5     @Override
6     public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
7         super.onReceivedError(view, errorCode, description, failingUrl);
8     }
9 });

WebView網頁加載進度條顯示

 1         webView.setWebChromeClient(new WebChromeClient() {
 2             @Override
 3             public void onProgressChanged(WebView view, int newProgress) {
 4                 super.onProgressChanged(view, newProgress);
 5                 progressBar.setProgress(newProgress);//網絡加載時設置進度條進度
 6             }
 7         });
 8         webView.setWebViewClient(new WebViewClient() {
 9             /*
10             網絡開始加載時調用
11             */
12             @Override
13             public void onPageStarted(WebView view, String url, Bitmap favicon) {
14                 super.onPageStarted(view, url, favicon);
15                 progressBar.setVisibility(View.VISIBLE);//設置顯示進度條
16             }
17 
18             /*
19             網絡加載結束時調用
20             */
21             @Override
22             public void onPageFinished(WebView view, String url) {
23                 super.onPageFinished(view, url);
24                 progressBar.setVisibility(View.GONE);//設置去除進度條
25             }
26         });

WebChromeClient類

　　H5想要調用我們手機的相冊和拍照，直接調用是不行的，我們必須在WebView設置中進行設置。重寫WebChromeClient類。

  1 import android.annotation.SuppressLint;
  2 import android.annotation.TargetApi;
  3 import android.app.Activity;
  4 import android.content.ClipData;
  5 import android.content.ComponentName;
  6 import android.content.ContentUris;
  7 import android.content.Context;
  8 import android.content.Intent;
  9 import android.content.pm.PackageManager;
 10 import android.content.pm.ResolveInfo;
 11 import android.database.Cursor;
 12 import android.graphics.Bitmap;
 13 import android.net.Uri;
 14 import android.os.Build;
 15 import android.os.Environment;
 16 import android.os.Parcelable;
 17 import android.provider.DocumentsContract;
 18 import android.provider.MediaStore;
 19 import android.support.v7.app.AppCompatActivity;
 20 import android.os.Bundle;
 21 import android.view.KeyEvent;
 22 import android.webkit.ValueCallback;
 23 import android.webkit.WebChromeClient;
 24 import android.webkit.WebSettings;
 25 import android.webkit.WebView;
 26 import android.webkit.WebViewClient;
 27 import android.widget.Toast;
 28 
 29 import java.io.File;
 30 import java.util.ArrayList;
 31 import java.util.List;
 32 
 33 import static android.view.KeyEvent.KEYCODE_BACK;
 34 
 35 public class SecondActivity extends Activity {
 36     private WebView webView;
 37     private Intent intent;
 38     private String url;
 39     /**
 40      * 表單的數據信息
 41      */
 42     private ValueCallback<Uri> mUploadMessage;
 43     private ValueCallback<Uri[]> mUploadCallbackAboveL;
 44     /**
 45      * 表單的結果回調</span>
 46      */
 47     private final static int FILECHOOSER_RESULTCODE = 1;
 48     private Uri imageUri;
 49     @Override
 50     protected void onCreate(Bundle savedInstanceState) {
 51         super.onCreate(savedInstanceState);
 52         setContentView(R.layout.activity_second);
 53         intent = getIntent();
 54         url = intent.getStringExtra("url");
 55         Toast.makeText(this, url, Toast.LENGTH_SHORT).show();
 56         webView = this.findViewById(R.id.webView);
 57 
 58         initWebView();
 59 //        this.webView.loadUrl("http://192.168.1.105:8099/photo");
 60         webView.loadUrl(url);
 61 
 62         webView.setWebViewClient(new WebViewClient() {
 63             @Override
 64             public boolean shouldOverrideUrlLoading(WebView view, String url) {
 65                 return super.shouldOverrideUrlLoading(view, url);
 66             }
 67 
 68             @Override
 69             public void onPageStarted(WebView view, String url, Bitmap favicon) {
 70                 super.onPageStarted(view, url, favicon);
 71             }
 72 
 73             @Override
 74             public void onPageFinished(WebView view, String url) {
 75                 super.onPageFinished(view, url);
 76             }
 77         });
 78         webView.setWebChromeClient(new OpenFileChromeClient());
 79     }
 80 
 81     public class OpenFileChromeClient extends WebChromeClient {
 82 
 83         @Override
 84         public boolean onShowFileChooser(WebView webView,
 85                                          ValueCallback<Uri[]> filePathCallback,
 86                                          FileChooserParams fileChooserParams) {
 87             mUploadCallbackAboveL = filePathCallback;
 88             take();
 89             return true;
 90         }
 91 
 92         /**
 93          * Android < 3.0 調用這個方法
 94          *
 95          * @param uploadMsg
 96          */
 97         public void openFileChooser(ValueCallback<Uri> uploadMsg) {
 98             mUploadMessage = uploadMsg;
 99             take();
100         }
101 
102         /**
103          * Android < 3.0 調用這個方法
104          *
105          * @param uploadMsg
106          * @param acceptType
107          */
108         public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
109             mUploadMessage = uploadMsg;
110             take();
111         }
112 
113         /**
114          * Android > 4.1.1 調用這個方法
115          *
116          * @param uploadMsg
117          * @param acceptType
118          * @param capture
119          */
120         public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
121             mUploadMessage = uploadMsg;
122             take();
123         }
124     }
125 
126 
127     private void initWebView() {
128         WebSettings setting = webView.getSettings();
129         /**支持Js**/
130         setting.setJavaScriptEnabled(true);
131 
132         /**設置自適應屏幕，兩者合用**/
133         //將圖片調整到適合webview的大小
134         setting.setUseWideViewPort(true);
135         // 縮放至屏幕的大小
136         setting.setLoadWithOverviewMode(true);
137 
138         /**縮放操作**/
139         // 是否支持畫面縮放，默認不支持
140         setting.setBuiltInZoomControls(true);
141         setting.setSupportZoom(true);
142         // 是否顯示縮放圖標，默認顯示
143         setting.setDisplayZoomControls(false);
144         // 設置網頁內容自適應屏幕大小
145         setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
146 
147         /**設置允許JS彈窗**/
148         setting.setJavaScriptCanOpenWindowsAutomatically(true);
149         setting.setDomStorageEnabled(true);
150 
151 
152         /**關閉webview中緩存**/
153         setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
154         /**設置可以訪問文件 **/
155         setting.setAllowFileAccess(true);
156         setting.setAllowFileAccessFromFileURLs(true);
157         setting.setAllowUniversalAccessFromFileURLs(true);
158 
159     }
160 
161 
162     @Override
163     protected void onActivityResult(int requestCode, int resultCode, Intent data) {
164         super.onActivityResult(requestCode, resultCode, data);
165         if (requestCode == FILECHOOSER_RESULTCODE) {
166             if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
167             Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
168             if (mUploadCallbackAboveL != null) {
169                 onActivityResultAboveL(requestCode, resultCode, data);
170             } else if (mUploadMessage != null) {
171 
172                 if (result != null) {
173                     String path = getPath(getApplicationContext(),
174                             result);
175                     Uri uri = Uri.fromFile(new File(path));
176                     mUploadMessage
177                             .onReceiveValue(uri);
178                 } else {
179                     mUploadMessage.onReceiveValue(imageUri);
180                 }
181                 mUploadMessage = null;
182 
183 
184             }
185         }
186     }
187 
188     @Override
189     public boolean onKeyDown(int keyCode, KeyEvent event) {
190         if ((keyCode == KEYCODE_BACK) && webView.canGoBack()) {
191             webView.goBack();
192             return true;
193         }
194         return super.onKeyDown(keyCode, event);
195     }
196 
197     @SuppressWarnings("null")
198     @TargetApi(Build.VERSION_CODES.BASE)
199     private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
200         if (requestCode != FILECHOOSER_RESULTCODE
201                 || mUploadCallbackAboveL == null) {
202             return;
203         }
204 
205         Uri[] results = null;
206 
207         if (resultCode == Activity.RESULT_OK) {
208 
209             if (data == null) {
210 
211                 results = new Uri[]{imageUri};
212             } else {
213                 String dataString = data.getDataString();
214                 ClipData clipData = data.getClipData();
215 
216                 if (clipData != null) {
217                     results = new Uri[clipData.getItemCount()];
218                     for (int i = 0; i < clipData.getItemCount(); i++) {
219                         ClipData.Item item = clipData.getItemAt(i);
220                         results[i] = item.getUri();
221                     }
222                 }
223 
224                 if (dataString != null)
225                     results = new Uri[]{Uri.parse(dataString)};
226             }
227         }
228         if (results != null) {
229             mUploadCallbackAboveL.onReceiveValue(results);
230             mUploadCallbackAboveL = null;
231         } else {
232             results = new Uri[]{imageUri};
233             mUploadCallbackAboveL.onReceiveValue(results);
234             mUploadCallbackAboveL = null;
235         }
236 
237         return;
238     }
239 
240 
241     private void take() {
242         File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "MyApp");
243         // Create the storage directory if it does not exist
244         if (!imageStorageDir.exists()) {
245             imageStorageDir.mkdirs();
246         }
247         File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
248         imageUri = Uri.fromFile(file);
249 
250         final List<Intent> cameraIntents = new ArrayList<Intent>();
251         final Intent captureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
252         final PackageManager packageManager = getPackageManager();
253         final List<ResolveInfo> listCam = packageManager.queryIntentActivities(captureIntent, 0);
254         for (ResolveInfo res : listCam) {
255             final String packageName = res.activityInfo.packageName;
256             final Intent i = new Intent(captureIntent);
257             i.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
258             i.setPackage(packageName);
259             i.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
260             cameraIntents.add(i);
261 
262         }
263         Intent i = new Intent(Intent.ACTION_GET_CONTENT);
264         i.addCategory(Intent.CATEGORY_OPENABLE);
265         i.setType("image/*");
266         Intent chooserIntent = Intent.createChooser(i, "Image Chooser");
267         chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));
268         SecondActivity.this.startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);
269     }
270 
271     @SuppressLint("NewApi")
272     @TargetApi(Build.VERSION_CODES.KITKAT)
273     public static String getPath(final Context context, final Uri uri) {
274         final boolean isKitKat = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT;
275 
276         // DocumentProvider
277         if (isKitKat && DocumentsContract.isDocumentUri(context, uri)) {
278             // ExternalStorageProvider
279             if (isExternalStorageDocument(uri)) {
280                 final String docId = DocumentsContract.getDocumentId(uri);
281                 final String[] split = docId.split(":");
282                 final String type = split[0];
283 
284                 if ("primary".equalsIgnoreCase(type)) {
285                     return Environment.getExternalStorageDirectory() + "/" + split[1];
286                 }
287 
288                 // TODO handle non-primary volumes
289             }
290             // DownloadsProvider
291             else if (isDownloadsDocument(uri)) {
292 
293                 final String id = DocumentsContract.getDocumentId(uri);
294                 final Uri contentUri = ContentUris.withAppendedId(Uri.parse("content://downloads/public_downloads"), Long.valueOf(id));
295 
296                 return getDataColumn(context, contentUri, null, null);
297             }
298             // MediaProvider
299             else if (isMediaDocument(uri)) {
300                 final String docId = DocumentsContract.getDocumentId(uri);
301                 final String[] split = docId.split(":");
302                 final String type = split[0];
303 
304                 Uri contentUri = null;
305                 if ("image".equals(type)) {
306                     contentUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
307                 } else if ("video".equals(type)) {
308                     contentUri = MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
309                 } else if ("audio".equals(type)) {
310                     contentUri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
311                 }
312 
313                 final String selection = "_id=?";
314                 final String[] selectionArgs = new String[]{split[1]};
315 
316                 return getDataColumn(context, contentUri, selection, selectionArgs);
317             }
318         }
319         // MediaStore (and general)
320         else if ("content".equalsIgnoreCase(uri.getScheme())) {
321             return getDataColumn(context, uri, null, null);
322         }
323         // File
324         else if ("file".equalsIgnoreCase(uri.getScheme())) {
325             return uri.getPath();
326         }
327 
328         return null;
329     }
330 
331 
332     /**
333      * Get the value of the data column for this Uri. This is useful for
334      * MediaStore Uris, and other file-based ContentProviders.
335      *
336      * @param context       The context.
337      * @param uri           The Uri to query.
338      * @param selection     (Optional) Filter used in the query.
339      * @param selectionArgs (Optional) Selection arguments used in the query.
340      * @return The value of the _data column, which is typically a file path.
341      */
342     public static String getDataColumn(Context context, Uri uri, String selection, String[] selectionArgs) {
343         Cursor cursor = null;
344         final String column = "_data";
345         final String[] projection = {column};
346 
347         try {
348             cursor = context.getContentResolver().query(uri, projection, selection, selectionArgs, null);
349             if (cursor != null && cursor.moveToFirst()) {
350                 final int column_index = cursor.getColumnIndexOrThrow(column);
351                 return cursor.getString(column_index);
352             }
353         } finally {
354             if (cursor != null) cursor.close();
355         }
356         return null;
357     }
358 
359 
360     /**
361      * @param uri The Uri to check.
362      * @return Whether the Uri authority is ExternalStorageProvider.
363      */
364     public static boolean isExternalStorageDocument(Uri uri) {
365         return "com.android.externalstorage.documents".equals(uri.getAuthority());
366     }
367 
368 
369     /**
370      * @param uri The Uri to check.
371      * @return Whether the Uri authority is DownloadsProvider.
372      */
373     public static boolean isDownloadsDocument(Uri uri) {
374         return "com.android.providers.downloads.documents".equals(uri.getAuthority());
375     }
376 
377 
378     /**
379      * @param uri The Uri to check.
380      * @return Whether the Uri authority is MediaProvider.
381      */
382     public static boolean isMediaDocument(Uri uri) {
383         return "com.android.providers.media.documents".equals(uri.getAuthority());
384     }
385 }

完整代碼下載地址：下載地址

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android原生和H5交互；Android和H5混合開發；WebView點擊H5界面跳轉到Android原生界面。 android原生登錄+webview訪問h5同步登錄狀態 H5在WebView上開發小結 Android WebView與H5聯調技巧 Android WebView 支持H5 DOM Storage Android WebView 支持H5的定位Js android內嵌H5頁（webview）如何定位基於H5的混合開發介紹（一）WebView WebView 安卓原生java與h5，js交互如何判斷app的頁面是原生的還是H5的webview頁面