Qrcode 二维码

用于展现二维码。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Qrcode",
  3. "usingComponents": {
  4. "wux-qrcode": "../../dist/qrcode/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Qrcode</view>
  4. <view class="page__desc">二维码</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="weui-cells__title">请输入文字,即时输入即时生成</view>
  8. <view class="weui-cells weui-cells_after-title">
  9. <view class="weui-cell">
  10. <view class="weui-cell__bd">
  11. <textarea value="{{ value }}" bindinput="bindinput" class="weui-textarea" placeholder="支持文本、网址和电子邮箱" style="height: 4.2em" maxlength="300" />
  12. <view class="weui-textarea-counter">{{ value.length }}/300</view>
  13. </view>
  14. </view>
  15. </view>
  16. <view class="weui-cells__tips">提示:Canvas 在微信中无法长按识别, 点击图片进入保存页面长按图片可以保存</view>
  17. <wux-qrcode id="qrcode" wux-class="qrcode" data="{{ value }}" fg-color="{{ fgColor }}" width="200" height="200" bind:click="previewImage" />
  18. </view>
  19. </view>
  1. Page({
  2. data: {
  3. value: 'https://github.com/skyvow/wux',
  4. fgColor: 'black',
  5. },
  6. onLoad() {},
  7. bindinput(e) {
  8. const value = e.detail.value
  9. const fgColor = this.randomColor()
  10. this.setData({
  11. value,
  12. fgColor,
  13. })
  14. },
  15. previewImage() {
  16. // 在自定义组件下,当前组件实例的 this,以操作组件内 <canvas> 组件
  17. const that = this.selectComponent('#qrcode')
  18. wx.canvasToTempFilePath({
  19. canvasId: 'wux-qrcode',
  20. success: (res) => {
  21. wx.previewImage({
  22. urls: [res.tempFilePath]
  23. })
  24. }
  25. }, that)
  26. },
  27. randomColor() {
  28. const colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase()
  29. const length = colorStr.length
  30. const prefixStr = `000000`.substring(0, 6 - colorStr.length)
  31. return `#${prefixStr}${colorStr}`
  32. },
  33. })

视频演示

Qrcode

API

Qrcode props

参数 类型 描述 默认值
data string 文本内容 -
typeNumber number 类型 -1
errorCorrectLevel number 误差校正等级 2
width number canvas 组件的宽度 200
height number canvas 组件的高度 200
fgColor string 前景色 black
bgColor string 背景色 white
bind:click function 点击事件 -