uni-app 插件需求 打包成APP扫码功能 扫码框为长方形或可自定义样式 非全屏 主要用于扫二维码

针对您的uni-app插件需求，以下是一个简单的实现扫码功能，并且支持自定义扫码框样式为非全屏的示例代码。我们将使用uni-app内置的扫码API，并通过CSS自定义扫码框的样式。

首先，确保您已经在manifest.json中配置了相关权限，例如相机权限。

1. 修改pages.json

在pages.json中，添加一个页面用于扫码功能，假设页面路径为pages/scan/scan。

{
  "pages": [
    {
      "path": "pages/scan/scan",
      "style": {
        "navigationBarTitleText": "扫码"
      }
    }
    // 其他页面配置...
  ]
}

2. 创建扫码页面 scan.vue

在pages/scan/scan.vue中，编写以下代码：

<template>
  <view class="container">
    <view class="scan-box" @click="startScan">
      <canvas canvas-id="scanCanvas" class="scan-canvas"></canvas>
      <view class="scan-line" :style="{animationDuration: lineAnimationDuration + 's'}"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lineAnimationDuration: 2, // 动画时长，可根据需要调整
    };
  },
  methods: {
    startScan() {
      uni.scanCode({
        onlyFromCamera: true,
        scanArea: [{ x: 0, y: 0, width: 300, height: 400 }], // 设置扫码区域，根据canvas大小调整
        success: (res) => {
          console.log('扫码结果:', res.result);
          // 处理扫码结果
        },
        fail: (err) => {
          console.error('扫码失败:', err);
        }
      });
    }
  },
  mounted() {
    this.startScan(); // 页面加载时自动开始扫码
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;
}
.scan-box {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid #000;
}
.scan-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.scan-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
  animation: scanLine 2s linear infinite;
}
@keyframes scanLine {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(100%);
  }
}
</style>

说明

1. 扫码框样式：通过CSS设置.scan-box的宽高和边框，自定义扫码框样式。
2. 扫码区域：在uni.scanCode的scanArea参数中设置扫码区域，根据.scan-box的大小调整。
3. 扫码动画：通过CSS动画实现扫码线的移动效果。

此代码实现了基本的扫码功能，并且扫码框为非全屏且可自定义样式。您可以根据实际需求进一步调整样式和功能。