短信预约-IT技能 免费直播动态提醒

2024-12-03 14:44

关注

 
  size={codeSize} bgColor={bgColor} fgColor={fgColor} imageSettings={{src: imgUrl[0].url, x: null, y: null, excavate: true, height: imgH, width: imgW}} /> 

 其实就需要用到我们强大的表单渲染器了, 我们需要给qrcode组件对接一个表单编辑器, 也就是下图所示的FormEditor:

为了简单起见笔者直接用H5-Dooring提供的FormEditor, 我们只需要写如下json结构就可以自动生成一个Form编辑器, 如下:

const Qrcode: IQrcodeSchema = { 
  editData: [ 
    { 
      key: 'url', 
      name: 'url地址', 
      type: 'Text', 
    }, 
    { 
      key: 'codeSize', 
      name: '二维码尺寸', 
      type: 'Number', 
    }, 
    { 
      key: 'bgColor', 
      name: '背景色', 
      type: 'Color', 
    }, 
    { 
      key: 'fgColor', 
      name: '前景色', 
      type: 'Color', 
    }, 
    { 
      key: 'level', 
      name: '等级', 
      type: 'Select', 
      range: [ 
        { 
          key: 'L', 
          text: '低', 
        }, 
        { 
          key: 'M', 
          text: '中', 
        }, 
        { 
          key: 'Q', 
          text: '良', 
        }, 
        { 
          key: 'H', 
          text: '高', 
        }, 
      ], 
    }, 
    { 
      key: 'imgUrl', 
      name: '二维码图标', 
      type: 'Upload', 
      isCrop: true, 
      cropRate: 1, 
    }, 
    { 
      key: 'imgW', 
      name: '图标宽度', 
      type: 'Number', 
    }, 
    { 
      key: 'imgH', 
      name: '图标高度', 
      type: 'Number', 
    }, 
  ], 
  config: { 
    url: 'https://github.com/MrXujiang/h5-Dooring', 
    codeSize: 180, 
    bgColor: 'rgba(255,255,255,1)', 
    fgColor: 'rgba(0,0,0,1)', 
    level: 'L', 
    imgUrl: [ 
      { 
        uid: '001', 
        name: 'image.png', 
        status: 'done', 
        url: `https://www.528045.com/file/upload/202412/02/g0mw0pwzbvy.jpg`, 
      }, 
    ], 
    imgW: 48, 
    imgH: 12 
  }, 
}; 
 
export default Qrcode; 

此时我们就能渲染出文章开头的二维码生成器了, 我们可以定制自己喜欢的二维码风格和icon. 编辑器中的等级选项也就是笔者在开头介绍的QR Code的纠错能力, 我们可以自定义选择我们需要的等级.

目前笔者已经把二维码生成器集成到开源项目H5-Dooring中了,在线把玩地址(电脑端体验更佳): H5编辑器 | 更新二维码生成器组件