HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于使用中过程中的jQuery代码提示建议

真心很喜欢hbuilder,现在在努力的从sublime往hbuilder转;但是很多时候觉得hbuilder的很多地方还有待完善;不得不得在使用的过程中再打开sublime;例如jQuery的代码提示;
同样是打hover、click、post;回车,生成的代码如下;
hbuilder:
$(fucntion(){
$('#test').hover();
$('#test').click();
$.post()

})
sublime:
$(function(){
$('#test').hover(function() {
/ Stuff to do when the mouse enters the element /
}, function() {
/ Stuff to do when the mouse leaves the element /
});
$('#test').click(function(event) {
/ Act on the event /
});
$.post('/path/to/file', param1: 'value1', function(data, textStatus, xhr) {
/optional stuff to do after success /
});
})
还有就是直接打开远程服务器端的文件;hbuilder不能使用less和jQuery提示;
渴望hbuilder的代码提示功能可以加强;
愿hbuilder越来越完善;

继续阅读 »

真心很喜欢hbuilder,现在在努力的从sublime往hbuilder转;但是很多时候觉得hbuilder的很多地方还有待完善;不得不得在使用的过程中再打开sublime;例如jQuery的代码提示;
同样是打hover、click、post;回车,生成的代码如下;
hbuilder:
$(fucntion(){
$('#test').hover();
$('#test').click();
$.post()

})
sublime:
$(function(){
$('#test').hover(function() {
/ Stuff to do when the mouse enters the element /
}, function() {
/ Stuff to do when the mouse leaves the element /
});
$('#test').click(function(event) {
/ Act on the event /
});
$.post('/path/to/file', param1: 'value1', function(data, textStatus, xhr) {
/optional stuff to do after success /
});
})
还有就是直接打开远程服务器端的文件;hbuilder不能使用less和jQuery提示;
渴望hbuilder的代码提示功能可以加强;
愿hbuilder越来越完善;

收起阅读 »

MUI+HTML5+集成 IOS Weibo APP例子

HBuilder HTML5+ mui

最近闲得蛋痛,无意间发现了这么个东东,看看觉得还行,于是乎准备写个demo来玩玩,这一写不要紧,看到官方的文档,立马蛋都碎了~这~~
想查个API真是翻山越岭,走遍大江南北,什么百度、Google、360翻了个底朝天,就连个简单的demo都没人放出来,真是心碎了,好吧!事以至此还是看官方的组件例子吧,这个CSS啊,JS啊看得是头晕眼花,而且还不带任何关联的,这要写个成型的东东出来逼得死人哇。好在我这个人是个打不死的小强,我就不信了爷还征服不了你,立马菊花一紧,饭也不用吃了,水也不要喝了,烟也不要抽了,盯着个HBuilder码呀码呀码,码到一半都想砸电脑了,低头一看,得了还是别砸了,这尼玛是公司的Mac!认命吧,接着码,突然灵光一闪,醍醐灌顶,我艹,原来是这么回事哇,原来晚上才是IT男的天下,这句话真是一点都没错呀。好吧,经过一天的努力终于有个demo的样子了,收工了,打豆豆!!!!

继续阅读 »

最近闲得蛋痛,无意间发现了这么个东东,看看觉得还行,于是乎准备写个demo来玩玩,这一写不要紧,看到官方的文档,立马蛋都碎了~这~~
想查个API真是翻山越岭,走遍大江南北,什么百度、Google、360翻了个底朝天,就连个简单的demo都没人放出来,真是心碎了,好吧!事以至此还是看官方的组件例子吧,这个CSS啊,JS啊看得是头晕眼花,而且还不带任何关联的,这要写个成型的东东出来逼得死人哇。好在我这个人是个打不死的小强,我就不信了爷还征服不了你,立马菊花一紧,饭也不用吃了,水也不要喝了,烟也不要抽了,盯着个HBuilder码呀码呀码,码到一半都想砸电脑了,低头一看,得了还是别砸了,这尼玛是公司的Mac!认命吧,接着码,突然灵光一闪,醍醐灌顶,我艹,原来是这么回事哇,原来晚上才是IT男的天下,这句话真是一点都没错呀。好吧,经过一天的努力终于有个demo的样子了,收工了,打豆豆!!!!

收起阅读 »

关于AVG AntVirus Business Edition会误杀HBuilder关键文件的说明

启动 杀毒软件 误报

第一步 双击误报了的组件 主要有 两个如图


接下来继续看图









排除无效的话 就可能需要勾选 任意位置 和可更改所有内容

继续阅读 »

第一步 双击误报了的组件 主要有 两个如图


接下来继续看图









排除无效的话 就可能需要勾选 任意位置 和可更改所有内容

收起阅读 »

安卓分享9宫格图片到微信

分享链接 分享 Native.JS

首先感谢@DCloud_Android_磊子,test_weixin_share_mul_pic这个是他写给我的,我只做了一点小改动
用法,先setShareMsg把当前页面的商品名称、相册存到全局变量msg,然后调用shareToWechat弹出actionSheet选择分享到朋友圈或者发送给好友。
函数代码如下:

  function setShareMsg(goodsdata){  
            msg.content = msg.title = goodsdata.goods_name;  
            /* 分享图片 */  
            mui.each(goodsdata.pictures, function(i, n){  
                msg.pictures.push( n.url );  
            });  
            /* 分享链接 */  
            msg.href = mui.constMap.SERVER_HOST + "/mobile/goods.php?id=" + goodsdata.id ;  
            msg.thumbs.push("_www/72.png");  
            var userdata = getCachedUser();  
            if(userdata ){  
                msg.href += "&father=" + userdata.user.wx.wxid;  
            }  
            msg.brief = goodsdata.goods_brief;  
            getShortUrl(msg.href, function(result){  
                if(! result.error_code){  
                    msg.url_short = result[0].url_short;  
                }  
            });  
        }  
                  /**  
         * 发送分享消息  
         * @param {plus.share.ShareService} s  
         */  
        function shareMessage(ex) {  
            var pictures = [];  
            var pic_unloaded = msg.pictures.length ;  
            function onStateChanged( d, status ) {  
                switch(d.state){  
                    case 4:  
                        if(status == 200){  
                            console.log("图片下载完成:" + d.filename);  
                            pictures.push( plus.io.convertLocalFileSystemURL(d.filename) );  
                            pic_unloaded --;  
                            if(pic_unloaded == 0){  
                                copyToClip( msg.title + (msg.url_short || msg.href) + "\r\n" + msg.brief );  
                                mui.toast("标题已复制,请长按黏贴");  
                                console.log(JSON.stringify(pictures));  
                                test_weixin_share_mul_pic(ex, pictures, msg.title + (msg.url_short || msg.href) + "\r\n" + msg.brief);  
                            }  
                        } else {  
                            mui.toast("下载图片失败");  
                        }  
                        break;  
                    case 1:  
                        console.log("下载开始");  
                        break;  
                    case 2:  
                        console.log("请求已响应");   
                        break;  
                    case 3:  
                        console.log("下载进行中");  
                        break;  
                    default:  
                        console.log("state: " + d.state);  
                        break;  
                }  
            }  
            mui.toast("下载图片中,即将打开微信分享...");  
            mui.each(msg.pictures, function(i, n){  
                // 创建下载任务  
                var dtask = plus.downloader.createDownload( n );  
                dtask.addEventListener( "statechanged", onStateChanged, false );  
                dtask.start();  
            });  
        }  
        function shareToWechat(){  
            var shareto = ['com.tencent.mm.ui.tools.ShareToTimeLineUI', 'com.tencent.mm.ui.tools.ShareImgUI'];  
            plus.nativeUI.actionSheet( {title:"分享到微信",cancel:"取消",buttons:[{title:"分享到微信朋友圈"},{title:"发送给微信好友"}]}, function(e){  
                console.log( "User pressed: "+ e.index);  
                shareMessage(shareto[e.index - 1]);  
            } );  
        }  
        function test_weixin_share_mul_pic(ex, pics, description){  
            var Intent = plus.android.importClass('android.content.Intent');  
            var ComponentName = plus.android.importClass('android.content.ComponentName');  
            var ArrayList = plus.android.importClass('java.util.ArrayList');  
            var Uri = plus.android.importClass('android.net.Uri');  
            var Environment = plus.android.importClass('android.os.Environment');  
            var File = plus.android.importClass('java.io.File');  
            //var sdcardDir = plus.android.invoke(Environment.getExternalStorageDirectory(),'getAbsolutePath');  
            var intent = new Intent();  
            var localComponentName = new ComponentName("com.tencent.mm", ex);  
            intent.setComponent(localComponentName);  
            intent.setAction("android.intent.action.SEND_MULTIPLE");  
            intent.setType("image/*");  
            var localArrayList = new ArrayList();  
            for(var i =0;i< pics.length;i++){  
                var filePath = pics[i]; //sdcardDir +   
                //console.log('filePath=' + filePath);  
                localArrayList.add(Uri.fromFile(new File(filePath)));  
            }  
            intent.putParcelableArrayListExtra("android.intent.extra.STREAM", localArrayList);  
            intent.putExtra(Intent.EXTRA_TEXT, description);     
            var act = plus.android.runtimeMainActivity();  
            act.startActivity(intent);  
        }
继续阅读 »

首先感谢@DCloud_Android_磊子,test_weixin_share_mul_pic这个是他写给我的,我只做了一点小改动
用法,先setShareMsg把当前页面的商品名称、相册存到全局变量msg,然后调用shareToWechat弹出actionSheet选择分享到朋友圈或者发送给好友。
函数代码如下:

  function setShareMsg(goodsdata){  
            msg.content = msg.title = goodsdata.goods_name;  
            /* 分享图片 */  
            mui.each(goodsdata.pictures, function(i, n){  
                msg.pictures.push( n.url );  
            });  
            /* 分享链接 */  
            msg.href = mui.constMap.SERVER_HOST + "/mobile/goods.php?id=" + goodsdata.id ;  
            msg.thumbs.push("_www/72.png");  
            var userdata = getCachedUser();  
            if(userdata ){  
                msg.href += "&father=" + userdata.user.wx.wxid;  
            }  
            msg.brief = goodsdata.goods_brief;  
            getShortUrl(msg.href, function(result){  
                if(! result.error_code){  
                    msg.url_short = result[0].url_short;  
                }  
            });  
        }  
                  /**  
         * 发送分享消息  
         * @param {plus.share.ShareService} s  
         */  
        function shareMessage(ex) {  
            var pictures = [];  
            var pic_unloaded = msg.pictures.length ;  
            function onStateChanged( d, status ) {  
                switch(d.state){  
                    case 4:  
                        if(status == 200){  
                            console.log("图片下载完成:" + d.filename);  
                            pictures.push( plus.io.convertLocalFileSystemURL(d.filename) );  
                            pic_unloaded --;  
                            if(pic_unloaded == 0){  
                                copyToClip( msg.title + (msg.url_short || msg.href) + "\r\n" + msg.brief );  
                                mui.toast("标题已复制,请长按黏贴");  
                                console.log(JSON.stringify(pictures));  
                                test_weixin_share_mul_pic(ex, pictures, msg.title + (msg.url_short || msg.href) + "\r\n" + msg.brief);  
                            }  
                        } else {  
                            mui.toast("下载图片失败");  
                        }  
                        break;  
                    case 1:  
                        console.log("下载开始");  
                        break;  
                    case 2:  
                        console.log("请求已响应");   
                        break;  
                    case 3:  
                        console.log("下载进行中");  
                        break;  
                    default:  
                        console.log("state: " + d.state);  
                        break;  
                }  
            }  
            mui.toast("下载图片中,即将打开微信分享...");  
            mui.each(msg.pictures, function(i, n){  
                // 创建下载任务  
                var dtask = plus.downloader.createDownload( n );  
                dtask.addEventListener( "statechanged", onStateChanged, false );  
                dtask.start();  
            });  
        }  
        function shareToWechat(){  
            var shareto = ['com.tencent.mm.ui.tools.ShareToTimeLineUI', 'com.tencent.mm.ui.tools.ShareImgUI'];  
            plus.nativeUI.actionSheet( {title:"分享到微信",cancel:"取消",buttons:[{title:"分享到微信朋友圈"},{title:"发送给微信好友"}]}, function(e){  
                console.log( "User pressed: "+ e.index);  
                shareMessage(shareto[e.index - 1]);  
            } );  
        }  
        function test_weixin_share_mul_pic(ex, pics, description){  
            var Intent = plus.android.importClass('android.content.Intent');  
            var ComponentName = plus.android.importClass('android.content.ComponentName');  
            var ArrayList = plus.android.importClass('java.util.ArrayList');  
            var Uri = plus.android.importClass('android.net.Uri');  
            var Environment = plus.android.importClass('android.os.Environment');  
            var File = plus.android.importClass('java.io.File');  
            //var sdcardDir = plus.android.invoke(Environment.getExternalStorageDirectory(),'getAbsolutePath');  
            var intent = new Intent();  
            var localComponentName = new ComponentName("com.tencent.mm", ex);  
            intent.setComponent(localComponentName);  
            intent.setAction("android.intent.action.SEND_MULTIPLE");  
            intent.setType("image/*");  
            var localArrayList = new ArrayList();  
            for(var i =0;i< pics.length;i++){  
                var filePath = pics[i]; //sdcardDir +   
                //console.log('filePath=' + filePath);  
                localArrayList.add(Uri.fromFile(new File(filePath)));  
            }  
            intent.putParcelableArrayListExtra("android.intent.extra.STREAM", localArrayList);  
            intent.putExtra(Intent.EXTRA_TEXT, description);     
            var act = plus.android.runtimeMainActivity();  
            act.startActivity(intent);  
        }
收起阅读 »

App资源在线升级更新

更新 升级 wgt widget

官方已发布APP升级中心,支持原生APP整包升级和wgt资源包升级。详见

注意:uni-app的热更新另见文档https://ask.dcloud.net.cn/article/35667

5+应用可使用以下方式进行升级

本文重点介绍5+应用资源独立升级,相对整包升级有以下优势:

  1. 无需重新提交应用市场审核更新,降低更新周期;
  2. 无需用户手动点击操作安装更新,优化用户体验;
  3. App资源相对整包体积更小,升级速度更快。

生成移动App资源升级包

  • 在HBuilder中编辑好新的移动App资源后,更新manifest.json的版本号
    原来版本是1.0,新版本修改为2.0:

  • 在HBuilder中生成升级包文件(wgt)
    菜单“发行” -> “制作移动App资源升级包”:

    在以下界面中通过“浏览”按钮选择保存路径,点击“确定”保存wgt文件:

  • 生成wgt后提交到手机可访问的网络地址
    App资源升级包下载地址:
    http://www.dcloud.io/docs/a/update/H5EF3C469.wgt
    为了模拟正常的升级检测流程,添加以下检测升级地址(返回最新版本号):
    http://demo.dcloud.net.cn/test/update/check.php

应用中检测更新资源

检测服务器上是否有新版本

  • 获取当前应用的版本号

    var wgtVer=null;  
    function plusReady(){  
    // ......  
    // 获取本地应用资源版本号  
    plus.runtime.getProperty(plus.runtime.appid,function(inf){  
        wgtVer=inf.version;  
        console.log("当前应用版本:"+wgtVer);  
    });  
    }  
    if(window.plus){  
    plusReady();  
    }else{  
    document.addEventListener('plusready',plusReady,false);  
    }
  • 发起ajax请求检测是否有新版本

    // 检测更新  
    var checkUrl="http://demo.dcloud.net.cn/test/update/check.php";  
    function checkUpdate(){  
    plus.nativeUI.showWaiting("检测更新...");  
    var xhr=new XMLHttpRequest();  
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            plus.nativeUI.closeWaiting();  
            if(xhr.status==200){  
                console.log("检测更新成功:"+xhr.responseText);  
                var newVer=xhr.responseText;  
                if(wgtVer&&newVer&&(wgtVer!=newVer)){  
                    downWgt();  // 下载升级包  
                }else{  
                    plus.nativeUI.alert("无新版本可更新!");  
                }  
            }else{  
                console.log("检测更新失败!");  
                plus.nativeUI.alert("检测更新失败!");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',checkUrl);  
    xhr.send();  
    }

更新应用资源

  • 从服务器下载应用资源包(wgt文件)

    // 下载wgt文件  
    var wgtUrl="http://demo.dcloud.net.cn/test/update/H5EF3C469.wgt";  
    function downWgt(){  
    plus.nativeUI.showWaiting("下载wgt文件...");  
    plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){  
        if ( status == 200 ) {   
            console.log("下载wgt成功:"+d.filename);  
            installWgt(d.filename); // 安装wgt包  
        } else {  
            console.log("下载wgt失败!");  
            plus.nativeUI.alert("下载wgt失败!");  
        }  
        plus.nativeUI.closeWaiting();  
    }).start();  
    }
  • 更新应用资源包(wgt文件)

    // 更新应用资源  
    function installWgt(path){  
    plus.nativeUI.showWaiting("安装wgt文件...");  
    plus.runtime.install(path,{},function(){  
        plus.nativeUI.closeWaiting();  
        console.log("安装wgt文件成功!");  
        plus.nativeUI.alert("应用资源更新完成!",function(){  
            plus.runtime.restart();  
        });  
    },function(e){  
        plus.nativeUI.closeWaiting();  
        console.log("安装wgt文件失败["+e.code+"]:"+e.message);  
        plus.nativeUI.alert("安装wgt文件失败["+e.code+"]:"+e.message);  
    });  
    }

    wgt更新原生层是通过文件夹重命名方式实现,要么全部更新成功,要么更新失败,不会出现仅部分文件更新的情况

其它可改进的思路

  • 检测更新更好的模式应该是客户端提交本地应用资源版本号到升级服务器,由升级服务器判断是否可更新并且返回App升级资源包下载地址,避免在客户端写资源下载地址;
  • 更新时可以在后台静默下载,下次启动是直接更新,避免更新时打断用户操作。
  • 差量升级更新App资源,参考App资源在线差量升级更新

附件testUpdate.zip为测试移动App包

App store应用更新说明
应用资源更新肯定是违反apple政策的,但目前看起来,如果你不是很大的公司,apple不会理睬你。如果你是大公司,建议不要做整体更新,每次更新几个页面,也不要提示更新后需要重启,这样会安全点。

继续阅读 »

官方已发布APP升级中心,支持原生APP整包升级和wgt资源包升级。详见

注意:uni-app的热更新另见文档https://ask.dcloud.net.cn/article/35667

5+应用可使用以下方式进行升级

本文重点介绍5+应用资源独立升级,相对整包升级有以下优势:

  1. 无需重新提交应用市场审核更新,降低更新周期;
  2. 无需用户手动点击操作安装更新,优化用户体验;
  3. App资源相对整包体积更小,升级速度更快。

生成移动App资源升级包

  • 在HBuilder中编辑好新的移动App资源后,更新manifest.json的版本号
    原来版本是1.0,新版本修改为2.0:

  • 在HBuilder中生成升级包文件(wgt)
    菜单“发行” -> “制作移动App资源升级包”:

    在以下界面中通过“浏览”按钮选择保存路径,点击“确定”保存wgt文件:

  • 生成wgt后提交到手机可访问的网络地址
    App资源升级包下载地址:
    http://www.dcloud.io/docs/a/update/H5EF3C469.wgt
    为了模拟正常的升级检测流程,添加以下检测升级地址(返回最新版本号):
    http://demo.dcloud.net.cn/test/update/check.php

应用中检测更新资源

检测服务器上是否有新版本

  • 获取当前应用的版本号

    var wgtVer=null;  
    function plusReady(){  
    // ......  
    // 获取本地应用资源版本号  
    plus.runtime.getProperty(plus.runtime.appid,function(inf){  
        wgtVer=inf.version;  
        console.log("当前应用版本:"+wgtVer);  
    });  
    }  
    if(window.plus){  
    plusReady();  
    }else{  
    document.addEventListener('plusready',plusReady,false);  
    }
  • 发起ajax请求检测是否有新版本

    // 检测更新  
    var checkUrl="http://demo.dcloud.net.cn/test/update/check.php";  
    function checkUpdate(){  
    plus.nativeUI.showWaiting("检测更新...");  
    var xhr=new XMLHttpRequest();  
    xhr.onreadystatechange=function(){  
        switch(xhr.readyState){  
            case 4:  
            plus.nativeUI.closeWaiting();  
            if(xhr.status==200){  
                console.log("检测更新成功:"+xhr.responseText);  
                var newVer=xhr.responseText;  
                if(wgtVer&&newVer&&(wgtVer!=newVer)){  
                    downWgt();  // 下载升级包  
                }else{  
                    plus.nativeUI.alert("无新版本可更新!");  
                }  
            }else{  
                console.log("检测更新失败!");  
                plus.nativeUI.alert("检测更新失败!");  
            }  
            break;  
            default:  
            break;  
        }  
    }  
    xhr.open('GET',checkUrl);  
    xhr.send();  
    }

更新应用资源

  • 从服务器下载应用资源包(wgt文件)

    // 下载wgt文件  
    var wgtUrl="http://demo.dcloud.net.cn/test/update/H5EF3C469.wgt";  
    function downWgt(){  
    plus.nativeUI.showWaiting("下载wgt文件...");  
    plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){  
        if ( status == 200 ) {   
            console.log("下载wgt成功:"+d.filename);  
            installWgt(d.filename); // 安装wgt包  
        } else {  
            console.log("下载wgt失败!");  
            plus.nativeUI.alert("下载wgt失败!");  
        }  
        plus.nativeUI.closeWaiting();  
    }).start();  
    }
  • 更新应用资源包(wgt文件)

    // 更新应用资源  
    function installWgt(path){  
    plus.nativeUI.showWaiting("安装wgt文件...");  
    plus.runtime.install(path,{},function(){  
        plus.nativeUI.closeWaiting();  
        console.log("安装wgt文件成功!");  
        plus.nativeUI.alert("应用资源更新完成!",function(){  
            plus.runtime.restart();  
        });  
    },function(e){  
        plus.nativeUI.closeWaiting();  
        console.log("安装wgt文件失败["+e.code+"]:"+e.message);  
        plus.nativeUI.alert("安装wgt文件失败["+e.code+"]:"+e.message);  
    });  
    }

    wgt更新原生层是通过文件夹重命名方式实现,要么全部更新成功,要么更新失败,不会出现仅部分文件更新的情况

其它可改进的思路

  • 检测更新更好的模式应该是客户端提交本地应用资源版本号到升级服务器,由升级服务器判断是否可更新并且返回App升级资源包下载地址,避免在客户端写资源下载地址;
  • 更新时可以在后台静默下载,下次启动是直接更新,避免更新时打断用户操作。
  • 差量升级更新App资源,参考App资源在线差量升级更新

附件testUpdate.zip为测试移动App包

App store应用更新说明
应用资源更新肯定是违反apple政策的,但目前看起来,如果你不是很大的公司,apple不会理睬你。如果你是大公司,建议不要做整体更新,每次更新几个页面,也不要提示更新后需要重启,这样会安全点。

收起阅读 »

仿网易效果的导航条插件-20150312修改篇

提醒 2015-3-12 14:19

今天自己在使用的时候发现导航条动态添加的时候有问题,会出现效果无法实现。主要是因为有个计算的一页显示的地方出现问题。
现在给出一个临时的解决方案。使用css rem单位进行控制。
css代码 这里是一页显示4个样例


.mui-segmented-control .mui-control-item{  
    width: 5rem;  
}  

添加js代码段

var handlerOrientationChange = function() {  
                var width = window.innerWidth;  
                var fontSize = 16 * (width / 320);  
                document.documentElement.style.fontSize = fontSize + "px";  
            };  
            window.onresize = handlerOrientationChange;  
            setTimeout(function() {  
                handlerOrientationChange();  
            }, 0)

以上如果有问题可以加我QQ:75811329.共同研究。

update time:2015-3-10 20:55

附件已经是最新项目包,解决了到scrollIIndex=-1或者大于0时的bug。请大家及时更新

最近看到大家都在找网易客户端的导航条,今天花了一天时间给大家在mui.js的基础上进行了封装一下,规范完全按照mui进行封装的。可以直接用我mui.js替换你项目目录下的mui.js就可以使用了此功能。
由于我的机型不是太多,所以没有做太多的适配。

参数解释

   var scroll = mui('.mui-slider');  
        scroll.slider({  
        isScroll:true, //是否可滑动  
        pageSize:6, //导航条可显示几条数据 默认为4  
            scrollIndex:-1//最小为-1 最大不能大于pageSize-3  也就是当滑倒第几个项时会出现隐藏的项默认为最后一项  
   });

注意这里

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>

mui-col-xs-2 这个css样式还是需要大家自己去设置的。

具体实现的效果大家自己去运行demo吧。我把demo的源码放上来了

效果类似与

继续阅读 »

提醒 2015-3-12 14:19

今天自己在使用的时候发现导航条动态添加的时候有问题,会出现效果无法实现。主要是因为有个计算的一页显示的地方出现问题。
现在给出一个临时的解决方案。使用css rem单位进行控制。
css代码 这里是一页显示4个样例


.mui-segmented-control .mui-control-item{  
    width: 5rem;  
}  

添加js代码段

var handlerOrientationChange = function() {  
                var width = window.innerWidth;  
                var fontSize = 16 * (width / 320);  
                document.documentElement.style.fontSize = fontSize + "px";  
            };  
            window.onresize = handlerOrientationChange;  
            setTimeout(function() {  
                handlerOrientationChange();  
            }, 0)

以上如果有问题可以加我QQ:75811329.共同研究。

update time:2015-3-10 20:55

附件已经是最新项目包,解决了到scrollIIndex=-1或者大于0时的bug。请大家及时更新

最近看到大家都在找网易客户端的导航条,今天花了一天时间给大家在mui.js的基础上进行了封装一下,规范完全按照mui进行封装的。可以直接用我mui.js替换你项目目录下的mui.js就可以使用了此功能。
由于我的机型不是太多,所以没有做太多的适配。

参数解释

   var scroll = mui('.mui-slider');  
        scroll.slider({  
        isScroll:true, //是否可滑动  
        pageSize:6, //导航条可显示几条数据 默认为4  
            scrollIndex:-1//最小为-1 最大不能大于pageSize-3  也就是当滑倒第几个项时会出现隐藏的项默认为最后一项  
   });

注意这里

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>

mui-col-xs-2 这个css样式还是需要大家自己去设置的。

具体实现的效果大家自己去运行demo吧。我把demo的源码放上来了

效果类似与

收起阅读 »

关于给MUI的建议

使用了一段时间的mui了,发现很多mui的控件使用静态加载的就可以,动态加载的不可以。
希望工作人员能够把那些动态加载需要手动初始化的整理出来下或者是改进。

使用了一段时间的mui了,发现很多mui的控件使用静态加载的就可以,动态加载的不可以。
希望工作人员能够把那些动态加载需要手动初始化的整理出来下或者是改进。

extjs的sdocml文件

sdocml HBuilder

目前有4.0和4.1beta的文件参见如下
extjs4.0-v0.1.sdocml
extjs4.1.beta-v.0.1.sdocml
由于这两个文件太大了,直接集成会导致包体积大增,所以没有集成
如果需要请右键项目->引入框架语法提示->导入即可

继续阅读 »

目前有4.0和4.1beta的文件参见如下
extjs4.0-v0.1.sdocml
extjs4.1.beta-v.0.1.sdocml
由于这两个文件太大了,直接集成会导致包体积大增,所以没有集成
如果需要请右键项目->引入框架语法提示->导入即可

收起阅读 »

如何获取iOS设备Crash log

获取崩溃日志
  1. 将产生崩溃的设备连接到PC,打开iTunes, 等待iTunes同步Crash日志完成
  2. Mac机器打开Finder,进入~/Library/Logs/CrashReporter/MobileDevice目录
    Widnows机器进入C:\Users\<user_name>\AppData\Roaming\Apple computer\Logs\CrashReporter/MobileDevice
    Windows XP进入C:\Documents and Settings\<user_name>\Application Data\Apple computer\Logs\CrashReporter
  3. 在上述目录中找到以设备名命名的文件夹中,过滤以DCloud_Pandora 开始的文件,根据产生Crash的时间确定Crash的日志文件
继续阅读 »
  1. 将产生崩溃的设备连接到PC,打开iTunes, 等待iTunes同步Crash日志完成
  2. Mac机器打开Finder,进入~/Library/Logs/CrashReporter/MobileDevice目录
    Widnows机器进入C:\Users\<user_name>\AppData\Roaming\Apple computer\Logs\CrashReporter/MobileDevice
    Windows XP进入C:\Documents and Settings\<user_name>\Application Data\Apple computer\Logs\CrashReporter
  3. 在上述目录中找到以设备名命名的文件夹中,过滤以DCloud_Pandora 开始的文件,根据产生Crash的时间确定Crash的日志文件
收起阅读 »

使用emmet快速生成css时,如何仅生成需要的浏览器类型

EMMET HBuilder

emmet快速生成浏览器兼容数据很方便,但某些情况下,我们可能只需要兼容数据中的一条或两条,该如何做呢?
如在css为div指定transition时,如果直接输入trans按下tab生成如下代码

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            -ms-transition: prop time;  
            -o-transition: prop time;  
            transition: prop time;  
 }

但实际上,我们可能仅需要-webkit和-moz类型的兼容数据
如果你想手工指定想要的前缀,可以这样做 ,先输入一个小横线,然后是前缀的缩写形式
w 表示 webkit 前缀,m 是 moz 前缀,s 是 ms 前缀 .. o 就是 o 前缀
比如我们只想使用 webkit 前缀 输入一个 w ,我们可以继续指定其它的前缀
最后再加上一个小横线 .
然后是属性的缩写-wm-trans然后按下tab
生成结果如下

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            transition: prop time;  
}

感谢网友 @南安 的分享

继续阅读 »

emmet快速生成浏览器兼容数据很方便,但某些情况下,我们可能只需要兼容数据中的一条或两条,该如何做呢?
如在css为div指定transition时,如果直接输入trans按下tab生成如下代码

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            -ms-transition: prop time;  
            -o-transition: prop time;  
            transition: prop time;  
 }

但实际上,我们可能仅需要-webkit和-moz类型的兼容数据
如果你想手工指定想要的前缀,可以这样做 ,先输入一个小横线,然后是前缀的缩写形式
w 表示 webkit 前缀,m 是 moz 前缀,s 是 ms 前缀 .. o 就是 o 前缀
比如我们只想使用 webkit 前缀 输入一个 w ,我们可以继续指定其它的前缀
最后再加上一个小横线 .
然后是属性的缩写-wm-trans然后按下tab
生成结果如下

.div{  
            -webkit-transition: prop time;  
            -moz-transition: prop time;  
            transition: prop time;  
}

感谢网友 @南安 的分享

收起阅读 »

今天写了一个mui下拉刷新的ajax实现

mui 下拉刷新

通过给后台传递last 和amount两个参数,获取json数组数据。

        <script>  
            mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    }  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            var last=-5,amount=5;  
            function pulldownRefresh() {  
                    last =last+amount;  

                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    mui.ajax({  
                    type: "post",  
                    dataType: "json",  
                    url: "http://localhost/amazeui/data.php?action=item",  
                    data: "last="+last+"&amount="+amount,  
                    complete :function(){$("#load").hide();},  
                    success: function(msg){  
                        var data = msg;  
                        var tmp='';  

                        $.each(data, function(i, n){  

                                var li = document.createElement('li');  
                                li.className = 'mui-table-view-cell';  
                                li.innerHTML = '<a class="mui-navigate-right">' + n.itemname + '</a>';  
                        //下拉刷新,新纪录插到最前面;  
                        table.insertBefore(li, table.firstChild);  
                             });    

                        }  
                    });    

                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  

            }  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>
继续阅读 »

通过给后台传递last 和amount两个参数,获取json数组数据。

        <script>  
            mui.init({  
                swipeBack: false,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    }  
                }  
            });  
            /**  
             * 下拉刷新具体业务实现  
             */  
            var last=-5,amount=5;  
            function pulldownRefresh() {  
                    last =last+amount;  

                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    mui.ajax({  
                    type: "post",  
                    dataType: "json",  
                    url: "http://localhost/amazeui/data.php?action=item",  
                    data: "last="+last+"&amount="+amount,  
                    complete :function(){$("#load").hide();},  
                    success: function(msg){  
                        var data = msg;  
                        var tmp='';  

                        $.each(data, function(i, n){  

                                var li = document.createElement('li');  
                                li.className = 'mui-table-view-cell';  
                                li.innerHTML = '<a class="mui-navigate-right">' + n.itemname + '</a>';  
                        //下拉刷新,新纪录插到最前面;  
                        table.insertBefore(li, table.firstChild);  
                             });    

                        }  
                    });    

                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  

            }  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }  
        </script>
收起阅读 »