H5 embedded in native development summary----pits path compatible with Android and iOS

At first, I heard that the development of H5, thought is to do with the modern browser mobile Web page, thinking not to worry about IE, Europe also. To this day, found that the original too young too simple, compatible with IE and compatible with Android and iOS, the latter makes you more mad. Next count the pits that have been trampled. Main points UI display, keyboard, input box and so on. The most vexing problem in solving a bug is not the lack of a solution, but the fact that you haven't found the real reason. Then the phenomenon is difficult to reproduce, each time to publish code, and then to the mobile app to test, simulation. These places can be a lot of energy.

I. UI-related 1. The fixed layout is not supported under Android 4.4.

One of the functions of the fixed layout is to automatically top up the page when the phone keyboard is bouncing up. If not supported, it is also possible to change the absolute location. However, the absolute positioning of some models such as sm-n7508, Huawei M7 still can not top up. iOS does not have this problem.

2. Less than 1px display problem

Some Android machines (such as Xiaomi) have low resolution if the border width is less than 1px. The appearance of a border disappears on the Android machine. The style is a bit strange, iOS doesn't have this problem.

At first thought it was other elements blocked, but the tune for half a day without solution. At the end of the sudden realization is not calculated the height of a decimal result. Then immediately take the whole:

   Math.ceil (Maxline * lineheight));

However, some of the types of Huawei are shown above are not normal, come out a row point.

Fix it again:

   $target. CSS ("height", Math.ceil (Maxline * lineheight)-1);

or use floor. You wonder why there is a decimal height, because this feature is designed to be folded and the height of the DOM needs to be recalculated.

Second, keyboard-related 1.ios keyboard block input box.

This occurs in a very high frequency, the Chinese input method or input methods will be blocked when switching.

The solution is as follows:

    SetInterval (
        if (document.activeElement.className.indexOf ('inputcontent ') >= 0) {            document.activeelement.  Scrollintoviewifneeded ();     }    }, +);  

This is the most useful way to inputcontent the style of the input box. Activeelement represents the element that gets the focus.

2. The keyboard leaves a blank shadow.

This in part of the Android is more obvious, when the keyboard in the active state, suddenly a modal frame, it is obvious to see the keyboard after a short period (less than 1 seconds of appearance) of the blank, and then the page to take down, let people feel flash down. such as Huawei P7. But there is no relationship on iOS, this problem is not, the system is not smooth.

3. Unable to keep keyboard in popup state.

The web actually can't control the keyboard directly, only by letting the input box get focus to let the phone keyboard bounce out, but Samsung SM-N8507V this is not obedient. I have no solution either.

Three, the input box related 1. Fastclick Lock the input box.

In iOS, there will be a few seconds of input box does not react, start also how to think not understand, a variety of attempts, speculation, search found the original is used in the light frame used in the fastclik caused by, the solution is to add a style.

  <id= "content" class></div>     

The solution to is simple, but originally to find this reason, a great deal of effort, the framework of the module one by one, and finally to locate. If you do not add this, not only will lock the input box, each call to focus will set the cursor to run at the front, unable to move to the back. This is a bad experience.

2. Analog placeholder.

Div as the input box itself, adding placeholder is not valid. The use of pseudo-elements.

<id= "content" class= "Inputcontent needsclick" placeholder= "If you have a question, just ask."  Contenteditable= "true"></div>          

. Tools. inputcontent:after {   display: inline-block;     Width: 100%; color: #999; content: attr (Placeholder);}       

This property is then removed and added when the focus is gained and the focus is lost. The advantage of this is that the separation of user input, if the value of the placeholder directly in the Write input box This will be more judgment, so that the code is not too clean.

3.div line break is div

Triggering a line break in the div will get a div. This is the equivalent of being in the editor. Instead of what we think of as <br> or newline characters.

Therefore, the DIV needs to be filtered and replaced.

     var replace =/<div.*?> (. *?) <\/div>/G;        function(a) {         if (A! = "<br>"return "<br>"+  return   ") 

4. Paste inexplicable magic with style

Pasting in the input box appears in this form:

<style= ' Font-size:30px;color: #999 '><span> Paste content </span>< /font>         

It is not clear whether the system or the app is defined. So it has to be filtered.

5. Exceeding occlusion

This is a magical bug, when the content exceeds the maximum height of the Div, the last line appears a magical phenomenon, the first two words show, the back of the content is missing (fast behind the fact there is content), until the next line will appear.

I alert inside the content, found that there is no other element, I constantly try to find Div Overflow:hidden, the words will be displayed, but in order to allow users to scroll up and down in the content box. I have to let the y-axis be scrollable: overflow-y: auto; So it should be caused by a scroll bar. But I really don't know how to modify it. Then try out a hack method. This will not happen if there is a newline. So, I just plug in a 1px line when the user enters a specific line:

  if ($ ("#content"). Height () = = && Isios () &&!  HAVEAPPENDBR) {                $ ("#content"). Append ("<div style= ' height:1px;border-top:1px solid #fff ' ><br></ Div> ");                true;   }   

Of course, this is not a formal solution, if the park friends have encountered similar plot, can enlighten you.

6. Android cannot be wrapped for the first time

The phenomenon is that after the message is sent successfully, the user (Xiaomi) is a point of line change, but can not wrap, I suspect that the Android system blocked this behavior. But after entering a word, the line break is normal (even if you delete the word). There is no such problem in iOS. At first I tried to add a new line and found the focus was gone. Think about the question, not change it.

Iv. photo related 1. Android cannot upload.

Android many times can not trigger input type= ' file ' of the box, upload will have to go native help. The picture selection box pops up after the native intercepts the link.

window.location = ' Xxapp:h5upload ({"OpenType": 2, "Needchop": false, "uploadurl": ' +fileuploadurl+ ', "key": ' + Totalfiles + ', "callbackmethodname": "Uploadcomplete"}) ';

Key is to remember the first few pictures, to facilitate the original upload after the end of the address and key to the Uploadcomplete method. So that the interface can be modified accordingly. But that's not the point I'm talking about. The point is that URLs don't take Chinese, or special symbols. On the one hand many of the pictures inside the phone are named very strange, a lot of, like in the UC above the saved pictures followed by several types. This name is not useful, it is very recommended that the server side like the same processing upload pictures, after success to get a unique string on the line. Otherwise, some systems will automatically decode the encodeURI or encodeuricomponent you have to differentiate. Test sister will say this phone can, that can not, then the bitter front.

2. The picture turns 90 degrees.

Android part of the model (Xiaomi 2 A, Samsung N7, Samsung G9) to take pictures of the picture uploaded after actually left 90 degrees.

(Non-original)

After I send the photo, it is also crooked on the table, the picture itself will have a exifdata, the object contains the time, direction, exposure time and other information. It can be seen with exif.js. There are also websites that can be viewed directly.

function GetData (ID) {            function () {                var data = Exif.gettag (this, ' Orientation '); Console.log (data); }); }

The idea is to determine whether to rotate the image in this direction.

This.style.transform = ' rotate (' + current + ' deg) ';

3. Picture half

This problem will be on Android, not the loading problem. The correct piece should be centered vertically. But I do not know why the occasional will only a half. And I found that, to set the percentage of the picture, the phone and the PC are not the same, the phone picture percentage is not relative to its parent element, but it itself.

So the width of the picture goes beyond its parent class, even if the <div></div> width is 100%. Overflow:hidden, the picture may not be fully displayed. Out of the section will cause users to slide on the top left and right, this in iOS, there is a funny phenomenon, is the picture of the pop-up constantly sliding around, and then after the restoration can let the original binding click event Invalidation, is not sure whether the framework is the reason or the system. It was modified with a modal frame. At last simply write one more:

Client.modalimg =function(SRC) {if (!SRC)Return;if ($ (". Img-overlay")). Length) {$ (". Img-overlay")). Remove (); };var modal = ' <div class= ' img-overlay ' > <div class= ' imgheader ' ></div> <div class= ' Imgbox ' >< ImgOnload= "recalcuimg ();" src= "' + src + '"/></div> '; $ ("Body"). append (modal);};//Calibration positionfunctionRecalcuimg () {var Headerh = $ (". Imgheader"). Height ();var boxh = $ (". Imgbox"). Height ();var imgh = $ (". Imgbox img" var realmaxh = boxh- Headerh; // Console.log ("Headerh", Headerh, "Boxh", Boxh, "IMGH", IMGH, "Realmaxh", realmaxh); if (imgh > Realmaxh) {$ (". Imgbox img"). CSS ("height", Realmaxh + "px" else {var gap = (Realmaxh- IMGH)/2; // Console.log ("less than maximum height, margintop", (REALMAXH-IMGH), Gap ); $ (". Imgbox img"). CSS ("Margin-top", Gap + "px"       

Writing at the end of the OnLoad event is to make sure that the picture is loaded. This can be calculated, if calculated directly in modalimg, the height of the picture may be 0. Then, if the height of the picture is greater than the maximum height, it is set to the maximum height, otherwise the margin is centered vertically.

Five, the message 1.websocket is fragile but tenacious.

WebSocket is vulnerable to network disruption, but network recovery can automatically re-connect. And the phone will be cut into the background to run this situation, such as Xiaomi system will be on the phone after the black screen to disconnect the network, the user into the application, you have to have a heavy connection mechanism to ensure that the message is not missing.

function () {                true;                Eventmanger.trigger ("Reconnect");                Listenchannel ();   });   

In the Listenchannel through the Socket.emit to the node after end multiplicity connected, take the position of the message under adjustment.

2. The message is sent first.

It is quite possible that the message is sent first, but the user will be surprised. For example, a long message divided into several times, the front end can be sent out in the previous article and then issued a second.

        var limit = + ;        function Loop (i) {            if (i <function () {i++; loop (i);});}; loop (0)   ; 

Six, the front-end of some thinking

That day on the road to think, the front-end is a kind of position, will javascript,node, familiar with the MVVM,HTML5 feature is OK, in fact, the skills accounted for only a part. The front end is equivalent to a connector, Product manager idea, art design, the interface of the back-end programmer, customer expectations, testing sister's focus, the leader of the inspection of the objects, most of them are assembled in front of the finished page, so communication, understanding ability is more important. Product managers and testing also tend to be too focused on interface effects and neglect the entire system's allocation of cooperation. Sometimes it is wrong to see the interface or process, it may be a back-end problem, you have to push. Just like seeing a person puzzlement, in fact, the body is already sick, so you have to express, where the problem is expressed, or how to express the need for assistance, and in the face of the bug to understand what is functional bugs, which is the experience of the bug, the basic function must be guaranteed correct, The problem of experience is that the use of basic functions is a serious experience bug, but bugs always have, it is unlikely that all models are the same. There is still time cost, you can solve a less important bug may take a long time, and then analyze thinking, how to find the cause of various anomalies, in addition to rely on experience you have to believe that all ghosts and goblins are source, each interface may have their own differences, abnormal phenomenon of the conditions of reproduction, What are the relevant factors, and then the code ability, as far as possible to ensure that the module independence and responsibility of a single, this aspect of the details, is every programmer need to pay attention to the place. Finally, to say that the magic of the bug is not only these, because the lack of development experience and knowledge of the reserves so it took a long time, far beyond their own estimates. If there are improper or better methods, please also indicate.

Your attention and support are my greatest motivation for writing.
Book Hill has a road group: 452450927
Source: http://www.cnblogs.com/stoneniqiu/
Github:https://github.com/stoneniqiu
This article is copyrighted by the author and the blog Park, welcome reprint, but without the consent of the author must retain this statement, and on the article page

H5 embedded in native development summary----pits path compatible with Android and iOS