微信小程序实现自定义扫码功能

微信小程序提供了调取相机直接扫码的功能，但是扫描界面只是一个全屏的相机，且无法添加其他功能。通过微信小程序的camera组件，即系统相机，可以帮助我们实现自定义扫码功能。（注：扫码二维码功能，需升级微信客户端至6.7.3。）

实现流程

---

• 使用camera组件，使用扫码模式，绑定扫码成功以及失败事件，官网API:https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

<camera style="width: 100%; height: 100%;" mode="scanCode" bindscancode="scancode" binderror="scanError"></camera>

mode：应用模式，只在初始化时有效，不能动态变更，可选值：normal（默认，相机模式）/ scanCode（扫码模式）；
bindscancode：在扫码识别成功时触发，仅在 mode=”scanCode” 时生效；
binderror：用户不允许使用摄像头时触发

• xwml中添加页面中要显示的模块

<!-- 导航 -->
<view class="nav" style="height: {{systemInfo.statusBarHeight + 44}}px;">
    <view class="nav-content">
        <image class="icon icon-back" src="../../images/back.svg" bindtap="goBack"></image>
        <view>扫描序列码</view>
    </view>
</view>

<!-- 上下扫描的效果 -->
<view class="scan"></view>

<!-- 输入框 -->
<view class="bottom">
    <view class="bottom-tip" hidden="{{typing}}">扫描设备序列号条形码</view>
    <view class="bottom-action" hidden="{{!typing}}">
        <text bindtap="cancel">取消</text>
        <text class="bottom-action-submit" bindtap="submit">确定</text>
    </view>
    <view class="bottom-inputBox">
        <van-field model:value="{{deviceSerialNo}}" center clearable placeholder="手动输入序列号" border="{{false}}" bind:confirm="confirm" focus="{{typing}}" bind:focus="bindfocus" bind:blur="bindblur" class="bottom-input" custom-style=" background: #F6F6F6;border-radius: 8px;" placeholder-style="color:#000;text-align: center;"></van-field>
    </view>
</view>

<!-- 扫码成功时码位置的蓝色标记 -->
<view class="position" hidden="{{!position.length}}" style="left:{{position[0] + (position[2] / 2)}}px;top:{{position[1] + (position[3] / 2)}}px;">
    <view></view>
</view>

<!-- 失败提示 -->
<view class="fail" hidden="{{!showFail}}">
    <view>
        <view class="fail-title">扫描失败</view>
        <view>{{errMsg}}</view>
    </view>
</view>

• 扫码页面的导航根据自己的需求来，该案例中导航没有使用的默认导航，需要在对应的json文件添加"navigationStyle": “custom”，添加后将不显示默认导航，可进行自定义。自定义导航的位置一般是在状态栏下方，每种型号的手机的状态栏高度等参数不同，微信小程序提供了获取系统信息的APIwx.getSystemInfo，调用成功后会返回状态栏高度等信息，以便我们进行调整。

• 上下扫描的效果，写对应的CSS样式即可

scan{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  height: 280rpx;
  background-image: radial-gradient(circle at 49% 1.8%, rgba(33,150,243,0.28) 0%, rgba(33,150,243,0.00) 102%);
}
.scan::after {
  content: '';
  width: 100%;
  border: 1rpx solid;
  border-color: rgba(33,150,243,0.28);
  position: absolute;
  animation: animate_scan 3s infinite;
}

• 扫码成功触发事件。camera组件提供了扫描成功事件bindscancode，可以拿到扫描结果、扫描位置等。注意，若相机一直对着码扫，会不停触发，我们在扫码成功后，给个标识，停止处理业务逻辑。

scancode (e) {
  console.log(e)
  // 若扫描成功，不进行后续处理
  if (this.data.hasScan) {
      return
  }
  // 播放扫描提示音
  this.playMusic()
  this.setData({
      position: e.detail.scanArea, // 扫码位置
      hasScan: true
  })
  // 拿到扫描结果
  let str = e.detail.result
  // 处理业务逻辑...
}

播放音频：

playMusic () {
  const innerAudioContext = wx.createInnerAudioContext()
  innerAudioContext.autoplay = true
  innerAudioContext.src = '/images/提示音.mp3' /**本地的需要用绝对地址 */
  innerAudioContext.play()
}

补充

---

微信小程序提供了扫码的apiwx.scanCode(Object object)可直接调用相机进行扫码以及选择图片进行扫码（图片扫码需先打开相机）。示例：

wx.scanCode({
  onlyFromCamera: false, // 是否只能从相机扫码，不允许从相册选择图片，默认是false
  success (res) {
      console.log(res)
  }
})