微信小程序自定义扫码

在开发过程中，经常会遇到像下面这种的需求，这种时候如果使用微信自带的扫码功能的话，他们的页面我们是没有办法去编辑的，这种时候我们就需要用到自定义一个扫码界面，用到的是微信小程序的camera组件

在小程序的开发文档中我们可以找到这个组件以及对应的属性

可以看到，当这个mode为normal的时候，就是一个正常的相机，当mode为scancode的时候，就开启了扫码模式，

在这个项目里面，有几点特别需要注意的，有的人看到了，摄像头所呈现出来的画面是全屏展示的，然后就会将camera组件防至最外层，然后其他的所有组件防至里层，然而有一个需要主要的事情是，camera组件的层级是很高的，内部的view就不行了，需要用到cover-view和cover-image，当然这样下去出现的问题会很多，我一般是想camera和其他的元素同级并列放置，然后通过绝对定位来将背景和内容做一个调整。

第二点需要注意的是，在这个项目中，点击扫码按钮之后才开始扫码，有很多人都会第一反应是，通过点击按钮来切换camera的mode，很遗憾，mode的模式是不能被动态进行切换的，但是如果不做任何处理的话，只要扫到码就会触发事件，如果对着二维码不懂的话，会一直触发扫码的事件，但是这个是没有办法避免的，我们没有相对应的方法去通过按钮开关相机的状态，那我们就只能定义一个状态，然后当扫码成功的事件触发之后判断这个状态是否开启，如果开启就执行你自己写的事件。

自定义的扫码完成之后很多人会发现一个问题，就是有很多的码我们用自定义扫码的时候总是扫码失败，但是用微信扫码就没有问题。其实这个原因也很简单，因为微信扫码里面是对图像做了处理的，有响应的一些算法，对于坏码，脏码，以及有时候的弯曲的码一样扫的出结果。