首页 › uni-app论坛 › Uni-app: 扫码（以微信小程序为例）

孙文政 發表於 2021-4-27 10:31:00

Uni-app: 扫码（以微信小程序为例）

<h1>说明</h1>
<h2>个人使用环境说明</h2>
<ul>
<li>设备环境：win10 64bit</li>
<li>编译环境：HBuilder X</li>
<li>运行环境 ：微信开发者工具</li>
</ul>
<h2>其他说明</h2>
<ul>
<li>在微信开发者工具中，无法扫码。需要真机验证。</li>
</ul>
<h1>调用</h1>
<h2>调用方法</h2>
<p>　　uni.scanCode(Object)</p>
<h2>功能</h2>
<p>　　调起客户端扫码界面，扫码成功后返回对应的结果。</p>
<h2>平台差异说明</h2>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="82">
<p align="center"><strong>App</strong></p>
</td>
<td valign="top" width="80">
<p align="center"><strong>H5</strong></p>
</td>
<td valign="top" width="79">
<p align="center"><strong>微信小程序</strong></p>
</td>
<td valign="top" width="79">
<p align="center"><strong>支付宝小程序</strong></p>
</td>
<td valign="top" width="79">
<p align="center"><strong>百度小程序</strong></p>
</td>
<td style="width: 100px" valign="top">
<p><strong>字节跳动小程序</strong></p>
</td>
<td valign="top" width="77">
<p align="center"><strong>QQ小程序</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="82">
<p align="center"><strong>√</strong></p>
</td>
<td valign="top" width="80">
<p align="center">×</p>
</td>
<td valign="top" width="79">
<p align="center">√</p>
</td>
<td valign="top" width="79">
<p align="center">√</p>
</td>
<td valign="top" width="79">
<p align="center">√</p>
</td>
<td valign="top" width="77">
<p style="text-align: center" align="right">√</p>
</td>
<td valign="top" width="77">
<p align="center">√</p>
</td>
</tr>
</tbody>
</table>
<h2>OBJECT参数说明</h2>
<div align="center">
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="111">
<p align="center">参数名</p>
</td>
<td valign="top" width="111">
<p align="center">类型</p>
</td>
<td valign="top" width="111">
<p align="center">必填</p>
</td>
<td style="width: 250px" valign="top">
<p align="center">说明</p>
</td>
<td valign="top" width="111">
<p align="center">平台差异说明</p>
</td>
</tr>
<tr>
<td valign="top" width="111">
<p align="center">onlyFromCamera</p>
</td>
<td valign="top" width="111">
<p align="center">Boolean</p>
</td>
<td valign="top" width="111">
<p align="center">否</p>
</td>
<td valign="top" width="111">
<p align="center">是否只能从相机扫码，不允许从相册选择图片</p>
</td>
<td valign="top" width="111">
<p align="center">字节跳动小程序不支持此参数</p>
</td>
</tr>
<tr>
<td valign="top" width="111">
<p align="center">scanType</p>
</td>
<td valign="top" width="111">
<p align="center">Array</p>
</td>
<td valign="top" width="111">
<p align="center">否</p>
</td>
<td valign="top" width="111">
<p align="center">扫码类型，参数类型是数组，二维码是'qrCode'，一维码是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。</p>
</td>
<td valign="top" width="111">
<p align="center">字节跳动小程序不支持此参数</p>
</td>
</tr>
<tr>
<td valign="top" width="111">
<p align="center">success</p>
</td>
<td valign="top" width="111">
<p align="center">Function</p>
</td>
<td valign="top" width="111">
<p align="center">否</p>
</td>
<td valign="top" width="111">
<p align="center">接口调用成功的回调，返回内容详见返回参数说明。</p>
</td>
<td valign="top" width="111">
<p align="center">&nbsp;</p>
</td>
</tr>
<tr>
<td valign="top" width="111">
<p align="center">fail</p>
</td>
<td valign="top" width="111">
<p align="center">Function</p>
</td>
<td valign="top" width="111">
<p align="center">否</p>
</td>
<td valign="top" width="111">
<p align="center">接口调用失败的回调函数（识别失败、用户取消等情况下触发）</p>
</td>
<td valign="top" width="111">
<p align="center">&nbsp;</p>
</td>
</tr>
<tr>
<td valign="top" width="111">
<p align="center">complete</p>
</td>
<td valign="top" width="111">
<p align="center">Function</p>
</td>
<td valign="top" width="111">
<p align="center">否</p>
</td>
<td valign="top" width="111">
<p align="center">接口调用结束的回调函数（调用成功、失败都会执行）</p>
</td>
<td valign="top" width="111">
<p align="center">&nbsp;</p>
</td>
</tr>
</tbody>
</table>
</div>
<h3>success 返回参数说明</h3>
<div align="center">
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="184">
<p align="center"><strong>参数</strong></p>
</td>
<td valign="top" width="184">
<p align="center"><strong>说明</strong></p>
</td>
<td valign="top" width="184">
<p align="center"><strong>平台差异说明</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="184">
<p align="center"><strong>result</strong></p>
</td>
<td valign="top" width="184">
<p align="center">所扫码的内容</p>
</td>
<td valign="top" width="184">
<p align="center">&nbsp;</p>
</td>
</tr>
<tr>
<td valign="top" width="184">
<p align="center"><strong>scanType</strong></p>
</td>
<td valign="top" width="184">
<p align="center">所扫码的类型</p>
</td>
<td valign="top" width="184">
<p align="center">App、微信小程序、百度小程序、QQ小程序</p>
</td>
</tr>
<tr>
<td valign="top" width="184">
<p align="center"><strong>charset</strong></p>
</td>
<td valign="top" width="184">
<p align="center">所扫码的字符集</p>
</td>
<td valign="top" width="184">
<p align="center">App、微信小程序、百度小程序、QQ小程序</p>
</td>
</tr>
<tr>
<td valign="top" width="184">
<p align="center"><strong>path</strong></p>
</td>
<td valign="top" width="184">
<p align="center">当所扫的码为当前应用的合法二维码时，会返回此字段，内容为二维码携带的 path。</p>
</td>
<td valign="top" width="184">
<p align="center">App、微信小程序、百度小程序、QQ小程序</p>
</td>
</tr>
</tbody>
</table>
</div>
<h2>示例</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 允许从相机和相册扫码</span>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 0, 1)">uni.scanCode({
</span><span style="color: rgba(0, 128, 128, 1)"> 3</span>   success: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
</span><span style="color: rgba(0, 128, 128, 1)"> 4</span>         console.log('条码类型：' +<span style="color: rgba(0, 0, 0, 1)"> res.scanType);
</span><span style="color: rgba(0, 128, 128, 1)"> 5</span>         console.log('条码内容：' +<span style="color: rgba(0, 0, 0, 1)"> res.result);
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 0, 1)">    }
</span><span style="color: rgba(0, 128, 128, 1)"> 7</span> <span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 128, 1)"> 8</span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只允许通过相机扫码</span>
<span style="color: rgba(0, 128, 128, 1)">10</span> <span style="color: rgba(0, 0, 0, 1)">uni.scanCode({
</span><span style="color: rgba(0, 128, 128, 1)">11</span>   onlyFromCamera: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">12</span>   success: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
</span><span style="color: rgba(0, 128, 128, 1)">13</span>         console.log('条码类型：' +<span style="color: rgba(0, 0, 0, 1)"> res.scanType);
</span><span style="color: rgba(0, 128, 128, 1)">14</span>         console.log('条码内容：' +<span style="color: rgba(0, 0, 0, 1)"> res.result);
</span><span style="color: rgba(0, 128, 128, 1)">15</span> <span style="color: rgba(0, 0, 0, 1)">    }
</span><span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 128, 1)">17</span>
<span style="color: rgba(0, 128, 128, 1)">18</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 调起条码扫描</span>
<span style="color: rgba(0, 128, 128, 1)">19</span> <span style="color: rgba(0, 0, 0, 1)">uni.scanCode({
</span><span style="color: rgba(0, 128, 128, 1)">20</span>   scanType: ['barCode'<span style="color: rgba(0, 0, 0, 1)">],
</span><span style="color: rgba(0, 128, 128, 1)">21</span>   success: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (res) {
</span><span style="color: rgba(0, 128, 128, 1)">22</span>         console.log('条码类型：' +<span style="color: rgba(0, 0, 0, 1)"> res.scanType);
</span><span style="color: rgba(0, 128, 128, 1)">23</span>         console.log('条码内容：' +<span style="color: rgba(0, 0, 0, 1)"> res.result);
</span><span style="color: rgba(0, 128, 128, 1)">24</span> <span style="color: rgba(0, 0, 0, 1)">    }
</span><span style="color: rgba(0, 128, 128, 1)">25</span> });</pre>
</div>
<h1>&nbsp;参考网址</h1>
<p>uni-app官方文档：https://uniapp.dcloud.io/api/system/barcode</p>

</div>
<div id="MySignature" role="contentinfo">
    有志者，事竟成，破釜沉舟，百二秦关终属楚； 苦心人，天不负，卧薪尝胆，三千越甲可吞吴。<br><br>
来源：https://www.cnblogs.com/luyj00436/p/14707832.html

查看完整版本: Uni-app: 扫码（以微信小程序为例）