mui如何实现扫码功能

最新推荐文章于 2022-03-17 15:02:18 发布

东泰丶

最新推荐文章于 2022-03-17 15:02:18 发布

阅读量3k

点赞数 2

分类专栏： mui 文章标签： mui 扫码二维码

原文链接：http://dt2008.cn/216/

版权

mui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种改进的二维码扫描功能，通过自定义扫描页面和结果页面，实现了从扫码到浏览外部链接的无缝体验。文章详细展示了如何利用mui框架和plus.barcode.Barcode API创建带有闪光灯功能的扫码界面，并在扫描后直接加载内容至内置浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编改写了一个扫码二维码功能，这个虽然网络上的案例有很多，基本上都是扫一下后就弹出提示框，提示框里就是二维码的链接，小编改成扫描二维码后对应相对的网站，包含了内部浏览器，为什么要弄个内部浏览器呢？因为mui跳转网站内容的话那APP就会自动关闭掉，所以需要弄个内部浏览器用于浏览外链网站的。

如何实现呢？添加三个文件(点击进入扫码 -> 扫码 ->扫码后的结果)

在这里插入图片描述

index.html：是首页，需要写个点击事件进入扫码页(小编就不写这个页面了)
Ewm.html：是扫码页
target.html：是扫码后的结果页面

Ewm页面

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<style type="text/css">
    #bcid{
        width: 100%;
        height: 86.5%;
        position: absolute;
        background: #000000;
        top:45px;
    }
    html, body ,div{
        height:100%;
        width: 100%;
    }
    .fbt{
        color: #0E76E1;
        width: 50%;
        background-color: #ffffff;
        float: left;
        line-height: 44px;
        text-align: center;
    }

    #turnTheLight{
        font-size:15px;
        line-height: 25px;
        color:#8F8F94;
    }
</style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
        <span class="mui-icon mui-spin mui-pull-right" id="turnTheLight">闪光灯</span>
    </header>

    <!--盛放扫描控件的div-->
    <div id="bcid"></div>

    <div class="mui-bar mui-bar-footer" style="padding: 0px;">
        <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
        <div class="fbt mui-action-back">取　 消</div>
    </div>
<script type="text/javascript">
    scan = null;//扫描对象
    mui.plusReady(function () {
        mui.init();
        startRecognize();
    });

    function startRecognize(){
        try{
            var filter;
            //自定义的扫描控件样式
            var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}
            //扫描控件构造
            scan = new plus.barcode.Barcode('bcid',filter,styles);
            scan.onmarked = onmarked;
            scan.onerror = onerror;
            scan.start();

            //打开关闭闪光灯处理
            var flag = false;
            document.getElementById("turnTheLight").addEventListener('tap',function(){
                if(flag == false){
                    scan.setFlash(true);
                    flag = true;
                }else{
                    scan.setFlash(false);
                    flag = false;
                }
            });
        }catch(e){
            alert("出现错误啦:\n"+e);
        }
    };

    function onerror(e){
    alert(e);
    };

    function onmarked( type, result ) {
        var text = '';
        switch(type){
            case plus.barcode.QR:
            text = 'QR: ';
            break;
            case plus.barcode.EAN13:
            text = 'EAN13: ';
            break;
            case plus.barcode.EAN8:
            text = 'EAN8: ';
            break;
        }
        //弹出链接
        // alert( text + result );
        mui.openWindow({
            url: "target.html?url=" + result,
            id: "target"
        });
    };

    // 从相册中选择二维码图片
    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>
</body>
</html>

target.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>目标页面</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="go_back"></a>
        <h1 class="mui-title mui-action-back" id="close_page">扫后详情</h1>
    </header>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
        var str=window.location.search;
        var myid=str.substring(str.indexOf('=')+1)
        mui.init();
        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            var baiduWV = plus.webview.create(myid, "baidu", {
                //这里定义页面高度
                top: "44px",
                bottom: 0
            });
            self.append(baiduWV);
        });
</script>
</body>
</html>

效果：
扫码页面(有闪光灯功能)

Alt
扫码后
在这里插入图片描述
别忘记引入mui自带的css和js喔！！！