Mobile Development (using webuploader to upload images, client interaction, and modifying alert pop-up windows ),

Mobile Development (using webuploader to upload images, client interaction, and modifying alert pop-up windows ),

A mobile page that I used in my previous internship requires the function of uploading images and clicking the return button of the client prompts (that is, interacting with the client). I have encountered many pitfalls to summarize the problem.

1. Use the webuploader tool of Baidu to upload images

Temporary pitfalls

1.1 deleting an image does not actually completely delete it. You need to add it on the source code.

For more information, see github question https://github.com/fex-team/webuploader/issues/594

1.2 there is a problem with the rotation angle of the uploaded image. For example, the thumbnail of the image displayed on the upload page is displayed horizontally, but the image uploaded to the background is displayed vertically.

See https://github.com/fex-team/webuploader/issues/476 for details

The author mentioned this need to work with the background for implementation, because the front-end implementation will increase the burden.

(In this case, please come back to your brother.

1.3 after fastclick is used, if the screen is clicked too fast, the upload function cannot be activated.

This is the biggest pitfall I have found. It may not be related to this plug-in because it can be used normally without fastclick.

However, I found many articles on the Internet and did not find a solution. Finally, I had to use the most stupid method to solve the problem.

Normally, the most direct and rude way to activate fastclick is

window.addEventListener('load', function() {  FastClick.attach(document.body);}, false);

The problem occurs when the entire body is activated in fastclick. Try again.

What if the upload button is not bound to webuploader?

Https://github.com/ftlabs/fastclick

On fastclick github, activation is ignored.

But after I tried it, I found it didn't work.

Finally, the most stupid way is to obtain each element that needs to be cleared for MS and then activate fastclick one by one.

(This is really stupid, but at present I can't figure out a good way to use it.

1.4 unsolved pitfalls

When using webuploader to upload images on Android, you cannot select multiple images at a time. (You may need help from the android client to find a solution.

On ios, clicking the upload image button will have a ms delay (even if fastclick is used to activate the entire body)

PS: in fact, the most terrible situation is that webuploader's git has not been updated for a long time (terrible ..

 

2. Interaction with the client

Because this page is embedded in the APP to open

A function is to click the return button in the upper left corner of the APP when the user enters the content to pop out a prompt box prompting whether the user has returned

The tool used isWebviewJavascriptBridge

Attachment github address https://github.com/marcuswestin/WebViewJavascriptBridge

Write a function and the client calls it.

Then, you can interact with the client by modifying document. location to inform the client and then judge the client.

A problem occurs here.

(The pop-up window uses the system's built-in alert and confirm pop-up windows. The reason is that if the div-simulated pop-up window can be controlled only in the page area

For example, a div's simulated pop-up window is followed by a mask layer to block other user operations only within the page range.

However, the native app button on the top of the head cannot block the alert pop-up window of the system)

In the 2.1 ios pop-up window, the website will appear.

For example

Work und (remove Mobile End alert confirm url (url) http://blog.5ibc.net/p/21287.html

Okay, the URL is not displayed,! The returned box I used is the confirm pop-up window!

There are two buttons: OK and cancel, and you can click which one to perform the operation!

However, the pop-up window of this method disappears after you click iframe! Cannot judge at all

So I modified the confirm statement myself.

2.2 modify the confirm pop-up window

Add in red

Because the confirm of this rewrite is immediately canceled after the response in a framework.

So it cannot be used to determine

You need to add judgment in it

var wConfirm = window.confirm;window.confirm = function (message,trueFn,flaseFn) {    try {        var iframe = document.createElement("IFRAME");        iframe.style.display = "none";        iframe.setAttribute("src", 'data:text/plain,');        document.documentElement.appendChild(iframe);        var alertFrame = window.frames[0];        var iwindow = alertFrame.window;        if (iwindow == undefined) {            iwindow = alertFrame.contentWindow;        }        var result = iwindow.confirm(message);　　　　if(result){　　　　　　trueFn();        } else{          flaseFn();        }        iframe.parentNode.removeChild(iframe);    }    catch (exc) {        return wConfirm(message);    }}

3. Problems arising from the above alert pop-up window

Encountered in the project

In ios, the alert pop-up window will first execute, for example, alert (1); console. log (2); alert (3 ); ios will first pop up 1 and then pop up 3 and then Output 2. So in some cases, before the alert statement, it was originally intended to hide or change the style of some elements, but in fact ios will pop up the alert window first. but the elements that you want to change have not changed the style. They only click the alert window before they can be executed very badly, right ?! Solution !!!! Put the statements popped up by alert in setTimeout. setTimeout (function () {alert (3) ;}, 0) the principle is that setTimeout will execute the functions in Javascript after it is idle. Therefore, you can put the pop-up window into it to ensure that all the statements before alert are executed. (I don't know if it is correct. This is by myself. if the summary is incorrect, try it)