WebView Project Summary

This job I want to challenge the presentation of the forum page, because I want to know how to use WebView to develop the application.

First, to load a Web page to the local display, you need to create a local webview template file and then parse the background transmitted HTML code, local template files are generally placed under assets, where template files include HTML templates, HTML templates included in the CSS, JS, image, and so on. Why choose the Assets folder to hold these resources, I think because some of the resource folders below res cannot be displayed in the directory structure, and the template files do not need to be mapped to r files at all.

Then you need a tool class to parse the HTML that comes in from the background, then piece together the HTML you want and then load it with WebView's Loaddatawithbaseurl method.

Second, because the business needs to WebView in the picture click Show Album Big Picture, so this work I directly with Universal-image a third-party picture loading library instead of the webview loading picture process. Why use a third party to manage WebView's pictures is based on the following considerations:

1, when a lot of pictures, into the WebView page will wait for the picture to load the completion time. Of course, there are other ways to solve this method, such as in the webviewclient inside the onloadresource inside the load of resources to determine the early end of the loading process, or enter the WebView directly set GetSettings (). Setblocknetworkimage (True), which is set to false directly after the load is completed.

2, do not want the same picture to be downloaded two times, click on the image to enlarge the display want to reuse the local download down the cache. Of course, WebView has its own set of caching mechanisms, including Domstorage,appcache and the database, by default, the use of domstorage, seems to be cached directly in memory, I follow the source, seemingly finally to the third party to achieve, So I don't know much about this cache. AppCache and volley used a bit of caching, using a locally generated journal directory file, and then generating the cache file for each one. This cache directory size and path can be set. I don't know the naming conventions for filenames, because even if you can reuse WebView cached files, it's not enough for business needs. Because when webview in a picture has not been completed, I click on this image, this image will not exist when enlarged display, unless I can directly call WebView loading the mechanism of the image, feel very secretive. Of course, when I find out that the picture doesn't exist, I can also re-use a third-party image to load it, but in this case I downloaded the image two times.

3, click to view the large image when the picture is not loaded complete, want to see a progress bar to show the loading progress of the picture loading, so even if directly with webview loading picture mechanism, unless do in-depth research customization, otherwise can not achieve the above requirements. So direct use of universal-image to manage the large map of WebView.

Use third-party image loading library to manage WebView pictures to do the following steps, in parsing the HTML image link first replace the cost of the default picture (that is, replace

Third, webview embedded in the activity, the general will be configured under WebView setting, presumably as follows:

Webviewsetting.setjavascriptenabled (TRUE);
Webviewsetting.setallowfileaccess (TRUE);
Webviewsetting.setdefaulttextencodingname ("UTF-8");

Mwebview.setwebviewclient (New Mywebviewclient ());
Mwebview.setwebchromeclient (New Webchromeclient ());
Mwebview.addjavascriptinterface (New Webappinterface (this), obj);

The first three sentences are probably meant to allow JS, allow WebView to get the file, set WebView code to Utf-8.
The second sentence is to set the settings WebView webviewclient,webchromeclient and JS and the local Android connection interface. There is no use of Webchromeclie in this project, so there is not much research on it.

webviewclient Bread with onreceivederror,onpagestarted,onpagefinished,shouldoverrideurlloading A series of methods, The first three methods can be custom failed when loading at the beginning, loading at the end of the behavior, the last method can customize the WebView inside the linked click event.

Iv. summary of several pits or experiences that the project meets:

1, even if Universal-image called himself to manage the thread pool, but in the process of managing WebView, I found that the direct call will find his load card UI thread, which is discovered by the output thread ID. The thread that loads the picture always has the same thread ID as the activity that WebView is in, so the loading process is quite a card when there are many pictures. After each loading process, re-create a thread to perform the operation, but here output the thread ID to find the thread ID of the loaded picture and the thread ID that was created does not have a consistent, do not understand why, I will be in the back to study volley, Universal-image and Eventbus three open source frameworks, but at least now resolves a problem with the card UI thread when loading pictures.

2, when the webview need to slide, the use of jquery can achieve better results smoother sliding,

function Jumptolou (PID) {
    $ ("Html,body"). Stop (true);
    $ ("Html,body"). Animate ({scrolltop: $ ("#pid_" +pid). Offset (). Top}, ' normal ');

3. The HTML template specifies this line

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

Expression HTML Adaptive Phone screen, I do not know why the HTML 1px corresponds to the machine is 2px, but in the project I do this conversion. When the background of the HTML to write dead style, more than 360px, that is, the phone screen 720px, then I can only write jquery capture the specified element of the style, and then reduce the width of the label more than 360px half.

4, shouldoverrideurlloading on some machines get webview in the non-English characters will be IDN operation, resulting in the direct read URL is incorrect. I do not want to understand the IDN specific algorithm, in parsing the HTML I will call the relevant link to the IDN.TOASCII in the API, and then in shouldoverrideurlloading use Idn.tounicode transform back.

5. When using CSS to set a fillet for WebView's image, you cannot set a fillet only on the span label that contains the image, you must also apply a fillet to the image label, or the webview of some machines are not supported, such as the red rice handset and most of Samsung's low-end machines.

. Img{position:absolute; left: -40px; top:-5px; display:
Block width:30px;height:30px; -webkit-border-radius:25px; -o-border-radius:25px;
-ms-border-radius:25px; border-radius:25px; Overflow:hidden;background-clip:padding-box;}

T_T, there are a lot of experience has been forgotten, it seems to be a timely summary of the line, otherwise it is equivalent to no precipitation. From now on ~

WebView Project Summary