
如何屏蔽掉手机返回键
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
在扫描识别时,常见引起识别率不高的原因有:
- 配置了过多扫码类型。因为不同码制有不同的解码算法,一张图,软件需要根据配置的所有扫码算法挨着尝试解码,就会导致较慢。
如果扫码的类型是相对固定的,把码制范围控制下,扫码速度会提升。 - 弱光下扫码识别率不高的问题
请打开闪光灯。http://ask.dcloud.net.cn/question/19379 - 扫码的区域保证是正方形,占位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
在扫描识别时,常见引起识别率不高的原因有:
- 配置了过多扫码类型。因为不同码制有不同的解码算法,一张图,软件需要根据配置的所有扫码算法挨着尝试解码,就会导致较慢。
如果扫码的类型是相对固定的,把码制范围控制下,扫码速度会提升。 - 弱光下扫码识别率不高的问题
请打开闪光灯。http://ask.dcloud.net.cn/question/19379 - 扫码的区域保证是正方形,占位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项目开发,有需要的朋友可以看下(信息长期有效)
承接 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!
在今年这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识, 懂一些CSS和JavaScript就够了,跨平台移动APP开发是利用HTML5+CSS3+JS,快速开发出本地App,一次开发,多平台适配,效果与原生App相媲美。学习跨平台app开发就在这里>>>立即学习 咨询电话:010-57201298 QQ:410355878
- 选择开发技术和工具
开发跨平台移动App的最大挑战之一,就是每个移动平台就有个原生语言和软件开发包(SDK):Windows手机是C#和.Net,iOS平台使用Objective C和Cocoa,而Android则是Java和ADK。对此,我们可以找到代码分享的方法,而HTML5用C++编码,所以可以用于三个平台。
当然,使用每个平台的原生语言和软件开发包,可以最大发挥平台的完整功能性,开发简便也能保证高性能。还能迅速升级为操作系统和软件开发包的最新版本,充分运用新特性。为了获得最佳用户体验,原生平台的优势是非常明显的。
HTML5则能通过更新网络服务器来更新App的功能,这对某些App来说非常有用。C++语言也对一些常见的跨平台组件十分有用。
然而,在以上两种情况下要发挥平台功能、编辑用户界面,是有些困难的。开发者仍然需要将原生软件开发包与一些选项相结合,来使用平台的独特功能。
- 明确用户体验
在某些情况下,每个平台想要的App功能是一样的,但是用户希望App在不同平台上的设计风格能够统一,这也就是这个App的个性。用户可以以此来感受App设计的价值感。有种设计理念是“App个性+平台外观和体验”。
App的个性,是指每个App都使用手段来突出自己,比如相似的颜色主题、特性和用户行为流。即使用户换了平台,他仍然能立刻上手。
平台的外观和体验,是让App的用户交互(UI)与同一平台的其他App统一,让用户立即就会使用。比如,常用图标放在屏幕的哪个位置。
- 短时间开发和测试
在移动App领域,淘汰率和竞争率都很高,用户会频繁更新。而传统的产品开发过程需要长期规划、开发和测试,耗费数月甚至上年时间。
好的解决方案就是使用快速发布周期。每个发布周期应包括一套相同特性,这只需要几周就可以开发出来,完整功能只在需要时才发布。
在稳定代码的同时,团队成员可以开始规划下一个发布周期,因此,发布周期可以不断循环,而用户可以不断更新,获得想要的功能。
在今年这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识, 懂一些CSS和JavaScript就够了,跨平台移动APP开发是利用HTML5+CSS3+JS,快速开发出本地App,一次开发,多平台适配,效果与原生App相媲美。学习跨平台app开发就在这里>>>立即学习 咨询电话:010-57201298 QQ:410355878
- 选择开发技术和工具
开发跨平台移动App的最大挑战之一,就是每个移动平台就有个原生语言和软件开发包(SDK):Windows手机是C#和.Net,iOS平台使用Objective C和Cocoa,而Android则是Java和ADK。对此,我们可以找到代码分享的方法,而HTML5用C++编码,所以可以用于三个平台。
当然,使用每个平台的原生语言和软件开发包,可以最大发挥平台的完整功能性,开发简便也能保证高性能。还能迅速升级为操作系统和软件开发包的最新版本,充分运用新特性。为了获得最佳用户体验,原生平台的优势是非常明显的。
HTML5则能通过更新网络服务器来更新App的功能,这对某些App来说非常有用。C++语言也对一些常见的跨平台组件十分有用。
然而,在以上两种情况下要发挥平台功能、编辑用户界面,是有些困难的。开发者仍然需要将原生软件开发包与一些选项相结合,来使用平台的独特功能。
- 明确用户体验
在某些情况下,每个平台想要的App功能是一样的,但是用户希望App在不同平台上的设计风格能够统一,这也就是这个App的个性。用户可以以此来感受App设计的价值感。有种设计理念是“App个性+平台外观和体验”。
App的个性,是指每个App都使用手段来突出自己,比如相似的颜色主题、特性和用户行为流。即使用户换了平台,他仍然能立刻上手。
平台的外观和体验,是让App的用户交互(UI)与同一平台的其他App统一,让用户立即就会使用。比如,常用图标放在屏幕的哪个位置。
- 短时间开发和测试
在移动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集成了很多手势事件,单击、长按、滑动等等。
点击事件:
- tap 单击屏幕
- doubletap 双击屏幕
长按事件: - longtap 长按屏幕
- hold 按住屏幕(为什么我想起了顶住屏幕)。。。
3.release 离开屏幕
滑动事件: - swipeleft 向左滑动
- swiperight 向右滑动
- swipeup 向上滑动
- swipedown 向下滑动
拖动事件: - drastart 开始拖动
2.drag 拖动中 - 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集成了很多手势事件,单击、长按、滑动等等。
点击事件:
- tap 单击屏幕
- doubletap 双击屏幕
长按事件: - longtap 长按屏幕
- hold 按住屏幕(为什么我想起了顶住屏幕)。。。
3.release 离开屏幕
滑动事件: - swipeleft 向左滑动
- swiperight 向右滑动
- swipeup 向上滑动
- swipedown 向下滑动
拖动事件: - drastart 开始拖动
2.drag 拖动中 - 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);
}
});