二维码扫码

src/pages.json

@@ -31,6 +31,12 @@
 			"style": {
 				"navigationBarTitleText": "测试页面"
 			}
+		},
+		{
+			"path": "pages/test-page/test-camera",
+			"style": {
+				"navigationBarTitleText": "摄像头测试"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/my-info/my-info.vue

@@ -5,6 +5,10 @@
   <view class="warp">
     <button type="warn" @click="toTestPage">进入测试页面</button>
     <button class="button" type="primary" @click="getLocation">获取位置</button>
+
+    <navigator url="/pages/test-page/test-camera">
+      <button>打开相机测试页面</button>
+    </navigator>
   </view>
 </template>
 

src/pages/test-page/test-camera.vue

@@ -0,0 +1,29 @@
+<template>
+  <view style="background-color: #000;">
+    <camera mode="scanCode" device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;" @scancode="handleScanCode"></camera>
+  </view>
+
+  <view>
+    {{ctx.detail}}
+  </view>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+const ctx = reactive({
+  detail: ""
+})
+function error(e) {
+  console.log('Camera error:', e)
+}
+
+function handleScanCode(event) {
+  console.log('Scan code:', event.detail)
+  ctx.detail = JSON.stringify(event.detail)
+}
+</script>
+
+
+<style scoped lang="scss">
+
+</style>