二维码生成

不建议使用纯中文生成二维码，当无法生成二维码时，请检查二维码内容是否超过长度限制。

使用场景​本例介绍如何在宜搭中生成二维码。

实现功能​创建自定义页面​

生成二维码​引入 qrcode.js​

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。export function didMount() { this.utils.loadScript('https://g.alicdn.com/code/lib/qrcodejs/1.0.0/qrcode.min.js');}将二维码生成函数拷贝至页面 JS 中​该函数接受二维码内容（text：String），返回生成的二维码链接（base64 格式）。

// 生成二维码export function createQrcode(text = '') { try { if (!text) { this.utils.toast({ title: '二维码无内容', type: 'error', }); return ''; }; if (!document.getElementById('qrcodeRootDom')) { // 若没有 qrcodeRootDom 则创建一个 const qrcodeRoot = document.createElement('div'); qrcodeRoot.setAttribute('id', 'qrcodeRootDom'); qrcodeRoot.style.display = 'none'; window.document.body.appendChild(qrcodeRoot); }; document.getElementById('qrcodeRootDom').innerHTML = ''; // 清空内容 const qrcode = new QRCode(document.getElementById('qrcodeRootDom'), { text: encodeURI(text),// 二维码内容 width: 220, // 二维码宽度 height: 220, // 二维码高度 colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H, }); const canvas = qrcode._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64 const qrcodeUrl = canvas.toDataURL('image/png'); // 获取到生成的二维码的图片链接 return qrcodeUrl; } catch (error) { console.error(error); this.utils.toast({ title: '二维码生成失败', type: 'error', }); }}按钮绑定事件​

绑定下述函数：

// 生成二维码export function onCreateQrcode() { this.$('image_lhpz5s8n').set('src', this.createQrcode(this.$('textareaField_lhpz5s8j').getValue()));}复制二维码​将 base64ToBlob 函数拷贝至页面 JS 中​

// base64ToBlobexport function base64ToBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime });}按钮绑定事件​

绑定下述函数：

// 复制二维码export function onCopyQrcode() { try { const base64ImgUrl = this.$('image_lhpz5s8n').get('src'); if (!base64ImgUrl) { this.utils.toast({ title: '请先生成二维码', type: 'error', }); return; }; const blob = this.base64ToBlob(base64ImgUrl); navigator.clipboard.write([new window.ClipboardItem({ [blob.type]: blob })]); this.utils.toast({ title: '二维码复制成功', type: 'success', }); } catch (error) { console.error(error); this.utils.toast({ title: '二维码复制失败', type: 'error', }); }}图片上传组件添加粘贴上传功能​详情参考：

表单中图片粘贴上传 | 钉钉宜搭·帮助中心

实现效果​生成二维码​

复制二维码​

在线试玩​