关于微信小程序二维码，条形码的问题

条形码，二维码是我们生活中很常见的东西，那么在本文中我就来给大家详细的总结一下，事先声明，我是用的taro框架写的微信小程序

1.只需要有条形码，二维码显示的情况，样式参考微信小程序的乘车码小程序，只需要有一个二维码显示即可！

    在taro框架中，有一个非常简单粗暴的UI组件taro-code，先用一下方法下载

yarn add taro-code
# or
npm install taro-code

    使用的时候也很简单，如下

import Taro from '@tarojs/taro'
import { Barcode, QRCode } from 'taro-code'

class Code extends Taro.Component {
  render () {
    return (
      <View>
        <Barcode text='hello' width={305} height={68} />
        <QRCode text='world' size={130} />
      </View>
    )
  }
}

text：代表要转化成条形码或者二维码的字符串

Barcode：条形码

QRcode：二维码

如此这般，便可以很快速的生成我们所需要的条形码或者二维码了

2.不使用taro框架，生成和第一种情况一样的条形码，二维码

    再给大家说一个我认为还不错的插件，wxbarcode，我们可以直接 npm   install   wxbarcode即可，首先在使用的文件中引入

const wxbarcode = require('wxbarcode')
或
import wxbarcode from 'wxbarcode'

二维码：wxbarcode.qrcode(canvasid,text , width, height)
条形码：wxbarcode.barcode(canvasid, text , width, height)
canvasid这个不用多说了吧
text：要生成条形码或者二维码的字符串
width，height：更不必多说了吧

注意：如果扫码之后，发现显示的最后一位是  _    ,解决办法是，在text后加一个空的字符串即可，也就是   ' '

<Canvas style='width:380rpx;height:380rpx;'  canvasId='' />

3.也有一种情况是我们经常遇见的，如支付宝，微信的二维码下会有一个选择付款的方式，有弹出框等等，保存图片等功能，那么此时，我们就需要在2的情况的进行一定的修改，因为canvas是原生的，所以无论如何去调整层级关系都是无法搞定的，你会发现，二维码，条形码永远在最上方，弹出的组件，根本无法遮盖，所以我们需要进行一些操作，基本的思路是，把canvas转化成图片，我们把二维码图片放在二维码放的位置

 canvasToTempImage(canvasId) {
    wx.canvasToTempFilePath({
      canvasId,
      success: function (res) {
        console.log(res.tempFilePath)
       输出的就是图片的路径
      }
    })
  }

我们可以去调用上方的方法，拿到canvas转化成image的路径，然后，我们就可以拿着此路径写在image标签内，

 <Canvas style='width:380rpx;height:380rpx;' canvasId="qrcode" />
 <Image src={this.state.url} />

这样你会发现会同时有两个二维码存在，一个是canvas，一个是image，所以我们需要让canvas消失在我们的视野中，我们就需要给canvas添加样式：

{
  position: fixed;
  top: -99999999px;
}  

如此这般，就轻松搞定了。

以上就是我们遇见的常见的二维码，条形码的情况，希望可以帮助到大家！