vue扫描二维码，真机调试

最新推荐文章于 2024-07-14 10:51:28 发布

LIN_Ayu

最新推荐文章于 2024-07-14 10:51:28 发布

阅读量762

点赞数 1

分类专栏：随手文章标签： vue

本文链接：https://blog.csdn.net/LIN_Ayu/article/details/113934167

版权

本文介绍了如何在Vue项目中实现二维码扫描功能，并通过HBuilderX进行真机调试。首先，确保引入了element-ui，然后在HBuilderX中安装App开发版，新建项目并放入Vue代码。接着，打包Vue项目并将dist文件夹内容导入到App项目根目录，配置AppId，完成连接真机调试的步骤。最后，可以选择公共测试证书进行打包，注意可能需要实名认证。

摘要由CSDN通过智能技术生成

vue扫描二维码，真机调试

vue代码
使用HBuilderX
运行界面

vue代码

<el-button>标签需要引用element-ui，如果没有，可以注释，打开下面的普通<button>标签，并且调试css中footer的margin-left和left属性

<template>
    <div class="scan">
        <div id="bcid">
            <div style="height:40%"></div>
            <p class="tip">...载入中...</p>
        </div>
        <footer align="center">
            <el-button type="primary" @click="startRecognize" round>开始扫描</el-button>
            <el-button type="info" round>手动录入</el-button>
            <!--<button @click="startRecognize">1.创建控件</button>-->
            <!--<button @click="startScan">2.开始扫描</button>-->
            <!--<button @click=&#