秋痕语录

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

QQ截图20180817090031.jpg

直接上代码

需引入mui

<!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>扫描二维码</title>
        <link rel="stylesheet" type="text/css" href="../css/mui.css" />
        <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #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);}
        </style>
    </head>

    <body style="background-color: #000000;">
        <header class="mui-bar mui-bar-nav index">
            <a class="mui-icon mui-pull-left mui-icon-back logo mui-action-back"></a>
            <a class="mui-title">扫描</a>
            <!--手电筒-->
            <a id="turnTheLight" class="mui-icon mui-pull-right"><i class="iconfont icon-shoudiantong"></i></a>
        </header>
        <div id="bcid">
            <div style="height:40%"></div>
            <p class="tip">...载入中...</p>
        </div>
        <footer>
            <div class="fbt mui-action-back">取  消</div>
            <div class="fbt" onclick="scanPicture()">从相册选择二维码</div>
        </footer>

        <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');

                //打开关闭闪光灯处理
                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);
                });
            }
        </script>
    </body>

</html>


打赏

发表评论:

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

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

公告

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