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

想用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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥90 请问,这个视频播放软件的名称,用过的朋友请给答案
  • ¥15 运筹优化,gurobi,python
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格
  • ¥15 大家帮我看看为什么错了