想用uni-app的camera组件写一个扫描二维码的页面

Question

麻烦大家会的，可以发一下代码。
我要实现的功能是，camera组件扫描二维码图片成功之后跳转到我项目的另一个页面，并且将二维码内的一些参数发送到另一个页面。
谢谢

Answer 1

建议还是使用uni.scanCode，camera识别二维码支持的平台并不多。
相机页面

<template>
  <view class="content">
    <camera
      mode="scanCode"
      device-position="back"
      flash="off"
      @error="error"
      style="width: 100%; height: 300px"
      @scancode="scancodeCallBack"
    ></camera>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {
    scancodeCallBack(e) {
      wx.showToast({ title: "识别成功!" });
      setTimeout(() => {
        wx.redirectTo({
          url: `/pages/result/index?title=${e.detail.result}`,
        });
      }, 1000);
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>

跳转页面

<template>
  <view class="content">{{ title }}</view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad(options) {
    console.log(options);
    this.title = options.title;
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>