小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序实现扫码功能

微信小程序实现扫码功能

1. 在小程序的页面中添加扫码按钮

首先,在页面的 WXML 文件中添加一个按钮,用于触发扫码功能。


扫一扫
扫描结果: {{result}}


2. 在页面的 JS 文件中实现扫码功能

接下来,在对应页面的 JS 文件中实现 scanCode 函数,调用 wx.scanCode API。

// pages/scanCode/scanCode.js
Page({
  data: {
    result: ''
  },

  // 扫码函数
  scanCode: function () {
    wx.scanCode({
      onlyFromCamera: true, // 是否只能从相机扫码,不允许从相册选择图片
      scanType: ['barCode', 'qrCode'], // 可以指定扫二维码还是条形码
      success: (res) => {
        console.log('扫描成功', res);
        this.setData({
          result: res.result // 将扫描结果显示在页面上
        });
      },
      fail: (err) => {
        console.error('扫描失败', err);
        wx.showToast({
          title: '扫描失败',
          icon: 'none'
        });
      }
    });
  }
});


3. 在小程序的配置文件中添加页面路由

确保在 app.json 文件中添加了该页面的路由配置。

{
  "pages": [
    "pages/scanCode/scanCode"
  ]
}

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了