APP、微信小程序 （原生掃碼功能）

<!-- 在 'manifest.json' 中允許打開攝像頭權限 -->

<template>
	<button @click="scanQRcodes">掃碼</button>
</template>

<script setup>
// 掃碼
const scanQRcodes = () => {
	uni.scanCode({
		success: (res) => {
			if (res.result) {
				console.log('掃描結果：', res.result);
			} else {
				uni.showToast({
					title: '掃描失敗',
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			if (err.errMsg.includes('cancel')) {
				uni.showToast({
					title: '掃描已取消',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '調用相機失敗',
					icon: 'none'
				});
			}
		}
	});
};
</script>

h5（掃碼功能插件）

1. 導入插件（兩種方式，選其一）

   （1）HBuilder 創建的項目：從應用市場導入 mumu-getQrcode 到uniapp項目中

   （2）腳手架創建的 uni 項目：需要自行安裝 jsQR 依賴，并且修改組件中源碼中的引入。

   # 安裝 jsQR
   npm install jsqr --save
   
   # 修改組件源碼對 jsQR 依賴
   import jsQR from "jsqr"
   

2. 新建頁面 scan-qrcode，作為掃碼頁面。

   <template>
   	<view class="container">
   		<mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError"></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({})  //返回到上一頁
   					}
   				})
   			}
   		}
   	};
   </script>
   

3. 在需要調用掃碼功能的頁面進行 頁面跳轉

   uni.navigateTo({
       url: '/pages/scan-qrcode/scan-qrcode'
   });
   

4. 相關API

   可傳屬性（Props）

   參數	說明	類型	默認值
   continue	是否連續獲取。false 監聽一次 true 持續監聽	Boolean	false
   exact	選調用攝像頭。environment 后攝像頭 user 前攝像頭	String	environment
   size	掃碼屏幕大小。whole 全屏 balf 半屏	String	whole
   definition	調用攝像頭清晰度。fasle 正常 true 高清	Boolean	false

   事件（Events）

   事件名	說明	回調參數
   success	檢測到圖中有二維碼并讀取到數據是回調	二維碼數據
   error	組件內部發送錯誤，通常是攝像頭沒有調用成功	錯誤信息，詳情見下

   常見的錯誤信息：

   • AbortError［中止錯誤］

     盡管用戶和操作系統都授予了訪問設備硬件的權利，而且未出現可能拋出NotReadableError異常的硬件問題，但仍然有一些問題的出現導致了設備無法被使用。

   • NotAllowedError［拒絕錯誤］

     用戶拒絕了當前的瀏覽器實例的訪問請求；或者用戶拒絕了當前會話的訪問；或者用戶在全局范圍內拒絕了所有媒體訪問請求。

   • NotFoundError［找不到錯誤］

     找不到滿足請求參數的媒體類型。

   • NotReadableError［無法讀取錯誤］

     盡管用戶已經授權使用相應的設備，操作系統上某個硬件、瀏覽器或者網頁層面發生的錯誤導致設備無法被訪問。

   • OverconstrainedError［無法滿足要求錯誤］

     指定的要求無法被設備滿足，此異常是一個類型為OverconstrainedError的對象，擁有一個constraint屬性，這個屬性包含了當前無法被滿足的constraint對象，還擁有一個message屬性，包含了閱讀友好的字符串用來說明情況。

   • SecurityError［安全錯誤］

     在getUserMedia() 被調用的 Document 上面，使用設備媒體被禁止。這個機制是否開啟或者關閉取決于單個用戶的偏好設置。

   • TypeError［類型錯誤］

     constraints 對象未設置［空］，或者都被設置為false。

   插槽 （slot）

   插槽名稱	說明	默認值
   error	當發送錯誤時，在頁面上顯示的內容	相機權限被拒絕提示