微信小程序扫一扫功能

白开水z

于 2021-05-14 09:52:59 发布

阅读量869

点赞数

分类专栏：微信小程序文章标签： html5 css javascript 小程序

本文链接：https://blog.youkuaiyun.com/li222248/article/details/116780420

版权

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用官方API实现扫一扫功能，包括在.wxml文件中添加按钮触发扫描，以及在.js文件中设置扫描回调处理扫描结果。示例代码详细展示了配置过程，帮助开发者快速集成二维码和条形码扫描。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序扫一扫功能

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html

.wxml:

<!-- 扫一扫功能 -->
  <button type="primary" bindtap='getScanCode'>扫一扫</button>
  <view wx:if="{{content !=''}}">扫出来的内容:{{content}}</view>

.js:

//获取应用实例
const app = getApp()
 
Page({
  data: {
    content: ''
  },
 
  onLoad: function() {
  },
 
  getScanCode: function() {
    let that = this  //在微信 API 回调函数内 this 指向的是微信 API，所以拿不到 this.data.* / this.* 值。所以在外部提前定义接收this（注：ES6 箭头函数（ ()=>{} ）同样可以解决该问题）
    wx.scanCode({
      scanType:['barCode', 'qrCode'], //扫码类型（默认一维码，二维码）
      onlyFromCamera: false, //是否只能从相机扫码，不允许从相册选择图片(默认两者都可以)
      success: (res) => {
        var result = res.result;  //所扫码的内容
        that.setData({
          content: result,
        })
      }
    })
  }
  
})