关于uniapp使用uni.scanCode扫码时IOS出现空白页面

最新推荐文章于 2024-04-17 12:34:21 发布
最新推荐文章于 2024-04-17 12:34:21 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： uniapp 文章标签： 扫码 uniapp ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41048651/article/details/95074348
版权

关于uniapp使用uni.scanCode扫码时IOS出现空白页面

最近在使用uni.scanCode进行扫码读取商品信息时发现在IOS端出现空白页，但是把条码对准摄像头却又能扫出来，怀疑是uniapp封装的uni.scanCode和ios不兼容的问题了，于是自己参照网上的实例用源生的html5写了一个。

效果图

在这里插入图片描述

uniapp的写法

scanCode(type) { //调起客户端扫码界面进行扫码，然后进入商品详情页
	var current="";
	if (type == 1) {
		current = "b2c";
	} else {
		current = "o2o";
	}
	uni.scanCode({
		//onlyFromCamera: true,// 只允许通过相机扫码
		success: function(res) {
			Tool.post('uni/home/getProductByScanCode', {
				"barcode": res.result //商品69码
			}, function(res) {
				if (res.data.success) {
					uni.navigateTo({
						url: '/pages/list/list?keyword=' + res.data.data.name + '&plus=flase&current=' + current
					});
				} else {
					uni.showModal({
						title: '扫描结果',
						content: '商品不存在，是否重新扫描？',
						success(ret) {
							if (ret.confirm) {
								that.scanCode();
							}
						}
					});
					return;
				}
			});
		}
});

HTML中的barcode

1、首先新建一个vue

<template>
	<view>
	</view>
</template>
<script>
	import Tool from '../../common/tool.js';
	var barcode = null;
	export default {
		data() {
			return {
				flash: false, //是否打开摄像头
				type: ''
			};
		},
		onLoad(d) {
			this.type = d.type;
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true); //全屏
			var currentWebview = page.$getAppWebview();
			this.createBarcode(currentWebview); //创建二维码窗口
			this.createView(currentWebview); //创建操作按钮及tips界面
			// #endif
		},
		methods: {
			// 扫码成功回调
			onmarked(type, result) {
				this.scanning(result);
			},
			scanning(result) {
				var that = this
				var iso2o = "";
				if (that.type == 1) {
					iso2o = "b2c";
				} else {
					iso2o = "o2o";
				}
				uni.navigateBack({
					delta: 2
				});
				setTimeout(function() {
					Tool.post('uni/home/getProductByScanCode', {
						"barcode": result //商品69码
					}, function(res) {
						if (res.data.success) {
							uni.navigateTo({
								url: '/pages/list/list?keyword=' + res.data.data.name + '&plus=flase&current=' + iso2o
							});
						} else {
							uni.showModal({
								title: '扫描结果',
								content: '商品不存在，是否重新扫描？',
								success(ret) {
									if (ret.confirm) {
										uni.navigateTo({
											url: '/pages/home/scanning?type=' + that.type
										});
									} else {
										barcode.close();
									}
								}
							});
						}
					});
				}, 1000);
			},
			// 创建二维码窗口
			createBarcode(currentWebview) {
				barcode = plus.barcode.create('barcode', [plus.barcode.QR, plus.barcode.EAN13], {
					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 temp = this;
				// 创建返回原生按钮
				var backVew = new plus.nativeObj.View('backVew', {
						top: '0px',
						left: '0px',
						height: '40px',
						width: '30%'
					},
					[{
						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: '二维码/条码',
							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'
							}
						}
					]);
				// 创建相册按钮
				var album = new plus.nativeObj.View('album', {
						top: '0px',
						right: '0px',
						height: '100%',
						width: '30%'
					},
					[{
							tag: 'font',
							id: 'scanTitle',
							text: '相册',
							textStyles: {
								size: '18px',
								color: '#ffffff'
							},
							position: {
								top: '3px',
								right: '1px',
								width: '80px',
								height: '35px'
							}
						},
						{
							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(album);
				currentWebview.append(scanBarVew);
				currentWebview.append(backVew);
				backVew.addEventListener("click", function(e) { //返回按钮
					uni.navigateBack({
						delta: 1
					});
					barcode.close();
					plus.navigator.setFullscreen(false);
				}, false);
				album.addEventListener("click", function(e) { //相册按钮
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							plus.barcode.scan(res.tempFilePaths[0], function(type, result) {
								temp.scanning(result);
							}, function(e) {
								uni.navigateBack({
									delta: 2
								});
								uni.showModal({
									title: '扫描结果',
									content: '未发现指定条码，是否重新扫描？',
									success(ret) {
										if (ret.confirm) {
											uni.navigateTo({
												url: '/pages/home/scanning?type=' + temp.type
											});
										} 
									}
								}); 
							});
						},
						fail:function(fres){
							uni.navigateBack({
								delta: 2
							});
							uni.showToast({
								title: fres.message,
								icon: 'none',
								duration: 1000
							})
							barcode.close();
						}
					});
					//plus.navigator.setFullscreen(false);
				}, false);
				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() {
			plus.navigator.setFullscreen(false);
		}
	};
</script>

<style scoped>
</style>

2、在pages.json中添加如下内容

{
	 "path" : "pages/home/scanning",
	  "style" : {
		"navigationBarTitleText" : "二维码/条码",
		      "app-plus":{
			"titleNView":false
		}
	  }
},

3、在需要扫码的事件里判断一下平台

scanCode(type) { //调起客户端扫码界面进行扫码，然后进入商品详情页
	var that = this;
	//#ifdef APP-PLUS
		uni.navigateTo({
			url: '/pages/home/scanning?type='+type
		});
	//#endif
	//#ifdef MP-WEIXIN
		var current="";
		if (type == 1) {
			current = "b2c";
		} else {
			current = "o2o";
		}
		uni.scanCode({
			//onlyFromCamera: true,// 只允许通过相机扫码
			success: function(res) {
				Tool.post('uni/home/getProductByScanCode', {
					"barcode": res.result //商品69码
				}, function(res) {
					if (res.data.success) {
						uni.navigateTo({
							url: '/pages/list/list?keyword=' + res.data.data.name + '&plus=flase&current=' + current
						});
					} else {
						uni.showModal({
							title: '扫描结果',
							content: '商品不存在，是否重新扫描？',
							success(ret) {
								if (ret.confirm) {
									that.scanCode();
								}
							}
						});
						return;
					}
				});
			}
		});
	//#endif
},
qq_41048651
关注
专栏目录
【报Bug】调用uni.scanCode,苹果13pro 扫码调用时候报this.$refs.barcode.cancel is not a function,导致扫码界面出现黑屏。
LzzMandy的博客
08-02 339
【报Bug】调用uni.scanCode,苹果13pro 扫码调用时候报this.$refs.barcode.cancel is not a function,导致扫码界面出现黑屏。安卓系统下正常 - 调用uni.scanCode,苹果13pro 扫码调用时候报this.$refs.barcode.cancel is not a function,导致扫码界面出现黑屏。1、manifest.json勾选扫码模块。3、自定义基座（还是不行，就直接云端打包）4、删除原来的app。
IOS真机调试uni.scanCode调用报错，黑屏
Adobe Chow 的博客
03-12 3483
2，在manifest.json文件添加了对应的模块权限配置（Barcode(扫码)和Camera&Gallery相机和相册）。ios调用uni.scanCode报错，真机测试黑屏。，重新配置自定义基座或者使用标准基座运行。1，升级HBuilder到最新版本。3，勾选app对应权限配置。
uni-app-barcode:uni-app 条形码生成器
05-12
uni-app 条形码生成器 作者：诗小柒 支持H5、微信小程序、APP，其它平台的没有测试 使用canvas生成 不懂如何使用可以去直接打包下载运行 说明 此条形码组件的条形码生成部分移植改造自，精简了代码，移除无效属性，增加了点新属性，使其能够在uni-app中运行。 支持生成的条形码类型↓ CODE128 EAN CODE39 ITF MSI Pharmacode Codabar CODE128 EAN-13 CODE39 ITF MSI Pharmacode Codabar CODE128 A/B/C EAN-8 ITF - 14 MSI10 EAN-5 MSI11 EAN-2 MSI1010 UPC (A) MSI1110 UPC (E) 微信APP能够扫码识别的条形码类型：code128\code39\ean13\ean8\upc\itf14 注意：使用时请遵循条码类型规范，否
uniapp中APP端使用页面栈无效，且报错问题解决
qq_43351090的博客
11-18 2543
代码如下： let pages = getCurrentPages(); // 当前页， let prevPage = pages[pages.length - 2]; // 上一页 prevPage.xx = 1;//设置xx属性为1 在h5端不报错，可正常使用。 app端报错： Property or method “toJSON” is not defined on the instance but referenced during render. Make sure that this pro
uni.chooseLocation地图无可选地址
qq_44242707的博客
09-29 1164
情境：点击选择地址时，地图中定位准确，但下方无可选地址，搜索也无效果。原因：地图key的白名单导致失效。解决：清空地图key的白名单。
uniapp ios端扫码跳转APP卡死解决方案
weixin_42742837的博客
04-25 963
当上面代码执行后，页面没有任何相应，而且APP也操作不了，看下控制台从当前页面和被跳转的界面代码都顺利执行完了，而APP直接卡死有的甚至可能APP卡退重启了。在跳转的程序使用nextTick+延时500毫秒可以解决，测试发现只使用nextTick也可以解决，不过为了保险，加个双重吧。在苹果真机运行下进行扫码获取结果进行跳转，原先是不会报错的，现在我也碰上了。
2，uniapp功能之—扫码（条形码，二维码）点击扫码或者pda侧边按钮扫码
$
11-03 1万+
最近在搞uniapp的项目，所以最近的文章基本上是关于uniapp的。 分享一个自动生成二维码的网址，点击前往 注意 如果扫码和上一个nfc功能在同一个页面里面，会发生冲突，只有一个有用，一个没有用，所有，我给扫码的分装成了一个组件，这样就不会冲突了。 1，在component里面新建一个ScanCode.vue组件 <template> <view class="Big"> <view id="page"> <text v-if="isKeshi"
【uniapp】使用扫码插件，解决uni.scanCode扫码效率低的问题
m0_67394360的博客
03-06 5768
1. 背景 uniapp 中自带的二维码扫描的 API 是 uni.scanCode，但有如下问题： 二维码扫描的效率不高，有些需要扫2秒左右 较小或模糊的一些二维码无法识别出来，多次扫同样的一个码可能出现扫码失败的情况 受环境影响大，比如光线暗时识别率低 若二维码中间放置了自定义 logo，有一定概率无法识别到该二维码 uniapp 官方文档也提到： App的扫码引擎，使用业内开源的通用扫码库，扫码效率比不过微信、支付宝等商业扫码库。 故推荐使用支付宝扫码插件：https://ext.dcloud
uniapp 调起客户端扫码界面api uni.scanCode
lovewangyage的博客
11-02 1036
调起客户端扫码界面api uni.scanCode
ScanCode:优化了一些存在的异常
05-01
《ScanCode：优化与技术详解》 ...无论是用于日常扫码、设备间的无线通信，还是在更复杂的系统集成中，ScanCode都能表现出色。通过深入理解并应用这些技术，开发者可以为自己的项目带来更高效、更稳定的通信解决方案。
爱扫描【超级盘点机】手机条码扫描器、手机条码扫描软件、手机盘点机APP软件
06-28
手机条码扫描、手机条码盘点软件、安卓盘点机软件...用出入库条码扫描、盘点机扫描、图书查重扫描....轻松扫码、无线导出导入商品资料扫描记录、对接进销存,机变身无线扫描枪。
实现二维码扫描和条形码扫描
12-08
实现二维码扫描和条形码的扫描，并返回出扫描的结果。省去了很多不必要的文件，直接使用即可，导入到自己的项目即可，欢迎大家提问。并附带使用说明
uniapp - 实现 App 端 “半屏幕“ 连续扫码功能，页面只有半个屏幕是扫码框并且可持续连续扫码获取数据（不使用官方 uni.scanCode API，因为无法连续扫码！）详细示例源码插件教程
高级前端工程师
02-21 1万+
uniapp app端实现半屏幕扫码，uniapp 扫一扫半个屏幕，uniapp 扫一扫，uniapp持续扫码实现，uniapp怎么自定义扫码和连续扫码，uni-app App端半屏连续扫码，uniapp 扫一扫半个屏幕，uniapp自定义扫码页面样式，实现连续扫码功能(uniapp)，uniapp - 实现 App 端 "半屏幕" 连续扫码功能，页面只有半个屏幕是扫码框并且可持续连续扫码获取数据（不使用官方 uni.scanCode API，因为无法连续扫码！）详细示例源码插件教程。
uniapp实现条码扫描 可开闪光灯，原生H5调用，不需要任何sdk。
2303_76218115的博客
05-20 6667
一维码识别功能使用的是Quagga这个库。调用摄像头使用的 navigator.mediaDevices.getUserMedia 这个H5的api。通过 video 和 canvas 把摄像头获取到的数据展现到页面上，同时调用监听Quagga解析。
uniapp实现条码扫描 可开闪光灯，原生H5调用，不需要任何sdk。_uniapp h5扫码
最新发布
2401_84181383的博客
04-17 1073
if (origin.indexOf(‘https’) === -1) throw ‘请在 https 环境中使用摄像头组件。console.log(‘设备不支持’, err)console.log(‘出错了’);// 创建第二个canvas。// 设置当前宽高 满屏。
uniapp plus.barcode.scan 识别失败,提示 “code“: 8
weixin_45784582的博客
01-25 2455
最近在做一个二维码的小工具，生成的二维码，相册选中二维码识别经常出现 {“code”: 8, “message”: “”}的情况，查找了很多资料都说是二维码图片过大，需要压缩，又不给出解决的方法示例，下面是解决示例： 1、打开相册后执行的操作 // 打开相册 openImage(){ let that=this; // 调用手机相机和获取相册功能 uni.chooseImage({ count: 1, sizeType: ['original',
uniapp 扫码识别（一维码、二维码）
热门推荐
NM86876788的博客
05-19 1万+
uniapp 扫码识别（一维码、二维码）
UNIAPP扫码功能
开始的博客
06-13 952
【代码】UNIAPP扫码功能。
uni.scanCode扫码后自动计算
09-01
你可以使用uni.scanCode方法来实现扫码功能，并在获取到扫描结果后进行自动计算。以下是一个示例代码： ```javascript uni.scanCode({ success: function(res) { // 获取到扫描结果 var result = res.result; // 进行自动计算 var calculationResult = eval(result); // 在控制台打印计算结果 console.log(calculationResult); } }); ``` 在上述代码中，首先使用uni.scanCode方法来进行扫码操作，并在成功回调函数中获取到扫描结果。然后，使用eval函数对扫描结果进行计算，并将计算结果存储在calculationResult变量中。最后，你可以使用console.log函数在控制台上打印出计算结果。 请注意，eval函数可以将一个字符串作为JavaScript代码来执行，但是请确保扫描结果是一个有效的数学表达式，以避免潜在的安全风险。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值