uniapp 如何实现扫码搜索

场景描述

在众多移动应用中需要用到扫码二维码或条码查询信息的场景比比皆是，如 商品管理中查询商品信息，订单跟踪过程中扫码单号查询订单信息和库存管理中的商品盘点。

                                                                （图 一）

实操准备

为了更好接近实战，大家可以直接去gitee或者gitcode下载现成的项目 《星云erp-移动版》来操作。大家也可以自己通过脚手架或Hbuilder自行创建项目。

                                                                （图 二）

项目的基础运行与配置见《手把手教你0到1运行uniapp开发的项目》

具体实现

1、以 “商品管理”中扫码查询商品为例，具体代码见

                                                           （图三）

2、先实现界面，样式如（图 一），代码如下

<view class="top-view">
			<view class="search-input-view">
				<uni-search-bar placeholder="输入商品的编码" @confirm="searchBycode" :focus="true" @blur="blur" @input="input"
					clearButton="none" cancelButton="none" @cancel="cancel" @clear="clear">
				</uni-search-bar>
			</view>
			<view class="scan-btn-view" @click="scanCode"><uni-icons color="#ffffff" type="scan" size="26"></uni-icons>
			</view>
</view>

CSS

<style lang="scss">
	.top-view {
		background-color: #007AFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}
   .search-input-view {
		width: 75%;
	}

	.scan-btn-view {
		width: 8%;
	}

	.search-btn-view {
		width: 8%;
	}
</style>

3、实现手动输入执行搜索，见 @confirm="searchBycode"

searchBycode(res) {

				//默认res.value是 商品的编码
				this.searchFormData.code = res.value;

				//根据输入条件查询商品
				queryByKeyword(this.searchFormData)
					.then((res) => {
						// console.log(res.data)
						//更新查询结果
						this.searchFormDataList = res.data.datas;
					});
		
			},

4、实现扫码查询商品信息（支持小程序和app）

scanCode() {

				// app或者小程序,
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.searchFormData.code = res.result;
						//触发搜索条码
						queryByKeyword(this.searchFormData)
							.then((res) => {
								//更新查询结果
								this.searchFormDataList = res.data.datas;
							});
						//清空searchFormData
						this.searchFormData.available = true;
						this.searchFormData.productCode = '';
					}
				});

			},

5、实现扫码查询商品信息（支持H5）

mumu-getQrcode插件

下载mumu-getQrcode插件，导入项目中，mumu-getQrcode插件下载地址

##导入到项目中后，就可以创建页面使用了，列如我创建的sacn.vue
sacn.vue代码如下（示例）：

<template>
    <view class="container">
        <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError" :continue="false">
            <template v-slot:error>
                <view>摄像头启动失败</view>
            </template>
        </mumu-get-qrcode>
    </view>
</template>

<script>
    import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue' //引入

    
    export default {
        components: {
            mumuGetQrcode //注册
        },
        data() {
            return {
              
            }
        },
        name: 'Qrcode',
        methods: {
            qrcodeSucess(data) { //摄像头扫码成功后返回
                console.log('摄像头扫码成功 =>', data)
                uni.showModal({
                    title: '成功',
                    content: data,
                    success: () => {
                    }
                })
            },
            qrcodeError(err) { //摄像头扫码失败返回
                uni.showModal({
                    title: '摄像头授权失败',
                    content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
                    success: () => {
                        uni.navigateBack({}) //返回到上一页
                    }
                })
            }
            
        },
        onLoad() {
            
        }
    }
</script>

<style scoped lang="scss">
    .container {
        height: 100%;
    }
</style>

6、在要点击扫描的方法上，跳转到这个sacn.vue页面

scanCode() {
                uni.navigateTo({
                    url: '/pages/scan/scan'
                })
    }

特别注意

因为调用了手机摄像头扫描二维码，所以只支持https域名，一开始我就是在http环境下，进入扫描时，摄像头不起作用，扫描不了，所以一定要在https域名下进行扫描。