HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

希望mui加入多图预览的组件

之前用网页写了个,发现实现效果和原生的差太多,最好能通过H5+原生实现

之前用网页写了个,发现实现效果和原生的差太多,最好能通过H5+原生实现

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率
目前的HBuilder文件太大,占用CPU及资源也比较大,有些功能不需要的也一并安装了,造成资源浪费!

强烈建议将IDE代码编写与APP生成打包功能分离,可以装APP生成打包做为一个插件使用,可开关!
这样对CPU减负及卡顿问题得到很大改善!

继续阅读 »

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率
目前的HBuilder文件太大,占用CPU及资源也比较大,有些功能不需要的也一并安装了,造成资源浪费!

强烈建议将IDE代码编写与APP生成打包功能分离,可以装APP生成打包做为一个插件使用,可开关!
这样对CPU减负及卡顿问题得到很大改善!

收起阅读 »

打开系统设置

NJS
mui.confirm('网络出错,请检查网络配置', '温馨提示', ['退出', '设置'], function(e){  
                        if(e.index == 0){  
                            if(mui.os.ios){  
                                mui.alert('请双击Home键退出程序');  
                            } else {  
                                plus.runtime.quit();  
                            }  
                        } else {  
                            if(mui.os.ios){  
                                plus.runtime.launchApplication({action: 'prefs:root=MOBILE_DATA_SETTINGS_ID'}, function(e){}); //WIFI  
                            } else {  
                                var main = plus.android.runtimeMainActivity();  
                                var Intent = plus.android.importClass("android.content.Intent");  
                                var mIntent = new Intent('android.settings.WIFI_SETTINGS');  
                                main.startActivity(mIntent);  
                            }  
                        }  
                    });

plus.runtime.launchApplication可以用 plus.runtime.openURL()代替,MOBILE_DATA_SETTINGS_ID可以换成WIFI就是打开WIFI设置

继续阅读 »
mui.confirm('网络出错,请检查网络配置', '温馨提示', ['退出', '设置'], function(e){  
                        if(e.index == 0){  
                            if(mui.os.ios){  
                                mui.alert('请双击Home键退出程序');  
                            } else {  
                                plus.runtime.quit();  
                            }  
                        } else {  
                            if(mui.os.ios){  
                                plus.runtime.launchApplication({action: 'prefs:root=MOBILE_DATA_SETTINGS_ID'}, function(e){}); //WIFI  
                            } else {  
                                var main = plus.android.runtimeMainActivity();  
                                var Intent = plus.android.importClass("android.content.Intent");  
                                var mIntent = new Intent('android.settings.WIFI_SETTINGS');  
                                main.startActivity(mIntent);  
                            }  
                        }  
                    });

plus.runtime.launchApplication可以用 plus.runtime.openURL()代替,MOBILE_DATA_SETTINGS_ID可以换成WIFI就是打开WIFI设置

收起阅读 »

网页中截图保存到本地 获取某个div或者某一块区域(纯js实现)

bitmap js 截图

项目中需要使用到截屏的功能,但是官方的的给出的截图好像只能截取某个webview官方截图api文档 但是在某些需求中要求只截取某一部分而不是整个屏幕 或者说只截取某个div里面的内容 解决思路来了:首选通过js截取到某个div 或者任何一个标签包含的内容:html2canvas 然后把截取到的转换为Data格式,再利用官方的Bitmap对象保存在本地或者做其它的操作

   //生成base64图片数据  
                               var dataUrl = canvas.toDataURL();  
                              // console.log(dataUrl);  这里千万不要像这样打印出来否则HBuilder会报错的  可能输出的内容太多了吧  
                               var b=new plus.nativeObj.Bitmap();  

                                b.loadBase64Data(dataUrl,function(){  
                                    console.log("创建成功");  
                                },function(){  
                                    console.log("创建失败");  
                                });  
                                b.save('_www/img1.jpg',{overwrite:true},function(){  
                                    console.log("保存成功");  
                                },function(){  
                                    console.log("保存失败");  
                                });  

                                plus.gallery.save( '_www/img1.jpg', function () {  
                                        console.log( "保存图片到相册成功" );  
                                    },function(){  
                                        console.log( "保存图片到相册失败" );

完整项目demo:

继续阅读 »

项目中需要使用到截屏的功能,但是官方的的给出的截图好像只能截取某个webview官方截图api文档 但是在某些需求中要求只截取某一部分而不是整个屏幕 或者说只截取某个div里面的内容 解决思路来了:首选通过js截取到某个div 或者任何一个标签包含的内容:html2canvas 然后把截取到的转换为Data格式,再利用官方的Bitmap对象保存在本地或者做其它的操作

   //生成base64图片数据  
                               var dataUrl = canvas.toDataURL();  
                              // console.log(dataUrl);  这里千万不要像这样打印出来否则HBuilder会报错的  可能输出的内容太多了吧  
                               var b=new plus.nativeObj.Bitmap();  

                                b.loadBase64Data(dataUrl,function(){  
                                    console.log("创建成功");  
                                },function(){  
                                    console.log("创建失败");  
                                });  
                                b.save('_www/img1.jpg',{overwrite:true},function(){  
                                    console.log("保存成功");  
                                },function(){  
                                    console.log("保存失败");  
                                });  

                                plus.gallery.save( '_www/img1.jpg', function () {  
                                        console.log( "保存图片到相册成功" );  
                                    },function(){  
                                        console.log( "保存图片到相册失败" );

完整项目demo:

收起阅读 »

【交流分享】图片本地缓存案例,控制downloader数量,避免手机发烫

downloader 技术分享

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:
1.图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地
2.使用背景控制图片样式;比src灵活;
3.不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)
4.单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题
5.避免任务队列中,图片已存在,downloader下载卡顿的问题

  1. 加入下载完成的渐变动画,
  2. 其他,,自己发现..

使用方法很简单:两步!!!
1.导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
2.联网获取数据后,拼接的img格式为:<img sr c='默认图片' data-sr c='网络地址' onload='load(this)'/>

好了,具体看附件的案例

继续阅读 »

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:
1.图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地
2.使用背景控制图片样式;比src灵活;
3.不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)
4.单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题
5.避免任务队列中,图片已存在,downloader下载卡顿的问题

  1. 加入下载完成的渐变动画,
  2. 其他,,自己发现..

使用方法很简单:两步!!!
1.导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
2.联网获取数据后,拼接的img格式为:<img sr c='默认图片' data-sr c='网络地址' onload='load(this)'/>

好了,具体看附件的案例

收起阅读 »

【交流分享】果断抛弃layer的对话框,自己写了一个对话框,兼容Android和IOS

技术分享

没有用nativeUI的对话框,因为没法自定义,样式也不好看;
后来都说推荐用layer对话框http://layer.layui.com/mobile/
但是发觉问题还蛮多:
1.Android上确定按钮错位,得自己css调行高
2.关闭的时候,按钮的事件会穿透,得自己写延时300毫秒关闭
3.IOS上点击弹出的按钮和对话框的按钮重叠时,会无法再次打开对话框

  1. 内容很少时,对话框也会跟着变得很小,得自己css设置
  2. ..其他..
    去他们官网问,他们回答最多的就是这边的没有问题啊..
    好吧,,,总之,最后还是抛弃layer了..

今天自己写了一个 分享给大家
使用超级简单,调一个方法搞定!
解决了上述问题,兼容Android和IOS;
先看效果:
1.标题和内容的对话框

  1. 带一个按钮的对话框

  2. 带两个按钮和其他控件的对话框

  3. 多个按钮和其他控件的对话框

  4. 带标题和自定义内容的对话框

  5. 完全自定义的对话框

7.更多自己研究发现了..

完整案例在附件:
有问题欢迎指点O(∩_∩)O~

写完 下班 睡觉

继续阅读 »

没有用nativeUI的对话框,因为没法自定义,样式也不好看;
后来都说推荐用layer对话框http://layer.layui.com/mobile/
但是发觉问题还蛮多:
1.Android上确定按钮错位,得自己css调行高
2.关闭的时候,按钮的事件会穿透,得自己写延时300毫秒关闭
3.IOS上点击弹出的按钮和对话框的按钮重叠时,会无法再次打开对话框

  1. 内容很少时,对话框也会跟着变得很小,得自己css设置
  2. ..其他..
    去他们官网问,他们回答最多的就是这边的没有问题啊..
    好吧,,,总之,最后还是抛弃layer了..

今天自己写了一个 分享给大家
使用超级简单,调一个方法搞定!
解决了上述问题,兼容Android和IOS;
先看效果:
1.标题和内容的对话框

  1. 带一个按钮的对话框

  2. 带两个按钮和其他控件的对话框

  3. 多个按钮和其他控件的对话框

  4. 带标题和自定义内容的对话框

  5. 完全自定义的对话框

7.更多自己研究发现了..

完整案例在附件:
有问题欢迎指点O(∩_∩)O~

写完 下班 睡觉

收起阅读 »

IOS真机运行时出现:"未受信任的企业级开发者"

默认话题

感谢 @R@bbit 给出的解决方法:

设置 ->通用->设备管理(或者描述文件)->Digital Heaven(Beijing) Internet...,然后点 信任。

继续阅读 »

感谢 @R@bbit 给出的解决方法:

设置 ->通用->设备管理(或者描述文件)->Digital Heaven(Beijing) Internet...,然后点 信任。

收起阅读 »

轮播图片

如何设置 自动轮播

<script type="text/javascript" charset="utf-8">

    mui.init();  
    //获得slider插件对象  
    mui.plusReady(function()  
    {  
        var gallery = mui('.mui-slider');  
        gallery.slider({  
          interval:1000//自动轮播周期,若为0则不自动播放,默认为0;  

        })  
    })  
    mui.waiting_pop();  

</script>
继续阅读 »

如何设置 自动轮播

<script type="text/javascript" charset="utf-8">

    mui.init();  
    //获得slider插件对象  
    mui.plusReady(function()  
    {  
        var gallery = mui('.mui-slider');  
        gallery.slider({  
          interval:1000//自动轮播周期,若为0则不自动播放,默认为0;  

        })  
    })  
    mui.waiting_pop();  

</script>
收起阅读 »

分享Android4平台二级页面滚动花屏问题的解决方案v1.0.0

性能优化 Webview 花屏 技术分享

环境:小米2S,Android 4.1.1
因为刚升级的新版HBuilder,Android5的webview闪屏、花屏问题也基本都解决了,竟然小米2S的Android4会出现花屏觉得不可思议。不知道是不是Android4.4以下的版本都有这个问题吧,如果也有遇到该问题的童鞋,可以在下面跟帖,手机型号和Android版本:)

问题:一级列表页面滚动流畅,进入二级详情页面滚动时有一定花屏(不断地闪烁)的概率。

咨询了下@DCloud_Android_ST,他说按道理Android4不可能花屏,因为已经解决了,看着像是内存满了,因为内存不够用了,webview绘制不出来。可能是每个页面的图片量太大了或者占用内存过多导致的。

遂将内存清空了400多M后,再测,还是会花屏。
因为每个应用都有自己固定的内存空间,不是手机全部的。

所以DCloud_Android_ST建议我节省手机内存,比如降低图片质量等方式。

因为我使用的都是Retina模式的双倍图片,详情页面顶部的轮播图尺寸比较大,800x500,隐藏掉暂不显示后,怀着惴惴不安的心情再次运行,一步一步点进去后,无论如何快速拖动都不花屏了。我的眼眶湿润了。

找到问题的原因后,接下来就是考虑如何优化图片质量了。

策略:
对App的图片进行屏幕适配,对高清大屏就显示质量高一些的图片,它们不差这点内存。
对出现花屏问题的手机进行手动调整返回的接口图片尺寸,减为原来的0.5倍。

// 判断手机是否为小米2S,图片进行适配显示小版本的尺寸  
if(navigator.userAgent.indexOf("MI 2S") > 0){  
    params['width']  = 400;  
    params['height'] = 250;  
}

所以本质还是要做好App性能的优化,尽量节省手机的内存。(对Android平台说的话)

继续阅读 »

环境:小米2S,Android 4.1.1
因为刚升级的新版HBuilder,Android5的webview闪屏、花屏问题也基本都解决了,竟然小米2S的Android4会出现花屏觉得不可思议。不知道是不是Android4.4以下的版本都有这个问题吧,如果也有遇到该问题的童鞋,可以在下面跟帖,手机型号和Android版本:)

问题:一级列表页面滚动流畅,进入二级详情页面滚动时有一定花屏(不断地闪烁)的概率。

咨询了下@DCloud_Android_ST,他说按道理Android4不可能花屏,因为已经解决了,看着像是内存满了,因为内存不够用了,webview绘制不出来。可能是每个页面的图片量太大了或者占用内存过多导致的。

遂将内存清空了400多M后,再测,还是会花屏。
因为每个应用都有自己固定的内存空间,不是手机全部的。

所以DCloud_Android_ST建议我节省手机内存,比如降低图片质量等方式。

因为我使用的都是Retina模式的双倍图片,详情页面顶部的轮播图尺寸比较大,800x500,隐藏掉暂不显示后,怀着惴惴不安的心情再次运行,一步一步点进去后,无论如何快速拖动都不花屏了。我的眼眶湿润了。

找到问题的原因后,接下来就是考虑如何优化图片质量了。

策略:
对App的图片进行屏幕适配,对高清大屏就显示质量高一些的图片,它们不差这点内存。
对出现花屏问题的手机进行手动调整返回的接口图片尺寸,减为原来的0.5倍。

// 判断手机是否为小米2S,图片进行适配显示小版本的尺寸  
if(navigator.userAgent.indexOf("MI 2S") > 0){  
    params['width']  = 400;  
    params['height'] = 250;  
}

所以本质还是要做好App性能的优化,尽量节省手机的内存。(对Android平台说的话)

收起阅读 »