HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

vue+webapck+hbuilder实时热更新开发APP经验分享

Vue

vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生,告别在html引入vue的low操作。截止目前,DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章,只是零零散散有人去构建一些自己的项目,并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主,适量 demo 为辅,印证了 vue+webpack+hbuilder 实时调试以及打包的可行性,为开发者提供多开发种选择。
该项目应现阶段APP构造方式构建了两个APP,一个为SPA(单页面应用),一个为MPA(多页面应用),分别采用不同的方式构建,满足不同需求的开发。
需要注意的是,两个APP都几乎没有展示内容的业务逻辑,你可以把它理解为DCLOUD的muiAPP,做UIdemo的展示。SPA使用的是mint-ui(饿了么)MPA使用的是cube-ui(滴滴),两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展,方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。
SPA请参照:https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
MPA请参照:https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

下载代码

MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git  
$ cd vue-webpack-cube-for-hbuilder  
$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git  
$ cd vue-webpack-mint-for-hbuilder  
$ npm install

在浏览器中调试调试

$ npm run dev

MPA
浏览器地址为:http://localhost:8080/html/index.html
SPA
浏览器地址为:http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html
SPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html
如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段,否则无法访问本机的服务。

编译后真机同步调试

$ npm run build
  • 把 dist 目录下的文件复制到 HBuilder 项目下
  • 设置起始页为 html/index.html MPA
  • 设置起始页为 index.html SPA
  • 真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

  • UI模块和PLUS模块独立展示,参考使用各取所需
  • UI是对cube-ui/mint-ui官网demo的仿造与实际实践,采用的是后编译,100%迁移以及额外的扩展,更多的自定义demo展示与结合APP的运用,更加符合一款APP的基础需求
  • PLUS对5+SDK的的集成运用,对APP常用的几个功能进行了展示,验证5+在vue中的使用
  • 索引页面、登陆与登出,登陆超时、广告弹出等等功能的基础实现原理,使得APP更加“高仿”
  • 对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建,至于为什么不用4.x进行构建在app中进行了回答。
无论是SPA还是MPA开发者可以直接对项目进行修改复用,10分钟快速上手,方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案,更贴近真是开发,可以直接复制粘贴。
PS:希望可以帮到大家,如果帮助到了您,请多多点赞!

继续阅读 »

vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生,告别在html引入vue的low操作。截止目前,DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章,只是零零散散有人去构建一些自己的项目,并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主,适量 demo 为辅,印证了 vue+webpack+hbuilder 实时调试以及打包的可行性,为开发者提供多开发种选择。
该项目应现阶段APP构造方式构建了两个APP,一个为SPA(单页面应用),一个为MPA(多页面应用),分别采用不同的方式构建,满足不同需求的开发。
需要注意的是,两个APP都几乎没有展示内容的业务逻辑,你可以把它理解为DCLOUD的muiAPP,做UIdemo的展示。SPA使用的是mint-ui(饿了么)MPA使用的是cube-ui(滴滴),两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展,方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。
SPA请参照:https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
MPA请参照:https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

下载代码

MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git  
$ cd vue-webpack-cube-for-hbuilder  
$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git  
$ cd vue-webpack-mint-for-hbuilder  
$ npm install

在浏览器中调试调试

$ npm run dev

MPA
浏览器地址为:http://localhost:8080/html/index.html
SPA
浏览器地址为:http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html
SPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html
如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段,否则无法访问本机的服务。

编译后真机同步调试

$ npm run build
  • 把 dist 目录下的文件复制到 HBuilder 项目下
  • 设置起始页为 html/index.html MPA
  • 设置起始页为 index.html SPA
  • 真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

  • UI模块和PLUS模块独立展示,参考使用各取所需
  • UI是对cube-ui/mint-ui官网demo的仿造与实际实践,采用的是后编译,100%迁移以及额外的扩展,更多的自定义demo展示与结合APP的运用,更加符合一款APP的基础需求
  • PLUS对5+SDK的的集成运用,对APP常用的几个功能进行了展示,验证5+在vue中的使用
  • 索引页面、登陆与登出,登陆超时、广告弹出等等功能的基础实现原理,使得APP更加“高仿”
  • 对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建,至于为什么不用4.x进行构建在app中进行了回答。
无论是SPA还是MPA开发者可以直接对项目进行修改复用,10分钟快速上手,方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案,更贴近真是开发,可以直接复制粘贴。
PS:希望可以帮到大家,如果帮助到了您,请多多点赞!

收起阅读 »

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 语法
收起阅读 »