uniapp-uni.scanCode调用扫一扫功能（整理）

知秋~

已于 2022-08-09 16:10:33 修改

阅读量6.7k

点赞数 2

文章标签： uniapp调用扫一扫功能 uni.scanCode 扫一扫扫码功能

于 2022-07-12 15:53:51 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/125744883

版权

本文档展示了如何在uni-app中实现扫码功能，包括点击图标触发扫码、处理扫码成功和失败的回调，以及从相机扫码的示例。同时，还演示了如何解析并使用从二维码中获取的参数，例如在场景值为3时，设置oil_station_id的值，并执行相应操作。此外，还涉及到在小程序中通过onLoad函数解析二维码携带的链接参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方地址：https://uniapp.dcloud.io/api/system/barcode.html

<template>
	<view class="scanCodeBox">
		<image class='imgCode' src="../static/code.png" mode="" @click="scanCode"></image>
		<view class="desc">
			扫一扫
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			// 点击扫一扫按钮
			scanCode() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码成功', res)
					},
					fail: (err) => {
						console.log('扫码失败', err)
					},
					complete: () => {
						console.log('扫码结束')
					}
				})
			},
		}
	}
</script>

var that = this
 // 只允许从相机扫码
 wx.scanCode({
   onlyFromCamera: true,
   scanType: ['qrCode'],
   success(res) {
     console.log(res)
     if (res.path) {//合法本小程序路径
       var str = res.path
       var index = str.indexOf("=");//截取=符号后面的字符串
       var scene = str.substr(index + 1, str.length); //获得=符号后面所有字符
       var type = parseInt(scene[0])
       // console.log(type)
       //console.log(scene[2])
       if (type == 3) {
         that.setData({
           oil_station_id: scene[2]
         })
        //执行获得参数后的操作
       }
     }
   }
 })

//decodeURIComponent解析生成二维码的链接。
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.scene) {
     //获取二维码的携带的链接信息
      let qrUrl = decodeURIComponent(options.scene)
      console.log(qrUrl)
      this.setData({
      	//获取链接中的参数信息
        name: utils.getQueryString(qrUrl, 'name'),
        id: utils.getQueryString(qrUrl, 'id'),
      })
    } 
  },


onLoad (option) {
  console.log(option)
  if (option.scene) {
    let obj = decodeURIComponent(option.scene)
    ... // 这里就是你拿着参数obj进行操作
  }
}