一：識(shí)別：圖片二維碼url：

后端返回二維碼的圖片url，則直接展示，做長(zhǎng)按手勢(shì)識(shí)別，再調(diào)用方法即可。

<mage>標(biāo)簽長(zhǎng)按識(shí)別實(shí)現(xiàn)（微信版本>2.7.0）

<image show-menu-by-longpress="true" src="../../static/we.png" ></image>

show-menu-by-longpress="true"可實(shí)現(xiàn)識(shí)別二維碼（微信個(gè)人碼、微信群碼、企業(yè)微信個(gè)人碼、 企業(yè)微信群碼與企業(yè)微信互通群碼）

uniapp官方文檔鏈接
微信小程序官方文檔鏈接

通過(guò)預(yù)覽圖片再長(zhǎng)按實(shí)現(xiàn)
通過(guò)uni.previewImage(OBJECT)實(shí)現(xiàn)，該方法可以在新頁(yè)面中全屏預(yù)覽圖片，長(zhǎng)按可打開(kāi)操作菜單，其中有識(shí)別二維碼（微信個(gè)人碼、微信群碼、企業(yè)微信個(gè)人碼、 企業(yè)微信群碼與企業(yè)微信互通群碼）： ?這兩個(gè)api需要一起使用，如果單獨(dú)使用其中一個(gè)并不能達(dá)到長(zhǎng)按識(shí)別 或者點(diǎn)擊識(shí)別的目的。

<image show-menu-by-longpress="true" src="../../static/we.png" @longpress="openimg"></image>


openimg(e) {
				uni.previewImage({
							// 需要預(yù)覽的圖片鏈接列表
							urls: ['../../static/we.png'],
							// 為當(dāng)前顯示圖片的鏈接/索引值
							current: "../../static/we.png",
							// 圖片指示器樣式	
							indicator:'default',
							// 是否可循環(huán)預(yù)覽
							loop:false,
							// 長(zhǎng)按圖片顯示操作菜單，如不填默認(rèn)為保存相冊(cè)
							// longPressActions:{
							// 	itemList:[this.l('發(fā)送給朋友'),this.l]
							// },
							success: res => {
								console.log('res', res);
							}, 
							fail: err => {
								console.log('err', err);
							}
						});
			},

經(jīng)代碼測(cè)驗(yàn)openimg(e) {}獲取到的e.target里沒(méi)有src值，所以這里的urls和current是直接賦值，也可以自定定義個(gè)屬性來(lái)保存。

image src可以是本地也可以是url。

previewImage 里面的urls是大圖展示圖片，經(jīng)測(cè)驗(yàn)不能為空?？梢允潜镜貓D片，可以是url。

開(kāi)啟 圖片的?:show-menu-by-longpress="true"? 屬性，就可以識(shí)別出長(zhǎng)按操作

這兩個(gè)api做完，可以直接達(dá)到的效果是識(shí)別圖片里的二維碼（個(gè)人微信二維碼、群微信二維碼、企業(yè)二維碼等、小程序二維碼）識(shí)別出來(lái)，

微信個(gè)人二維碼? --? > ?直接跳轉(zhuǎn)到個(gè)人頁(yè)面或者加好友，

群二維碼 ? ? ? ? ? ? -- ?> ?直接跳轉(zhuǎn)到群里或者加群頁(yè)面，

企業(yè)群二維碼 ? ? -- ?> ?直接跳轉(zhuǎn)到加群 或者群內(nèi)頁(yè)面，

小程序碼 ? ? ? ? ? ?-- ?> ?直接跳轉(zhuǎn)到小程序

所以后續(xù)不需要做其他處理，會(huì)直接出現(xiàn)圓圈加載識(shí)別。 網(wǎng)上很多其他的說(shuō)只能識(shí)別小程序二維碼啥的連接，可能是用的舊的api，新版是可以的，這里做了驗(yàn)證處理。

?

?上圖中是個(gè)人二維碼識(shí)別打開(kāi)和群二維碼識(shí)別打開(kāi)。

二：根據(jù)后臺(tái)流返回畫(huà)成：

?根據(jù)后臺(tái)返回的流生成二維碼，布在畫(huà)布上的，這個(gè)需要掃碼 或者截圖 再識(shí)別或者截圖保存。

uQRCode 可以采用這個(gè)三方uni-app如何使用uQRCode插件生成自定義二維碼_uniapp二維碼插件_Moran墨染的博客-CSDN博客???????

三：掃碼

uniapp 系統(tǒng)的掃碼api

// 允許從相機(jī)和相冊(cè)掃碼
uni.scanCode({
	success: function (res) {
		console.log('條碼類(lèi)型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});
 
// 只允許通過(guò)相機(jī)掃碼
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('條碼類(lèi)型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});
 
// 調(diào)起條碼掃描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('條碼類(lèi)型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});

是會(huì)調(diào)取本地相冊(cè)或者相機(jī)選取圖片進(jìn)行掃描。

uni-app實(shí)現(xiàn)掃碼功能_uniapp 掃碼_MINO吖的博客-CSDN博客文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-595953.html

到了這里，關(guān)于uniapp-前端 二維碼、掃碼、長(zhǎng)按、識(shí)別等問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！