查看: 94|回复: 0

扣丁学堂简述HTML5打开手机扫码功能的优缺点

发表于 2018-7-23 13:52:08

如今手机支付扫码已经广泛的应用与我们的生活中,今天本篇文章小编就和大家分享一下HTML5打开手机扫码功能的优缺点,文章中列出详细的代码供大家参考,喜欢HTML5开发技术的小伙伴下面就随小编一起来看一下吧。

使用方法:
1、在需要使用的页面按照下面顺序引入lib目录下的 js 文件
    <script src="lib/zepto.js"></script>
    <script src="lib/qrcode.lib.min.js"></script>
    <script src="lib/qrcode.js"></script>
2、自定义按钮的 html 样式
为自定义的按钮添加自定义属性,属性名称为node-type
为 input 按钮添加自定义的属性, 属性名称为node-type
因为该插件需要使用<input type="file" /> ,该 html 结构在网页上面是有固定的显示样式,为了能够自定义按钮样式,我们可以按照下面的示例代码结构嵌套代码
<div>
        <div node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </div>
    </div>
然后设置 input 按钮的 css 隐藏按钮,比如我使用的是属性选择器
input[node-type=jsbridge]{
    display:none;
}
这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。
3、在页面上初始化 Qrcode 对象
//初始化扫描二维码按钮,传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($('[node-type=qr-btn]'));
    });
主要代码解析
(function($) {
    var Qrcode = function(tempBtn) {
        var _this_ = this;
        var isWeiboWebView = /__weibo__/.test(navigator.userAgent);
        if (isWeiboWebView) {
            if (window.WeiboJSBridge) {
                _this_.bridgeReady(tempBtn);
            } else {
                document.addEventListener('WeiboJSBridgeReady', function() {
                    _this_.bridgeReady(tempBtn);
                });
            }
        } else {
            _this_.nativeReady(tempBtn);
        }
    };
    Qrcode.prototype = {
        nativeReady: function(tempBtn) {
            $('[node-type=jsbridge]',tempBtn).on('click',function(e){
                e.stopPropagation();
            });
            $(tempBtn).bind('click',function(e){
                $(this).find('input[node-type=jsbridge]').trigger('click');
            });
            $(tempBtn).bind('change', this.getImgFile);
        },
        bridgeReady: function(tempBtn) {
            $(tempBtn).bind('click', this.weiBoBridge);
        },
以上就是扣丁学堂HTML5在线学习小编给大家分享的HTML5打开手机扫码功能的优缺点,希望对小伙伴们有所帮助,想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业HTML5培训机构,不仅有专业的老师和与时俱进的课程体系,还有大量的HTML5视频教程供学员观看学习哦。扣丁学堂H5技术交流群:559883758。

文章转载自:扣丁学堂http://www.codingke.com/


回复

使用道具 举报