HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

如何屏蔽掉手机返回键

var old_back = mui.back;
mui.back = function() {
var btn = ["确定", "取消"];
mui.confirm('放弃保存吗?', '询问', btn, function(e) {
if(e.index == 0) {
//执行mui封装好的窗口关闭逻辑;
old_back();
}
});
throw "不关闭窗体"; //无论如何直接异常 , 是返回键失效
}

继续阅读 »

var old_back = mui.back;
mui.back = function() {
var btn = ["确定", "取消"];
mui.confirm('放弃保存吗?', '询问', btn, function(e) {
if(e.index == 0) {
//执行mui封装好的窗口关闭逻辑;
old_back();
}
});
throw "不关闭窗体"; //无论如何直接异常 , 是返回键失效
}

收起阅读 »

页面传参终极版

页面传值

页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。

在普通浏览器端常用的方法有如下几种:

1.利用URL传参
在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。

发送参数的页面:

window.location.href = 'new.html?targetId=123'

接收参数的页面:

// 获取url中的参数  
function getUrlParam (name) {  
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
     var r = window.location.search.substr(1).match(reg);  
     if (r!= null) {  
        return unescape(r[2]);  
     }else{  
        return null;  
     }  
}      
//获取url中的targetId参数  
var targetId = getUrlParam('targetId');  
console.log(targetId);

2.利用本地存储传参
可以使用本地存储的方式,可以使用cookie、sessionStorage和localStorage。
发送参数的页面:

localStorage.setItem("targetId","123");

接收参数的页面:

localStorage.getItem("targetId");

mui框架根据业务场景不同,提供了两种传值模式:

1.页面初始化时,通过扩展参数传值

html5+ webview中在创建新窗口的时候有一个extras参数,用于创建Webview窗口的额外扩展参数。

var w = plus.webview.create("new.html","new",{},{  
    targetId: '123'  
});  
w.show(); // 显示窗口  
// 获取扩展参数属性值  
console.log("extras:" + w.targetId);

注意:id是WebviewObject的一个属性,所以extras不能使用id作为参数名。

mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值。
mui框架在如下几种场景下,会执行页面初始化操作:

  • 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
  • 通过mui.init()方法创建子页面;
  • 通过mui.init()方法预加载页面;
  • 通过mui.preload()方法预加载页面

以打开新页面为例说明浏览器和基于5+的APP的兼容写法:

var targetId = '123';  
var baseUrl = 'new.html';  

var url = mui.os.plus?baseUrl:baseUrl+'?targetId=' + targetId;    
mui.openWindow({  
    url: url,  
    extras: {  
        targetId: targetId  
    }  
})

想获取某个webview页面的拓展参数,可以通过webview对象获取。例如在new.html页面可以通过下面的方法获取拓展参数:

mui.plusReady(function () {  
   var self = plus.webview.currentWebview();  
   // 或 var self = plus.webview.getWebviewById('new');  
   console.log("extras:" + self.targetId);  
})

至于浏览器和APP兼容的写法自己根据上面的方法和这个方法结合一下就OK了。

2.页面已创建,通过自定义事件传值

Webview窗口对象窗口对象WebviewObject有一个evalJS方法,可以将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。

mui.fire(target, event, data)

参数说明:

  • target: Type: WebviewObject 需传值的目标webview
  • event:Type: String 自定义事件名称
  • data:Type: JSON json格式的数据

发送参数的页面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        var targetId = '123';  
        ws.evalJS('send('+targetId+')');  
        ws.show();  
    })  
</script>

接收参数的页面:

<div class="mui-content">  
    <div id="text"></div>  
</div>  
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript">  
    mui.init();  
    // 接收参数的函数  
    function send(param){  
        document.getElementById("text").innerHTML = param;  
    }   

    mui.back = function(){  
        var self = plus.webview.currentWebview();  
        self.hide();  
    }  
</script>

注:这里要重写back,不然默认为close,当我们返回的时候再次打开show的时候需要重新创建。

显然这样写有点复杂,为此mui将evalJS传值的机制进行了封装,通过自定义事件实现页面传值,可以使用mui.fire()方法可触发目标窗口的自定义事件。

发送参数的页面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        mui.fire(ws,'send',{  
            targetId: '123'  
        })  
        ws.show();  
    })  
</script>

接收参数的页面:

// 添加send自定义事件监听  
window.addEventListener('send',function(event){  
  //获得事件参数  
  var targetId = event.detail.targetId;  
  document.getElementById("text").innerHTML = targetId;  
});

这里需要特别说明一下的是,很多人在使用mui.fire传参数的时候会提前预加载接收参数的页面,结果发现接收不到传的参数,这是一种非常常见的错误,这里需要说明的是当预加载了页面后,页面上的代码都已经执行,如果在loaded事件未完成就执行webview.evalJS或mui.fire,此时页面接收参数失效。此时应该将接受参数的逻辑写在webview loaded或者show监听事件中:

验证一个webview的loaded事件是否完成的方法:

var ws = plus.webview.getWebviewById(id)  
ws.addEventListener( "loaded", function(e){  
    console.log( "Loaded: "+e.target.getURL() );  
}, false );

验证一个webview的show事件是否完成的方法:

var ws=plus.webview.currentWebview();  
ws.addEventListener("show", function(e){  
    console.log( "Webview Showed" );  
}, false );
继续阅读 »

页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。

在普通浏览器端常用的方法有如下几种:

1.利用URL传参
在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。

发送参数的页面:

window.location.href = 'new.html?targetId=123'

接收参数的页面:

// 获取url中的参数  
function getUrlParam (name) {  
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
     var r = window.location.search.substr(1).match(reg);  
     if (r!= null) {  
        return unescape(r[2]);  
     }else{  
        return null;  
     }  
}      
//获取url中的targetId参数  
var targetId = getUrlParam('targetId');  
console.log(targetId);

2.利用本地存储传参
可以使用本地存储的方式,可以使用cookie、sessionStorage和localStorage。
发送参数的页面:

localStorage.setItem("targetId","123");

接收参数的页面:

localStorage.getItem("targetId");

mui框架根据业务场景不同,提供了两种传值模式:

1.页面初始化时,通过扩展参数传值

html5+ webview中在创建新窗口的时候有一个extras参数,用于创建Webview窗口的额外扩展参数。

var w = plus.webview.create("new.html","new",{},{  
    targetId: '123'  
});  
w.show(); // 显示窗口  
// 获取扩展参数属性值  
console.log("extras:" + w.targetId);

注意:id是WebviewObject的一个属性,所以extras不能使用id作为参数名。

mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值。
mui框架在如下几种场景下,会执行页面初始化操作:

  • 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
  • 通过mui.init()方法创建子页面;
  • 通过mui.init()方法预加载页面;
  • 通过mui.preload()方法预加载页面

以打开新页面为例说明浏览器和基于5+的APP的兼容写法:

var targetId = '123';  
var baseUrl = 'new.html';  

var url = mui.os.plus?baseUrl:baseUrl+'?targetId=' + targetId;    
mui.openWindow({  
    url: url,  
    extras: {  
        targetId: targetId  
    }  
})

想获取某个webview页面的拓展参数,可以通过webview对象获取。例如在new.html页面可以通过下面的方法获取拓展参数:

mui.plusReady(function () {  
   var self = plus.webview.currentWebview();  
   // 或 var self = plus.webview.getWebviewById('new');  
   console.log("extras:" + self.targetId);  
})

至于浏览器和APP兼容的写法自己根据上面的方法和这个方法结合一下就OK了。

2.页面已创建,通过自定义事件传值

Webview窗口对象窗口对象WebviewObject有一个evalJS方法,可以将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。

mui.fire(target, event, data)

参数说明:

  • target: Type: WebviewObject 需传值的目标webview
  • event:Type: String 自定义事件名称
  • data:Type: JSON json格式的数据

发送参数的页面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        var targetId = '123';  
        ws.evalJS('send('+targetId+')');  
        ws.show();  
    })  
</script>

接收参数的页面:

<div class="mui-content">  
    <div id="text"></div>  
</div>  
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript">  
    mui.init();  
    // 接收参数的函数  
    function send(param){  
        document.getElementById("text").innerHTML = param;  
    }   

    mui.back = function(){  
        var self = plus.webview.currentWebview();  
        self.hide();  
    }  
</script>

注:这里要重写back,不然默认为close,当我们返回的时候再次打开show的时候需要重新创建。

显然这样写有点复杂,为此mui将evalJS传值的机制进行了封装,通过自定义事件实现页面传值,可以使用mui.fire()方法可触发目标窗口的自定义事件。

发送参数的页面:

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        mui.fire(ws,'send',{  
            targetId: '123'  
        })  
        ws.show();  
    })  
</script>

接收参数的页面:

// 添加send自定义事件监听  
window.addEventListener('send',function(event){  
  //获得事件参数  
  var targetId = event.detail.targetId;  
  document.getElementById("text").innerHTML = targetId;  
});

这里需要特别说明一下的是,很多人在使用mui.fire传参数的时候会提前预加载接收参数的页面,结果发现接收不到传的参数,这是一种非常常见的错误,这里需要说明的是当预加载了页面后,页面上的代码都已经执行,如果在loaded事件未完成就执行webview.evalJS或mui.fire,此时页面接收参数失效。此时应该将接受参数的逻辑写在webview loaded或者show监听事件中:

验证一个webview的loaded事件是否完成的方法:

var ws = plus.webview.getWebviewById(id)  
ws.addEventListener( "loaded", function(e){  
    console.log( "Loaded: "+e.target.getURL() );  
}, false );

验证一个webview的show事件是否完成的方法:

var ws=plus.webview.currentWebview();  
ws.addEventListener("show", function(e){  
    console.log( "Webview Showed" );  
}, false );
收起阅读 »

关于二维码扫描识别率的问题

扫描 条码 扫码 二维码

HTML5+ runtime集成的是zxing的开源二维码扫描库。
并且5+的barcode模块也是开源的。https://github.com/dcloudio/

微信、支付宝使用的是商业级扫码库,zxing等开源库无法相比。如需更强的扫码效果,请使用支付宝提供的扫码插件:https://ext.dcloud.net.cn/plugin?id=2636

在扫描识别时,常见引起识别率不高的原因有:

  1. 配置了过多扫码类型。因为不同码制有不同的解码算法,一张图,软件需要根据配置的所有扫码算法挨着尝试解码,就会导致较慢。
    如果扫码的类型是相对固定的,把码制范围控制下,扫码速度会提升。
  2. 弱光下扫码识别率不高的问题
    请打开闪光灯。http://ask.dcloud.net.cn/question/19379
  3. 扫码的区域保证是正方形,占位div高宽要一样。

具体参考HTML5+的规范:http://html5plus.org/doc/zh_cn/barcode.html

继续阅读 »

HTML5+ runtime集成的是zxing的开源二维码扫描库。
并且5+的barcode模块也是开源的。https://github.com/dcloudio/

微信、支付宝使用的是商业级扫码库,zxing等开源库无法相比。如需更强的扫码效果,请使用支付宝提供的扫码插件:https://ext.dcloud.net.cn/plugin?id=2636

在扫描识别时,常见引起识别率不高的原因有:

  1. 配置了过多扫码类型。因为不同码制有不同的解码算法,一张图,软件需要根据配置的所有扫码算法挨着尝试解码,就会导致较慢。
    如果扫码的类型是相对固定的,把码制范围控制下,扫码速度会提升。
  2. 弱光下扫码识别率不高的问题
    请打开闪光灯。http://ask.dcloud.net.cn/question/19379
  3. 扫码的区域保证是正方形,占位div高宽要一样。

具体参考HTML5+的规范:http://html5plus.org/doc/zh_cn/barcode.html

收起阅读 »

mui--栅格系统

技术分享

mui中定义了一个简单适用的栅格系统,将每一行宽度平均分为12份,每一份作为一个子栅格,每一行的内容置于.mui-row行容器中,通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询(media query)将.mui-row像素宽度400px作为分界,.mui-row像素宽度低于400px的使用.mui-col-xs-*,当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置,默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值,相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12,多余的列所在元素会作为一个整体另起一行排列。

<style type="text/css">  
    .mui-row{  
        height: 50px;  
        line-height: 50px;  
        text-align: center;   
    }  
    .mui-col-sm-3{  
        border: 1px solid #aaa;  
    }  
    .mui-col-sm-9{  
        border: 1px solid #aaa;  
    }  
</style>  
<div class="mui-row">  
    <div class="mui-col-xs-4 mui-col-sm-3">  
        .mui-col-sm-3  
    </div>  
    <div class="mui-col-xs-8 mui-col-sm-9">  
        .mui-col-sm-9  
    </div>  
</div>

这样我们得到了两列元素,当.mui-row像素宽度低于400px时,左侧宽度为4份子栅格宽度,右侧宽度为8份子栅格宽度;当.mui-row像素宽度高于400px时,左侧宽度为3份子栅格宽度,右侧宽度为9份子栅格宽度。

继续阅读 »

mui中定义了一个简单适用的栅格系统,将每一行宽度平均分为12份,每一份作为一个子栅格,每一行的内容置于.mui-row行容器中,通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询(media query)将.mui-row像素宽度400px作为分界,.mui-row像素宽度低于400px的使用.mui-col-xs-*,当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置,默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值,相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12,多余的列所在元素会作为一个整体另起一行排列。

<style type="text/css">  
    .mui-row{  
        height: 50px;  
        line-height: 50px;  
        text-align: center;   
    }  
    .mui-col-sm-3{  
        border: 1px solid #aaa;  
    }  
    .mui-col-sm-9{  
        border: 1px solid #aaa;  
    }  
</style>  
<div class="mui-row">  
    <div class="mui-col-xs-4 mui-col-sm-3">  
        .mui-col-sm-3  
    </div>  
    <div class="mui-col-xs-8 mui-col-sm-9">  
        .mui-col-sm-9  
    </div>  
</div>

这样我们得到了两列元素,当.mui-row像素宽度低于400px时,左侧宽度为4份子栅格宽度,右侧宽度为8份子栅格宽度;当.mui-row像素宽度高于400px时,左侧宽度为3份子栅格宽度,右侧宽度为9份子栅格宽度。

收起阅读 »

承接APP项目开发,有需要的朋友可以看下(信息长期有效)

5+App开发

承接 APP项目开发,请有需要的朋友可以提供下详细的需求文档,并且提供APP UI原型图(如果没有ui原型图的,可以我们根据提供文档需求,免费设计APP原型图,以便大家能了解整个开发

需求)

联系QQ 1795977154(加Q时请说明dcloud app),信息长期有效

交易:1、淘宝 2、对公转账(推荐),需要签订合同,个人开发者请选择淘宝

实力团队开发,众多成功案例(感谢dcloud提供这么好的一个平台)

想便宜的,找个人去开发吧(经常会:出差、家里有人生病住院、网络掉线、在外面办事、生病在打点滴、消失几天+、项目开发遥遥无期、投诉无门)

说明一点:app开发成本起步价为8万+,如果想几千或者5万以内能开发的,请绕过,我们大家都挺忙的!

说明一点:
1,没有详细需求文档的,请绕过,(如果你无法简洁的表达你的想法,那只说明你还不够了解它。 -- 阿尔伯特·爱因斯坦)

在强调2点:
1、没有后台的就需要开发后台,不要问我这个有什么用,我不会详细的去和你解释程序开发是如何实现的(只会简单说明,不理解的就对了,等你都理解了,你自己都可以开发了),因为这个不是在

一对一技术培训,我们是在为你开发程序,如何开发你可以百度去看网上的视频,他们比我们说的更详细一些。
2、有后台的,请提供api接口,没有api接口的,我们是收费开发的。

最后强调一点:
app开发成本是比较高的,不了解的就请认真考虑我们的报价和解决方案,不要动不动就乱说一通,还骂收费坑人,说难听一点的,就是你们自己公司或者个人平时都是这样坑人的,你自己才会觉得别

人都是在坑你,这个是素质问题,和开发无关,大家都挺忙的,没时间扯嘴皮子。一个报价和解决方案都是会有他自己的因素决定的,现在开发价格都比较透明,对比一下就知道了,为了生存,没有

哪个公司会报搞得离谱的价格,这样会流失客户,同样,也没有哪个公司会亏本赚吆喝,毕竟我们没有锤子的情怀。

我们不是最好的,但是我们一定是用心在和你沟通的,我们一定是用心在给你开发的,不虚报价格,中途不变相收费(不会低价引诱,中途增加额外费用,当然增加功能开发的除外)

提示:我们不接半路转手的单子,如果是半路转手或者需要修改的,请勿打扰,谁给你们做的,你们找他们去。

继续阅读 »

承接 APP项目开发,请有需要的朋友可以提供下详细的需求文档,并且提供APP UI原型图(如果没有ui原型图的,可以我们根据提供文档需求,免费设计APP原型图,以便大家能了解整个开发

需求)

联系QQ 1795977154(加Q时请说明dcloud app),信息长期有效

交易:1、淘宝 2、对公转账(推荐),需要签订合同,个人开发者请选择淘宝

实力团队开发,众多成功案例(感谢dcloud提供这么好的一个平台)

想便宜的,找个人去开发吧(经常会:出差、家里有人生病住院、网络掉线、在外面办事、生病在打点滴、消失几天+、项目开发遥遥无期、投诉无门)

说明一点:app开发成本起步价为8万+,如果想几千或者5万以内能开发的,请绕过,我们大家都挺忙的!

说明一点:
1,没有详细需求文档的,请绕过,(如果你无法简洁的表达你的想法,那只说明你还不够了解它。 -- 阿尔伯特·爱因斯坦)

在强调2点:
1、没有后台的就需要开发后台,不要问我这个有什么用,我不会详细的去和你解释程序开发是如何实现的(只会简单说明,不理解的就对了,等你都理解了,你自己都可以开发了),因为这个不是在

一对一技术培训,我们是在为你开发程序,如何开发你可以百度去看网上的视频,他们比我们说的更详细一些。
2、有后台的,请提供api接口,没有api接口的,我们是收费开发的。

最后强调一点:
app开发成本是比较高的,不了解的就请认真考虑我们的报价和解决方案,不要动不动就乱说一通,还骂收费坑人,说难听一点的,就是你们自己公司或者个人平时都是这样坑人的,你自己才会觉得别

人都是在坑你,这个是素质问题,和开发无关,大家都挺忙的,没时间扯嘴皮子。一个报价和解决方案都是会有他自己的因素决定的,现在开发价格都比较透明,对比一下就知道了,为了生存,没有

哪个公司会报搞得离谱的价格,这样会流失客户,同样,也没有哪个公司会亏本赚吆喝,毕竟我们没有锤子的情怀。

我们不是最好的,但是我们一定是用心在和你沟通的,我们一定是用心在给你开发的,不虚报价格,中途不变相收费(不会低价引诱,中途增加额外费用,当然增加功能开发的除外)

提示:我们不接半路转手的单子,如果是半路转手或者需要修改的,请勿打扰,谁给你们做的,你们找他们去。

收起阅读 »

30天开发一款你想要的APP!

mui HBuilder

东翌学院

在今年这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识, 懂一些CSS和JavaScript就够了,跨平台移动APP开发是利用HTML5+CSS3+JS,快速开发出本地App,一次开发,多平台适配,效果与原生App相媲美。学习跨平台app开发就在这里>>>立即学习 咨询电话:010-57201298 QQ:410355878

  1. 选择开发技术和工具

开发跨平台移动App的最大挑战之一,就是每个移动平台就有个原生语言和软件开发包(SDK):Windows手机是C#和.Net,iOS平台使用Objective C和Cocoa,而Android则是Java和ADK。对此,我们可以找到代码分享的方法,而HTML5用C++编码,所以可以用于三个平台。

当然,使用每个平台的原生语言和软件开发包,可以最大发挥平台的完整功能性,开发简便也能保证高性能。还能迅速升级为操作系统和软件开发包的最新版本,充分运用新特性。为了获得最佳用户体验,原生平台的优势是非常明显的。

HTML5则能通过更新网络服务器来更新App的功能,这对某些App来说非常有用。C++语言也对一些常见的跨平台组件十分有用。

然而,在以上两种情况下要发挥平台功能、编辑用户界面,是有些困难的。开发者仍然需要将原生软件开发包与一些选项相结合,来使用平台的独特功能。

  1. 明确用户体验

在某些情况下,每个平台想要的App功能是一样的,但是用户希望App在不同平台上的设计风格能够统一,这也就是这个App的个性。用户可以以此来感受App设计的价值感。有种设计理念是“App个性+平台外观和体验”。

App的个性,是指每个App都使用手段来突出自己,比如相似的颜色主题、特性和用户行为流。即使用户换了平台,他仍然能立刻上手。

平台的外观和体验,是让App的用户交互(UI)与同一平台的其他App统一,让用户立即就会使用。比如,常用图标放在屏幕的哪个位置。

  1. 短时间开发和测试

在移动App领域,淘汰率和竞争率都很高,用户会频繁更新。而传统的产品开发过程需要长期规划、开发和测试,耗费数月甚至上年时间。

好的解决方案就是使用快速发布周期。每个发布周期应包括一套相同特性,这只需要几周就可以开发出来,完整功能只在需要时才发布。

在稳定代码的同时,团队成员可以开始规划下一个发布周期,因此,发布周期可以不断循环,而用户可以不断更新,获得想要的功能。

继续阅读 »

东翌学院

在今年这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识, 懂一些CSS和JavaScript就够了,跨平台移动APP开发是利用HTML5+CSS3+JS,快速开发出本地App,一次开发,多平台适配,效果与原生App相媲美。学习跨平台app开发就在这里>>>立即学习 咨询电话:010-57201298 QQ:410355878

  1. 选择开发技术和工具

开发跨平台移动App的最大挑战之一,就是每个移动平台就有个原生语言和软件开发包(SDK):Windows手机是C#和.Net,iOS平台使用Objective C和Cocoa,而Android则是Java和ADK。对此,我们可以找到代码分享的方法,而HTML5用C++编码,所以可以用于三个平台。

当然,使用每个平台的原生语言和软件开发包,可以最大发挥平台的完整功能性,开发简便也能保证高性能。还能迅速升级为操作系统和软件开发包的最新版本,充分运用新特性。为了获得最佳用户体验,原生平台的优势是非常明显的。

HTML5则能通过更新网络服务器来更新App的功能,这对某些App来说非常有用。C++语言也对一些常见的跨平台组件十分有用。

然而,在以上两种情况下要发挥平台功能、编辑用户界面,是有些困难的。开发者仍然需要将原生软件开发包与一些选项相结合,来使用平台的独特功能。

  1. 明确用户体验

在某些情况下,每个平台想要的App功能是一样的,但是用户希望App在不同平台上的设计风格能够统一,这也就是这个App的个性。用户可以以此来感受App设计的价值感。有种设计理念是“App个性+平台外观和体验”。

App的个性,是指每个App都使用手段来突出自己,比如相似的颜色主题、特性和用户行为流。即使用户换了平台,他仍然能立刻上手。

平台的外观和体验,是让App的用户交互(UI)与同一平台的其他App统一,让用户立即就会使用。比如,常用图标放在屏幕的哪个位置。

  1. 短时间开发和测试

在移动App领域,淘汰率和竞争率都很高,用户会频繁更新。而传统的产品开发过程需要长期规划、开发和测试,耗费数月甚至上年时间。

好的解决方案就是使用快速发布周期。每个发布周期应包括一套相同特性,这只需要几周就可以开发出来,完整功能只在需要时才发布。

在稳定代码的同时,团队成员可以开始规划下一个发布周期,因此,发布周期可以不断循环,而用户可以不断更新,获得想要的功能。

收起阅读 »

开发环境集成第三方sdk的一些建议cia验证码

1,代替短信验证码 cia验证码 sdk的集成

不仅仅是一种手机号码验证方式
更是APP真实用户身份识别最佳方案
用于APP注册真机本机识别
用于APP推广真实效果监控
用于APP奖励推荐作弊筛查
用于替代短信验证码
http://www.ciaapp.cn/

2,关于app的加密
通过360的加固宝加密后,虽然通过文件夹的方式看不到app的程序
但直接解压sdk后,仍可以看到源码
希望能有解决方案集成到开发环境或者打包服务器。

继续阅读 »

1,代替短信验证码 cia验证码 sdk的集成

不仅仅是一种手机号码验证方式
更是APP真实用户身份识别最佳方案
用于APP注册真机本机识别
用于APP推广真实效果监控
用于APP奖励推荐作弊筛查
用于替代短信验证码
http://www.ciaapp.cn/

2,关于app的加密
通过360的加固宝加密后,虽然通过文件夹的方式看不到app的程序
但直接解压sdk后,仍可以看到源码
希望能有解决方案集成到开发环境或者打包服务器。

收起阅读 »

MUI各种手势事件:滑动、拖动、点击等

MUI集成了很多手势事件,单击、长按、滑动等等。

点击事件:

  1. tap 单击屏幕
  2. doubletap 双击屏幕
    长按事件:
  3. longtap 长按屏幕
  4. hold 按住屏幕(为什么我想起了顶住屏幕)。。。
    3.release 离开屏幕
    滑动事件:
  5. swipeleft 向左滑动
  6. swiperight 向右滑动
  7. swipeup 向上滑动
  8. swipedown 向下滑动
    拖动事件:
  9. drastart 开始拖动
    2.drag 拖动中
  10. dragend 拖动结束

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件

注意:dragstart、drag、dragend 共用drag开关、swipeleft 、swiperight 、swipeup 、swipedown 共用swipe开关

事件监听:同标准的click事件冒泡一样,上面的事件支持任意添加到DOM对象上
例如 :Object.addEventListener("swipedown ",function(){

console.log("你向下滑动了");
})

网上搬运过来的,丰富社区的API文档-----紫苏

继续阅读 »

MUI集成了很多手势事件,单击、长按、滑动等等。

点击事件:

  1. tap 单击屏幕
  2. doubletap 双击屏幕
    长按事件:
  3. longtap 长按屏幕
  4. hold 按住屏幕(为什么我想起了顶住屏幕)。。。
    3.release 离开屏幕
    滑动事件:
  5. swipeleft 向左滑动
  6. swiperight 向右滑动
  7. swipeup 向上滑动
  8. swipedown 向下滑动
    拖动事件:
  9. drastart 开始拖动
    2.drag 拖动中
  10. dragend 拖动结束

根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件

注意:dragstart、drag、dragend 共用drag开关、swipeleft 、swiperight 、swipeup 、swipedown 共用swipe开关

事件监听:同标准的click事件冒泡一样,上面的事件支持任意添加到DOM对象上
例如 :Object.addEventListener("swipedown ",function(){

console.log("你向下滑动了");
})

网上搬运过来的,丰富社区的API文档-----紫苏

收起阅读 »

修改官方demo选项卡+下拉刷新material风格为默认风格

下拉刷新 选项卡

官方demo的选项卡+下拉刷新采用mui.pullToRefresh.js+mui.pullToRefresh.material.js两个js插件来制作,这两个插件感觉像是官方写的,但是为啥接口参数非常相似但又不同,非常坑
下面是改写部分(两个demo的DOM结构一致)
使用插件的下拉刷新初始化写法(来自官方demo)


默认风格不使用插件的下拉刷新初始化写法(改写的demo,用了vue)

对比红框处的部分,太相似了很容易着道啊,不知道怎么想的。
选项卡下修改成默认风格的下拉刷新要重置下样式

原demo中初始化区域滚动也不要了,默认的下拉刷新会自己初始化,所以下图中的代码就不要了,不然会有两个滚动条

改后的效果图

继续阅读 »

官方demo的选项卡+下拉刷新采用mui.pullToRefresh.js+mui.pullToRefresh.material.js两个js插件来制作,这两个插件感觉像是官方写的,但是为啥接口参数非常相似但又不同,非常坑
下面是改写部分(两个demo的DOM结构一致)
使用插件的下拉刷新初始化写法(来自官方demo)


默认风格不使用插件的下拉刷新初始化写法(改写的demo,用了vue)

对比红框处的部分,太相似了很容易着道啊,不知道怎么想的。
选项卡下修改成默认风格的下拉刷新要重置下样式

原demo中初始化区域滚动也不要了,默认的下拉刷新会自己初始化,所以下图中的代码就不要了,不然会有两个滚动条

改后的效果图

收起阅读 »

MUI从入门到精通系列汇总

技术分享

mui初级入门系列教程

mui初级入门教程(一)— 小白入手mui的学习路线
mui初级入门教程(二)— html5+ webview 底部栏用法详解
mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解
mui初级入门教程(四)— 再谈webview,从小白变“大神”!
mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK
mui初级入门教程(六)— 模板页面实现原理及多端适配指南
mui初级入门教程(七)— 基于native.js的文件系统管理功能实现

mui-demo 仓库

easemobIM: 环信webim的demo
tabbar-div-animation: div模式带动画切换的选项卡
tabbar-with-popover:解决弹出层被遮挡的问题
timeline:时间轴效果
numberbox:倍率为2的范围可控的数字增减器
popover-control-byjs:js控制的popover
slider:加载网络图片的图片轮播
share: 使用图片打开分享(TODO)
piker: 选择器
preload:预加载注意事项
tabbar-webview-withleftmenu: 带侧滑的webview模式的tabbar
vue-mui: 基于Vue.js的mui tabbar演示例子
Statusbar:沉浸式状态栏
tab-with-segmented-control-vertical-uprefresh:左侧选项卡-div模式增加上拉加载功能
contenteditable:div contenteditable可编辑模式下【获得输入框键盘焦点】和【光标移动到最后】
pullrefresh-dtpiker:下拉刷新与时间选择器冲突的解决方案
calendar:日历组件
template:模板页面实现原理
tabbar-with-iframe iframe兼容处理tababr的方法
njs-io:基于native.js的文件系统管理功能实现
oauth:判断本地是否安装客户端,进行第三方登录
Audio: 录音转dataURI,dataURI转语音文件播放

mui文档番外版

mui组件通用CSS类
mui组件自定义样式
grid(栅格系统)
页面传参
template(模板页面)
input(输入表单)
文件IO

开发常见问题

1.如何获取文件的数据
2.打开系统wifi设置页面
3.沉浸式状态栏设置方法
4.上拉刷新下拉加载的启用禁止方法
5.如何设置相片分辨率
6.如何获取手机应用列表
7.可折叠列表的两个问题
8.5+webview与android原生Activity
9.获取APP系统权限和打开权限设置
10.录音文件与Base64编码相互转换的方法

DOM操作简化版

https://github.com/zhaomenghuan/mjs

继续阅读 »

mui初级入门系列教程

mui初级入门教程(一)— 小白入手mui的学习路线
mui初级入门教程(二)— html5+ webview 底部栏用法详解
mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解
mui初级入门教程(四)— 再谈webview,从小白变“大神”!
mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK
mui初级入门教程(六)— 模板页面实现原理及多端适配指南
mui初级入门教程(七)— 基于native.js的文件系统管理功能实现

mui-demo 仓库

easemobIM: 环信webim的demo
tabbar-div-animation: div模式带动画切换的选项卡
tabbar-with-popover:解决弹出层被遮挡的问题
timeline:时间轴效果
numberbox:倍率为2的范围可控的数字增减器
popover-control-byjs:js控制的popover
slider:加载网络图片的图片轮播
share: 使用图片打开分享(TODO)
piker: 选择器
preload:预加载注意事项
tabbar-webview-withleftmenu: 带侧滑的webview模式的tabbar
vue-mui: 基于Vue.js的mui tabbar演示例子
Statusbar:沉浸式状态栏
tab-with-segmented-control-vertical-uprefresh:左侧选项卡-div模式增加上拉加载功能
contenteditable:div contenteditable可编辑模式下【获得输入框键盘焦点】和【光标移动到最后】
pullrefresh-dtpiker:下拉刷新与时间选择器冲突的解决方案
calendar:日历组件
template:模板页面实现原理
tabbar-with-iframe iframe兼容处理tababr的方法
njs-io:基于native.js的文件系统管理功能实现
oauth:判断本地是否安装客户端,进行第三方登录
Audio: 录音转dataURI,dataURI转语音文件播放

mui文档番外版

mui组件通用CSS类
mui组件自定义样式
grid(栅格系统)
页面传参
template(模板页面)
input(输入表单)
文件IO

开发常见问题

1.如何获取文件的数据
2.打开系统wifi设置页面
3.沉浸式状态栏设置方法
4.上拉刷新下拉加载的启用禁止方法
5.如何设置相片分辨率
6.如何获取手机应用列表
7.可折叠列表的两个问题
8.5+webview与android原生Activity
9.获取APP系统权限和打开权限设置
10.录音文件与Base64编码相互转换的方法

DOM操作简化版

https://github.com/zhaomenghuan/mjs

收起阅读 »

给的例子也不调试完整,还要这样坑下初学者呀

你们的例子:
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'}
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});

继续阅读 »

你们的例子:
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'}
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});

收起阅读 »