mui如何实现扫码功能

短命女 2023-06-17 09:54 50阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]

*  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 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][]  
**扫码后**  
![在这里插入图片描述][20191128145111794.jpg_pic_center]  
别忘记引入mui自带的css和js喔！！！

这篇文章希望对您有帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128144344439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4,size_16,color_FFFFFF,t_70
[Alt]: https://img-blog.csdnimg.cn/20191128144823991.jpg#pic_center
[20191128145111794.jpg_pic_center]: https://img-blog.csdnimg.cn/20191128145111794.jpg#pic_center