H5 + hybrid mobile app application development-Too bad, h5app

H5 + hybrid mobile app application development-Too bad, h5app

After using MUI, I found that there were much more pitfalls than I thought, some of which were H5 and some of which were plus. Then I spoke about them one by one.

Under IOS, when pulling up, the speed is slightly faster and the header is automatically hidden. It is automatically displayed when you do not pull it.

In this case, it is normal under Android. Why?

Because both the header and the nav at the bottom of the mui framework adopt the fixed layout.

 

In IOS, the fixed layout is not supported at all, so the problem is also reflected in another situation. That is, when the content on the page is longer than a screen, and there is a text box in the page, if we focus on the text box, it will automatically scroll under ios, and the soft keyboard will pop up, in this case, if you pull down, the fixed layout will float.
My Solutions
Discard the old openWindow and openjavaswwithtitle in mui and use the latest titleNView
Owner. opendeskwwithtitle = function (WebviewOptions, title) {var _ styles = {// For window parameters, see WebviewStyle in the 5 + standard. That is to say, all parameters in WebviewStyle can be set here: {// The title bar control of the window, titleText: title, // title Bar text. If this attribute is not set, the title of the current page is loaded by default, and the title titleColor of the page is automatically updated: "# fff", // font color, color value format: "# RRGGBB", default value: "#000000" titleSize: "17px", // font size, default: 17px backgroundColor: "# 449DED", // control background color, color value format: "# RRGGBB", default value: "# F7F7F7" progress: {// progress bar style color of the title bar control: "#56CF87", // progress bar color, default value: "#00FF00" height: "2px" // progress bar height, default value: "2px"}, splitLine: {// split line at the bottom of the title bar control, similar to borderBottom color: "# CCCCCC", // split line color. The default value is "# cccccccc" height: "0px" // split line height, the default value is "2px"}, autoBackButton: true},}; WebviewOptions. styles = _ styles; mui. openWindow (WebviewOptions );}
Why is there no such phenomenon in the official Demo? When it comes to it, I am very angry. The official demo restricts the speed of pulling up and down, which is very slow, therefore, the header cannot be automatically hidden under ios, and the long screen text box does not exist. However, no official explanation is provided, which is the most difficult.
Other problems: the returned Icon size cannot be set here. I am dizzy because no settings are found in the H5 + document.
Setting the status bar color is invalid under IOS
At first, I directly modified the configuration of manifest. json by modifying the configuration of manifest. json. How can this problem be solved under Android, but it is invalid under ios. Add the following configuration under the plus node to set the status bar to a blue background.
"Plus": {"launchwebview": {"statusbar": {"background": "# 449DED" }}, "statusbar": {"background ": "# 449DED"},/* Status Bar */
To modify the status bar color on all pages of IOS, I added the following code to a common js file:
Document. addEventListener ('plusready', function () {plus. navigator. setStatusBarBackground ("# 449DED"); // set the background of the system status bar to blue plus. navigator. setStatusBarStyle ("UIStatusBarStyleBlackOpaque"); // set the system status bar style to light text}, false );
OK. Solve the problem.
Question about pulling up and down under a single WebView
Why is there no problem with the Demo provided by the official website? Because the Demo is too simple to simulate real application scenarios.
 
My current solution: when there are more than two pieces of data on the main interface, this is because the scroll bar will appear when there are more than two pieces of data here. I will automatically set the height of the main interface + 1px, this is done to generate a vertical scroll bar, and then add the following code in all the places that trigger this scroll pop-up layer: (for example, when you click the status or click repair department)
isEmptyScroll = true;window.scrollTo(1, 1);
Code for loading the data list
            if (app.$data.list.length <= 2) {                if (isEmptyScroll) {                    g.id("pullrefresh").style.height = g.getScreenInfo('height') +1 + 'px';                }            } else {                g.id("pullrefresh").style.height = 'auto';            }            isEmptyScroll = false;
Common js Code:
/*** Obtain the screen height * @ param {Object} element */owner. getScreenInfo = function (element) {if (element = 'width') {return document.doc umentElement. clientWidth | document. body. clientWidth;} else {return document.doc umentElement. clientHeight | document. body. clientHeigth ;}};
It is said that this problem will not occur if dual webview is used. I have not tried it for the time being. However, the official recommendation for single webview is that dual webview is too performance-consuming and not so convenient to use. It's very tricky. I naturally prefer the official recommendation method!
Retrieving App cache size and clearing cache Android is invalid
Perform operations in the H5 + mode. The value can be obtained under IOS, but Android does not.
// Clear the cached document. getElementById ('invalid ache '). addEventListener ('tap', function () {mui. confirm ('the image and offline cache content will be deleted ', are you sure you want to delete all the caches? ', BtnArray, function (e) {if (e. index = 1) {plus. cache. clear (function () {mui. toast ("application cache cleared successfully! ");});}});});


Get cache size
Mui. plusReady (function (){
// Obtain the cache size var _ result = ''; plus. cache. calculate (function (size) {_ result = g. bytesToSize (size); console. log (_ result) document. getElementById ("cacheSize "). innerText = _ result ;});
});

Public method:
// Convert byte to size owner such as KB. bytesToSize = function (bytes) {if (bytes = 0) return '0 B '; var k = 1024; sizes = [' B ', 'kb ', 'mb', 'gb', 'tb', 'petab', 'EB ', 'zb', 'yb']; I = Math. floor (Math. log (bytes)/Math. log (k); var _ size = (bytes/Math. pow (k, I); return _ size. toFixed (2) + ''+ sizes [I];}
At present, there is no good solution.
The wave effect is invalid in some Android models.

Because my animation effects use css3, it is easy to think that it is caused by incompatibility of browser styles. In fact, it is specified by adding the-webkit-prefix. Because many mobile browsers use webkit kernels.
HTML
<Div class = "portrait-clockin fr"> <div class = "dot" v-on: tap = "doPunchCard () "> <div class =" dot2 "> <div class =" dot3 "> <ul> <li class =" one fl "v-text =" nowTime "> </li> <li class = "fl"> punch </li> </ul> </div>
Css style:
. Portrait-clockin {width: 3rem; height: 3rem; margin: 0 15px 0px 0px ;}. fr {float: right;}/* water ripple effect during work logging */. dot: active,. dot2: active,. dot3: active {background: #70a236 ;}. dot {animation: sploosh 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1);-webkit-animation: sploosh 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1 );}. dot2 {animation: sploosh2 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1);-webkit-animation: sploosh2 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1 );}. dot3 {animation: sploosh3 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1);-webkit-animation: sploosh3 1.5 s cubic-bezr (0.165, 0.84, 0.44, 1 );}. dot ul {margin: 0px; padding: 0px; width: 100%; margin: 0.65rem 0px ;}. dot li {width: 100%; font-size: 0.48rem; line-height: 0.5rem; height: 0.5rem ;}. dot li. one {font-size: 0.4rem; line-height: 0.8rem; height: 0.8rem ;}. dot ,. dot2 ,. dot3 {height: 96px; width: 96px; font-size: 20px; color: # fff; line-height: 96px; text-align: center; border-radius: 100%; position: absolute; z-index: 1; animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite; background: transparent ;} @ keyframes sploosh {0% {box-shadow: 0 0 0 0px rgba (158,203,244, 0.7); background: rgba (84,166,240, 0.7);} 100% {box-shadow: 0 0 0 10px rgba (158,203,244, 0); background: rgba (84,166,240, 0) ;}@keyframes sploosh2 {0% {box-shadow: 0 0 0 0px rgba (110,179,243, 0.7); background: rgba (84,166,240, 0.7);} 100% {box-shadow: 0 0 0 6px rgba (110,179,243, 0); background: rgba (84,166,240, 0.3) ;}@ keyframes sploosh3 {0% {box-shadow: 0 0 0 0px rgba (255,255,255, 0.7); background: rgba (84,166,240, 0.7 );} 100% {box-shadow: 0 0 0 2px rgba (255,255,255, 0); background: rgba (84,166,240, 1 );}} @-webkit-keyframes sploosh {0% {-webkit-box-shadow: 0 0 0 0px rgba (158,203,244, 0.7); background: rgba (84,166,240, 0.7 );} 100% {-webkit-box-shadow: 0 0 0 10px rgba (158,203,244, 0); background: rgba (84,166,240, 0 );}} @-webkit-keyframes sploosh2 {0% {-webkit-box-shadow: 0 0 0 0px rgba (110,179,243, 0.7); background: rgba (84,166,240, 0.7 );} 100% {-webkit-box-shadow: 0 0 0 6px rgba (110,179,243, 0); background: rgba (84,166,240, 0.3 );}} @-webkit-keyframes sploosh3 {0% {-webkit-box-shadow: 0 0 0 0px rgba (255,255,255, 0.7); background: rgba (84,166,240, 0.7 );} 100% {-webkit-box-shadow: 0 0 0 2px rgba (255,255,255, 0); background: rgba (84,166,240, 1) ;}}/* ripple ends */
Question about the dot display under IOS
The dot effect is as follows:

My previous practices:
<span v-if="item.rad" href="#" class="round">●</span>
The CSS code is as follows:
/* Small dots */. round {width: 6px; height: 6px; display:-webkit-inline-box; font-size: 7px; margin-left:-2px; line-height: 6px; text-align: center; color: # FD7777; text-decoration: none; position: absolute; top: 5px ;}
I found that the dot in IOS is too small, and the width and height of the style are invalid no matter how you modify the style.
Later practices:
The HTML code structure is as follows: class = "round" section
 <a v-for="(item,index) in menus" v-on:tap="getTaskList(item.name)" class="mui-control-item" v-bind:id="item.id" v-bind:class="{'mui-active': !index}">                    <span v-text="item.title"></span>(<span v-text="item.taskNum"></span>)                    <span v-if="item.rad" href="#" class="round"></span>                </a>
The CSS code is as follows:
/* Small dots */. round {border-radius: 50%; width: 6px; height: 6px; display:-webkit-inline-box; font-size: 6px; margin-left:-2px; line-height: 6px; text-align: center; background-color: # FD7777; text-decoration: none; position: absolute; top: 5px ;}
HBuilder updates at risk
HBuilder releases a new patch every three to five times. When you open the patch every day, a prompt box will pop up automatically prompting you whether to update the patch, if you accidentally click Update, you 'd better first check what problems the patch solves and check its update log.
Remember that you need to update the mui.js?mui.css files referenced in your project. How to update it? You can create a mui project in the latest HBuilder and copy the js and css files in the project. It is difficult to determine whether it only modifies the base or other mui-related css or js. Therefore, the insurance method is to update it together. Note that each patch upgrade may cause new problems. Therefore, we recommend that you back up all the code or tag the code before the upgrade.
Note the following when using image scaling:
The mui official demo provides the image scaling function. In fact, you need to pay attention to this. If you need to use the image scaling interface, there are text boxes and other places that need to be input and edited, it will make your input and editing invalid. That is to say, you can only zoom in and out images in detail scenarios that only need to be displayed. However, the official website will not tell you this. You will feel a lot of pain when you get hit!
So many other problems are raised ....