HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【示例】访问外部网站将图片下载至本地相册

HTML5+ 下载 Gallery 技术分享 Webview mui

需求描述

用户上传头像时,本地相册资源不足时。可以通过访问外部网站,下载网站中的图片至本地相册以供使用。

需求分析

1、访问外部网站(例如百度图片),可以借鉴简单的内部浏览器实现;
2、网站的跳转等操作是通过点击来实现的,需要另一种手势实现来触发下载的事件,我们选择长按屏幕事件;
3、下载文件,并保存至本地相册,利用HTML5+的downloadergallery模块提供的API实现;
4、打开相册,选择下载成功的图片并预览,gallery模块同样提供了相应的API。

根据上述分析,实现上述功能需要HTML5+的运行环境,并且需要mui封装的手势事件。
通过引入mui.js,就可以满足这两点需求。那么问题来了,如何把mui.js加载到外部的网站中?
HTML5+API提供了添加Webview窗口预加载js文件的API,可以在外部HTML中加载本地JS文件。

功能实现

长按选择图片

首先需要判定,长按事件的目标元素节点的是否为img元素。

document.addEventListener("longtap", function(event) {  
    var name = event.target.tagName;  
    if(name === "IMG") {  
        // 下载图片  
    }  
});  

下载图片

其次,确定为img元素后。为了提高用户体验,可以用mui封装的confirm对话框,让用户选择是否下载。
用户确定下载后,创建下载任务并开始。

var downLoader = plus.downloader.createDownload(imgUrl, {  
    method: 'GET',  
    filename: '_downloads/image' + suffix  
}, function(download, status) {  
    var fileName = download.filename;  
    console.log('文件名:' + fileName);  
    console.log('下载状态:' + status);  
});  
downLoader.start();  

为了防止中文文件下载后转码,不被本地相册识别。createDownload()第二个参数中配置的filename,需要对图片截取格式后缀,进行重命名。这里请认真阅读下载任务参数的API。

保存至本地相册

然后,为了方便用户选择,将下载的文件保存到本地相册中。保存完成后,依旧需要提醒用户是否立刻去预览。

plus.gallery.save(fileName, function() {  
    mui.confirm("打开相册", "打开相册?", ["打开", "不看"], function(event) {  
        var gindex = event.index;  
        if(gindex == 0) {  
            plus.gallery.pick(function(file) {  
                mui.toast("你选择了图片:" + file);  
            }, function(error) {  
                console.log(error);  
            }, {  
                filter: 'image'  
            });  
        }  
    });  
});  

创建窗口对象并添加本地JS文件

最后,以百度图片为例,创建一个窗口对象并加载本地的JS文件。

var imageWv = plus.webview.create("http://image.baidu.com/", "image", {  
    top: "44px",  
    bottom: 0  
});  
imageWv.appendJsFile("_www/js/mui.min.js");  
imageWv.appendJsFile("_www/js/downloadImage.js");  
imageWv.show("fade-in");  

本地JS文件会按照顺序进行加载,所以我们是先加载mui.js。

示例效果

源码

附上源码,真机运行即可。

继续阅读 »

需求描述

用户上传头像时,本地相册资源不足时。可以通过访问外部网站,下载网站中的图片至本地相册以供使用。

需求分析

1、访问外部网站(例如百度图片),可以借鉴简单的内部浏览器实现;
2、网站的跳转等操作是通过点击来实现的,需要另一种手势实现来触发下载的事件,我们选择长按屏幕事件;
3、下载文件,并保存至本地相册,利用HTML5+的downloadergallery模块提供的API实现;
4、打开相册,选择下载成功的图片并预览,gallery模块同样提供了相应的API。

根据上述分析,实现上述功能需要HTML5+的运行环境,并且需要mui封装的手势事件。
通过引入mui.js,就可以满足这两点需求。那么问题来了,如何把mui.js加载到外部的网站中?
HTML5+API提供了添加Webview窗口预加载js文件的API,可以在外部HTML中加载本地JS文件。

功能实现

长按选择图片

首先需要判定,长按事件的目标元素节点的是否为img元素。

document.addEventListener("longtap", function(event) {  
    var name = event.target.tagName;  
    if(name === "IMG") {  
        // 下载图片  
    }  
});  

下载图片

其次,确定为img元素后。为了提高用户体验,可以用mui封装的confirm对话框,让用户选择是否下载。
用户确定下载后,创建下载任务并开始。

var downLoader = plus.downloader.createDownload(imgUrl, {  
    method: 'GET',  
    filename: '_downloads/image' + suffix  
}, function(download, status) {  
    var fileName = download.filename;  
    console.log('文件名:' + fileName);  
    console.log('下载状态:' + status);  
});  
downLoader.start();  

为了防止中文文件下载后转码,不被本地相册识别。createDownload()第二个参数中配置的filename,需要对图片截取格式后缀,进行重命名。这里请认真阅读下载任务参数的API。

保存至本地相册

然后,为了方便用户选择,将下载的文件保存到本地相册中。保存完成后,依旧需要提醒用户是否立刻去预览。

plus.gallery.save(fileName, function() {  
    mui.confirm("打开相册", "打开相册?", ["打开", "不看"], function(event) {  
        var gindex = event.index;  
        if(gindex == 0) {  
            plus.gallery.pick(function(file) {  
                mui.toast("你选择了图片:" + file);  
            }, function(error) {  
                console.log(error);  
            }, {  
                filter: 'image'  
            });  
        }  
    });  
});  

创建窗口对象并添加本地JS文件

最后,以百度图片为例,创建一个窗口对象并加载本地的JS文件。

var imageWv = plus.webview.create("http://image.baidu.com/", "image", {  
    top: "44px",  
    bottom: 0  
});  
imageWv.appendJsFile("_www/js/mui.min.js");  
imageWv.appendJsFile("_www/js/downloadImage.js");  
imageWv.show("fade-in");  

本地JS文件会按照顺序进行加载,所以我们是先加载mui.js。

示例效果

源码

附上源码,真机运行即可。

收起阅读 »

使用socket.io开发即时通讯

Socket.io

缘起这个帖子:http://ask.dcloud.net.cn/question/21196
不过看知乎上又有号称6万+的...http://www.zhihu.com/question/31950731

不过暂时无所谓了,代码是仿照hichat的做的,目前还没有做私聊,主要因为我的用户需要从企业内部账号做认证,然后去另外一个系统里面做匹配,所以暂时没有做私聊,思路已经有了。

用redis做用户路由表,然后访问的时候传session id进去保存,这样当用户发起私聊的时候发送的用户名,服务端就可以通过路由表找到该用户所在的服务器、端口等等了,同时负载均衡也就实现了。

只不过我现在不确定这玩意的并发是多少,自己搭了台8C 8G内存的来试 500+并发没啥问题,再往上我们公司网管该找我了....

嗯....源码源码
服务端没有改,请到原作者处下载
http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html

前端都在这里:http://111.7.164.227:3802/
,自己扣吧,就一个html和一个js,还有一个是socket.io.js本身的,可以扣我的,也可以去官网下....

我针对hichat的界面做了简单优化...昨天刚做了一下午,今天台风不上班,还需要持续优化,so,不要嫌丑...至少做到了大小自适应,可直接用于mui移动项目(记得把click事件改成tap事件)

后面我会继续优化,另外关于session部分可能还要请教各路大神...

如果有知道socket.io并发的同学,请告诉我。。感谢感谢

继续阅读 »

缘起这个帖子:http://ask.dcloud.net.cn/question/21196
不过看知乎上又有号称6万+的...http://www.zhihu.com/question/31950731

不过暂时无所谓了,代码是仿照hichat的做的,目前还没有做私聊,主要因为我的用户需要从企业内部账号做认证,然后去另外一个系统里面做匹配,所以暂时没有做私聊,思路已经有了。

用redis做用户路由表,然后访问的时候传session id进去保存,这样当用户发起私聊的时候发送的用户名,服务端就可以通过路由表找到该用户所在的服务器、端口等等了,同时负载均衡也就实现了。

只不过我现在不确定这玩意的并发是多少,自己搭了台8C 8G内存的来试 500+并发没啥问题,再往上我们公司网管该找我了....

嗯....源码源码
服务端没有改,请到原作者处下载
http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html

前端都在这里:http://111.7.164.227:3802/
,自己扣吧,就一个html和一个js,还有一个是socket.io.js本身的,可以扣我的,也可以去官网下....

我针对hichat的界面做了简单优化...昨天刚做了一下午,今天台风不上班,还需要持续优化,so,不要嫌丑...至少做到了大小自适应,可直接用于mui移动项目(记得把click事件改成tap事件)

后面我会继续优化,另外关于session部分可能还要请教各路大神...

如果有知道socket.io并发的同学,请告诉我。。感谢感谢

收起阅读 »

如何将js css 等静态资源打包到app中而 不是远程访问

打包

如何将js css 等静态资源打包到app中而 不是远程访问

如何将js css 等静态资源打包到app中而 不是远程访问

怎么从零基础学习MUI?

5+App开发 mui HBuilder

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构,跨平台APP开发整体课程在线直播+课程源码+全套视频,最新最全的APP开发,HB和MUI的全套视频,配合老师直播教学!零基础都可以学习,更有高级进修课程,30天最快速的开发跨平台APP!
咨询报名QQ:2971611409网址:立即学习 Tel:17090057793
欢迎有意向学习的朋友加好友咨询!谢谢Dcloud提供这么好的平台!

继续阅读 »

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构,跨平台APP开发整体课程在线直播+课程源码+全套视频,最新最全的APP开发,HB和MUI的全套视频,配合老师直播教学!零基础都可以学习,更有高级进修课程,30天最快速的开发跨平台APP!
咨询报名QQ:2971611409网址:立即学习 Tel:17090057793
欢迎有意向学习的朋友加好友咨询!谢谢Dcloud提供这么好的平台!

收起阅读 »

【微信音频播放器】HTML5 audio制作的微信播放器

audio 微信

weixinAudiio.js

一个简单的微信样式播放器

播放器DOM及CSS是微信里内置的音频播放器的样式,重新创建了控制层js,方便在在公众号,APP等场景使用。

例子

demo

地址

github

继续阅读 »

weixinAudiio.js

一个简单的微信样式播放器

播放器DOM及CSS是微信里内置的音频播放器的样式,重新创建了控制层js,方便在在公众号,APP等场景使用。

例子

demo

地址

github

收起阅读 »

红旅动漫APP源码分析 非官方

一时兴起把红旅网站解析成接口了,有接口了,干脆就把app也写出来了,项目使用mui开发。

不是官方APP,不是官方APP,不是官方APP

接口数据来自红旅,欢迎大家使用开发app,请不要用于其他用途

代码down下来,使用hbuilder打开项目即可,非常的简单

开源地址

gitosc: http://git.oschina.net/20110516/hltmapp-mui

github: https://github.com/tomoya92/hltmapp-mui

截图预览

继续阅读 »

一时兴起把红旅网站解析成接口了,有接口了,干脆就把app也写出来了,项目使用mui开发。

不是官方APP,不是官方APP,不是官方APP

接口数据来自红旅,欢迎大家使用开发app,请不要用于其他用途

代码down下来,使用hbuilder打开项目即可,非常的简单

开源地址

gitosc: http://git.oschina.net/20110516/hltmapp-mui

github: https://github.com/tomoya92/hltmapp-mui

截图预览

收起阅读 »

跨平台APP开发

培训的目的】:让有想法有创意的创业者能够不因为技术障碍丧失机会!助你成为IT界的专业人才!
【培训内容】:我们的培训是app开发整套的课程 js、php、Mysql,从UI的设计到手机底层到后台的开发到数据库的管理,从一个创意的萌生到APP的上架,就算是0基础的学员也能够轻松开发出属于自己的APP,我们培训的是能够独立开发app的全栈工程师!
【培训方式】:周一到周六在腾讯课堂每天晚上8-10点2节直播课程,如果这个时间点你错过的话也不用担心,可以到我们的官网看文档和录播视频,每天上完课以后老师会布置作业第二天上课前收作业然后老师点评,有什么问题可以到我们VIP学员群讨论问老师,老师可以给你远程协助帮助解决问题,一次报名可以终身反复学习,这是我们的上课方式和课后学习模式
【开课班次】:随到随学,可反复跟班学习,学会为止!
【课程优势】:国内首推跨平台app开发培训课程,一次报名课终身学习,VIP学员群技术支持

晚上零碎时间学习,足不出户,在家就能学
直播教学,随时互动,你和讲师之隔一道屏幕
实时互动辅导,课上有互动,课后有辅导,在线解答
学习不寂寞,QQ群交流,促进同学之间的交流
强制学习,每天提交作业,定期组织老师,学习顾问定期回访

继续阅读 »

培训的目的】:让有想法有创意的创业者能够不因为技术障碍丧失机会!助你成为IT界的专业人才!
【培训内容】:我们的培训是app开发整套的课程 js、php、Mysql,从UI的设计到手机底层到后台的开发到数据库的管理,从一个创意的萌生到APP的上架,就算是0基础的学员也能够轻松开发出属于自己的APP,我们培训的是能够独立开发app的全栈工程师!
【培训方式】:周一到周六在腾讯课堂每天晚上8-10点2节直播课程,如果这个时间点你错过的话也不用担心,可以到我们的官网看文档和录播视频,每天上完课以后老师会布置作业第二天上课前收作业然后老师点评,有什么问题可以到我们VIP学员群讨论问老师,老师可以给你远程协助帮助解决问题,一次报名可以终身反复学习,这是我们的上课方式和课后学习模式
【开课班次】:随到随学,可反复跟班学习,学会为止!
【课程优势】:国内首推跨平台app开发培训课程,一次报名课终身学习,VIP学员群技术支持

晚上零碎时间学习,足不出户,在家就能学
直播教学,随时互动,你和讲师之隔一道屏幕
实时互动辅导,课上有互动,课后有辅导,在线解答
学习不寂寞,QQ群交流,促进同学之间的交流
强制学习,每天提交作业,定期组织老师,学习顾问定期回访

收起阅读 »

如何屏蔽掉手机返回键

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

收起阅读 »