FNScanner二維碼接口openView自定義掃碼Demo

本文出自APICloud官方論壇

FNScanner 模塊是一個二維碼/條形碼掃描器，是 scanner 模塊的優(yōu)化升級版。在 iOS 平臺上本模塊底層集成了 Zbar 和系統(tǒng)自帶的條形碼/二維碼分析庫，由于 IOS 系統(tǒng)平臺在 IOS7.0 以上才開放了二維碼/條碼的相關(guān)接口，所以在 IOS6 上運行時模塊會調(diào)用開源庫 Zbar 去讀取解析二維碼/條碼。只有在 IOS7 以上版本才會調(diào)用系統(tǒng)自帶掃碼功能。

模塊文檔地址：
docs.apicloud.com/Client-API/…

模塊需要注意的地方：

注意：使用本模塊前，需在云編譯頁面勾選添加訪問攝像頭權(quán)限，若要訪問相冊也需溝通申請訪問相冊權(quán)限 。
不能同時使用的模塊：wwprint

本模塊封裝了兩套掃碼方案：
方案一
開發(fā)者通過調(diào)用 openScanner 接口直接打開自帶默認 UI 效果的二維碼/條形碼掃描頁面，本界面相當(dāng)于打開一個 window 窗口，其界面內(nèi)容不支持自定義。用戶可在此界面實現(xiàn)功能如下：
打開關(guān)閉閃關(guān)燈
從系統(tǒng)相冊選取二維碼/條碼圖片進行解密操作
打開攝像頭，自動對焦掃碼想要解析的二維碼/條碼
方案二
通過 openView 接口打開一個自定義大小的掃描區(qū)域（本區(qū)域相當(dāng)于打開一個 frame）進行掃描。開發(fā)者可自行 open 一個 frame 貼在模塊上，從而實現(xiàn)自定義掃描界面的功能。然后配合使用 setFrame、closeView、switchLight 等接口實現(xiàn)開關(guān)閃光燈、重設(shè)掃描界面位置大小、圖片解碼、字符串編碼等相關(guān)功能。詳情請參考模塊接口參數(shù)。

方案一我就不介紹，因為直接調(diào)取接口就能直接顯示一個掃碼ui界面，直接使用就可以， 樓主本帖分享的是方案一無法滿足ui設(shè)計效果前提下，怎么實現(xiàn)ui自定義的效果；

方案二完成頁面截圖

方案二打開閃光燈效果界面截圖

第一步：首先先打開openwin，然后再打開模塊 ，然后延遲打開一個frm自定義一個掃碼見面。大家上面看到掃碼是這種思路的； 廢話不多說上部分核心源碼

var FNScanner, eHeader, headerH;
    apiready = function() {
        //應(yīng)用全局FNScanner模塊
        FNScanner = api.require('FNScanner');
        //定義根據(jù)id獲取dom
        eHeader = $api.byId('header');
        //設(shè)置頭部沉浸式
        $api.fixStatusBar(eHeader);
        //獲取頭部高度
        headerH = $api.offset(eHeader).h;

        //監(jiān)聽?wèi)?yīng)用回到前臺
        api.addEventListener({
            name: 'resume'
        }, function(ret, err) {
            FNScanner.onResume();
        });

        //監(jiān)聽?wèi)?yīng)用回到后臺
        api.addEventListener({
            name: 'pause'
        }, function(ret, err) {
            FNScanner.onPause();
        });

        fnOpenFNScanner();
    }

    function fnOpenFNScanner() {
        // 打開掃碼模塊
        FNScanner.openView({
            //autorotation: true,
            fixedOn: api.frameName,
            rect: {
                x: 0,
                y: headerH,
                w: api.frameWidth,
                h: api.frameHeight
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType == 'success' && ret.content != '') {
                    // 掃碼成功執(zhí)行函數(shù)操作傳值
                    fnOpenCouple(ret.content);
                    return;
                }
                if (ret.eventType == 'cameraError') {
                    api.toast({
                        msg: '請開啟app訪問手機攝像頭權(quán)限',
                        duration: 2000,
                        location: 'bottom'
                    });
                    setTimeout(function() {
                        // 關(guān)閉掃碼器  關(guān)閉掃碼界面
                        back();
                    }, 300);
                    return;
                }
                if (ret.eventType == 'albumError') {
                    api.toast({
                        msg: '請開啟app訪問手機相冊權(quán)限',
                        duration: 2000,
                        location: 'bottom'
                    });
                    setTimeout(function() {
                        back();
                    }, 300);
                    return;
                }
                if (ret.eventType == 'fail') {
                    api.toast({
                        msg: '掃碼失敗,請從新掃碼',
                        duration: 2000,
                        location: 'bottom'
                    });
                    setTimeout(function() {
                        back();
                    }, 300);
                    return;
                }
            } else {
                api.toast({
                    msg: '掃碼錯誤請稍后再試',
                    duration: 2000,
                    location: 'bottom'
                });
                setTimeout(function() {
                    back();
                }, 300);
            }
        });
        setTimeout(function() {
            // 打開掃碼動畫frm頁面
            api.openFrame({
                name: 'add_frm',
                url: './add_frm.html',
                rect: {
                    marginTop: headerH,
                    marginLeft: 0,
                    marginRight: 0,
                    marginBottom: 0
                },
                bgColor: 'rgba(0,0,0,0)',
            });
        }, 300);
    }

    //返回
    function back() {
        // 關(guān)閉win頁面
        api.closeWin();
        // 關(guān)閉掃碼模塊
        FNScanner.closeView();
    }

    //打開最后掃碼得出的數(shù)值
    function fnOpenCouple(content) {
        console.warn(content);
        back(); //建議打開下一頁我這塊只是為了方便直接調(diào)用返回按鈕   掃碼成功之后必須關(guān)閉掃碼模塊  不然會出現(xiàn)多次掃碼情況
    }

    var isSOff = true;
    // 打開閃光燈
    function fnOpenLamp() {
        if (isSOff) {
            FNScanner.switchLight({
                status: 'on'
            });
            isSOff = false;
        } else {
            FNScanner.switchLight({
                status: 'off'
            });
            isSOff = true;
        }
    }
復(fù)制代碼