weixin_48039905 2022-05-09 12:46 采纳率: 100%
浏览 213
已结题

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

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

  • 写回答

3条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-05-09 14:05
    关注

    建议还是使用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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • CSDN专家-showbo 2022-05-09 13:45
    关注

    小程序的话用uni.scanCode(OBJECT)扫码就行了,camera只是调起摄像头,没有识别二维码功能吧
    API:

    评论 编辑记录
  • 有问必答小助手 2022-05-09 20:25
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月17日
  • 已采纳回答 5月9日
  • 创建了问题 5月9日

悬赏问题

  • ¥15 Unity导出2D项目运行时图片变成马赛克
  • ¥15 关于communitytoolkit.mvvm的生成器得到的代码看起来没有被使用的问题
  • ¥15 matlab中此类型的变量不支持使用点进行索引
  • ¥15 咨询第六届工业互联网数据创新大赛原始数据
  • ¥15 Pycharm无法自动补全,识别第三方库函数接收的参数!
  • ¥15 STM32U575 pwm和DMA输出的波形少一段
  • ¥30 android百度地图SDK海量点显示标题
  • ¥15 windows导入environment.yml运行conda env create -f environment_win.yml命令报错
  • ¥15 这段代码可以正常运行,打包后无法执行,在执行for内容之前一直不断弹窗,请修改调整
  • ¥15 C语言判断有向图是否存在环路