2. 程式人生 > >HBuilder webApp開發(十三)二維碼掃描

HBuilder webApp開發(十三)二維碼掃描

阿新 • • 發佈：2019-02-06 
<body >
    <header class="mui-bar mui-bar-nav white">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">二維碼掃描</h1>
    </header>
    <div class="mui-content">
        <button id="startScan" class
 
="mui-btn mui-btn-success">開始掃描</button>
        <button id="cancelScan" class="mui-btn mui-btn-success">取消掃描</button>
        <button id="setFlash" class="mui-btn mui-btn-success">開啟/關閉閃光燈</button>
        <div id= "bcid"></div>
    </div>
</body>
<script
 
>
    mui.init({
        swipeBack:true //啟用右滑關閉功能
    });
    var scan = null;
    var isOpen = false; // 閃光燈是否開始標誌 true:閃光燈已經開啟 false:閃光燈關閉
    // 條碼識別成功事件
    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 );
    }
    // 建立掃描控制元件
    function startRecognize() {
        scan = new plus.barcode.Barcode('bcid');
        scan.onmarked = onmarked; 
    }
    // 開始掃描
    document.getElementById("startScan").addEventListener('tap',function(){
        startRecognize();
        scan.start();
    })
    // 取消掃描
    document.getElementById("cancelScan").addEventListener('tap',function(){
        startRecognize();
        scan.cancel();
    })
    //  開啟和關閉閃光燈
    document.getElementById("setFlash").addEventListener('tap',function(){
        startRecognize();
        isOpen = !isOpen;
        if(isOpen){
            scan.setFlash(true);
        }else{
            scan.setFlash(false);
        }
    })
</script>

效果圖什麼的就不上了，和前面提到的文章中的效果圖基本一樣。
程式碼下載地址：請點選我！

相關推薦

HBuilder webApp開發(十三)二維碼掃描

<body > <header class="mui-bar mui-bar-nav white"> <a class="mui-action-

關於二維碼掃描的開發,遇到的問題,以及最終結果

無效 () 我不 ont 操作 res 手機 clas 什麽 近期發現之前我使用的zxing二維碼掃描速度較慢,自己不是很滿意,但是找了很久沒有好的優化方式,研究了一段時間(與其說是研究,不如說找相關資料改某動) 這裏有如下幾點內容需要註意下面也是我二維碼優化之旅遇到的問題

Ionic—二維碼掃描與關於模組的開發

一.二維碼掃描功能佈局開發 1.開發設計 功能需求：佈局二維碼掃描頁面 二維碼掃描在Ionic Native中為QS Scanner外掛，安裝如下 sudo ionic cordova plugin add cordova-plugin-qrsc

Android二維碼掃描開發（一）：實現思路與原理

【 回覆“ 1024 ”，送你一個特別推送 】 現在二維碼已經非常普及了，那麼二維碼的掃描與處理也成為了Android開發中的一個必要技能。網上有很多關於Android中二維碼處理的帖子，大都是在講開源框架zxing用法，然後貼貼程式碼就完了，並沒有一個系統的分析和

iOS開發——系統原生的二維碼掃描

對於現在的App應用來說，掃描二維碼這個功能是再正常不過的一個功能了，在早期開發這些功能的時候，大家或多或少的都接觸過ZXing和ZBar這類的第三方庫，但從iOS7以後，蘋果就給我們提供了系統原生的API來支援我們掃描獲取二維碼，ZXing和ZBar在使用中或多或少有不盡如人意的地方，再之停止更新很久了

Android開發之Zbar實現二維碼掃描功能

前言： 在寫這篇文章之前已經寫過兩篇關於二維碼功能的文章，有興趣的可以看看——》文章1：Android開發之利用ZXing庫實現二維碼的掃描；文章2：Android開發之利用ZXing庫實現二維碼的生成，這兩篇文章中使用到的二維碼生成庫是ZXing，在本篇

iOS開發（OC）——二維碼掃描（原生API，支援條形碼）

今天，我為大家介紹一下iOS原生API實現二維碼和條形碼掃描功能 主要程式碼如下 //獲取攝像裝置 AVCaptureDevice * device = [AVCaptureDevi

Android開發中的二維碼掃描功能

Android開發中的二維碼掃描 現在Android開發中使用二維碼掃描功能越來越多，本篇部落格具體講一下其使用方法： 新增依賴 在自己的Activity或者Fragment中使用新增關於掃描的連結 新增二維碼掃描的相關Activity 對掃描資料進

Android二維碼掃描開發：實現思路與原理

現在二維碼已經非常普及了，那麼二維碼的掃描與處理也成為了Android開發中的一個必要技能。網上有很多關於Android中二維碼處理的帖子，大都是在講開源框架zxing用法，然後貼貼程式碼就完了，並沒有一個系統的分析和原理解析。其中涉及到的Camera的操作和YUV影

Android二維碼掃描開發------zxing匯出jar包

ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to othe

《打造極致二維碼掃描系列》 -- ZXing開發詳解

什麼是ZXing？ 在Android平臺做過二維碼相關模組的肯定都熟知ZXing開源專案，ZXing是一個開源Java類庫用於解析多種格式的1D/2D條形碼。目標是能夠對QR編碼、Data Matrix、UPC的1D條形碼進行解碼。 其提供了多種平臺下的客戶端包括：J2M

[IOS開發]js與WKwebview互動Demo（調取二維碼掃描）

#pragmamark-WKWebDelegate -(void)userContentController:(WKUserContentController*)userContentContr

iOS開發-原生二維碼的掃描和生成

從iOS7開始官方集成了二維碼的掃描和生成功能 此前被廣泛使用的zbarsdk目前不支援64位處理器 1.掃描二維碼 掃描二維碼需要匯入AVFoundation框架 利用攝像頭識別二維碼中的內容（模擬器不行） 輸入（攝像頭） 由會話將攝像頭採集到的二維碼影象轉換成字串

IOS 使用 ZbarSDK 二維碼掃描

fill 下載 src uitext void del symbols per super 1. 下載SDK https://github.com/bmorton/ZBarSDK 2. 引用到項目中 3. 添加引用 4. AppDelegate中添加下面代碼 5.

ZBar 是款桌面電腦用條形碼/二維碼掃描工具

進行 output app 新版本 import 系統安裝 安裝文件 window eating ZBar 是款桌面電腦用條形碼/二維碼掃描工具 windows平臺python 2.7環境編譯安裝zbar 最近一個項目需要識別二維碼，找來找去找到了zbar和zxin

Swift AVFoundation 二維碼掃描和生成

size ram post nserror out 捕獲 一個 白色 art 項目最終不須要支持iOS6了(淚崩),在二維碼掃描這一塊,可以全然的放棄ZXing庫,改用系統的AVFoundation了,拿swift寫了個Demo,效果例如以下: git

Zxing二維碼掃描

ram zxing oss lean 預覽 surface ott serial pac 源代碼地址 有問題能夠加QQ:312122330 之前對於Zbar的二位碼掃描。到項目上線以後才發現掃描過於靈敏。導致有時候掃描到半截就啟動了。 後來翻看ZXIN

iOS二維碼掃描

ont 代碼 畫面 告訴 nds ima dds rst bounds 每一步：添加 AVFoundation.framework 庫 General > Linked Frameworks and Libraries 第二步：代碼集成 #import "V

iOS開發-生成二維碼圖片【附中間帶有小圖標二維碼】（QRCode）

獲取 options reat 很多 mapr 過濾 生成二維碼 image bit 生成二維碼圖片也是項目中常用到的，二維碼的掃描Git上有很多好用的，這裏主要說下二維碼的生成 1.普通二維碼 1.1 方法 /** 生成二維碼 QRStering：字符串 image

基於Zxing的二維碼的二維碼掃描之橫屏掃描

ews name pla eight 網上 HA 如果 log 簡單的 最近項目條碼掃描要改為橫屏，網上所搜了一下，然後發現我寫的需要改動幾行代碼就可以了，還是很給力的。 如未查看之前的代碼，請移步： 基於Zxing的二維碼生成和二維碼掃描 修改下面寫代碼就可以實現橫