秋痕语录

MUI/H5+ 仿微信扫描二维码功能

QQ截图20180817090031.jpg

直接上代码

需引入mui




????
????????
????????
????????
????????
????????扫描二维码
????????
????????
????????
????????
????????
????????????#bcid{width:?100%;position:?absolute;top:?44px;bottom:?44px;text-align:?center;}
????????????header?a{color:?#333;}
????????????.icon-shoudiantong{font-size:?20px;}
????????????.tip{color:?#FFFFFF;font-weight:?bold;text-shadow:?0px?-1px?#103E5C;}
????????????footer{width:?100%;height:?44px;position:?absolute;bottom:?0px;line-height:?44px;text-align:?center;color:?#FFF;}
????????????.fbt{width:?50%;height:?100%;background-color:?#fff;color:?#111;float:?left;}
????????????.fbt:active{-webkit-box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?0.5);box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?0.5);}
????????
????

????
????????
????????????
????????????扫描
????????????
????????????
????????
????????
????????????
????????????...载入中... ????????
????????
????????????取 ?消
????????????从相册选择二维码
???????? ???????? ????????????var?ws?=?null, ????????????????wo?=?null; ????????????var?scan?=?null, ????????????????domready?=?false; ????????????//?H5?plus事件处理? ????????????function?plusReady()?{ ????????????????if(ws?||?!window.plus?||?!domready)?{ ????????????????????return; ????????????????} ????????????????//?获取窗口对象? ????????????????ws?=?plus.webview.currentWebview(); ????????????????wo?=?ws.opener(); ????????????????//?开始扫描? ????????????????ws.addEventListener('show',?function()?{ ????????????????????scan?=?new?plus.barcode.Barcode('bcid'); ????????????????????scan.onmarked?=?onmarked; ????????????????????scan.start({ ????????????????????????conserve:?true, ????????????????????????filename:?'_doc/barcode/' ????????????????????}); ????????????????},?false); ????????????????//?显示页面并关闭等待框? ????????????????ws.show('pop-in'); ????????????????//打开关闭闪光灯处理 ????????????????var?flag?=?false; ????????????????document.getElementById("turnTheLight").addEventListener('tap',?function()?{ ????????????????????if(flag?==?false)?{ ????????????????????????scan.setFlash(true); ????????????????????????flag?=?true; ????????????????????}?else?{ ????????????????????????scan.setFlash(false); ????????????????????????flag?=?false; ????????????????????} ????????????????}); ????????????} ????????????if(window.plus)?{ ????????????????plusReady(); ????????????}?else?{ ????????????????document.addEventListener('plusready',?plusReady,?false); ????????????} ????????????//?监听DOMContentLoaded事件? ????????????document.addEventListener('DOMContentLoaded',?function()?{ ????????????????domready?=?true; ????????????????plusReady(); ????????????},?false); ????????????//?二维码扫描成功? ????????????function?onmarked(type,?result,?file)?{ ????????????????switch(type)?{ ????????????????????case?plus.barcode.QR: ????????????????????????type?=?'QR'; ????????????????????????break; ????????????????????case?plus.barcode.EAN13: ????????????????????????type?=?'EAN13'; ????????????????????????break; ????????????????????case?plus.barcode.EAN8: ????????????????????????type?=?'EAN8'; ????????????????????????break; ????????????????????default: ????????????????????????type?=?'其它'?+?type; ????????????????????????break; ????????????????} ????????????????resultresult?=?result.replace(/\n/g,?''); ????????????????//分析扫描结果:是URL就跳转?,不是就提示? ????????????????if(result.indexOf('http://')?==?0?||?result.indexOf('https://')?==?0)?{ ????????????????????plus.nativeUI.confirm(result,?function(i)?{ ????????????????????????if(i.index?==?0)?{ ????????????????????????????window.location.href?=?result ??????????????????????????//??plus.runtime.openURL(result); ????????????????????????}?else?{ ????????????????????????????mui.back();?//返回上一页? ????????????????????????} ????????????????????},?'',?['打开',?'取消']); ????????????????}?else?{ ????????????????????mui.back();?//返回上一页? ????????????????????plus.nativeUI.alert(result); ????????????????} ????????????} ????????????//?从相册中选择二维码图片?? ????????????function?scanPicture()?{ ????????????????plus.gallery.pick(function(path)?{ ????????????????????plus.barcode.scan(path,?onmarked,?function(error)?{ ????????????????????????plus.nativeUI.alert('无法识别此图片'); ????????????????????}); ????????????????},?function(err)?{ ????????????????????plus.nativeUI.alert('Failed:?'?+?err.message); ????????????????}); ????????????} ???????? ????


打赏
0
相关文章
H5页面 浏览器唤醒/打开微信2018年11月28日
Vue封装公用方法,多页面复用2018年11月07日
Vue来回切换页面不重新加载 --keep-alive2018年11月01日
js判断是否从qq\微信浏览器打开网页2018年09月30日
js对比日期大小2018年08月20日
MUI/H5+ 仿微信扫描二维码功能2018年08月17日
pdf文件转换2018年08月15日
关于客户端解决ajax跨域及jsonp格式问题2018年08月11日
CSS3修改input输入框placeholder颜色样式2018年06月22日
css clip-path裁剪之多边形裁剪polygon2018年05月30日

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

控制面板
您好,欢迎到访网站!
??查看权限
网站分类
最新留言
文章归档
网站收藏
  • 订阅本站的 RSS 2.0 新闻聚合
友情链接

?2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding