uni-app 小程序和app通用的扫码组件

在 uni-app 中实现一个适用于小程序和 App 的通用扫码组件，可以借助 uni.scanCode API。下面是一个简单的扫码组件示例，包含组件的定义、样式以及使用方法。

扫码组件代码（ScanCode.vue）

<template>
  <view class="scan-code-container">
    <button type="primary" @click="startScan">扫码</button>
    <view v-if="result">扫描结果: {{ result }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: null, // 存储扫码结果
    };
  },
  methods: {
    startScan() {
      uni.scanCode({
        success: (res) => {
          this.result = res.result;
          // 可以在这里处理扫码结果，比如跳转到某个页面或执行其他逻辑
          console.log('扫码结果:', res.result);
        },
        fail: (err) => {
          console.error('扫码失败:', err);
        },
      });
    },
  },
};
</script>

<style scoped>
.scan-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

使用组件

在你的页面中使用这个扫码组件，比如在 pages/index/index.vue 中：

<template>
  <view>
    <ScanCode />
  </view>
</template>

<script>
import ScanCode from '@/components/ScanCode.vue'; // 根据实际路径调整

export default {
  components: {
    ScanCode,
  },
};
</script>

<style scoped>
/* 页面样式 */
</style>

注意事项

1. 权限处理：在 App 端，需要在 manifest.json 中配置相机权限。
2. 平台差异：虽然 uni.scanCode 在小程序和 App 端都能使用，但不同平台的表现可能略有不同，需要根据具体平台进行适配。
3. UI 定制：上述示例使用了简单的按钮触发扫码，你可以根据需求自定义扫码按钮的样式，或者将扫码界面做得更复杂，比如使用相机预览组件。

这个组件示例提供了一个基础的扫码功能，适用于大多数简单的扫码需求。如果需要更复杂的功能，比如连续扫码、扫码界面的自定义等，可以在此基础上进行扩展。