微信小程序提供了调取相机直接扫码的功能，但是扫描界面只是一个全屏的相机，且无法添加其他功能。通过微信小程序的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
// 处理业务逻辑...
}
播放音频：文章来源：https://www.toymoban.com/news/detail-464027.html
playMusic () {
const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = '/images/提示音.mp3' /**本地的需要用绝对地址 */
innerAudioContext.play()
}
补充
微信小程序提供了扫码的apiwx.scanCode(Object object)可直接调用相机进行扫码以及选择图片进行扫码（图片扫码需先打开相机）。示例：文章来源地址https://www.toymoban.com/news/detail-464027.html
wx.scanCode({
onlyFromCamera: false, // 是否只能从相机扫码，不允许从相册选择图片，默认是false
success (res) {
console.log(res)
}
})
到了这里，关于微信小程序实现自定义扫码功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
