HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

[经验分享] mui.openWindowWithTitle 使用原生导航栏控件的一点体会

openWindowWithTitle

以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。HBuilder8.0.1版新增原生导航栏控件,并推荐优先使用,并建议非必要不使用双webview模式的webview title,而改用原生title。我阅读官网文档并实际做了测试,来代替原先的双webview方案,总结出来的几点经验分享一下,免得有像我一样的菜鸟困惑。

1、要使用openWindowWithTitle,第一步请先修改manifest.json文件,特别要提醒的是,要在代码视图中修改,图形界面是没有的,这一点,官网文档并未提及,只说要修改manifest.json文件。
plus->launchwebview->navigationbar
"plus": {
"launchwebview": {
"navigationbar": {
"backgroundcolor": "#f7f7f7",
"titletext": "首页",
"titlecolor": "#ff461f"
}
}
}

2、原先使用双webview方案的时候,打开新页面并没有等待的菊花图显示,实际感觉打开新页面的速度并不慢。
mui的demo中使用的openWindowWithTitle打开新页面总是显示等待的菊花图,感觉要花更多的时间来打开新页面,让我这个强迫症十分不爽。经过仔细查阅文档,加用waiting参数可以不再显示等待的菊花图。例:
mui.openWindowWithTitle({
url:href,
id:href,
styles:webview_style,
show:{
event:"loaded",
extras:extras
},
waiting:{
autoShow: false
}
},{
title:{
text:fire_data.headertitle
},
back:{
image:{ ........................................... 后面的代码略
如果有人觉得显示等待的菊花图会更人性化,此节可以忽略。

3、mui的demo里 不管是老版本,还是新增base64编码的image数据,右上角“关于”的那个图标,点击后打开about.html文件,
这个图标中间的 "i" 符号过于呆板,建议使用plus的demo中提供的image数据,“i” 为斜体展示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAADkUlEQVR4nO2b63HTQBRGTxj+EyrAVBAzWwBKBYQO0kHcAU4HTgehApwKUArYwa4ApwJwBeGHNuAY2URaSfczuWcmk3jH+xid7N596ej+/h5HhxfWDXAe40LEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEeGndgKbEGEdAkX7GwMmOry6BBVAC8xDCz/5bl8/RodztjTEWwAT40LKIG2AWQii7alMfyAuJMY6BGfC+oyJvgamqGGkhMcYZcNFT8VchhElPZbdGUkiM8Zhq7N8VH7piCRRK8UVulpWGqJL+ZZDqWKQ6JZDqIalnLIA3GcUs0+8mQmV6iloPKWkv4zPwOoQwDiGMgVNg/cS8J6luc2R6SGYAvw0hFDVlzmk2TTYP9BI9JK0xcmZTsx3pq4blXFjHEwkhwLSncs9a5NkldxDMh6zUO75mFvMoKKfJwTXtV/WnVgtHhb2sLsbsE2AVY1ykz7mr+glGQd60h6T/5B9mDdjP2xDCauhKrWNImzF+KAqLSq2FFMb176OwqNRaSFdTzDvgkmqYOaJaFOZiMv21Duq5+1VrYBJCuN5MDCGUMcbMogfZS/sL6x6SwyUw2pYBvycLB8khCllTrROmwPGOh18M2qIOOUQh58AorTm+Uz/WF0M2qEusY0gbvmx+2LGiLgZpSQ8cYg/Z5HY7IQ1hJgG5C6yFLP/9lb0satKKzDIfyG1bK6yF1D3QJpQ1aV2t/nPb1gprIWUP+YvMMveV3TuHLGS5fQaebjXmnMdvMu+onEaYCkm7qTcts5c1aaONv6+oztnbcGN14cG6h0D7E7qyJm1F2tOiOoVsux9ldmpofmIIEGMsaX6otPO8Ip2Lz2k3fNVemBgKlYXhBPjWJEOdjLQGmQCfMtoyzcibjUQPgVbXgD6GEOYp7zHVlsqEvKBufg1IRghA2p966ip7zZ+1Qhc345fpgp0pCkF9k4Knr5BfUYnoQsYdIvtfUkLSVPOc6gENxRI4U7jXC2JD1gPP+XUESSEPPMcXdqSGrG3SAzulZps9g1vgnaIMEO8hm/hLn6Kk+HJGs9eiS4tbiG04OCH/O9Ix5DniQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAxfgHyQw1G9FJgWwAAAABJRU5ErkJggg=="

继续阅读 »

以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。HBuilder8.0.1版新增原生导航栏控件,并推荐优先使用,并建议非必要不使用双webview模式的webview title,而改用原生title。我阅读官网文档并实际做了测试,来代替原先的双webview方案,总结出来的几点经验分享一下,免得有像我一样的菜鸟困惑。

1、要使用openWindowWithTitle,第一步请先修改manifest.json文件,特别要提醒的是,要在代码视图中修改,图形界面是没有的,这一点,官网文档并未提及,只说要修改manifest.json文件。
plus->launchwebview->navigationbar
"plus": {
"launchwebview": {
"navigationbar": {
"backgroundcolor": "#f7f7f7",
"titletext": "首页",
"titlecolor": "#ff461f"
}
}
}

2、原先使用双webview方案的时候,打开新页面并没有等待的菊花图显示,实际感觉打开新页面的速度并不慢。
mui的demo中使用的openWindowWithTitle打开新页面总是显示等待的菊花图,感觉要花更多的时间来打开新页面,让我这个强迫症十分不爽。经过仔细查阅文档,加用waiting参数可以不再显示等待的菊花图。例:
mui.openWindowWithTitle({
url:href,
id:href,
styles:webview_style,
show:{
event:"loaded",
extras:extras
},
waiting:{
autoShow: false
}
},{
title:{
text:fire_data.headertitle
},
back:{
image:{ ........................................... 后面的代码略
如果有人觉得显示等待的菊花图会更人性化,此节可以忽略。

3、mui的demo里 不管是老版本,还是新增base64编码的image数据,右上角“关于”的那个图标,点击后打开about.html文件,
这个图标中间的 "i" 符号过于呆板,建议使用plus的demo中提供的image数据,“i” 为斜体展示
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAADkUlEQVR4nO2b63HTQBRGTxj+EyrAVBAzWwBKBYQO0kHcAU4HTgehApwKUArYwa4ApwJwBeGHNuAY2URaSfczuWcmk3jH+xid7N596ej+/h5HhxfWDXAe40LEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEeGndgKbEGEdAkX7GwMmOry6BBVAC8xDCz/5bl8/RodztjTEWwAT40LKIG2AWQii7alMfyAuJMY6BGfC+oyJvgamqGGkhMcYZcNFT8VchhElPZbdGUkiM8Zhq7N8VH7piCRRK8UVulpWGqJL+ZZDqWKQ6JZDqIalnLIA3GcUs0+8mQmV6iloPKWkv4zPwOoQwDiGMgVNg/cS8J6luc2R6SGYAvw0hFDVlzmk2TTYP9BI9JK0xcmZTsx3pq4blXFjHEwkhwLSncs9a5NkldxDMh6zUO75mFvMoKKfJwTXtV/WnVgtHhb2sLsbsE2AVY1ykz7mr+glGQd60h6T/5B9mDdjP2xDCauhKrWNImzF+KAqLSq2FFMb176OwqNRaSFdTzDvgkmqYOaJaFOZiMv21Duq5+1VrYBJCuN5MDCGUMcbMogfZS/sL6x6SwyUw2pYBvycLB8khCllTrROmwPGOh18M2qIOOUQh58AorTm+Uz/WF0M2qEusY0gbvmx+2LGiLgZpSQ8cYg/Z5HY7IQ1hJgG5C6yFLP/9lb0satKKzDIfyG1bK6yF1D3QJpQ1aV2t/nPb1gprIWUP+YvMMveV3TuHLGS5fQaebjXmnMdvMu+onEaYCkm7qTcts5c1aaONv6+oztnbcGN14cG6h0D7E7qyJm1F2tOiOoVsux9ldmpofmIIEGMsaX6otPO8Ip2Lz2k3fNVemBgKlYXhBPjWJEOdjLQGmQCfMtoyzcibjUQPgVbXgD6GEOYp7zHVlsqEvKBufg1IRghA2p966ip7zZ+1Qhc345fpgp0pCkF9k4Knr5BfUYnoQsYdIvtfUkLSVPOc6gENxRI4U7jXC2JD1gPP+XUESSEPPMcXdqSGrG3SAzulZps9g1vgnaIMEO8hm/hLn6Kk+HJGs9eiS4tbiG04OCH/O9Ix5DniQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAxfgHyQw1G9FJgWwAAAABJRU5ErkJggg=="

收起阅读 »

能做一个vim插件吗?

vim

都说PHP是世界上最好的语言,
我觉得文本编辑器里vim就和PHP的地位一样,
所以,要是HBuilder里能有个vim插件就更好了,鼠标估计用的也更少了

都说PHP是世界上最好的语言,
我觉得文本编辑器里vim就和PHP的地位一样,
所以,要是HBuilder里能有个vim插件就更好了,鼠标估计用的也更少了

微信支付 报 -1 异常解决方案以及微信支付 java 服务端源码

微信支付

1.微信支付其实不是大家想象的那么难。现在来分享一下心得。

  1. 前提条件:
    a、先要有微信开放平台的账号,并创建应用,审核通过。并且获取微信支付能力。
    b、创建应用在填写Android的签名的时候要去掉冒号,并且小写(备注: 签名是用的md5 )
    c、如何获取签名? 这个很简单,自行百度。
    d、微信支付,一定要打包为apk 格式的文件,并且需要用到自己的证书,不能用公用证书(创建证书?百度)
    e、打包好的apk或者是ipa 文件 进行安装在手机测试

准备好以上步骤以后就可以开放微信支付了

1.先查看hbuilder 官方从服务返回的数据格式,自己服务器安装此格式拼接,顺序不能乱。  
[http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/](http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/)  

2.获取服务器数据代码  java端  

 请看附件-java端  

不能实现联系: 1791480830

继续阅读 »

1.微信支付其实不是大家想象的那么难。现在来分享一下心得。

  1. 前提条件:
    a、先要有微信开放平台的账号,并创建应用,审核通过。并且获取微信支付能力。
    b、创建应用在填写Android的签名的时候要去掉冒号,并且小写(备注: 签名是用的md5 )
    c、如何获取签名? 这个很简单,自行百度。
    d、微信支付,一定要打包为apk 格式的文件,并且需要用到自己的证书,不能用公用证书(创建证书?百度)
    e、打包好的apk或者是ipa 文件 进行安装在手机测试

准备好以上步骤以后就可以开放微信支付了

1.先查看hbuilder 官方从服务返回的数据格式,自己服务器安装此格式拼接,顺序不能乱。  
[http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/](http://demo.dcloud.net.cn/payment/wxpayv3.HBuilder/)  

2.获取服务器数据代码  java端  

 请看附件-java端  

不能实现联系: 1791480830

收起阅读 »

JavaScript 快速提高视频教程已经发布!(免费教程)另有:mui、h5+、基于h5+ app开发实战、微信小程序等教程.

mui

JavaScript 快速提高视频教程已经发布!(免费教程)
针对js基础不够好的同学,深度剖析js运行原理、变量作用域、函数、面向对象、闭包等底层知识,快速提升JavaScript技能!
本教程主要目的是提供大家的js学习基础,提供学习思路。
另有:mui、h5+、基于h5+ app开发实战、微信小程序等教程。视频教程观看地址

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

继续阅读 »

JavaScript 快速提高视频教程已经发布!(免费教程)
针对js基础不够好的同学,深度剖析js运行原理、变量作用域、函数、面向对象、闭包等底层知识,快速提升JavaScript技能!
本教程主要目的是提供大家的js学习基础,提供学习思路。
另有:mui、h5+、基于h5+ app开发实战、微信小程序等教程。视频教程观看地址

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

收起阅读 »

如何通过Native.js进行文件选取

Native.JS

5+ API中plus.gallery.pick只能选取图片或是视频文件,那问题来了,其他类型文件如何选取。
此时就该发挥Native.js的强大之处了,如果会安卓原生编程,代码so easy。不会的同学你可以选择找到代码copy,会是百度原生代码实现然后转换为Native.js语法。废话不多说,反正你可以找到很多方式配合5+API完成自己的app。
开吃。。。

window.PickFile = function(callback,acceptType){  
    function ip(obj){  
        plus.android.importClass(obj);  
        return obj;  
    }  
    if(plus.os.name == 'Android' && typeof callback == 'function'){  
        var CODE_REQUEST = 1000;  
        var context = plus.android.runtimeMainActivity();  
        ip(context);  
        var Intent = plus.android.importClass('android.content.Intent');  
        var intent = new Intent(Intent.ACTION_GET_CONTENT);  
        intent.addCategory(Intent.CATEGORY_OPENABLE);  
        if(acceptType){  
            intent.setType(acceptType);  
        }else{  
            intent.setType("*/*");  
        }  
        context.onActivityResult = function(requestCode,resultCode,intentData){  
            if(requestCode == CODE_REQUEST){  
                if(intentData){  
                    var uriValue = intentData.getData();  
                    plus.android.importClass(uriValue);  
                    var scheme = uriValue.getScheme();  
                    if(scheme == 'content'){//还需要进行数据库查询,一般图片数据  
                        var cursor = ip(context.getContentResolver()).query(uriValue,['_data'], null, null, null);  
                        if(cursor){  
                            ip(cursor).moveToFirst();  
                            var columnIndex = cursor.getColumnIndex('_data');  
                            picturePath = cursor.getString(columnIndex);  
                            cursor.close();  
                            callback(picturePath);//返回文件路径  
                        }  
                    }else if(scheme == 'file'){  
                        callback(uriValue.getPath());//返回文件路径  
                    }  
                }else{  
                    callback(null);  
                }  
            }  
        }  
        context.startActivityForResult(intent,CODE_REQUEST);  
    }  
}
继续阅读 »

5+ API中plus.gallery.pick只能选取图片或是视频文件,那问题来了,其他类型文件如何选取。
此时就该发挥Native.js的强大之处了,如果会安卓原生编程,代码so easy。不会的同学你可以选择找到代码copy,会是百度原生代码实现然后转换为Native.js语法。废话不多说,反正你可以找到很多方式配合5+API完成自己的app。
开吃。。。

window.PickFile = function(callback,acceptType){  
    function ip(obj){  
        plus.android.importClass(obj);  
        return obj;  
    }  
    if(plus.os.name == 'Android' && typeof callback == 'function'){  
        var CODE_REQUEST = 1000;  
        var context = plus.android.runtimeMainActivity();  
        ip(context);  
        var Intent = plus.android.importClass('android.content.Intent');  
        var intent = new Intent(Intent.ACTION_GET_CONTENT);  
        intent.addCategory(Intent.CATEGORY_OPENABLE);  
        if(acceptType){  
            intent.setType(acceptType);  
        }else{  
            intent.setType("*/*");  
        }  
        context.onActivityResult = function(requestCode,resultCode,intentData){  
            if(requestCode == CODE_REQUEST){  
                if(intentData){  
                    var uriValue = intentData.getData();  
                    plus.android.importClass(uriValue);  
                    var scheme = uriValue.getScheme();  
                    if(scheme == 'content'){//还需要进行数据库查询,一般图片数据  
                        var cursor = ip(context.getContentResolver()).query(uriValue,['_data'], null, null, null);  
                        if(cursor){  
                            ip(cursor).moveToFirst();  
                            var columnIndex = cursor.getColumnIndex('_data');  
                            picturePath = cursor.getString(columnIndex);  
                            cursor.close();  
                            callback(picturePath);//返回文件路径  
                        }  
                    }else if(scheme == 'file'){  
                        callback(uriValue.getPath());//返回文件路径  
                    }  
                }else{  
                    callback(null);  
                }  
            }  
        }  
        context.startActivityForResult(intent,CODE_REQUEST);  
    }  
}
收起阅读 »

Hbuilder打包APP踩坑经验之真机调试

真机调试

作为一个java文盲,h5+给了我一个开发移动APP的机会,这一点非常感谢。所谓万事开头难,从刚接触h5+到完成一个可以商用的APP的开发路就是一个不断挖坑又填坑的过程,充满了一个前端开发的血和泪。作为一个小白,也来分享一下开发的路上踩过的各种坑,以供后来人引以为鉴。

话说开发的过程中hbuilder的真机调试功能真是十分的方便,但是它并不“完美?”,今天就来吐槽一下真机调试的那些坑:

1,真机调试时图标,启动图什么的都不是自己在manifest.json里的配置,这点官方有说明不再赘述
2,真机调试的打包证书使用dcloud自有证书,如果是调试微信支付,百度地图等绑定包hash或包名的第三方sdk无法通过真机调试,除非申请微信支付(或其他)填写的就是dcloud官方证书的hash值
3,真机调试的包名是固定死的“io.dcloud.”+ appid ,绑定包名的第三方sdk不能用,除非申请时填写的包名也是“io.dcloud.”+ appid (应该很少人这么做吧 ^ ^)。
4,真机调试时各种权限都已开启,且第三方sdk基本上也都配置好了,而且是dcloud公司的私有配置,不是manifest.json手动填写的配置,所以有关没有权限或sdk配置参数错误这些bug,通过真机调试不能重现
5,真机调试plusready的执行逻辑跟真实APP包不太一样,这个我也是偶然发现,如果在同一页面(或引用的js里)写了2个plusready方法,即两次执行 document.addEventListener('plusready', function(){ /.../ }, false); 真机调试时两次调用的逻辑都执行了,但是打包后的APP执行了第二次的 plusready,这个问题调试时是个大坑
6,关于定位plus.geolocation.getCurrentPosition,正常只需要给geolocation权限就可以的,但是如果在 PositionOptions配置了provider是baidu或amap时,还需要maps权限和配置百度或高德appkey,但是如果没有配置maps权限真机调试完全OK的,原因就如第4条所述。

暂时先写这么多,后面陆续更新吧。。。

继续阅读 »

作为一个java文盲,h5+给了我一个开发移动APP的机会,这一点非常感谢。所谓万事开头难,从刚接触h5+到完成一个可以商用的APP的开发路就是一个不断挖坑又填坑的过程,充满了一个前端开发的血和泪。作为一个小白,也来分享一下开发的路上踩过的各种坑,以供后来人引以为鉴。

话说开发的过程中hbuilder的真机调试功能真是十分的方便,但是它并不“完美?”,今天就来吐槽一下真机调试的那些坑:

1,真机调试时图标,启动图什么的都不是自己在manifest.json里的配置,这点官方有说明不再赘述
2,真机调试的打包证书使用dcloud自有证书,如果是调试微信支付,百度地图等绑定包hash或包名的第三方sdk无法通过真机调试,除非申请微信支付(或其他)填写的就是dcloud官方证书的hash值
3,真机调试的包名是固定死的“io.dcloud.”+ appid ,绑定包名的第三方sdk不能用,除非申请时填写的包名也是“io.dcloud.”+ appid (应该很少人这么做吧 ^ ^)。
4,真机调试时各种权限都已开启,且第三方sdk基本上也都配置好了,而且是dcloud公司的私有配置,不是manifest.json手动填写的配置,所以有关没有权限或sdk配置参数错误这些bug,通过真机调试不能重现
5,真机调试plusready的执行逻辑跟真实APP包不太一样,这个我也是偶然发现,如果在同一页面(或引用的js里)写了2个plusready方法,即两次执行 document.addEventListener('plusready', function(){ /.../ }, false); 真机调试时两次调用的逻辑都执行了,但是打包后的APP执行了第二次的 plusready,这个问题调试时是个大坑
6,关于定位plus.geolocation.getCurrentPosition,正常只需要给geolocation权限就可以的,但是如果在 PositionOptions配置了provider是baidu或amap时,还需要maps权限和配置百度或高德appkey,但是如果没有配置maps权限真机调试完全OK的,原因就如第4条所述。

暂时先写这么多,后面陆续更新吧。。。

收起阅读 »

h.js 更新至1.2.1 增加 siblings() 获取相邻元素,h.js 是一个极小、极快的js框架。用于补充 mui dom 操作能力的不足!

h.js 更新至1.2.1 增加 siblings() 获取相邻元素,h.js 是一个极小、极快的js框架。用于补充 mui dom 操作能力的不足!

官网:
http://www.hcoder.net/h

免费、开源、配有免费的视频教程及手册,欢迎使用(非常小 9K、非常快)!
QQ交流群 : 2群 340610532,1群 335126794(已满)

继续阅读 »

h.js 更新至1.2.1 增加 siblings() 获取相邻元素,h.js 是一个极小、极快的js框架。用于补充 mui dom 操作能力的不足!

官网:
http://www.hcoder.net/h

免费、开源、配有免费的视频教程及手册,欢迎使用(非常小 9K、非常快)!
QQ交流群 : 2群 340610532,1群 335126794(已满)

收起阅读 »

谁知道js后面学完学什么?

JSP

function xx(){

document.getElementById("").style.display="haha";  

}

function xx(){

document.getElementById("").style.display="haha";  

}

MUI自带的picker组件,在设置默认值是出错的问题

picker

如题,mui自带的picker组件,在使用三级列表的时候,通过以下代码

// 设定省初始值  
                    cityPicker.pickers[0].setSelectedValue("320000");  
                    // 设定市初始值  
                    cityPicker.pickers[1].setSelectedValue("320200");  
                    // 设定区初始值  
                    cityPicker.pickers[2].setSelectedValue("320205");

弹出的来选择其中,默认值始终只能设置好省份的默认值,剩下的二级,三级选择器未能正确设置默认值。
如果采用

cityPicker.pickers[0].setSelectedIndex(9);  
                    // 设定市初始值  
                    cityPicker.pickers[1].setSelectedIndex(1);  
                    // 设定区初始值  
                    cityPicker.pickers[2].setSelectedIndex(5);

则能正常设置三级的默认值。
经过反复测试,我对picker.js的代码进行了修改。主要是修改了triggerChange部分的功能函数,如下

Picker.prototype.triggerChange = function(callback) {  
        var self = this;  
        var index = self.getSelectedIndex();  
        var item = self.items[index];  

        if(index != self.lastIndex) {  
            $.trigger(self.holder, 'change', {  
                "index": index,  
                "item": item  
            });  
        }  
        self.lastIndex = index;  
        typeof callback === 'function' && callback();  
    };

经过测试,终于可以正常使用setSelectedValue来设置三级的默认值。
另外,还添加了一个setSelectedText功能,就是按照setSelectedValue的功能进行改造的。目前没发现什么问题不知道会不会影响到什么地方

继续阅读 »

如题,mui自带的picker组件,在使用三级列表的时候,通过以下代码

// 设定省初始值  
                    cityPicker.pickers[0].setSelectedValue("320000");  
                    // 设定市初始值  
                    cityPicker.pickers[1].setSelectedValue("320200");  
                    // 设定区初始值  
                    cityPicker.pickers[2].setSelectedValue("320205");

弹出的来选择其中,默认值始终只能设置好省份的默认值,剩下的二级,三级选择器未能正确设置默认值。
如果采用

cityPicker.pickers[0].setSelectedIndex(9);  
                    // 设定市初始值  
                    cityPicker.pickers[1].setSelectedIndex(1);  
                    // 设定区初始值  
                    cityPicker.pickers[2].setSelectedIndex(5);

则能正常设置三级的默认值。
经过反复测试,我对picker.js的代码进行了修改。主要是修改了triggerChange部分的功能函数,如下

Picker.prototype.triggerChange = function(callback) {  
        var self = this;  
        var index = self.getSelectedIndex();  
        var item = self.items[index];  

        if(index != self.lastIndex) {  
            $.trigger(self.holder, 'change', {  
                "index": index,  
                "item": item  
            });  
        }  
        self.lastIndex = index;  
        typeof callback === 'function' && callback();  
    };

经过测试,终于可以正常使用setSelectedValue来设置三级的默认值。
另外,还添加了一个setSelectedText功能,就是按照setSelectedValue的功能进行改造的。目前没发现什么问题不知道会不会影响到什么地方

收起阅读 »

h5+免费视频教程更新中(更新至15节应用窗口详解)、mui、app实战教程尽在hcoder.net

mui

视频教程汇总


知识点 : HTML 5 + 开发教程(20170330更新 持续更新中)
实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : mui 全套教程

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

继续阅读 »

视频教程汇总


知识点 : HTML 5 + 开发教程(20170330更新 持续更新中)
实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : mui 全套教程

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

收起阅读 »

h5+免费视频教程更新中(更新至15节应用窗口详解)、mui、app实战教程尽在hcoder.net

视频教程 mui

视频教程汇总


知识点 : HTML 5 + 开发教程(20170330更新 持续更新中)
实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : mui 全套教程

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

继续阅读 »

视频教程汇总


知识点 : HTML 5 + 开发教程(20170330更新 持续更新中)
实战: MUI、H5+ APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : mui 全套教程

交流qq群
1群 335126794(已满), 2群 340610532

免费视频教程地址:
http://www.hcoder.net/course

收起阅读 »

使用plus.nativeObj.View编写一个底部导航栏

view nativeObj

众所周知,5+plus提供原生绘画对象(View),通过原生绘画对象可以实现很多控件,以及无限遐想空间。
近期因为需要写一款APP,但是需要预加载的太多了,需要顶部栏还需要底部栏,如果用父子页面的话显然太卡了。
因此标题栏以及底部栏我均使用了plus.nativeObj.View “自绘”了顶部栏和底部栏。


如图所示,这仅仅是最简单的一个样子,就像官方说的,还可以在里面画个球...
附件看图,这儿删繁就简。直接展示使用方法。
首先官方文档:http://www.html5plus.org/doc/zh_cn/nativeobj.html
使用方法:

var _footer = new plus.nativeObj.View('footer');  
var _a = ['img/jingxuan.png','img/app.png','img/ph.png','img/mine.png'];  
var _b = ['img/jingxuan_2.png','img/app_2.png','img/ph_2.png','img/mine_2.png'];  
var _c = ['a','b','c','d'];  
_fbar.setTabInfo(_footer,_a,_b,_c)   
_fbar.setCB(function(tab){  
    console.log('切换选夹>>'+tab);  
});

其中_a 为普通状态图片 _b 为选中状态图片 _c 为选项文本(我一般都是两个字)
关于焦点切换都在js中处理了,开发者只需要在setCB时候传入function,接收即将切换的选夹,并且切换需要显示的webview就行了。
对了,高度为60px,需要如何改进的自行修改js内部。
js纯属抠出来的,源文件包含的太多代码,抠出来的时候可能有点乱。

继续阅读 »

众所周知,5+plus提供原生绘画对象(View),通过原生绘画对象可以实现很多控件,以及无限遐想空间。
近期因为需要写一款APP,但是需要预加载的太多了,需要顶部栏还需要底部栏,如果用父子页面的话显然太卡了。
因此标题栏以及底部栏我均使用了plus.nativeObj.View “自绘”了顶部栏和底部栏。


如图所示,这仅仅是最简单的一个样子,就像官方说的,还可以在里面画个球...
附件看图,这儿删繁就简。直接展示使用方法。
首先官方文档:http://www.html5plus.org/doc/zh_cn/nativeobj.html
使用方法:

var _footer = new plus.nativeObj.View('footer');  
var _a = ['img/jingxuan.png','img/app.png','img/ph.png','img/mine.png'];  
var _b = ['img/jingxuan_2.png','img/app_2.png','img/ph_2.png','img/mine_2.png'];  
var _c = ['a','b','c','d'];  
_fbar.setTabInfo(_footer,_a,_b,_c)   
_fbar.setCB(function(tab){  
    console.log('切换选夹>>'+tab);  
});

其中_a 为普通状态图片 _b 为选中状态图片 _c 为选项文本(我一般都是两个字)
关于焦点切换都在js中处理了,开发者只需要在setCB时候传入function,接收即将切换的选夹,并且切换需要显示的webview就行了。
对了,高度为60px,需要如何改进的自行修改js内部。
js纯属抠出来的,源文件包含的太多代码,抠出来的时候可能有点乱。

收起阅读 »