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

本文出自APICloud官方論壇

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

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

模塊需要注意的地方：

注意：使用本模塊前，需在雲編譯頁面勾選添加訪問攝像頭權限，若要訪問相冊也需溝通申請訪問相冊權限 。

不能同時使用的模塊：wwprint

本模塊封裝了兩套掃碼方案：

方案一 開發者通過調用 openScanner 接口直接打開自帶默認 UI 效果的二維碼/條形碼掃描頁面，本界面相當於打開一個 window 窗口，其界面內容不支持自定義。用戶可在此界面實現功能如下： 打開關閉閃關燈 從系統相冊選取二維碼/條碼圖片進行解密操作 打開攝像頭，自動對焦掃碼想要解析的二維碼/條碼

方案二 通過 openView 接口打開一個自定義大小的掃描區域（本區域相當於打開一個 frame）進行掃描。開發者可自行 open 一個 frame 貼在模塊上，從而實現自定義掃描界面的功能。然后配合使用 setFrame、closeView、switchLight 等接口實現開關閃光燈、重設掃描界面位置大小、圖片解碼、字符串編碼等相關功能。詳情請參考模塊接口參數。

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

第一步：首先先打開openwin，然后再打開模塊 ，然后延遲打開一個frm自定義一個掃碼見面。大家上面看到掃碼是這種思路的；

廢話不多說上部分核心源碼

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

        //監聽應用回到前台
        api.addEventListener({
            name: 'resume'
        }, function(ret, err) {
            FNScanner.onResume();
        });

        //監聽應用回到后台
        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 != '') {
                    // 掃碼成功執行函數操作傳值
                    fnOpenCouple(ret.content);
                    return;
                }
                if (ret.eventType == 'cameraError') {
                    api.toast({
                        msg: '請開啟app訪問手機攝像頭權限',
                        duration: 2000,
                        location: 'bottom'
                    });
                    setTimeout(function() {
                        // 關閉掃碼器  關閉掃碼界面
                        back();
                    }, 300);
                    return;
                }
                if (ret.eventType == 'albumError') {
                    api.toast({
                        msg: '請開啟app訪問手機相冊權限',
                        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() {
        // 關閉win頁面
        api.closeWin();
        // 關閉掃碼模塊
        FNScanner.closeView();
    }

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

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