微信小程序扫码功能

 三张二维码分别能扫出  res.scanType  == 1111、  2222、 3333来  做对应的判断 和条件渲染。我这里展示了图片，也可以做request操作，进行与后端交互  实现动态扫码功能

 

1、html

<view class="box">
  <view class="one">扫码功能</view>

  <view class="tow"><text>你扫到的是{{scanType}}码</text></view>
  <view class="three"><text>内容为：{{result}}</text></view>
  <view style="height: 440rpx;width: 100%;"><image style="width: 100%;height: 100%;display: block;" src='{{src}}'></image></view>
  <button type="primary" bindtap="scanCode">扫码</button>
</view>

2、css

.box{
  position: relative;
  width: 720rpx;
  height:50rpx;
  margin: 0 auto;
}
.one,.tow,.three{
  text-align: center;  
}
.one{
  color: rgb(0, 154, 214);
  border: 1rpx solid rgb(0, 154, 214);
}

3、js

Page({

  data: {
    result:"等待扫描...",
    scanType:'**',
    src:''
  },
  scanCode() {
    let myThis = this;
    wx.scanCode({
      success(res) {
        console.log(res)
        console.log(res.result);
        myThis.setData({
          result: res.result,
          scanType: res.scanType
        })
        switch (res.result) {
          case "11111":
            myThis.setData({
              src: "http://p17.qhimg.com/bdr/__/t0111205d89e6f232e2.jpg",
            })
            break;
          case "22222":
            myThis.setData({
              src: "http://b.zol-img.com.cn/desk/bizhi/start/1/1351485362326.jpg",
            })
            break;
          case "33333":
            myThis.setData({
              src: "http://i0.hdslb.com/bfs/article/b90c18f53c9331efe6ebddf77f3b2765790095a3.jpg",
            })
            break;
          default:
            myThis.setData({
              src: "http://i0.hdslb.com/bfs/article/97549c0fd58b940c1306faac923a8685551a6a2a.jpg",
            })
        }
      }
    })
  },

})

 转载如何在小程序中实现扫一扫功能 - 云+社区 - 腾讯云