文章 - DCloud问答

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资源

继续阅读 »

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

Android SDK Widget集成

用户在使用Widget集成时，使用plus.runtime.install API进行5+应用升级时会发现，方法回调安装成功，但是应用重启后加载的依然是老版本的Web应用。

这是因为会用Widget方式集成时调用 SDK.startWebApp 方法创建IApp对象时，需要传入WebApp的保存路径作为参数

一般情况下WebApp的资源是放在原生工程的assets/apps目录下，在生成apk安装包后这个目录下的文件是不能修改。 5+SDK在wgt/wgtu升级后会将资源释放到SD卡下，路径为 SD卡/android/data/[apk包名]/apps/[WebApp的ID]/www，所以在资源升级后调用SDK.startWebApp方法时传入的参数需要进行调整。

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

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

继续阅读 »

上拉刷新，下拉加载

下拉刷新上拉加载

<!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" />  
<link href="css/TopBottomScroll.css" />  
    </head>  

    <body>  
        <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
                        公司新闻  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        媒体关注  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        最新公告  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-content">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/TopBootomScroll.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            (function($) {  

                var createFragment = function(ul, index, count, reverse) {  
                    var length = ul.querySelectorAll('li').length;  
                    var fragment = document.createDocumentFragment();  
                    var li;  
                    for (var i = 0; i < count; i++) {  
                        li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  

                        li.innerHTML = '<a href="javascript:;">'  
                        +'  <img class="mui-media-object mui-pull-left" src="images/slider/slider_image_6.jpg">'  
                        +'  <div class="mui-media-body">'  
                        +'      房子限购，股票大跌'  
                        +'      <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>'  
                        +'  </div>'  
                        +'</a>';  
                        fragment.appendChild(li);  
                    }  
                    return fragment;  
                };  

                var html2 = '<ul class="mui-table-view"></ul>';  
                var html3 = '<ul class="mui-table-view"></ul>';  
                var item2 = document.getElementById('item2mobile');  
                var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.querySelector('.mui-scroll').innerHTML = html2;  
                                var ul = item2.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    } else if (e.detail.slideNumber === 2) {  
                        if (item3.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item3.querySelector('.mui-scroll').innerHTML = html3;  
                                var ul = item3.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    }  
                });  

                $("#scroll1").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll2").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll3").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
            })(mui);  

        </script>  
    </body>  

</html>

TopBootomScroll.js

(function($){  
    $.fn.TopBootomScroll = function(options){  
        var obl = true;  
        if(options){  
            obl = false;  
        }  
        $(this).scroll({  
            indicators: true //是否显示滚动条  
        });  
        options = options || {};  
        options = $.extend(true,{  
            down:{  
                obl:false,  
                Y:50,//下拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            },  
            up: {  
                obl:false,  
                Y:50,//上拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            }  
        },options);  

        this.each(function() {  
            var sllef = this;  

            sllef.options = options;  
            sllef.removeTopStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".topStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".topStyle"));  
                }  
            };  
            sllef.removeButtonStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".buttonStyle"));  
                    console.info("scrollerWidth："+sllef.scrollerWidth)  
                    $(this).scroll().scrollTo(0,-(sllef.scrollerWidth-this.options.up.Y-10),100);  
                }  
            };  
            sllef.addEventListener("scroll",function(e){  
                console.info(e.detail.scrollerWidth);  
                sllef.scrollerWidth = e.detail.scrollerWidth;  
                console.info("scroll")  
                if(e.detail.lastY == 0){  
                    console.info("下拉到顶部")  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info("maxScrollY:"+e.detail.maxScrollY)  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeTopStyle();  
                        },500);  
                    }  
                    if(options.down.obl){  
                        var html = '<div class="mui-loading">'  
                                +   '<div class="mui-spinner">'  
                                +   '</div>'  
                                + '<div class="mui-pull-caption">正在加载中...</div>'  
                                +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = html;  
                        options.down.obl = false;  
                        options.down.callback(this);  
                    }else{  
                        sllef.removeTopStyle();  
                    }  
                }else if(e.detail.lastY > 0){  
                    console.info("下拉超过顶部")  
                    console.info(this.querySelector(".mui-scroll").querySelector(".topStyle") == null)  
                    if(this.querySelector(".mui-scroll").querySelector(".topStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "topStyle";  
                        div.innerHTML = "下拉可以刷新";  
                        var fragment = document.createDocumentFragment();  
                        fragment.appendChild(div);  
                        this.querySelector(".mui-scroll").insertBefore(div,this.querySelector(".mui-scroll").firstChild);  
                    }  
                    console.info(options.down.Y)  
                    console.info(e.detail.lastY)  
                    console.info(e.detail.lastY >= options.down.Y)  

                    if(e.detail.lastY >= options.down.Y){  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = "释放立即刷新";  
                        options.down.obl = true;  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                }else if(e.detail.lastY == e.detail.maxScrollY){  
                    console.info("上拉到底部")  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeButtonStyle();  
                        },500);  
                    }  
                    if(options.up.obl){  
                        var html = '<div class="mui-loading">'  
                                    +   '<div class="mui-spinner">'  
                                    +   '</div>'  
                                    + '<div class="mui-pull-caption">正在加载中...</div>'  
                                    +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = html;  
                        options.up.obl = false;  
                        options.up.callback(this);  
                    }else{  
                        sllef.removeButtonStyle();  
                    }  
                }else if(e.detail.lastY < e.detail.maxScrollY){  
                    console.info("上拉超过底部")  
                    if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "buttonStyle";  
                        div.innerHTML = "上拉可以刷新";  
                        this.querySelector(".mui-scroll").appendChild(div);  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y)  
                    if(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y){  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = "释放立即刷新";  
                        options.up.obl = true;  
                    }  
                }  
            });  
        });  
    };  
    $("#scroll1").TopBootomScroll({  
            down:{  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeTopStyle();  
                    },5000);  
                }  
            },  
            up: {  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeButtonStyle();  
                    },5000);  
                }  
            }  
        });  
})(mui);

TopBottomScroll.css

.topStyle,.buttonStyle{  
    text-align: center;  
    padding: 5px;  
}  
.topStyle .mui-loading,.buttonStyle .mui-loading{  
    margin-top: 0;  
}  
.topStyle{  
    border-bottom: 1px solid #E4E3E6;  
}  
.buttonStyle{  
    border-top: 1px solid #E4E3E6;  
}  

.topStyle .mui-loading .mui-spinner,.buttonStyle .mui-loading .mui-spinner{  
    display: inline-block;  
    vertical-align: middle;  
    margin-right: 7px;  
}

继续阅读 »

<!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" />  
<link href="css/TopBottomScroll.css" />  
    </head>  

    <body>  
        <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">  
                        公司新闻  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        媒体关注  
                    </a>  
                    <a class="mui-control-item" href="#item3mobile">  
                        最新公告  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-content">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <ul class="mui-table-view">  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-1  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-2  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-3  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-4  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-5  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-6  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-7  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-8  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-9  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-10  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-11  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-12  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-13  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-14  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-15  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-16  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-17  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-18  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-19  
                                    </li>  
                                    <li class="mui-table-view-cell">  
                                        第一个选项卡子项-20  
                                    </li>  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/TopBootomScroll.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            (function($) {  

                var createFragment = function(ul, index, count, reverse) {  
                    var length = ul.querySelectorAll('li').length;  
                    var fragment = document.createDocumentFragment();  
                    var li;  
                    for (var i = 0; i < count; i++) {  
                        li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  

                        li.innerHTML = '<a href="javascript:;">'  
                        +'  <img class="mui-media-object mui-pull-left" src="images/slider/slider_image_6.jpg">'  
                        +'  <div class="mui-media-body">'  
                        +'      房子限购，股票大跌'  
                        +'      <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>'  
                        +'  </div>'  
                        +'</a>';  
                        fragment.appendChild(li);  
                    }  
                    return fragment;  
                };  

                var html2 = '<ul class="mui-table-view"></ul>';  
                var html3 = '<ul class="mui-table-view"></ul>';  
                var item2 = document.getElementById('item2mobile');  
                var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.querySelector('.mui-scroll').innerHTML = html2;  
                                var ul = item2.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    } else if (e.detail.slideNumber === 2) {  
                        if (item3.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item3.querySelector('.mui-scroll').innerHTML = html3;  
                                var ul = item3.querySelector('.mui-scroll').querySelector("ul");  
                                ul.appendChild(createFragment(ul,0,20,""));  
                            }, 500);  
                        }  
                    }  
                });  

                $("#scroll1").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll2").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
                $("#scroll3").TopBootomScroll({  
                        down:{  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeTopStyle();  
                                },5000);  
                            }  
                        },  
                        up: {  
                            callback: function(sllef) {  
                                setTimeout(function(){  
                                    sllef.removeButtonStyle();  
                                },5000);  
                            }  
                        }  
                    });  
            })(mui);  

        </script>  
    </body>  

</html>

TopBootomScroll.js

(function($){  
    $.fn.TopBootomScroll = function(options){  
        var obl = true;  
        if(options){  
            obl = false;  
        }  
        $(this).scroll({  
            indicators: true //是否显示滚动条  
        });  
        options = options || {};  
        options = $.extend(true,{  
            down:{  
                obl:false,  
                Y:50,//下拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            },  
            up: {  
                obl:false,  
                Y:50,//上拉超出的（downY）长度，开始加载  
                callback: function(sllef) {}  
            }  
        },options);  

        this.each(function() {  
            var sllef = this;  

            sllef.options = options;  
            sllef.removeTopStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".topStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".topStyle"));  
                }  
            };  
            sllef.removeButtonStyle = function(){  
                if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") != null){  
                    this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".buttonStyle"));  
                    console.info("scrollerWidth："+sllef.scrollerWidth)  
                    $(this).scroll().scrollTo(0,-(sllef.scrollerWidth-this.options.up.Y-10),100);  
                }  
            };  
            sllef.addEventListener("scroll",function(e){  
                console.info(e.detail.scrollerWidth);  
                sllef.scrollerWidth = e.detail.scrollerWidth;  
                console.info("scroll")  
                if(e.detail.lastY == 0){  
                    console.info("下拉到顶部")  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info("maxScrollY:"+e.detail.maxScrollY)  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeTopStyle();  
                        },500);  
                    }  
                    if(options.down.obl){  
                        var html = '<div class="mui-loading">'  
                                +   '<div class="mui-spinner">'  
                                +   '</div>'  
                                + '<div class="mui-pull-caption">正在加载中...</div>'  
                                +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = html;  
                        options.down.obl = false;  
                        options.down.callback(this);  
                    }else{  
                        sllef.removeTopStyle();  
                    }  
                }else if(e.detail.lastY > 0){  
                    console.info("下拉超过顶部")  
                    console.info(this.querySelector(".mui-scroll").querySelector(".topStyle") == null)  
                    if(this.querySelector(".mui-scroll").querySelector(".topStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "topStyle";  
                        div.innerHTML = "下拉可以刷新";  
                        var fragment = document.createDocumentFragment();  
                        fragment.appendChild(div);  
                        this.querySelector(".mui-scroll").insertBefore(div,this.querySelector(".mui-scroll").firstChild);  
                    }  
                    console.info(options.down.Y)  
                    console.info(e.detail.lastY)  
                    console.info(e.detail.lastY >= options.down.Y)  

                    if(e.detail.lastY >= options.down.Y){  
                        this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = "释放立即刷新";  
                        options.down.obl = true;  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                }else if(e.detail.lastY == e.detail.maxScrollY){  
                    console.info("上拉到底部")  
                    if(obl){  
                        setTimeout(function(){  
                            sllef.removeButtonStyle();  
                        },500);  
                    }  
                    if(options.up.obl){  
                        var html = '<div class="mui-loading">'  
                                    +   '<div class="mui-spinner">'  
                                    +   '</div>'  
                                    + '<div class="mui-pull-caption">正在加载中...</div>'  
                                    +'</div>';  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = html;  
                        options.up.obl = false;  
                        options.up.callback(this);  
                    }else{  
                        sllef.removeButtonStyle();  
                    }  
                }else if(e.detail.lastY < e.detail.maxScrollY){  
                    console.info("上拉超过底部")  
                    if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") == null){  
                        var div = document.createElement("div");  
                        div.className = "buttonStyle";  
                        div.innerHTML = "上拉可以刷新";  
                        this.querySelector(".mui-scroll").appendChild(div);  
                    }  
                    console.info("lastY:"+e.detail.lastY)  
                    console.info(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y)  
                    if(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y){  
                        this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = "释放立即刷新";  
                        options.up.obl = true;  
                    }  
                }  
            });  
        });  
    };  
    $("#scroll1").TopBootomScroll({  
            down:{  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeTopStyle();  
                    },5000);  
                }  
            },  
            up: {  
                callback: function(sllef) {  
                    setTimeout(function(){  
                        sllef.removeButtonStyle();  
                    },5000);  
                }  
            }  
        });  
})(mui);

TopBottomScroll.css

.topStyle,.buttonStyle{  
    text-align: center;  
    padding: 5px;  
}  
.topStyle .mui-loading,.buttonStyle .mui-loading{  
    margin-top: 0;  
}  
.topStyle{  
    border-bottom: 1px solid #E4E3E6;  
}  
.buttonStyle{  
    border-top: 1px solid #E4E3E6;  
}  

.topStyle .mui-loading .mui-spinner,.buttonStyle .mui-loading .mui-spinner{  
    display: inline-block;  
    vertical-align: middle;  
    margin-right: 7px;  
}

收起阅读 »

滚动条上拉到底部和下拉到顶部事件监听

<div id="scroll1" class="mui-scroll-wrapper mui-fullscreen">  
    <div class="mui-scroll">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell">第一个选项卡子项-1</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-2</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-3</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-4</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-5</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-6</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-7</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-8</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-9</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-10</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-11</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-12</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-13</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-14</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-15</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-16</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-17</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-18</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-19</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-20</li>  
        </ul>  
    </div>  
</div>  
<script>  
document.getElementById("scroll1").addEventListener("scrollbottom",function(e){  
    console.info("上拉到底部")  
});  
document.getElementById("scroll1").addEventListener("scroll",function(e){  
    console.info("scroll")  
    if(e.detail.lastY == 0){  
        console.info("下拉到顶部")  
        console.info("lastY:"+e.detail.lastY)  
        console.info("maxScrollY:"+e.detail.maxScrollY)  
    }else if(e.detail.lastY > 0){  
        console.info("下拉超过顶部")  
        console.info("lastY:"+e.detail.lastY)  
    }  
});  
</script>

继续阅读 »

<div id="scroll1" class="mui-scroll-wrapper mui-fullscreen">  
    <div class="mui-scroll">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell">第一个选项卡子项-1</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-2</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-3</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-4</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-5</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-6</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-7</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-8</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-9</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-10</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-11</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-12</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-13</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-14</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-15</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-16</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-17</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-18</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-19</li>  
            <li class="mui-table-view-cell">第一个选项卡子项-20</li>  
        </ul>  
    </div>  
</div>  
<script>  
document.getElementById("scroll1").addEventListener("scrollbottom",function(e){  
    console.info("上拉到底部")  
});  
document.getElementById("scroll1").addEventListener("scroll",function(e){  
    console.info("scroll")  
    if(e.detail.lastY == 0){  
        console.info("下拉到顶部")  
        console.info("lastY:"+e.detail.lastY)  
        console.info("maxScrollY:"+e.detail.maxScrollY)  
    }else if(e.detail.lastY > 0){  
        console.info("下拉超过顶部")  
        console.info("lastY:"+e.detail.lastY)  
    }  
});  
</script>

收起阅读 »

在mac下对android版app进行签名

   在Android 系统中，所有安装 到 系统的应用程序都必有一个数字证书，此数字证书用于标识应用程序的作者和在应用程序之间建立信任关系,如果一个 permission的protectionLevel为signature，那么就只有那些跟该permission所在的程序拥有同一个数字证书的应 用程序才能取得该权限。  
    Android使用Java的数字证书相关的机制来 给apk加盖数字证书，要理解android的数字证书，需要先了解以下数字证书的概念和java的数字证书机制。  
    Android系统要求每一个安装进系 统的应用程序都是经过数字证书签名的，数字证书的私钥则保存在程序开发者的手中。  
    Android将数字证书用来标识应用程序的作者和在应用程序之间建立信 任关系，不是用来决定最终用户可以安装哪些应用程序。  
    这个数字证书并不需要权威的数字证书签名机构认证，它只是用来让应用程序包自我认证的。

下面我将详细的说一下mac电脑下如何申请数字证书：
（1）先用命令‘sudo -s’ 获得系统权限 Mac终端命令，下载java jdk
（2）java mac 安装路径，我用的是这个：/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home； 1、Mac OS自带的JDK 6:/System/Library/Frameworks/JavaVM.framework/Versions/Current/Commands/java。看到有朋友说OS 10.10删除了自带的JDK 6，但是我升级10.10之后还是能找到该路径，不知搜索道是否需要重新在苹果网站下载JDK 6呢？
2、Oracle的JDK 7/8 （1）用/usr/libexec/java_home命令得到的Java Home路径是：/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home，这是我之前在Oracle网站下载的jdk 8 update 20。（2）在Java控制面板显示的路径：/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java，版本是Java 8 update 25。
（3）在cmd下支座android apk 签名时，输入命令：keytool -genkey -alias MyAndroidKey.keystore -keyalg RSA -validity 20000 -keystore MyAndroidKey.keystore，到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (拒绝访问).这是因为权限问题：你的jdk目录在c盘，当前用户无写入权限。
所以要么更改jdk的保存目录，要么更改权限。方法一更改保存目录：就是讲jdk从c盘挪到其它盘。方法二更改权限：以管理员身份运行CMD。任意一种修改后，再键入keytool -genkey -alias MyAndroidKey.keystore -keyalg RSA -validity 20000 -keystore MyAndroidKey.keystore，按提示填写即可。
（4）找到本机电脑上jdk安装的目录，使用cmd命令打开命令窗口，输入cd jdk目录（替换成你的jdk的bin目录），进入到jdk的bin目录，接下来你才可以使用jdk的命令进行操作
（5）使用keytool命令，keytool -genkey -alias android.keystore -keyalg RSA -validity 20000 -keystore android.keystore
其中参数-validity为证书有效天数，这里我们写的大些10000天。还有在输入密码时没有回显(尽管输就是啦) 并且退格,tab等都属于密码内容，这个密码在给.apk文件签名的时候需要。输入这个命令之后会提示您输入秘钥库的口令，接着是会提示你输入：姓氏，组织单位名称，组织名称，城市或区域名称，省市，国家、地区代码，密钥口令。按你自己的设置输入对应的数据就完成了
（6）生成完成之后在jdk的bin目录之下就可以找到生成的keystore文件了，android.keystore就是刚才生成的文件了，打包android应用的时候就可以直接用了，不过一台电脑生成的keystore只能用一个应用。
相关参考：http://jingyan.baidu.com/article/59703552e877f98fc00740f0.html
http://blog.csdn.net/sherrylhang/article/details/50183417
http://zhidao.baidu.com/link?url=O7B4fJC_N0QP8hDvC0DZQFrwICHo5FCHuZNLqgJqubNZ8h4QJ6zyO37z4fCeesQBaombcr6elv7Oj7uIPbCWKqy5hfLZ3zMaVmc066ZbUMO
http://bbs.360safe.com/thread-2932254-1-1.html

继续阅读 »

   在Android 系统中，所有安装 到 系统的应用程序都必有一个数字证书，此数字证书用于标识应用程序的作者和在应用程序之间建立信任关系,如果一个 permission的protectionLevel为signature，那么就只有那些跟该permission所在的程序拥有同一个数字证书的应 用程序才能取得该权限。  
    Android使用Java的数字证书相关的机制来 给apk加盖数字证书，要理解android的数字证书，需要先了解以下数字证书的概念和java的数字证书机制。  
    Android系统要求每一个安装进系 统的应用程序都是经过数字证书签名的，数字证书的私钥则保存在程序开发者的手中。  
    Android将数字证书用来标识应用程序的作者和在应用程序之间建立信 任关系，不是用来决定最终用户可以安装哪些应用程序。  
    这个数字证书并不需要权威的数字证书签名机构认证，它只是用来让应用程序包自我认证的。

下面我将详细的说一下mac电脑下如何申请数字证书：
（1）先用命令‘sudo -s’ 获得系统权限 Mac终端命令，下载java jdk
（2）java mac 安装路径，我用的是这个：/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home； 1、Mac OS自带的JDK 6:/System/Library/Frameworks/JavaVM.framework/Versions/Current/Commands/java。看到有朋友说OS 10.10删除了自带的JDK 6，但是我升级10.10之后还是能找到该路径，不知搜索道是否需要重新在苹果网站下载JDK 6呢？
2、Oracle的JDK 7/8 （1）用/usr/libexec/java_home命令得到的Java Home路径是：/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home，这是我之前在Oracle网站下载的jdk 8 update 20。（2）在Java控制面板显示的路径：/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java，版本是Java 8 update 25。
（3）在cmd下支座android apk 签名时，输入命令：keytool -genkey -alias MyAndroidKey.keystore -keyalg RSA -validity 20000 -keystore MyAndroidKey.keystore，到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (拒绝访问).这是因为权限问题：你的jdk目录在c盘，当前用户无写入权限。
所以要么更改jdk的保存目录，要么更改权限。方法一更改保存目录：就是讲jdk从c盘挪到其它盘。方法二更改权限：以管理员身份运行CMD。任意一种修改后，再键入keytool -genkey -alias MyAndroidKey.keystore -keyalg RSA -validity 20000 -keystore MyAndroidKey.keystore，按提示填写即可。
（4）找到本机电脑上jdk安装的目录，使用cmd命令打开命令窗口，输入cd jdk目录（替换成你的jdk的bin目录），进入到jdk的bin目录，接下来你才可以使用jdk的命令进行操作
（5）使用keytool命令，keytool -genkey -alias android.keystore -keyalg RSA -validity 20000 -keystore android.keystore
其中参数-validity为证书有效天数，这里我们写的大些10000天。还有在输入密码时没有回显(尽管输就是啦) 并且退格,tab等都属于密码内容，这个密码在给.apk文件签名的时候需要。输入这个命令之后会提示您输入秘钥库的口令，接着是会提示你输入：姓氏，组织单位名称，组织名称，城市或区域名称，省市，国家、地区代码，密钥口令。按你自己的设置输入对应的数据就完成了
（6）生成完成之后在jdk的bin目录之下就可以找到生成的keystore文件了，android.keystore就是刚才生成的文件了，打包android应用的时候就可以直接用了，不过一台电脑生成的keystore只能用一个应用。
相关参考：http://jingyan.baidu.com/article/59703552e877f98fc00740f0.html
http://blog.csdn.net/sherrylhang/article/details/50183417
http://zhidao.baidu.com/link?url=O7B4fJC_N0QP8hDvC0DZQFrwICHo5FCHuZNLqgJqubNZ8h4QJ6zyO37z4fCeesQBaombcr6elv7Oj7uIPbCWKqy5hfLZ3zMaVmc066ZbUMO
http://bbs.360safe.com/thread-2932254-1-1.html

收起阅读 »

MUI 的 Ajax 跨域请求失败

尝试 mui.ajax，发现在网页端无法跨域（不是同源策略，而是405）。
之后在同一页面中试了原生 ajax 和 jQuery 里的，都正常。

调试看区别是
mui 的 request 头里有

Access-Control-Request-Headers:accept, x-requested-with
Access-Control-Request-Method:GET
同时是
OPTIONS
，未被相应。

（知道 CORS 里的 OPTIONS 请求，但这里其他方法都好用，只有 mui 的不行）
跟踪到源码里
setHeader('X-Requested-With', 'XMLHttpRequest');
这一行，注释掉一切正常。
请问有什么区别？
谢谢

MUI v2.8.0

已自己解决。沿用这里的传统，就不说解决方案了……
原文地址：http://ask.dcloud.net.cn/question/16436

继续阅读 »

iOS创建最精简离线打包工程

离线打包 iOS SDK

ios创建最精简离线打包工程
注意：如果离线打包的是uni-app项目请点击进入查看如何配置

1 打开Xcode，创建新工程，选择“Single View Application”

2 添加创建工程的名称（注意：最好不要填中文或特殊字符）

3 复制HBuilder-Hello工程的delegate和Controller文件覆盖新创建工程的相应文件

4 拷贝以下文件到新创建工程目录下

iOSSDK/SDK/Bundles/PandoraApi.bundle
iOSSDK/SDK/control.xml
iOSSDK/SDK/Libs/liblibPDRCore.a
iOSSDK/SDK/Libs/libcoreSupport.a
iOSSDK/SDK/Libs/liblibUI.a

5 添加刚才拷贝的文件到工程内

6 拷贝IOS-SDK/SDK/inc目录到新创建工程目录下，并添加到工程内

7 点击Project->TARGETS->Build Settings搜索“Other Linker Flags”，双击搜索到的项双击，在弹出框内添加想“-ObjC”

8 点击Projcet->General->Linked Frameworks and Libraries 添加系统库到工程

系统库
JavaScriptCore.framework
WebKit.framework
CoreTelephony.framework
MobileCoreServices.framework
SystemConfiguration.framework
MediaPlayer.framework
AudioToolbox.framework
Security.framework
QuartzCore.framework
CFNetwork.framework
Foundation.framework
CoreFoundation.framework
CoreGraphics.framework
UIKit.framework
QuickLook.framework
libc++.tbd
libxml2.tbd
libz.tbd
libsqlite3.0.tbd
ImageIO.framework
CoreText.framework
Storekit.framework
UserNotifications 并设置为Optianal

9 点击Project->TARGETS->Build Settings搜索“ARC”，修改"Objective-C Automatic Reference Counting"项的值为"NO", 如果希望使用ARC则需要修改相应的内存管理代码。

10 修改头文件搜索路径

点击Project->TARGETS->Build Settings搜索"Header Search Paths",
双击搜索到的"Header Search Paths"项，将工程目录下的inc目录拖到打开的下拉框

11 修改静态库搜索路径

点击Project->TARGETS->Build Settings搜索"Library Search Paths",
如果"Library Search Paths"项下有值则不需要处理，
如果没有值则双击搜索到的"Library Search Paths"项，将工程目录下的libs目录(静态库所在目录)拖到打开的下拉框

12 修改BitCode

点击Project->TARGETS->Build Settings搜索BitCode
将Enable Bitcode项的值改成 ‘NO’

13 添加Web应用到工程

在工程目录下创建目录”Pandora->apps->[APPID]->www“目录，并将Web应用拷贝到www（小写字母）目录下
APPID为要加入到工程应用mainfest.json文件
添加Pandora目录到工程中

添加后会弹出选择类型框，选择”Create Folder References“

添加后工程内的Pandora目录为蓝色

14 修改control.xml文件

修改control.xml文件的appid节点值为mainfest.json文件的id节点下内容,appver节点内容修改为manifest.json文件的version->name节点下内容

如以上三图红圈标记位置都要一致

15 设置应用的图标

点击project->target->General->App Icons and Launch Images->App Icons Source项右侧小箭头

在新开页面根据提示将对应尺寸的应用图标拖入到虚线框中即可

16 设置应用的splash图片

拷贝HBuider-Hello工程的info.plist文件的UILaunchImages节点到新工程info.plist文件，同时拷贝HBuilder-Hello工程下的splash目录到新工程目录下并将其添加到新工程中
根据图片的尺寸逐个替换splash图片，注意文件名不能修改

17 设置应用显示的应用名

点击project->target->General->Identity->Display Name修改应用的显示名称

18 修改info.plist文件，添加App Transport Security Settings类型为Dictionary，在该项下添加Allow Arbitrary Loads项类型为Boolean，值为YES

IOS 10 需要在info.plist文件中添加隐私权限配置

运行时如果提示“打包时未添加XXX模块”，（非中文提示时需要配置国际化），请参考SDK/Feature-ios.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

Android创建最精简离线打包工程

继续阅读 »

ios创建最精简离线打包工程
注意：如果离线打包的是uni-app项目请点击进入查看如何配置

1 打开Xcode，创建新工程，选择“Single View Application”

2 添加创建工程的名称（注意：最好不要填中文或特殊字符）

3 复制HBuilder-Hello工程的delegate和Controller文件覆盖新创建工程的相应文件

4 拷贝以下文件到新创建工程目录下

iOSSDK/SDK/Bundles/PandoraApi.bundle
iOSSDK/SDK/control.xml
iOSSDK/SDK/Libs/liblibPDRCore.a
iOSSDK/SDK/Libs/libcoreSupport.a
iOSSDK/SDK/Libs/liblibUI.a

5 添加刚才拷贝的文件到工程内

6 拷贝IOS-SDK/SDK/inc目录到新创建工程目录下，并添加到工程内

7 点击Project->TARGETS->Build Settings搜索“Other Linker Flags”，双击搜索到的项双击，在弹出框内添加想“-ObjC”

8 点击Projcet->General->Linked Frameworks and Libraries 添加系统库到工程

系统库
JavaScriptCore.framework
WebKit.framework
CoreTelephony.framework
MobileCoreServices.framework
SystemConfiguration.framework
MediaPlayer.framework
AudioToolbox.framework
Security.framework
QuartzCore.framework
CFNetwork.framework
Foundation.framework
CoreFoundation.framework
CoreGraphics.framework
UIKit.framework
QuickLook.framework
libc++.tbd
libxml2.tbd
libz.tbd
libsqlite3.0.tbd
ImageIO.framework
CoreText.framework
Storekit.framework
UserNotifications 并设置为Optianal

9 点击Project->TARGETS->Build Settings搜索“ARC”，修改"Objective-C Automatic Reference Counting"项的值为"NO", 如果希望使用ARC则需要修改相应的内存管理代码。

10 修改头文件搜索路径

点击Project->TARGETS->Build Settings搜索"Header Search Paths",
双击搜索到的"Header Search Paths"项，将工程目录下的inc目录拖到打开的下拉框

11 修改静态库搜索路径

点击Project->TARGETS->Build Settings搜索"Library Search Paths",
如果"Library Search Paths"项下有值则不需要处理，
如果没有值则双击搜索到的"Library Search Paths"项，将工程目录下的libs目录(静态库所在目录)拖到打开的下拉框

12 修改BitCode

点击Project->TARGETS->Build Settings搜索BitCode
将Enable Bitcode项的值改成 ‘NO’

13 添加Web应用到工程

在工程目录下创建目录”Pandora->apps->[APPID]->www“目录，并将Web应用拷贝到www（小写字母）目录下
APPID为要加入到工程应用mainfest.json文件
添加Pandora目录到工程中

添加后会弹出选择类型框，选择”Create Folder References“

添加后工程内的Pandora目录为蓝色

14 修改control.xml文件

修改control.xml文件的appid节点值为mainfest.json文件的id节点下内容,appver节点内容修改为manifest.json文件的version->name节点下内容

如以上三图红圈标记位置都要一致

15 设置应用的图标

点击project->target->General->App Icons and Launch Images->App Icons Source项右侧小箭头

在新开页面根据提示将对应尺寸的应用图标拖入到虚线框中即可

16 设置应用的splash图片

拷贝HBuider-Hello工程的info.plist文件的UILaunchImages节点到新工程info.plist文件，同时拷贝HBuilder-Hello工程下的splash目录到新工程目录下并将其添加到新工程中
根据图片的尺寸逐个替换splash图片，注意文件名不能修改

17 设置应用显示的应用名

点击project->target->General->Identity->Display Name修改应用的显示名称

18 修改info.plist文件，添加App Transport Security Settings类型为Dictionary，在该项下添加Allow Arbitrary Loads项类型为Boolean，值为YES

IOS 10 需要在info.plist文件中添加隐私权限配置

运行时如果提示“打包时未添加XXX模块”，（非中文提示时需要配置国际化），请参考SDK/Feature-ios.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

Android创建最精简离线打包工程

收起阅读 »

HBuilder 原生APP插件开发

插件开发

辅助开发HBuilder的原生插件，有需求可联系QQ511308538 可定制开发插件

为大家献上： H5+(持续更新全面、深入的讲解 H5+)、MUI+(整套) 视频教程

mui

为大家献上： H5+(持续更新)、MUI+(整套) 视频教程。目前进度：

《H5+视频教程》更新中，月底前录制完毕共计20多节，全面讲解H5+的常用API。
视频观看地址
http://www.hcoder.net/course/info_212.html

《mui 教程》已经录制完毕并发布，视频观看地址：
http://www.hcoder.net/course/info_211.html

未来我们将推出项目教程，欢迎大家的意见建议！为了大家更好的学习我经常凌晨赶制，如果您觉得视频教程对您有所帮助，请帮忙顶贴（好东西不应该沉下去），谢谢了。

学习交流群： 335126794 入门密码：超文本标记语言

继续阅读 »

iframe的问题大哥们给解答下啊

一个header 一个iframe iframe的第一个页面是一个列表点击后进入详情页如果列表过长往下滚动下一个详情页滚动条位置不对
安卓上没问题，ios上滚动条位置不对，第一个列表滚动到哪里详情页就滚动到哪里，影响用户体验。
。

关于蓝牙设备搜索和Ble设备的搜索的简单调用方法

Native.JS 蓝牙

最近一段时间一直在调试蓝牙设备，论坛里面关于这方面资料的太少，特别是关于蓝牙4.0的案例，基本上没有，也只好摸石头过河了。目前的代码也就勉强能用，我希望在此抛砖引玉，大家一起来完善这一部分。

说明一下，蓝牙和蓝牙4.0调用的方法是不同的，我最开始没注意到这点，浪费了好多时间。

普通蓝牙搜索（安卓版）

var bArray = [];  
function scanBluetoothDevice(callback){  
    //获取android应用Activity对象  
    var main = plus.android.runtimeMainActivity();  
    //过滤器  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    //蓝牙设备  
    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
    //蓝牙适配器  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  

    var filter = new IntentFilter();  
    var BDevice = new BluetoothDevice();  
    //蓝牙本地适配器  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  

    // 判断是否开启蓝牙  
    if(!BAdapter.isEnabled()) {  
        BAdapter.enable(); //启动蓝牙  
    }  
    BAdapter.startDiscovery(); //开启搜索  

    var receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {  
        onReceive: function(context, intent) { //回调  
            try {                 
                plus.android.importClass(intent); //通过intent实例引入intent类  
                if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {  
                    main.unregisterReceiver(receiver); //取消监听     
                } else {  
                    //从Intent中获取设备对象  
                    BDevice= intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  

                    if(BDevice == null) {  
                        main.unregisterReceiver(receiver); //取消监听  
                        return;  
                    }  

                    var name=BDevice.getAddress()+BDevice.getName();  
                    if(bArray.indexOf(name) == -1){     //去重  
                        bArray.push(name);  
                        callback({  
                            "name": BDevice.getName(),  
                            "SN": BDevice.getAddress()  
                        });   
                    }  

                }  
            } catch(e) {  
                console.error(e);  
            }  
        }  
    });  

    //main.unregisterReceiver(receiver); //取消监听，这一步可以不需要  

    filter.addAction(BDevice.ACTION_FOUND);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);  
    filter.addAction(BAdapter.ACTION_STATE_CHANGED);  
    main.registerReceiver(receiver, filter); //注册监听   
}

蓝牙4.0这部分，在安卓系统5.0及以上版本，需要使用新的api，之前的api无法使用，所以需要判断当前系统，分别使用不同的api来实现。IOS部分目前没有实现。

Ble设备搜索

function Ble() {  
    switch(plus.os.name) {  
        case "Android":  
            bleAndroid();  
            break;  
        case "iOS":  
            bleIOS();    //暂未实现  
            break;  
        default:  
            // 其它平台  
            plus.nativeUI.alert("暂不支持该系统");  
            break;  
    }  
}  

function bleAndroid(){  
    var main = plus.android.runtimeMainActivity();  
    var Intent = plus.android.importClass("android.content.Intent");  
    //蓝牙适配器  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  

    var REQUEST_ENABLE_BT = 1;  
    // 判断是否开启蓝牙  
    if(!BAdapter.isEnabled()) {  
        var enableBtIntent = new Intent(BAdapter.ACTION_REQUEST_ENABLE);  
        main.startActivityForResult(enableBtIntent,REQUEST_ENABLE_BT);  
        return ;  
    }  

    //此判断当前android系统版本高于5.0  
    if(parseInt(plus.os.version) >= 5) {  
        bleAndroid5(BAdapter);    //Native.js无法反射抽象类，目前无法找到解决方法  
    } else {  
        bleAndroid4(BAdapter);  
    }  
}  

function bleAndroid4(BAdapter){  
    //蓝牙搜索回调  
    var mLeScanCallback = plus.android.implements("android.bluetooth.BluetoothAdapter$LeScanCallback", {  
        "onLeScan": function(device, rssi, scanRecord) {  
            // 可通过 scanRecord 获取Ble设备的uuid，major，minor  
        }  
    });  

    BAdapter.startLeScan(mLeScanCallback);  
    console.log("scan start!");  

    setTimeout(function() {  
        BAdapter.stopLeScan(mLeScanCallback);  
        console.log("scan end!");  
    },5000);  
}

目前暂时就这些，后面在慢慢补充吧。

继续阅读 »

最近一段时间一直在调试蓝牙设备，论坛里面关于这方面资料的太少，特别是关于蓝牙4.0的案例，基本上没有，也只好摸石头过河了。目前的代码也就勉强能用，我希望在此抛砖引玉，大家一起来完善这一部分。

说明一下，蓝牙和蓝牙4.0调用的方法是不同的，我最开始没注意到这点，浪费了好多时间。

普通蓝牙搜索（安卓版）

var bArray = [];  
function scanBluetoothDevice(callback){  
    //获取android应用Activity对象  
    var main = plus.android.runtimeMainActivity();  
    //过滤器  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    //蓝牙设备  
    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
    //蓝牙适配器  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  

    var filter = new IntentFilter();  
    var BDevice = new BluetoothDevice();  
    //蓝牙本地适配器  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  

    // 判断是否开启蓝牙  
    if(!BAdapter.isEnabled()) {  
        BAdapter.enable(); //启动蓝牙  
    }  
    BAdapter.startDiscovery(); //开启搜索  

    var receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {  
        onReceive: function(context, intent) { //回调  
            try {                 
                plus.android.importClass(intent); //通过intent实例引入intent类  
                if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {  
                    main.unregisterReceiver(receiver); //取消监听     
                } else {  
                    //从Intent中获取设备对象  
                    BDevice= intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  

                    if(BDevice == null) {  
                        main.unregisterReceiver(receiver); //取消监听  
                        return;  
                    }  

                    var name=BDevice.getAddress()+BDevice.getName();  
                    if(bArray.indexOf(name) == -1){     //去重  
                        bArray.push(name);  
                        callback({  
                            "name": BDevice.getName(),  
                            "SN": BDevice.getAddress()  
                        });   
                    }  

                }  
            } catch(e) {  
                console.error(e);  
            }  
        }  
    });  

    //main.unregisterReceiver(receiver); //取消监听，这一步可以不需要  

    filter.addAction(BDevice.ACTION_FOUND);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);  
    filter.addAction(BAdapter.ACTION_STATE_CHANGED);  
    main.registerReceiver(receiver, filter); //注册监听   
}

蓝牙4.0这部分，在安卓系统5.0及以上版本，需要使用新的api，之前的api无法使用，所以需要判断当前系统，分别使用不同的api来实现。IOS部分目前没有实现。

Ble设备搜索

function Ble() {  
    switch(plus.os.name) {  
        case "Android":  
            bleAndroid();  
            break;  
        case "iOS":  
            bleIOS();    //暂未实现  
            break;  
        default:  
            // 其它平台  
            plus.nativeUI.alert("暂不支持该系统");  
            break;  
    }  
}  

function bleAndroid(){  
    var main = plus.android.runtimeMainActivity();  
    var Intent = plus.android.importClass("android.content.Intent");  
    //蓝牙适配器  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  

    var REQUEST_ENABLE_BT = 1;  
    // 判断是否开启蓝牙  
    if(!BAdapter.isEnabled()) {  
        var enableBtIntent = new Intent(BAdapter.ACTION_REQUEST_ENABLE);  
        main.startActivityForResult(enableBtIntent,REQUEST_ENABLE_BT);  
        return ;  
    }  

    //此判断当前android系统版本高于5.0  
    if(parseInt(plus.os.version) >= 5) {  
        bleAndroid5(BAdapter);    //Native.js无法反射抽象类，目前无法找到解决方法  
    } else {  
        bleAndroid4(BAdapter);  
    }  
}  

function bleAndroid4(BAdapter){  
    //蓝牙搜索回调  
    var mLeScanCallback = plus.android.implements("android.bluetooth.BluetoothAdapter$LeScanCallback", {  
        "onLeScan": function(device, rssi, scanRecord) {  
            // 可通过 scanRecord 获取Ble设备的uuid，major，minor  
        }  
    });  

    BAdapter.startLeScan(mLeScanCallback);  
    console.log("scan start!");  

    setTimeout(function() {  
        BAdapter.stopLeScan(mLeScanCallback);  
        console.log("scan end!");  
    },5000);  
}

目前暂时就这些，后面在慢慢补充吧。

收起阅读 »

【公告】关于actionSheet 安卓样式错乱、iOS 10真机运行、提示PHP等问题的公告

文章地址：http://ask.dcloud.net.cn/article/900
HBuilder 7.5.0的android版本产生了actionSheet 样式错乱问题，该问题已经在最新的alpha版本修复。alpha版下载地址：http://pan.baidu.com/s/1hs0O4eS

HBuilder 7.5.0 已解决iOS10无法真机运行问题，Mac版暂未解决，大家可以使用xcode模拟器调试
更新后如无法使用请
①请在工具-插件安装中，安装iOS链接插件，如已安装请卸载后重新安装，重启HBuilder并重试
②检查是否安装有老版本的iTools，如有安装，请升级到最新版，未安装则无需处理

HBuilder7.4.2版出现的php文件无法使用大纲、无法使用alt+左键转到函数/变量定义等问题。
HBuilder 7.5.0已修复该问题，有此问题者请升级到此版本

如果想退回到历史版本，可以在官网下载界面下方点击历史版本链接。
注意HBuilder的历史版本里自带的真机运行基座都是严格的历史版本，但云端打包的引擎并不是严格和HBuilder历史版本对应的老版打包机，某些版本在云端打包机并不存在，此时会切换为使用最新版本打包。使用plus.runtime可以查看引擎版本。

继续阅读 »

1 打开Xcode，创建新工程，选择“Single View Application”

2 添加创建工程的名称（注意：最好不要填中文或特殊字符）

3 复制HBuilder-Hello工程的delegate和Controller文件覆盖新创建工程的相应文件

4 拷贝以下文件到新创建工程目录下

5 添加刚才拷贝的文件到工程内

6 拷贝IOS-SDK/SDK/inc目录到新创建工程目录下，并添加到工程内

7 点击Project->TARGETS->Build Settings搜索“Other Linker Flags”，双击搜索到的项双击，在弹出框内添加想“-ObjC”

8 点击Projcet->General->Linked Frameworks and Libraries 添加系统库到工程

9 点击Project->TARGETS->Build Settings搜索“ARC”，修改"Objective-C Automatic Reference Counting"项的值为"NO", 如果希望使用ARC则需要修改相应的内存管理代码。

10 修改头文件搜索路径

11 修改静态库搜索路径

12 修改BitCode

13 添加Web应用到工程

14 修改control.xml文件

15 设置应用的图标

16 设置应用的splash图片

17 设置应用显示的应用名

18 修改info.plist文件，添加App Transport Security Settings类型为Dictionary，在该项下添加Allow Arbitrary Loads项类型为Boolean，值为YES

运行时如果提示“打包时未添加XXX模块”，（非中文提示时需要配置国际化），请参考SDK/Feature-ios.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

1 打开Xcode，创建新工程，选择“Single View Application”

2 添加创建工程的名称（注意：最好不要填中文或特殊字符）

3 复制HBuilder-Hello工程的delegate和Controller文件覆盖新创建工程的相应文件

4 拷贝以下文件到新创建工程目录下

5 添加刚才拷贝的文件到工程内

6 拷贝IOS-SDK/SDK/inc目录到新创建工程目录下，并添加到工程内

7 点击Project->TARGETS->Build Settings搜索“Other Linker Flags”，双击搜索到的项双击，在弹出框内添加想“-ObjC”

8 点击Projcet->General->Linked Frameworks and Libraries 添加系统库到工程

9 点击Project->TARGETS->Build Settings搜索“ARC”，修改"Objective-C Automatic Reference Counting"项的值为"NO", 如果希望使用ARC则需要修改相应的内存管理代码。

10 修改头文件搜索路径

11 修改静态库搜索路径

12 修改BitCode

13 添加Web应用到工程

14 修改control.xml文件

15 设置应用的图标

16 设置应用的splash图片

17 设置应用显示的应用名

18 修改info.plist文件，添加App Transport Security Settings类型为Dictionary，在该项下添加Allow Arbitrary Loads项类型为Boolean，值为YES

运行时如果提示“打包时未添加XXX模块”，（非中文提示时需要配置国际化），请参考SDK/Feature-ios.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

热门文章