HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

iOS 蓝牙打印原生插件

github开源

必须使用mac os系统 也就是苹果电脑,xcode 打包编译
hbuilder的第三方插件 必须用 对应的IDE 打包发布

如有需求 请加群 218460026
或者 个人qq:511308538
所有蓝牙打印机 都是根据指令 不同指令 需要做对应的开发

继续阅读 »

github开源

必须使用mac os系统 也就是苹果电脑,xcode 打包编译
hbuilder的第三方插件 必须用 对应的IDE 打包发布

如有需求 请加群 218460026
或者 个人qq:511308538
所有蓝牙打印机 都是根据指令 不同指令 需要做对应的开发

收起阅读 »

跨平台APP开发框架MUI全套视频教程

mui

mui是最接近原生App体验的前端框架,可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用。真正实现多端发布 – 开发一套代码,发布六个平台。本教程将详细讲解MUI的方方面面。

马上来学习吧 http://www.sucaihuo.com/video/251.html

继续阅读 »

mui是最接近原生App体验的前端框架,可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用。真正实现多端发布 – 开发一套代码,发布六个平台。本教程将详细讲解MUI的方方面面。

马上来学习吧 http://www.sucaihuo.com/video/251.html

收起阅读 »

修改mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求

有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求....

提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了

我们来看一下 腾讯新闻 的效果:

继续阅读 »

有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求....

提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了

我们来看一下 腾讯新闻 的效果:

收起阅读 »

手动处理返回按钮事件

mui.init 返回按键

有时候需要处理返回按钮事件,左上角的可以取消 ‘mui-action-back’这个class,但物理返回按钮就要复杂些。
经过查看源码,我总结出以下方式:

mui.init({  
                keyEventBind: {  
                    backbutton: false //很关键  
                }  
            });  
            var page_can_close = false;  
            mui.plusReady(function() {  
                //要延迟一下  
                setTimeout(function() {  
                    plus.key.addEventListener("backbutton", function() {  
                mui.closePopup();  
                        //用法1 需要处理一下事情  
                        if(!page_can_close) { //判断是否可以返回,比如有时候页面中有弹出窗,点击返回要关闭弹出框。//大多数mui系列弹出层都会智能处理返回事件  
                            plus.nativeUI.showWaiting('关闭窗口....');  
                            setTimeout(function() {  
                                page_can_close = true;  
                                plus.nativeUI.closeWaiting();  
                            }, 1000);  
                            return;  
                        }  
                        //用法2需要确定关闭的  
                        mui.confirm('退出当前页面?', '', ['取消', '退出'], function(e) {  
                            if(e.index == 1) {  
                                setTimeout(function() {  
                                    mui.back(); //用此方法要延迟一下  
                                }, 10);  
                                //plus.webview.currentWebview().close();//不用延迟  
                            }  
                        }, 'div');  
                    }, false);  
                }, 10);  
            });
继续阅读 »

有时候需要处理返回按钮事件,左上角的可以取消 ‘mui-action-back’这个class,但物理返回按钮就要复杂些。
经过查看源码,我总结出以下方式:

mui.init({  
                keyEventBind: {  
                    backbutton: false //很关键  
                }  
            });  
            var page_can_close = false;  
            mui.plusReady(function() {  
                //要延迟一下  
                setTimeout(function() {  
                    plus.key.addEventListener("backbutton", function() {  
                mui.closePopup();  
                        //用法1 需要处理一下事情  
                        if(!page_can_close) { //判断是否可以返回,比如有时候页面中有弹出窗,点击返回要关闭弹出框。//大多数mui系列弹出层都会智能处理返回事件  
                            plus.nativeUI.showWaiting('关闭窗口....');  
                            setTimeout(function() {  
                                page_can_close = true;  
                                plus.nativeUI.closeWaiting();  
                            }, 1000);  
                            return;  
                        }  
                        //用法2需要确定关闭的  
                        mui.confirm('退出当前页面?', '', ['取消', '退出'], function(e) {  
                            if(e.index == 1) {  
                                setTimeout(function() {  
                                    mui.back(); //用此方法要延迟一下  
                                }, 10);  
                                //plus.webview.currentWebview().close();//不用延迟  
                            }  
                        }, 'div');  
                    }, false);  
                }, 10);  
            });
收起阅读 »

混合开发预览pdf的方法集成

pdf

我主要参考了这个文档的方法 https://blog.csdn.net/niedewang/article/details/78965924

亲测很好用,只需要把pdf.js和pdf.worker.js引入html页面即可。
集成完之后发现清晰度不够,只需要调整一下这个参数:
scale, scale的值越大,清晰度越高

继续阅读 »

我主要参考了这个文档的方法 https://blog.csdn.net/niedewang/article/details/78965924

亲测很好用,只需要把pdf.js和pdf.worker.js引入html页面即可。
集成完之后发现清晰度不够,只需要调整一下这个参数:
scale, scale的值越大,清晰度越高

收起阅读 »

mui手势解锁时的问题 mui.locker

手势解锁 mui

mui.openWindow时如果预加载页面后再显示,解锁图案有时候不显示,点击图案处才显示
此处修改打开页面的方式,不用预加载功能,每次可以正常显示解锁图案

mui.openWindow时如果预加载页面后再显示,解锁图案有时候不显示,点击图案处才显示
此处修改打开页面的方式,不用预加载功能,每次可以正常显示解锁图案

经验总结:pagebeforeshow事件最好不要用

事件 mui

mui的pagebeforeshow这个设计是比较奇葩的,有以下几个缺点:

  1. 只能通过mui.openWindow才能触发,并且必须show:{autoShow: true}才行,其他情况下显示出来的webview里不会触发
  2. 只有手机真机才能触发,pc浏览器里不能触发
    基于以上两点,pagebeforeshow实际上是没什么用处的。如果用来做页面显示前刷新信息,那么需要把到达这个页面的所有地方都通过mui.openWindow来打开,很繁琐易出错且不利于代码维护性,而且这样打开后原来的页面没有关掉,有些地方如返回键也没法这样打开,而且如果在pc浏览器里调试更会遇到各种问题,这时如果写代码兼容pc浏览器下的效果,则使得代码更加繁琐。所以最好不要使用pagebeforeshow,而是自己写方法解决此类需求
继续阅读 »

mui的pagebeforeshow这个设计是比较奇葩的,有以下几个缺点:

  1. 只能通过mui.openWindow才能触发,并且必须show:{autoShow: true}才行,其他情况下显示出来的webview里不会触发
  2. 只有手机真机才能触发,pc浏览器里不能触发
    基于以上两点,pagebeforeshow实际上是没什么用处的。如果用来做页面显示前刷新信息,那么需要把到达这个页面的所有地方都通过mui.openWindow来打开,很繁琐易出错且不利于代码维护性,而且这样打开后原来的页面没有关掉,有些地方如返回键也没法这样打开,而且如果在pc浏览器里调试更会遇到各种问题,这时如果写代码兼容pc浏览器下的效果,则使得代码更加繁琐。所以最好不要使用pagebeforeshow,而是自己写方法解决此类需求
收起阅读 »

分享一个简单的 video 短视频播放例子,可以上下滑动播放

视频 播放器 video

video 用于APP 做播放器,还是有点吃力,
下面是一个可以,在网页,APP里都可以使的video 短视频播放页,
例子在附件

video 用于APP 做播放器,还是有点吃力,
下面是一个可以,在网页,APP里都可以使的video 短视频播放页,
例子在附件

之所以开一个新帖是说明推送问题,让有这方面问题的码友知道

5+sdk

我集成推送以前的手机都能如愿以偿的获取clientid,有些新手机就不能,例如oppor11s,华为nova2s,华为荣耀v10在android studio就取不到,根本原因是官方文档里没写arm64-v8a也要有.so文件,这些手机都是64位这种架构的

我集成推送以前的手机都能如愿以偿的获取clientid,有些新手机就不能,例如oppor11s,华为nova2s,华为荣耀v10在android studio就取不到,根本原因是官方文档里没写arm64-v8a也要有.so文件,这些手机都是64位这种架构的

保存图片到本地相册

actionsheet 相册

缘起:项目上有一个生成二维码展示,并且能够将二维码保存到本地相册的需求
使用方法:plus.nativeObj.Bitmap();

mui.init();  
    mui.plusReady(function(){  
      plusReady()  
    })  
    var plusReady = function(){  
      plus.nativeUI.showWaiting();  
          var src = $("#barcode").attr("src")//base64字符串  
         bitmapSavePic(src)  
  };  

  function bitmapSavePic(src){  
    var bm = new  plus.nativeObj.Bitmap("barcode")//path: ( String ) 可选 Bitmap对象自动加载图片的地址  
    bm.loadBase64Data( src, bmloadSuccessCB, bmloadErrorCB );//加载base64为数据到bm实例对象  
    console.log(bm)  
    var path ="_doc/project_barcode.jpg";  
    var options = {"overwrite":true,"format":"jpg","quality":50}  
    bm.save( path, options, bmSaveSuccessCB, bmSaveErrorCB );//将图片保存到指定的路径(仅支持本地文件系统)  
    //保存到相册后,回收Bitmap图片内存  
     bm.recycle();  
  }  
  var bmloadSuccessCB = function (e){  
    console.log("加载base64数据成功")  
  }  
  var bmloadErrorCB = function (err){  
    console.log("加载base64数据失败")  
    console.log(err)  
  }  
  var bmSaveSuccessCB = function (e){  
    console.log(e)  
    console.log("保存成功")  
    console.log("保存地址:"+e.target)  
    saveToGallery(e.target)  
  }  
  var bmSaveErrorCB = function (error){  
    plus.nativeUI.toast("保存失败")  
    console.log("code:"+error.code+";msg:"+error.message);  
  }  
  function saveToGallery(path){  
    console.log(path)  
    plus.gallery.save( path, function(e){  
      var successI18n = $("#successI18n").html();  
      plus.nativeUI.toast(successI18n)  
      console.log(JSON.stringify(e));  
    },function(err){  
      var failedI18n = $("#failedI18n").html();  
      plus.nativeUI.toast(err.message+failedI18n)  
      console.log("保存到相册失败:"+JSON.stringify(err));  
    });  
  }

这段代码有反映有兼容问题.这个本人没有测试过,还望各位见谅.能用的就用吧

继续阅读 »

缘起:项目上有一个生成二维码展示,并且能够将二维码保存到本地相册的需求
使用方法:plus.nativeObj.Bitmap();

mui.init();  
    mui.plusReady(function(){  
      plusReady()  
    })  
    var plusReady = function(){  
      plus.nativeUI.showWaiting();  
          var src = $("#barcode").attr("src")//base64字符串  
         bitmapSavePic(src)  
  };  

  function bitmapSavePic(src){  
    var bm = new  plus.nativeObj.Bitmap("barcode")//path: ( String ) 可选 Bitmap对象自动加载图片的地址  
    bm.loadBase64Data( src, bmloadSuccessCB, bmloadErrorCB );//加载base64为数据到bm实例对象  
    console.log(bm)  
    var path ="_doc/project_barcode.jpg";  
    var options = {"overwrite":true,"format":"jpg","quality":50}  
    bm.save( path, options, bmSaveSuccessCB, bmSaveErrorCB );//将图片保存到指定的路径(仅支持本地文件系统)  
    //保存到相册后,回收Bitmap图片内存  
     bm.recycle();  
  }  
  var bmloadSuccessCB = function (e){  
    console.log("加载base64数据成功")  
  }  
  var bmloadErrorCB = function (err){  
    console.log("加载base64数据失败")  
    console.log(err)  
  }  
  var bmSaveSuccessCB = function (e){  
    console.log(e)  
    console.log("保存成功")  
    console.log("保存地址:"+e.target)  
    saveToGallery(e.target)  
  }  
  var bmSaveErrorCB = function (error){  
    plus.nativeUI.toast("保存失败")  
    console.log("code:"+error.code+";msg:"+error.message);  
  }  
  function saveToGallery(path){  
    console.log(path)  
    plus.gallery.save( path, function(e){  
      var successI18n = $("#successI18n").html();  
      plus.nativeUI.toast(successI18n)  
      console.log(JSON.stringify(e));  
    },function(err){  
      var failedI18n = $("#failedI18n").html();  
      plus.nativeUI.toast(err.message+failedI18n)  
      console.log("保存到相册失败:"+JSON.stringify(err));  
    });  
  }

这段代码有反映有兼容问题.这个本人没有测试过,还望各位见谅.能用的就用吧

收起阅读 »

用Vue+H5+写app 有Demo ui很好看 超级好调试 支持es678

Vue

项目地址:https://github.com/tyaqing/mogo-h5plus

APP演示下载地址

完全可以替代mui使用其他的ui框架.
UI框架地址:
https://youzan.github.io/vant/

  • 支持 Npm 生态
  • 支持 vue 语法,以及 vue 生态,比如 vux,mint,vant
  • 支持 ES6/ES7 语法
  • 使用 VConsole 调试
  • VSCode 友好
  • 局域网便捷调试,不插数据线也可以调试
  • 兼容部分 mui 语法
继续阅读 »

项目地址:https://github.com/tyaqing/mogo-h5plus

APP演示下载地址

完全可以替代mui使用其他的ui框架.
UI框架地址:
https://youzan.github.io/vant/

  • 支持 Npm 生态
  • 支持 vue 语法,以及 vue 生态,比如 vux,mint,vant
  • 支持 ES6/ES7 语法
  • 使用 VConsole 调试
  • VSCode 友好
  • 局域网便捷调试,不插数据线也可以调试
  • 兼容部分 mui 语法
收起阅读 »

分享几套我收集的MUI网站模板

模板 mui

mui框架的服装包包手机商城模板
http://www.sucaihuo.com/templates/4490.html

mui框架的移动端app下载界面模板
http://www.sucaihuo.com/templates/4367.html

mui租房app模板
http://www.sucaihuo.com/templates/3300.html

手机app前端开发MUI框架模板
http://www.sucaihuo.com/templates/3694.html

mui框架手机报考驾校预约wap网站模板
http://www.sucaihuo.com/templates/2139.html

继续阅读 »

mui框架的服装包包手机商城模板
http://www.sucaihuo.com/templates/4490.html

mui框架的移动端app下载界面模板
http://www.sucaihuo.com/templates/4367.html

mui租房app模板
http://www.sucaihuo.com/templates/3300.html

手机app前端开发MUI框架模板
http://www.sucaihuo.com/templates/3694.html

mui框架手机报考驾校预约wap网站模板
http://www.sucaihuo.com/templates/2139.html

收起阅读 »