MUI 二维码扫描并跳转 代码案例

首页:index.html

<li id="html/barcode.html" onclick="clicked(this.id)">
        <span class="item">Barcode
          <div class="chs">二维码扫描</div>
        </span>
 </li>

 

二维码页面:html/barcode.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>Hello H5+</title>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
    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');
        
       
    }
    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;
        }
        result = result.replace(/\n/g, '');
       
        //分析扫描结果:是URL就跳转 ,不是就提示
        if(result.indexOf('http://')==0  || result.indexOf('https://')==0){
            plus.nativeUI.confirm(result, function(i){
                if(i.index == 0){
                    
                    back();//返回上一页
                    plus.runtime.openURL(result);
                }else{
                    back();//返回上一页
                }
            }, '', ['打开', '取消']);
        } else{
            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);
        });
    }
    
    
    
    </script>
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
        <style type="text/css">
            #bcid {
                width: 100%;
                position: absolute;
                top: 0px;
                bottom: 44px;
                text-align: center;
            }
            .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: #007500;
                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);
            }
        </style>
    </head>
    <body style="background-color: #000000;">
        <div id="bcid">
            <div style="height:40%"></div>
            <p class="tip">...载入中...</p>
        </div>
        <footer>
            <div class="fbt" onclick="back()">取  消</div>
            <div class="fbt" onclick="scanPicture()">从相册选择二维码</div>
        </footer>
        
        
    </body>
</html>

 

mui二维码

 

    A+
发布日期:2017年05月10日 09:46:51  所属分类:MUI
最后更新时间:2017-12-15 19:31:27
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

 

目前评论:7   其中:访客  4   博主  3

  1. 头像 割了动脉喝脉动 1

    mui框架 扫描二维码后不回退怎么回事?

  2. 头像 敦林 0

    我找了很多例子在微信上 都调用不出来,扫码都是一片黑屏,这个“mui二维码扫描并跳转”是不是必须套在app上,单独h5页面可以实现吗?

  3. 头像 杝杝 0

    我这个做个微信公众号 能用这个嘛?能用mui 的扫码么?

    • 付杰 付杰

      @杝杝 只要你是基于mui框架的都可以。

  4. 头像 陆子武 0

    代码里面的 ../js/common.js 没有?

    • 付杰 付杰

      @陆子武 这个应该是MUi自带的js,HB 里边可以新建 项目,这里边好像有;你仔细去看一下;