uniapp 扫描

借鉴链接：https://blog.csdn.net/qq_33165549/article/details/89879435

1.扫描页面

<template>
    <view>
    </view>
</template>
<script>
    var barcode = null;
    export default {
        data() {
            return {
                name: '', //要在扫码界面自定义的内容
                title:'', //扫描标题
                flash: false, //是否打开摄像头
                isOngoingScan:"0", //是否连续扫描
                type: ''
            };
        },
        onLoad(d) {
            // var n = d.text;
            // this.type = d.type;
            // if (n) {
            //     this.name = n;
            // }
            // this.name = d;
            this.isOngoingScan = d.isOngoingScan;
            this.title = d.title;
            
            var pages = getCurrentPages();
            var page = pages[pages.length - 1];
            // #ifdef APP-PLUS
            plus.key.hideSoftKeybord();
            plus.navigator.setFullscreen(true); //全屏
            var currentWebview = page.$getAppWebview();
            this.createBarcode(currentWebview); //创建二维码窗口
            this.createView(currentWebview); //创建操作按钮及tips界面
            // #endif
            
        },
        methods: {
            // 扫码成功回调
            onmarked(type, result) {
                plus.key.hideSoftKeybord();
                // this.name = result;
                const eventChannel = this.getOpenerEventChannel()
                eventChannel.emit('acceptScanContent', { scanText: result });
                
                this.tui.toast("扫描内容：" + result, 1000, false);
                if(this.isOngoingScan === "1")
                {
                    setTimeout(() =>
                    {
                        plus.navigator.setFullscreen(false);
                        barcode.close();
                        // #ifdef APP-PLUS
                            var pages = getCurrentPages();
                            var page = pages[pages.length - 1];
                            var currentWebview = page.$getAppWebview();
                            this.createBarcode(currentWebview); //创建二维码窗口
                            this.createView(currentWebview); //创建操作按钮及tips界面
                        // #endif
                    }, 1000);
                }
                else
                {
                    plus.navigator.setFullscreen(false);
                    uni.navigateBack({
                        delta: 1
                    });
                    this.$eventHub.$emit(this.type, {
                        result: result
                    });
                    barcode.close();
                }
            },
            // 创建二维码窗口
            createBarcode(currentWebview) 
            {
                plus.key.hideSoftKeybord();
                barcode = plus.barcode.create('barcode', 
                [plus.barcode.QR,plus.barcode.EAN13,plus.barcode.EAN8
                ,plus.barcode.UPCA,plus.barcode.UPCE,plus.barcode.CODABAR
                ,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128
                ,plus.barcode.ITF,plus.barcode.RSS14,plus.barcode.RSSEXPANDED
                ,plus.barcode.AZTEC,plus.barcode.DATAMATRIX,plus.barcode.MAXICODE
                ,plus.barcode.PDF417]
                , {
                    top: '0',
                    left: '0',
                    width: '100%',
                    height: '100%',
                    scanbarColor: '#1DA7FF',
                    position: 'static',
                    frameColor: '#1DA7FF'
                });
                barcode.onmarked = this.onmarked;
                barcode.setFlash(this.flash);
                currentWebview.append(barcode);
                barcode.start();
            },
            // 创建操作按钮及tips
            createView(currentWebview) {
                // 创建返回原生按钮
                var backVew = new plus.nativeObj.View('backVew', {
                        top: '0px',
                        left: '0px',
                        height: '40px',
                        width: '100%'
                    },
                    [{
                        tag: 'img',
                        id: 'backBar',
                        src: 'static/backBar.png',
                        position: {
                            top: '2px',
                            left: '3px',
                            width: '35px',
                            height: '35px'
                        }
                    }]);
                // 创建打开手电筒的按钮
                var scanBarVew = new plus.nativeObj.View('scanBarVew', {
                        top: '60%',
                        left: '40%',
                        height: '10%',
                        width: '20%'
                    },
                    [{
                            tag: 'img',
                            id: 'scanBar',
                            src: 'static/scanBar.png',
                            position: {
                                width: '28%',
                                left: '36%',
                                height: '30%'
                            }
                        },
                        {
                            tag: 'font',
                            id: 'font',
                            text: '轻触照亮',
                            textStyles: {
                                size: '10px',
                                color: '#ffffff'
                            },
                            position: {
                                width: '80%',
                                left: '10%'
                            }
                        }
                    ]);
                // 创建展示类内容组件
                var content = new plus.nativeObj.View('content', {
                        top: '0px',
                        left: '0px',
                        height: '100%',
                        width: '100%'
                    },
                    [
                        {
                            tag: 'font',
                            id: 'scanTitle',
                            text: this.title,
                            textStyles: {
                                size: '18px',
                                color: '#ffffff'
                            },
                            position: {
                                top: '0px',
                                left: '0px',
                                width: '100%',
                                height: '40px'
                            }
                        },
                        {
                            tag: 'font',
                            id: 'scanTips',
                            text: this.name,
                            textStyles: {
                                size: '14px',
                                color: '#ffffff',
                                whiteSpace: 'normal'
                            },
                            position: {
                                top: '90px',
                                left: '10%',
                                width: '80%',
                                height: 'wrap_content'
                            }
                        }
                    ]);
                backVew.interceptTouchEvent(true);
                scanBarVew.interceptTouchEvent(true);
                currentWebview.append(content);
                currentWebview.append(scanBarVew);
                currentWebview.append(backVew);
                backVew.addEventListener("click", function(e) { //返回按钮
                    uni.navigateBack({
                        delta: 1
                    });
                    barcode.close();
                    plus.navigator.setFullscreen(false);
                }, false);
                var temp = this;
                scanBarVew.addEventListener("click", function(e) { //点亮手电筒
                    temp.flash = !temp.flash;
                    if (temp.flash) {
                        scanBarVew.draw([{
                                tag: 'img',
                                id: 'scanBar',
                                src: 'static/yellow-scanBar.png',
                                position: {
                                    width: '28%',
                                    left: '36%',
                                    height: '30%'
                                }
                            },
                            {
                                tag: 'font',
                                id: 'font',
                                text: '轻触照亮',
                                textStyles: {
                                    size: '10px',
                                    color: '#ffffff'
                                },
                                position: {
                                    width: '80%',
                                    left: '10%'
                                }
                            }
                        ]);
                    } else {
                        scanBarVew.draw([{
                                tag: 'img',
                                id: 'scanBar',
                                src: 'static/scanBar.png',
                                position: {
                                    width: '28%',
                                    left: '36%',
                                    height: '30%'
                                }
                            },
                            {
                                tag: 'font',
                                id: 'font',
                                text: '轻触照亮',
                                textStyles: {
                                    size: '10px',
                                    color: '#ffffff'
                                },
                                position: {
                                    width: '80%',
                                    left: '10%'
                                }
                            }
                        ])
                    }
                    if (barcode) {
                        barcode.setFlash(temp.flash);
                    }
                }, false)
            }
        },
        onBackPress() {
            // #ifdef APP-PLUS
            // 返回时退出全屏
            barcode.close();
            plus.navigator.setFullscreen(false);
            // #endif
        },
        onUnload() {
            barcode.close();
            plus.navigator.setFullscreen(false);
        }
    };
</script>

<style scoped>
</style>

2.调用页面

<template>
    <view class="container">
        <!-- <uni-table>
            <uni-tr>
                <uni-td>扫描：</uni-td>
                <uni-td><input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></uni-td>
            </uni-tr>
        </uni-table> -->
        <view>扫描：<input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></view>
        
        <uni-table>
            <uni-tr v-for="(row,idx) in Table" :key="idx">
                <uni-td><view>{{row.ID}}</view></uni-td>
                <uni-td class="tdWidth linefeed"><view>{{row.scanStr}}</view></uni-td>
            </uni-tr>
        </uni-table>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                    Table:[],            //扫描的数据列表
                    Text:"",            //扫描内容
                    tableIndex:0,        //序号，自增id
            }
        },
        methods:
        {
            //获取扫描栏输入内容
            inputBlur(e)
            {
                this.Text = e.detail.value;
            },
            //扫描
            scan()
            {
                // // 调起条码扫描，单个扫描
                // uni.scanCode({
                //     success: (res) => {
                //         this.tui.toast(res.result,1000,false);
                //         var dataList = 
                //         {
                //             "id":1,
                //             "scanText": res.result,
                //         };
                //         this.Table.push(dataList);
                //         this.scan();
                //     },
                //     fail: (res) => { }
                // })
                
                plus.key.hideSoftKeybord();//关闭软件盘
                var Table = this.Table;
                var index = this.tableIndex;
                uni.navigateTo({
                    url: '/pages/scan/scan?isOngoingScan=1&title=扫描',
                    events:
                    {
                        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                        acceptScanContent: function(data)
                        {
                            index++;
                            var row = {
                                "ID":index,
                                "scanStr":data.scanText,
                            };
                            Table.unshift(row);
                            //写入缓存
                            uni.setStorageSync('TableStore', Table);
                            uni.setStorageSync('TableIndex', index);
                        }
                    },
                    success: (res) => { },
                    fail: (res) => { }
                });
            }
        }
        ,onLoad()
        {
            //获取当前最大的序号id，为空时取默认值
            var index = uni.getStorageSync('TableIndex');
            if(index)
            {
                this.tableIndex = index;
            }
            
            //进入时加载之前的列表数据
            var storage = uni.getStorageSync("TableStore");
            for(var i = 0; i < storage.length; i++)
            {
                this.Table.push(storage[i]);
            }
        }
    
    }
</script>

<style>
    .container
    {
        position: relative;
        padding-bottom: 100rpx;
    }
    .remarkStyle
    {
        border-style: none none solid;
        font-size: 12px;
    }
    .tdWidth //列表固定宽度
    {
        width: 25%;
    }
    .linefeed //文本换行
    {
        white-space: normal;  // 规定段落中的文本不进行换行
        word-break: break-all;  // 允许单词中换行，在容器的最右边进行断开不会浪费控件
        word-wrap: break-word;  // 防止长单词溢出，单词内部短句
    }
</style>

 pages.json 加上扫描页面地址：/pages/scan/scan