uniapp 扫描
2024-10-21 12:53:54
借鉴链接：https://blog.csdn.net/qq_33165549/article/details/89879435
1.扫描页面
<template>
<view>
</view>
</template>
<script>
var barcode = null;
export default {
data() {
return {
name: '', //要在扫码界面自定义的内容
title:'', //扫描标题
flash: false, //是否打开摄像头
isOngoingScan:"0", //是否连续扫描
type: ''
};
},
onLoad(d) {
// var n = d.text;
// this.type = d.type;
// if (n) {
// this.name = n;
// }
// this.name = d;
this.isOngoingScan = d.isOngoingScan;
this.title = d.title; var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
plus.navigator.setFullscreen(true); //全屏
var currentWebview = page.$getAppWebview();
this.createBarcode(currentWebview); //创建二维码窗口
this.createView(currentWebview); //创建操作按钮及tips界面
// #endif },
methods: {
// 扫码成功回调
onmarked(type, result) {
plus.key.hideSoftKeybord();
// this.name = result;
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptScanContent', { scanText: result }); this.tui.toast("扫描内容：" + result, 1000, false);
if(this.isOngoingScan === "1")
{
setTimeout(() =>
{
plus.navigator.setFullscreen(false);
barcode.close();
// #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
this.createBarcode(currentWebview); //创建二维码窗口
this.createView(currentWebview); //创建操作按钮及tips界面
// #endif
}, 1000);
}
else
{
plus.navigator.setFullscreen(false);
uni.navigateBack({
delta: 1
});
this.$eventHub.$emit(this.type, {
result: result
});
barcode.close();
}
},
// 创建二维码窗口
createBarcode(currentWebview)
{
plus.key.hideSoftKeybord();
barcode = plus.barcode.create('barcode',
[plus.barcode.QR,plus.barcode.EAN13,plus.barcode.EAN8
,plus.barcode.UPCA,plus.barcode.UPCE,plus.barcode.CODABAR
,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128
,plus.barcode.ITF,plus.barcode.RSS14,plus.barcode.RSSEXPANDED
,plus.barcode.AZTEC,plus.barcode.DATAMATRIX,plus.barcode.MAXICODE
,plus.barcode.PDF417]
, {
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 backVew = new plus.nativeObj.View('backVew', {
top: '0px',
left: '0px',
height: '40px',
width: '100%'
},
[{
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: this.title,
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'
}
}
]);
backVew.interceptTouchEvent(true);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(content);
currentWebview.append(scanBarVew);
currentWebview.append(backVew);
backVew.addEventListener("click", function(e) { //返回按钮
uni.navigateBack({
delta: 1
});
barcode.close();
plus.navigator.setFullscreen(false);
}, false);
var temp = this;
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() {
barcode.close();
plus.navigator.setFullscreen(false);
}
};
</script> <style scoped>
</style>
2.调用页面
<template>
<view class="container">
<!-- <uni-table>
<uni-tr>
<uni-td>扫描：</uni-td>
<uni-td><input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></uni-td>
</uni-tr>
</uni-table> -->
<view>扫描：<input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></view> <uni-table>
<uni-tr v-for="(row,idx) in Table" :key="idx">
<uni-td><view>{{row.ID}}</view></uni-td>
<uni-td class="tdWidth linefeed"><view>{{row.scanStr}}</view></uni-td>
</uni-tr>
</uni-table>
</view>
</template> <script>
export default {
data() {
return {
Table:[], //扫描的数据列表
Text:"", //扫描内容
tableIndex:0, //序号，自增id
}
},
methods:
{
//获取扫描栏输入内容
inputBlur(e)
{
this.Text = e.detail.value;
},
//扫描
scan()
{
// // 调起条码扫描，单个扫描
// uni.scanCode({
// success: (res) => {
// this.tui.toast(res.result,1000,false);
// var dataList =
// {
// "id":1,
// "scanText": res.result,
// };
// this.Table.push(dataList);
// this.scan();
// },
// fail: (res) => { }
// }) plus.key.hideSoftKeybord();//关闭软件盘
var Table = this.Table;
var index = this.tableIndex;
uni.navigateTo({
url: '/pages/scan/scan?isOngoingScan=1&title=扫描',
events:
{
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptScanContent: function(data)
{
index++;
var row = {
"ID":index,
"scanStr":data.scanText,
};
Table.unshift(row);
//写入缓存
uni.setStorageSync('TableStore', Table);
uni.setStorageSync('TableIndex', index);
}
},
success: (res) => { },
fail: (res) => { }
});
}
}
,onLoad()
{
//获取当前最大的序号id，为空时取默认值
var index = uni.getStorageSync('TableIndex');
if(index)
{
this.tableIndex = index;
} //进入时加载之前的列表数据
var storage = uni.getStorageSync("TableStore");
for(var i = 0; i < storage.length; i++)
{
this.Table.push(storage[i]);
}
} }
</script> <style>
.container
{
position: relative;
padding-bottom: 100rpx;
}
.remarkStyle
{
border-style: none none solid;
font-size: 12px;
}
.tdWidth //列表固定宽度
{
width: 25%;
}
.linefeed //文本换行
{
white-space: normal; // 规定段落中的文本不进行换行
word-break: break-all; // 允许单词中换行，在容器的最右边进行断开不会浪费控件
word-wrap: break-word; // 防止长单词溢出，单词内部短句
}
</style>
pages.json 加上扫描页面地址：/pages/scan/scan
最新文章
- ADO.Net读取器获取数据库数据
- sql in按照指定顺序排序
- Java StringBuilder 高性能用法总结
- 34.数组中2个只出现一次的数字[Find two numbers which appear once]
- Python3基础 random 产生置顶区间的随机整数
- Java笔记(四)……常量与变量
- Codevs 2597 团伙(并查集)
- Angular 2 npm start 报错
- XML转义特殊字符
- angularjs字符串插值（$interpolate）
- lodash中_.set的用法
- jquery选择器之基本过滤选择器
- BestCoder Round #34_1002 以及 hdu 5191
- XSS过滤JAVA过滤器filter 防止常见SQL注入
- java游戏开发杂谈 - 事件处理
- postman Could not get any response。
- FZOJ P2109 【卡德加的兔子】
- $GLOBALS — 引用全局作用域中可用的全部变量
- c#开发地磅称重软件
- 设置XShell快捷键 复制粘贴 并禁用智能选择