uni-app 扫描_uni-app 扫码

1. <template> 
2.     <view> 
3.     </view> 
4. </template> 
5. <script> 
6.     var barcode = null; 
7.     export default { 
8.         data() { 
9.             return { 
10.                 name: '', //要在扫码界面自定义的内容 
11.                 title:'', //扫描标题 
12.                 flash: false, //是否打开摄像头 
13.                 isOngoingScan:"0", //是否连续扫描 
14.                 type: '' 
15.             }; 
16.         }, 
17.         onLoad(d) { 
18.             // var n = d.text; 
19.             // this.type = d.type; 
20.             // if (n) { 
21.             //     this.name = n; 
22.             // } 
23.             // this.name = d; 
24.             this.isOngoingScan = d.isOngoingScan; 
25.             this.title = d.title; 
26.              
27.             var pages = getCurrentPages(); 
28.             var page = pages[pages.length - 1]; 
29.             // #ifdef APP-PLUS 
30.             plus.key.hideSoftKeybord(); 
31.             plus.navigator.setFullscreen(true); //全屏 
32.             var currentWebview = page.$getAppWebview(); 
33.             this.createBarcode(currentWebview); //创建二维码窗口 
34.             this.createView(currentWebview); //创建操作按钮及tips界面 
35.             // #endif 
36.              
37.         }, 
38.         methods: { 
39.             // 扫码成功回调 
40.             onmarked(type, result) { 
41.                 plus.key.hideSoftKeybord(); 
42.                 // this.name = result; 
43.                 const eventChannel = this.getOpenerEventChannel() 
44.                 eventChannel.emit('acceptScanContent', { scanText: result }); 
45.                  
46.                 this.tui.toast("扫描内容：" + result, 1000, false); 
47.                 if(this.isOngoingScan === "1") 
48.                 { 
49.                     setTimeout(() => 
50.                     { 
51.                         plus.navigator.setFullscreen(false); 
52.                         barcode.close(); 
53.                         // #ifdef APP-PLUS 
54.                             var pages = getCurrentPages(); 
55.                             var page = pages[pages.length - 1]; 
56.                             var currentWebview = page.$getAppWebview(); 
57.                             this.createBarcode(currentWebview); //创建二维码窗口 
58.                             this.createView(currentWebview); //创建操作按钮及tips界面 
59.                         // #endif 
60.                     }, 1000); 
61.                 } 
62.                 else 
63.                 { 
64.                     plus.navigator.setFullscreen(false); 
65.                     uni.navigateBack({ 
66.                         delta: 1 
67.                     }); 
68.                     this.$eventHub.$emit(this.type, { 
69.                         result: result 
70.                     }); 
71.                     barcode.close(); 
72.                 } 
73.             }, 
74.             // 创建二维码窗口 
75.             createBarcode(currentWebview)  
76.             { 
77.                 plus.key.hideSoftKeybord(); 
78.                 barcode = plus.barcode.create('barcode',  
79.                 [plus.barcode.QR,plus.barcode.EAN13,plus.barcode.EAN8 
80.                 ,plus.barcode.UPCA,plus.barcode.UPCE,plus.barcode.CODABAR 
81.                 ,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128 
82.                 ,plus.barcode.ITF,plus.barcode.RSS14,plus.barcode.RSSEXPANDED 
83.                 ,plus.barcode.AZTEC,plus.barcode.DATAMATRIX,plus.barcode.MAXICODE 
84.                 ,plus.barcode.PDF417] 
85.                 , { 
86.                     top: '0', 
87.                     left: '0', 
88.                     width: '100%', 
89.                     height: '100%', 
90.                     scanbarColor: '#1DA7FF', 
91.                     position: 'static', 
92.                     frameColor: '#1DA7FF' 
93.                 }); 
94.                 barcode.onmarked = this.onmarked; 
95.                 barcode.setFlash(this.flash); 
96.                 currentWebview.append(barcode); 
97.                 barcode.start(); 
98.             }, 
99.             // 创建操作按钮及tips 
100.             createView(currentWebview) { 
101.                 // 创建返回原生按钮 
102.                 var backVew = new plus.nativeObj.View('backVew', { 
103.                         top: '0px', 
104.                         left: '0px', 
105.                         height: '40px', 
106.                         width: '100%' 
107.                     }, 
108.                     [{ 
109.                         tag: 'img', 
110.                         id: 'backBar', 
111.                         src: 'static/backBar.png', 
112.                         position: { 
113.                             top: '2px', 
114.                             left: '3px', 
115.                             width: '35px', 
116.                             height: '35px' 
117.                         } 
118.                     }]); 
119.                 // 创建打开手电筒的按钮 
120.                 var scanBarVew = new plus.nativeObj.View('scanBarVew', { 
121.                         top: '60%', 
122.                         left: '40%', 
123.                         height: '10%', 
124.                         width: '20%' 
125.                     }, 
126.                     [{ 
127.                             tag: 'img', 
128.                             id: 'scanBar', 
129.                             src: 'static/scanBar.png', 
130.                             position: { 
131.                                 width: '28%', 
132.                                 left: '36%', 
133.                                 height: '30%' 
134.                             } 
135.                         }, 
136.                         { 
137.                             tag: 'font', 
138.                             id: 'font', 
139.                             text: '轻触照亮', 
140.                             textStyles: { 
141.                                 size: '10px', 
142.                                 color: '#ffffff' 
143.                             }, 
144.                             position: { 
145.                                 width: '80%', 
146.                                 left: '10%' 
147.                             } 
148.                         } 
149.                     ]); 
150.                 // 创建展示类内容组件 
151.                 var content = new plus.nativeObj.View('content', { 
152.                         top: '0px', 
153.                         left: '0px', 
154.                         height: '100%', 
155.                         width: '100%' 
156.                     }, 
157.                     [ 
158.                         { 
159.                             tag: 'font', 
160.                             id: 'scanTitle', 
161.                             text: this.title, 
162.                             textStyles: { 
163.                                 size: '18px', 
164.                                 color: '#ffffff' 
165.                             }, 
166.                             position: { 
167.                                 top: '0px', 
168.                                 left: '0px', 
169.                                 width: '100%', 
170.                                 height: '40px' 
171.                             } 
172.                         }, 
173.                         { 
174.                             tag: 'font', 
175.                             id: 'scanTips', 
176.                             text: this.name, 
177.                             textStyles: { 
178.                                 size: '14px', 
179.                                 color: '#ffffff', 
180.                                 whiteSpace: 'normal' 
181.                             }, 
182.                             position: { 
183.                                 top: '90px', 
184.                                 left: '10%', 
185.                                 width: '80%', 
186.                                 height: 'wrap_content' 
187.                             } 
188.                         } 
189.                     ]); 
190.                 backVew.interceptTouchEvent(true); 
191.                 scanBarVew.interceptTouchEvent(true); 
192.                 currentWebview.append(content); 
193.                 currentWebview.append(scanBarVew); 
194.                 currentWebview.append(backVew); 
195.                 backVew.addEventListener("click", function(e) { //返回按钮 
196.                     uni.navigateBack({ 
197.                         delta: 1 
198.                     }); 
199.                     barcode.close(); 
200.                     plus.navigator.setFullscreen(false); 
201.                 }, false); 
202.                 var temp = this; 
203.                 scanBarVew.addEventListener("click", function(e) { //点亮手电筒 
204.                     temp.flash = !temp.flash; 
205.                     if (temp.flash) { 
206.                         scanBarVew.draw([{ 
207.                                 tag: 'img', 
208.                                 id: 'scanBar', 
209.                                 src: 'static/yellow-scanBar.png', 
210.                                 position: { 
211.                                     width: '28%', 
212.                                     left: '36%', 
213.                                     height: '30%' 
214.                                 } 
215.                             }, 
216.                             { 
217.                                 tag: 'font', 
218.                                 id: 'font', 
219.                                 text: '轻触照亮', 
220.                                 textStyles: { 
221.                                     size: '10px', 
222.                                     color: '#ffffff' 
223.                                 }, 
224.                                 position: { 
225.                                     width: '80%', 
226.                                     left: '10%' 
227.                                 } 
228.                             } 
229.                         ]); 
230.                     } else { 
231.                         scanBarVew.draw([{ 
232.                                 tag: 'img', 
233.                                 id: 'scanBar', 
234.                                 src: 'static/scanBar.png', 
235.                                 position: { 
236.                                     width: '28%', 
237.                                     left: '36%', 
238.                                     height: '30%' 
239.                                 } 
240.                             }, 
241.                             { 
242.                                 tag: 'font', 
243.                                 id: 'font', 
244.                                 text: '轻触照亮', 
245.                                 textStyles: { 
246.                                     size: '10px', 
247.                                     color: '#ffffff' 
248.                                 }, 
249.                                 position: { 
250.                                     width: '80%', 
251.                                     left: '10%' 
252.                                 } 
253.                             } 
254.                         ]) 
255.                     } 
256.                     if (barcode) { 
257.                         barcode.setFlash(temp.flash); 
258.                     } 
259.                 }, false) 
260.             } 
261.         }, 
262.         onBackPress() { 
263.             // #ifdef APP-PLUS 
264.             // 返回时退出全屏 
265.             barcode.close(); 
266.             plus.navigator.setFullscreen(false); 
267.             // #endif 
268.         }, 
269.         onUnload() { 
270.             barcode.close(); 
271.             plus.navigator.setFullscreen(false); 
272.         } 
273.     }; 
274. </script> 
275.  
276. <style scoped> 
277. </style> 

2.调用页面

 

1. <template> 
2.     <view class="container"> 
3.         <!-- <uni-table> 
4.             <uni-tr> 
5.                 <uni-td>扫描：</uni-td> 
6.                 <uni-td><input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></uni-td> 
7.             </uni-tr> 
8.         </uni-table> --> 
9.         <view>扫描：<input type="text" class="remarkStyle" @longpress="scan" placeholder="长按启动扫描" @blur="inputBlur" /></view> 
10.          
11.         <uni-table> 
12.             <uni-tr v-for="(row,idx) in Table" :key="idx"> 
13.                 <uni-td><view>{{row.ID}}</view></uni-td> 
14.                 <uni-td class="tdWidth linefeed"><view>{{row.scanStr}}</view></uni-td> 
15.             </uni-tr> 
16.         </uni-table> 
17.     </view> 
18. </template> 
19.  
20. <script> 
21.     export default { 
22.         data() { 
23.             return { 
24.                     Table:[],            //扫描的数据列表 
25.                     Text:"",            //扫描内容 
26.                     tableIndex:0,        //序号，自增id 
27.             } 
28.         }, 
29.         methods: 
30.         { 
31.             //获取扫描栏输入内容 
32.             inputBlur(e) 
33.             { 
34.                 this.Text = e.detail.value; 
35.             }, 
36.             //扫描 
37.             scan() 
38.             { 
39.                 // // 调起条码扫描，单个扫描 
40.                 // uni.scanCode({ 
41.                 //     success: (res) => { 
42.                 //         this.tui.toast(res.result,1000,false); 
43.                 //         var dataList =  
44.                 //         { 
45.                 //             "id":1, 
46.                 //             "scanText": res.result, 
47.                 //         }; 
48.                 //         this.Table.push(dataList); 
49.                 //         this.scan(); 
50.                 //     }, 
51.                 //     fail: (res) => { } 
52.                 // }) 
53.                  
54.                 plus.key.hideSoftKeybord();//关闭软件盘 
55.                 var Table = this.Table; 
56.                 var index = this.tableIndex; 
57.                 uni.navigateTo({ 
58.                     url: '/pages/scan/scan?isOngoingScan=1&title=扫描', 
59.                     events: 
60.                     { 
61.                         // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 
62.                         acceptScanContent: function(data) 
63.                         { 
64.                             index++; 
65.                             var row = { 
66.                                 "ID":index, 
67.                                 "scanStr":data.scanText, 
68.                             }; 
69.                             Table.unshift(row); 
70.                             //写入缓存 
71.                             uni.setStorageSync('TableStore', Table); 
72.                             uni.setStorageSync('TableIndex', index); 
73.                         } 
74.                     }, 
75.                     success: (res) => { }, 
76.                     fail: (res) => { } 
77.                 }); 
78.             } 
79.         } 
80.         ,onLoad() 
81.         { 
82.             //获取当前最大的序号id，为空时取默认值 
83.             var index = uni.getStorageSync('TableIndex'); 
84.             if(index) 
85.             { 
86.                 this.tableIndex = index; 
87.             } 
88.              
89.             //进入时加载之前的列表数据 
90.             var storage = uni.getStorageSync("TableStore"); 
91.             for(var i = 0; i < storage.length; i++) 
92.             { 
93.                 this.Table.push(storage[i]); 
94.             } 
95.         } 
96.      
97.     } 
98. </script> 
99.  
100. <style> 
101.     .container 
102.     { 
103.         position: relative; 
104.         padding-bottom: 100rpx; 
105.     } 
106.     .remarkStyle 
107.     { 
108.         border-style: none none solid; 
109.         font-size: 12px; 
110.     } 
111.     .tdWidth //列表固定宽度 
112.     { 
113.         width: 25%; 
114.     } 
115.     .linefeed //文本换行 
116.     { 
117.         white-space: normal;  // 规定段落中的文本不进行换行 
118.         word-break: break-all;  // 允许单词中换行，在容器的最右边进行断开不会浪费控件 
119.         word-wrap: break-word;  // 防止长单词溢出，单词内部短句 
120.     } 
121. </style> 

pages.json 加上扫描页面地址：/pages/scan/scan