文章 - DCloud问答

IOS开发者证书信息有误

原来都可以的，最近没打包，今天用原有的配置上传ios包云端打包，
客户端这边校验都通过了，上传后云端提示开发者证书信息有误，
我的打包信息都是直接用的原来的，什么都没改，这个证书之前打包也都正常，
麻烦帮忙看下，谢谢!

继续阅读 »

不会app开发，只要学习就行，快来东翌学院学习app开发吧

mui

混合app开发课程包含html,css,html5,css3,js,ui,mui,h5+,csatapp.js,php,mysql,混合开发app技术
react native app开发课程，HTML5，CSS3，Javascript,ECMAscript6,php,mysql,React Native课程。
联系qq:2971611409 进入教室

继续阅读 »

HTML5的rtsp直播测试。大家都来试试，看看HTML5能兼容到什么程度了！

HTML5 video

最近也要用到RTSP。试了一下HTML5的video,可以正常播放。
不过自已要播放海康的NVR的RTSP流，可能是视频编码问题吧，无法正常播。
测试代码：
<video style="transform: rotate(0deg);" id="v1" controls="controls" onmouseover="this.play()" height="600" width="800">
<source src="rtsp://218.204.223.237:554/live/1/67A7572844E51A64/f68g2mj7wjua3la7.sdp">
html5 video
</video>

用手机打开下面地址：http://pass.wswifi.cn/1/1.html
测试过QQ浏览器，微信浏览器，华为6p自带浏览器。都通过！
大家都来测试一下，反应一下测试结果！
目前，海康的NVR还没搞定。

继续阅读 »

跨webview弹出popover菜单及遮罩层

弹出菜单

在需要弹出菜单的父页面添加代码

        var floatw = null;  
        mui.plusReady(function() {  
            ws = plus.webview.currentWebview();  
            floatw = plus.webview.create("menu.html", "menu", {  
                background: 'transparent',  
                zindex: 10,  
            });  
        })  

        // 创建悬浮窗口  
        function floatWebview() {  
            if(floatw) { // 避免快速多次点击创建多个窗口  
                floatw.show("fade-in");  
            } else {  
                floatw = plus.webview.create("menu.html", "menu", {  
                    background: 'transparent',  
                    zindex: 10,  
                });  
                floatw.show("fade-in");  
            }  
        }  

//触发弹出菜单事件floatWebview();

然后将附件加入到项目中

这是我写的效果最好的一个

继续阅读 »

在需要弹出菜单的父页面添加代码

        var floatw = null;  
        mui.plusReady(function() {  
            ws = plus.webview.currentWebview();  
            floatw = plus.webview.create("menu.html", "menu", {  
                background: 'transparent',  
                zindex: 10,  
            });  
        })  

        // 创建悬浮窗口  
        function floatWebview() {  
            if(floatw) { // 避免快速多次点击创建多个窗口  
                floatw.show("fade-in");  
            } else {  
                floatw = plus.webview.create("menu.html", "menu", {  
                    background: 'transparent',  
                    zindex: 10,  
                });  
                floatw.show("fade-in");  
            }  
        }  

//触发弹出菜单事件floatWebview();

然后将附件加入到项目中

这是我写的效果最好的一个

收起阅读 »

mui页面间跳转并且传值以及fire()方法

刚开始学mui时，页面跳转传值无疑是很多初学者遇到的难题。这里分享一个我自己调试好了的两个页面间操作：  
场景是index.html页面跳转至a.html页面并且传值（包括预加载参数跟fire()带的参数）。注意，这里用到的方法是很多方法中的一种，有需要改进的地方，请多多指教。我也是初学O(∩_∩)O。  
【index.htm页面代码如下】：  
<!DOCTYPE html>  
<html>  

    <head>  

        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="bbtn" class="mui-btn mui-btn-blue">a.html</button>  
            <div id="sss">....</div>  
        </div>  
    </body>  
    <script>  
        var apage = null;  
        mui.plusReady(function() {  
            mui.preload({  
                url: "a.html",  
                id: "a.html", //默认使用当前页面的url作为id  
                styles: {}, //窗口参数  
                extras: {  
                    idd: "mui.preload预加载页面了"  
                } //自定义扩展参数  
            });  

            document.getElementById("bbtn").addEventListener('tap', function() {  
                if(apage == null) {  
                    apage = plus.webview.getWebviewById("a.html");  
                }  
                mui.fire(apage, 'hahah', {  
                    idd: "ID是我"  
                });  
                apage.show();  
            })  
        });  
    </script>  
    <script>  
        document.addEventListener('backIndexPage', function(ee) {  
            document.getElementById("sss").innerText = ee.detail.str;  
        })  
    </script>  

</html>  

【a.html页面代码如下】：  
<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="anniu">返回</button>  
            <div id="ggg">....</div>  
            <div id="ggg1">....</div>  
        </div>  
    </body>  
    <script>  
        document.addEventListener('hahah', function(e) {  
            var ppg = plus.webview.currentWebview();  
            //var ppg = plus.webview.getWebviewById('a.html');  
            document.getElementById("ggg").innerText = "fire事件参数:" + e.detail.idd;  
            document.getElementById("ggg1").innerText = "页面预加载参数:" + ppg.idd;  
        })  

        document.getElementById("anniu").addEventListener('tap',function(){  
            //var indexPage=plus.webview.getWebviewById('index.html');  
            var indexPage=plus.webview.getLaunchWebview();//获取首页对象  
            console.log(indexPage);  
            mui.fire(indexPage,'backIndexPage',{str:"我回来了！"});  
            mui.back();  
        })  
    </script>  

</html>

继续阅读 »

刚开始学mui时，页面跳转传值无疑是很多初学者遇到的难题。这里分享一个我自己调试好了的两个页面间操作：  
场景是index.html页面跳转至a.html页面并且传值（包括预加载参数跟fire()带的参数）。注意，这里用到的方法是很多方法中的一种，有需要改进的地方，请多多指教。我也是初学O(∩_∩)O。  
【index.htm页面代码如下】：  
<!DOCTYPE html>  
<html>  

    <head>  

        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="bbtn" class="mui-btn mui-btn-blue">a.html</button>  
            <div id="sss">....</div>  
        </div>  
    </body>  
    <script>  
        var apage = null;  
        mui.plusReady(function() {  
            mui.preload({  
                url: "a.html",  
                id: "a.html", //默认使用当前页面的url作为id  
                styles: {}, //窗口参数  
                extras: {  
                    idd: "mui.preload预加载页面了"  
                } //自定义扩展参数  
            });  

            document.getElementById("bbtn").addEventListener('tap', function() {  
                if(apage == null) {  
                    apage = plus.webview.getWebviewById("a.html");  
                }  
                mui.fire(apage, 'hahah', {  
                    idd: "ID是我"  
                });  
                apage.show();  
            })  
        });  
    </script>  
    <script>  
        document.addEventListener('backIndexPage', function(ee) {  
            document.getElementById("sss").innerText = ee.detail.str;  
        })  
    </script>  

</html>  

【a.html页面代码如下】：  
<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="anniu">返回</button>  
            <div id="ggg">....</div>  
            <div id="ggg1">....</div>  
        </div>  
    </body>  
    <script>  
        document.addEventListener('hahah', function(e) {  
            var ppg = plus.webview.currentWebview();  
            //var ppg = plus.webview.getWebviewById('a.html');  
            document.getElementById("ggg").innerText = "fire事件参数:" + e.detail.idd;  
            document.getElementById("ggg1").innerText = "页面预加载参数:" + ppg.idd;  
        })  

        document.getElementById("anniu").addEventListener('tap',function(){  
            //var indexPage=plus.webview.getWebviewById('index.html');  
            var indexPage=plus.webview.getLaunchWebview();//获取首页对象  
            console.log(indexPage);  
            mui.fire(indexPage,'backIndexPage',{str:"我回来了！"});  
            mui.back();  
        })  
    </script>  

</html>

收起阅读 »

JS阻止冒泡方法

JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。

　　我在文档中写了一个层，<div id="need_hide">点击以外隐藏该层</div>，并为之设置了简单的样式，现在我希望点击该层以外的地方使之隐藏，那么我给根元素绑定了一个click事件，一点击html就隐藏该DIV，代码如下：
Javascript代码收藏代码

document.documentElement.onclick = function() {    
    document.getElementById('need_hide').style.display = 'none';    
}

　　但是点击该层后，也使之隐藏了，这不是我希望得到的效果。由于该层属于根元素的子节点，所以它也被绑定了这个click事件，那么需在该元素被click时阻止冒泡事件的发生，加上以下代码：
Javascript代码收藏代码

function stopPropagation(e) {    
    e = e || window.event;    
    if(e.stopPropagation) { //W3C阻止冒泡方法    
        e.stopPropagation();    
    } else {    
        e.cancelBubble = true; //IE阻止冒泡方法    
    }    
}    
document.getElementById('need_hide').onclick = function(e) {    
    stopPropagation(e);    
}

　　如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码：
Javascript代码收藏代码

document.getElementById('btn_show').onclick = function(e) {    
    document.getElementById('need_hide').style.display = 'block';    
    stopPropagation(e);    
}

继续阅读 »

JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。

　　我在文档中写了一个层，<div id="need_hide">点击以外隐藏该层</div>，并为之设置了简单的样式，现在我希望点击该层以外的地方使之隐藏，那么我给根元素绑定了一个click事件，一点击html就隐藏该DIV，代码如下：
Javascript代码收藏代码

document.documentElement.onclick = function() {    
    document.getElementById('need_hide').style.display = 'none';    
}

　　但是点击该层后，也使之隐藏了，这不是我希望得到的效果。由于该层属于根元素的子节点，所以它也被绑定了这个click事件，那么需在该元素被click时阻止冒泡事件的发生，加上以下代码：
Javascript代码收藏代码

function stopPropagation(e) {    
    e = e || window.event;    
    if(e.stopPropagation) { //W3C阻止冒泡方法    
        e.stopPropagation();    
    } else {    
        e.cancelBubble = true; //IE阻止冒泡方法    
    }    
}    
document.getElementById('need_hide').onclick = function(e) {    
    stopPropagation(e);    
}

　　如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码：
Javascript代码收藏代码

document.getElementById('btn_show').onclick = function(e) {    
    document.getElementById('need_hide').style.display = 'block';    
    stopPropagation(e);    
}

收起阅读 »

移动页面点击穿透问题解决方案

近期在做页面的时候，遇到了点击遮罩层时穿透下层的checkbox的问题，由于为了兼顾用户的流畅度，只能使用tap事件，click事件虽然解决了穿透的问题，但总会有300ms的延时，因此最终使用settimeout方法规避了这个问题。下面是我找到的一篇造成这些问题的简单分析，希望对大家有用！
一.click与300ms延迟

移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍：黯羽轻扬：HTML5触摸事件

移动事件提供了 touchstart 、 touchmove 、 touchend 却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把 touchstart 或者 touchend 当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发 touchstart 事件执行对应的事件处理器（本不应该触发）， touchend 事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

二.点击穿透问题

点击穿透现象有3种：

点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件

蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消失了

跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转

因为 a标签跳转默认是click事件触发，所以原理和上面的完全相同

另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了

和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了

非要细分的话还有第四种，不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。。。诸如此类的，都是点击穿透问题

三.解决方案

问题已经很明了了，有很多解决方案，但思路不外乎2种：

不要混用touch和click

既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了

吃掉（或者说是消费掉）touch之后的click

依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等等，能吃掉就行

详细解决方案：

只用touch

最简单的解决方案，完美解决点击穿透问题

把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’），需要特别注意 a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span

只用click

下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟，想想都慢

不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做，强烈不推荐，快一点总是好的

拿个东西来挡住

比较笨的方法，千万不要用

叶小钗的“菊花”大法，更多信息请查看【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

tap后延迟350ms再隐藏mask

改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力

pointer-events

比较麻烦且有缺陷，不建议使用

mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应

缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

在下面元素的事件处理器里做检测（配合全局flag）

比较麻烦，不建议使用

全局flag记录按钮点击的位置（坐标点），在下面元素的事件处理器里判断event的坐标点，如果相同则是那个可恶的click，拒绝响应

上面说的只是想法，没测试过，实在不行就用记录时间戳判断，等待350ms，这样就和 pointer-events 差不多

fastclick

好用的解决方案，不介意多加载几KB的话，不建议使用，因为有人遇到了bug，更多信息请查看： Fastclick 导致click事件触发两次的问题

首先引入fastclick库，再把页面内所有touch事件都换成click，其实稍微有点麻烦，建议引入这几KB就为了解决点透问题不值得，不如用第一种方法呢
原文地址：http://www.tuicool.com/articles/6NfaUnM

继续阅读 »

近期在做页面的时候，遇到了点击遮罩层时穿透下层的checkbox的问题，由于为了兼顾用户的流畅度，只能使用tap事件，click事件虽然解决了穿透的问题，但总会有300ms的延时，因此最终使用settimeout方法规避了这个问题。下面是我找到的一篇造成这些问题的简单分析，希望对大家有用！
一.click与300ms延迟

移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍：黯羽轻扬：HTML5触摸事件

移动事件提供了 touchstart 、 touchmove 、 touchend 却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把 touchstart 或者 touchend 当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发 touchstart 事件执行对应的事件处理器（本不应该触发）， touchend 事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

二.点击穿透问题

点击穿透现象有3种：

点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件

蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消失了

跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转

因为 a标签跳转默认是click事件触发，所以原理和上面的完全相同

另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了

和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了

非要细分的话还有第四种，不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。。。诸如此类的，都是点击穿透问题

三.解决方案

问题已经很明了了，有很多解决方案，但思路不外乎2种：

不要混用touch和click

既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了

吃掉（或者说是消费掉）touch之后的click

依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等等，能吃掉就行

详细解决方案：

只用touch

最简单的解决方案，完美解决点击穿透问题

把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’），需要特别注意 a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span

只用click

下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟，想想都慢

不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做，强烈不推荐，快一点总是好的

拿个东西来挡住

比较笨的方法，千万不要用

叶小钗的“菊花”大法，更多信息请查看【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

tap后延迟350ms再隐藏mask

改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力

pointer-events

比较麻烦且有缺陷，不建议使用

mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应

缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

在下面元素的事件处理器里做检测（配合全局flag）

比较麻烦，不建议使用

全局flag记录按钮点击的位置（坐标点），在下面元素的事件处理器里判断event的坐标点，如果相同则是那个可恶的click，拒绝响应

上面说的只是想法，没测试过，实在不行就用记录时间戳判断，等待350ms，这样就和 pointer-events 差不多

fastclick

好用的解决方案，不介意多加载几KB的话，不建议使用，因为有人遇到了bug，更多信息请查看： Fastclick 导致click事件触发两次的问题

首先引入fastclick库，再把页面内所有touch事件都换成click，其实稍微有点麻烦，建议引入这几KB就为了解决点透问题不值得，不如用第一种方法呢
原文地址：http://www.tuicool.com/articles/6NfaUnM

收起阅读 »

关于mui发送ajax请求总是失败，我所遇到的问题总结

AJAX跨域 ajax

1.服务器端未设置跨域。不要问我怎么设置
2.本地测试请求的地址不要用localhost，发布到iis，用ip访问，不然会找不到的！！！
3.防火墙得记得关闭

关于MUI提前注入5+API的尝试

原文地址：http://blog.csdn.net/u012843100/article/details/52838928
HBuilder是在开发hybrid app时不错的工具。为了使hybrid app的性能更加接近原生，程序猿们做了很多努力。例如近日在HBuilder7.5.0版本中，增加了一个振奋人心的特性。

Android平台新增提前注入5+ API，支持在plusready事件前调用，具体参考http://ask.dcloud.net.cn/article/921

以往在5+ Runtime环境中，通常情况下需要html页面解析完成后才会注入5+ API，执行的顺序为：

加载html页面
解析html页面（下载script/link等节点引用的资源，如js/css文件）
触发DOMContentLoaded事件
注入5+ API
触发plusready事件

这样导致5+ API生效时间比较延后，在html中引用js执行之后才能调用5+ AP，于是很多人选择在plusready时间中编写逻辑代码，这样写的最大缺点是使脚本的执行时间稍微延后了，如果在页面的DOMContentLoaded（mui.ready）事件中处理逻辑代码，会在一定程度上提升页面加载速度。但是，往往在逻辑代码中需要调用5+API，怎么办呢？
于是在不断对性能较为挑剔的程序猿们先在ready事件中处理与5+API无关的页面逻辑（渲染页面等）；然后在plusready事件中处理需要调用5+API的逻辑代码。这样在一定程序上提升了APP的体验及速度，但却使代码分散各处，不利于管理。

此次提前加载5+API突破了这个限制，以下是官方示例：

在HBuilder7.5版本之后将支持提前注入5+ API，可以在plusready事件触发之前调用5+ API，操作方法是在页面中添加以下节点：
<script src="html5plus://ready"/>，示例如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  
        <title>HTML5+ API</title>  
        <script src="html5plus://ready"/>  
        <script type="text/javascript" charset="utf-8">  
// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断  
if(window.plus){  
    // 在这里调用5+ API  
}else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
        </script>  
    </head>  
    <body>  
Hello HTML5 plus.  
    </body>  
</html>

注意

仅仅是提前注入5+ API，并不会提前触发plusready事件（仅步骤4提前操作了）

Android3.0及以上平台才支持提前注入，Android2.*版本无法提前注入

在流应用环境中的wap2app会自动提前注入（第一次引用网络js时注入），不需要添加<script src="html5plus://ready"/>节点

官方示例中，通过判断判断window.plus对象来判断plus模块是否已经加载完毕，如果加载完毕则可直接调用，由于plusready事件并没有提前，所以如同以往使用

document.addEventListener('plusready',function () {  
// 在这里调用5+ API  
},false);  
来添加监听，跟以往没有任何差别。

但是在使用过程中，我发现5+API可能在mui对象加载完毕前已经加载好了，于是在官方示例中的if语句成立时调用mui方法会导致mui未定义的情况。所以我把实例中的：

if(window.plus)
改成：

if(window.plus && window.mui)

但是这样如果plus加载完毕但mui未加载完毕时可能在效率上并没有提升。所以我又做了一下修改，在mui.ready中调用window.plus判断：

mui.ready(function(){  
    if(window.plus){  
        // 在这里调用5+ API  
    }else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
});

这样似乎在性能上有一定提升，但我并不确定这样是否是最好的方法，或者这样是否会导致其他问题，还望指点。

另外，使用官方示例过程中还有一点不是很确定，就是在if(window.plus)中处理dom元素时可能会出现找不到的情况，此时将<script src="html5plus://ready"></script>注释掉就不会了。初步猜测可能是因为plus对象在DOMContentLoaded前就已经加载完毕了，此时页面并未渲染完造成的。

H5 app的优化之路还很长，继续埋头写代码去了。

继续阅读 »

原文地址：http://blog.csdn.net/u012843100/article/details/52838928
HBuilder是在开发hybrid app时不错的工具。为了使hybrid app的性能更加接近原生，程序猿们做了很多努力。例如近日在HBuilder7.5.0版本中，增加了一个振奋人心的特性。

Android平台新增提前注入5+ API，支持在plusready事件前调用，具体参考http://ask.dcloud.net.cn/article/921

以往在5+ Runtime环境中，通常情况下需要html页面解析完成后才会注入5+ API，执行的顺序为：

加载html页面
解析html页面（下载script/link等节点引用的资源，如js/css文件）
触发DOMContentLoaded事件
注入5+ API
触发plusready事件

这样导致5+ API生效时间比较延后，在html中引用js执行之后才能调用5+ AP，于是很多人选择在plusready时间中编写逻辑代码，这样写的最大缺点是使脚本的执行时间稍微延后了，如果在页面的DOMContentLoaded（mui.ready）事件中处理逻辑代码，会在一定程度上提升页面加载速度。但是，往往在逻辑代码中需要调用5+API，怎么办呢？
于是在不断对性能较为挑剔的程序猿们先在ready事件中处理与5+API无关的页面逻辑（渲染页面等）；然后在plusready事件中处理需要调用5+API的逻辑代码。这样在一定程序上提升了APP的体验及速度，但却使代码分散各处，不利于管理。

此次提前加载5+API突破了这个限制，以下是官方示例：

在HBuilder7.5版本之后将支持提前注入5+ API，可以在plusready事件触发之前调用5+ API，操作方法是在页面中添加以下节点：
<script src="html5plus://ready"/>，示例如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>  
        <title>HTML5+ API</title>  
        <script src="html5plus://ready"/>  
        <script type="text/javascript" charset="utf-8">  
// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断  
if(window.plus){  
    // 在这里调用5+ API  
}else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
        </script>  
    </head>  
    <body>  
Hello HTML5 plus.  
    </body>  
</html>

注意

仅仅是提前注入5+ API，并不会提前触发plusready事件（仅步骤4提前操作了）

Android3.0及以上平台才支持提前注入，Android2.*版本无法提前注入

在流应用环境中的wap2app会自动提前注入（第一次引用网络js时注入），不需要添加<script src="html5plus://ready"/>节点

官方示例中，通过判断判断window.plus对象来判断plus模块是否已经加载完毕，如果加载完毕则可直接调用，由于plusready事件并没有提前，所以如同以往使用

document.addEventListener('plusready',function () {  
// 在这里调用5+ API  
},false);  
来添加监听，跟以往没有任何差别。

但是在使用过程中，我发现5+API可能在mui对象加载完毕前已经加载好了，于是在官方示例中的if语句成立时调用mui方法会导致mui未定义的情况。所以我把实例中的：

if(window.plus)
改成：

if(window.plus && window.mui)

但是这样如果plus加载完毕但mui未加载完毕时可能在效率上并没有提升。所以我又做了一下修改，在mui.ready中调用window.plus判断：

mui.ready(function(){  
    if(window.plus){  
        // 在这里调用5+ API  
    }else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        // 在这里调用5+ API  
    },false);  
}  
});

这样似乎在性能上有一定提升，但我并不确定这样是否是最好的方法，或者这样是否会导致其他问题，还望指点。

另外，使用官方示例过程中还有一点不是很确定，就是在if(window.plus)中处理dom元素时可能会出现找不到的情况，此时将<script src="html5plus://ready"></script>注释掉就不会了。初步猜测可能是因为plus对象在DOMContentLoaded前就已经加载完毕了，此时页面并未渲染完造成的。

H5 app的优化之路还很长，继续埋头写代码去了。

收起阅读 »

iOS点击输入框，默认打开数字键盘

设置input的type为 “tel”即可，设置 maxlength可限制输入的长度

<input class="mui-input-clear" type="tel" maxlength="11" placeholder="请输入手机号">

继续阅读 »

设置input的type为 “tel”即可，设置 maxlength可限制输入的长度

<input class="mui-input-clear" type="tel" maxlength="11" placeholder="请输入手机号">

收起阅读 »

呼..app终于做的差不多了，各位帮忙提提意见，看看有啥bug哈~

mui

（非广告，纯分享！）

如果有问题也可以在下面回复，我会的话会尽量回答的。

扫码下载

主页面

继续阅读 »

iOS平台Widget集成使用wgt/wgtu升级说明

iOS SDK Widget集成

用户在使用Widget集成时，使用plus.runtime.install API进行5+应用升级时会发现，方法回调升级成功，但是应用重启后加载的依然是老版本的应用。这是因为会用Widget方式集成时调用 PDRCoreAppManager 类 openAppAtLocation方法创建PDRCoreApp对象时需要传入WebApp的保存路径作为参数

一般情况下WebApp的资源是放在原生工程的Pandora/apps目录下，在生成ipa安装包后这个目录下的文件是不能修改。 5+SDK在wgt/wgtu升级后会将资源释放到应用沙盒的~Library目录下，路径为~Library/Pandora/apps/[WebApp的ID]/www目录下，所以需要在调用PDRCoreAppManager 类 openAppAtLocation方法时传入的参数进行调整。

我们知道了问题的原因，下面我们来解决问题。
我们可以通过判断 ~Library/Pandora/apps/[WebApp的ID]/www目录下是否有应用的mainfest.json文件存在的方式判断应用是否升级，如果该文件存在则设置该路径为应用启动路径，否则使用ipa下的Pandora/apps目录下的资源为启动路径

ipa在升级时~Library/Pandora/apps/[WebApp的ID]/www 目录下的内容不会被系统删除，
为了保证升级后不会使用到以前遗留的WebApp资源，建议在WebApp启动时写文件保存当前ipa的版本号，每次启动时判断保存的版本号与当前ipa的版本号是否一致，如果不一致则需要删除~Library/Pandora/apps/[WebApp的ID]/www 目录下的全部内容，这样可以保证使用正确的WebApp资源

继续阅读 »

热门文章