微搭低代码中实现二维码生成

简介: 微搭低代码中实现二维码生成

我们上一篇讲解了在小程序中利用第三方库生成二维码,按道理讲我们可以使用自定义组件来构造一个二维码生成组件。但是实测,微搭中不支持canvas组件的调用,所以自定义组件这条路就行不通了。

日常在粉丝群里也会经常交流低码使用方法,有一位粉丝就利用第三方接口来生成二维码,亲测好使。我们本篇就讲解一下低码中如何自动生成二维码。

自定义连接器


要使用第三方接口,我们必须通过创建自定义连接器来实现。登录微搭的控制台,点击自定义连接器,点击新建自定义连接器

输入连接器的名称和标识

创建连接器之后,点击添加方法,添加方法的名称和标识,方法的意图选择查询单条,输入URL,选择GET,并且添加一个参数content

URL贴入如下地址

https://www.mxnzp.com/api/qrcode/create/single

接着是配置Query,按照如下表格进行配置

image.png

我们这里的content是引用的入参,需要用双大括号的语法来引用

参数定义好之后就可以点击方法测试,看一下测试结果

看到成功之后就可以点击出参映射,映射出参

当然如果希望深入了解的可以查看这个接口的文档

https://www.mxnzp.com/doc/detail?id=2


应用中使用自定义连接器


我们要使用自定义连接器需要先定义两个变量,一个用来承载二维码的文字内容,一个用来显示二维码

创建一个低码方法,用来调用连接器来获取二维码

export default async function({event, data}) {
    const result = await app.cloud.callConnector({
        name: 'scewm_rsldp71',
        methodName: 'qcode',
        params: {
            content:$page.dataset.state.content
        }, // 方法入参
    });
    $page.dataset.state.qrCodeUrl = result.data.qrCodeUrl
    console.log($page.dataset.state.qrCodeUrl)
}

组件的话我们基本上三个组件就够,分别是表单输入组件、按钮和图片。实现的思路是把表单输入的值赋值给变量,当点击按钮的时候获取图片的地址,自动渲染到图片组件里。

先给表单输入组件定义一个事件,定义onchange事件

按钮设置点击事件,调用自定义方法

给图片组件的图片地址绑定变量即可

设置好之后,在文本框里输入内容,点击按钮即可自动生成二维码,是不是很简单,练起来吧。

相关文章
|
12月前
|
人工智能 JSON 自然语言处理
基于阿里云通义千问的AI模型应用开发指南
阿里云通义千问是阿里巴巴集团推出的多模态大语言模型平台,提供了丰富的API和接口,支持多种AI应用场景,如文本生成、图像生成和对话交互等。本文将详细介绍阿里云通义千问的产品功能,并展示如何使用其API来构建一个简单的AI应用,包括程序代码和具体操作流程,以帮助开发者快速上手。
2409 3
|
小程序
微信小程序四种弹窗方式实例
微信小程序四种弹窗方式实例
1016 0
微信小程序四种弹窗方式实例
|
3月前
|
供应链 测试技术 开发者
用 Docker 轻松部署 ERPNext 15:多场景实战指南
ERPNext 15 是一款功能全面的开源企业资源规划系统,结合 Docker 容器化部署,具备高效、灵活、低成本等优势。适用于小微企业数字化起步、多分支机构协同办公、开发者测试环境搭建、短期项目管理及企业内部培训等多种场景。模块化设计支持按需扩展,满足不同规模企业需求,是实现高效企业管理的理想选择。
用 Docker 轻松部署 ERPNext 15:多场景实战指南
|
5月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
478 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
传感器 IDE 物联网
ESP8266接入阿里云物联网平台上传温湿度数据
本文章使用NodeMCU(ESP8266)开发板和SHTC3温湿度传感器接入阿里云物联网(IoT)平台,并上传读取到的温湿度数据。
22730 6
ESP8266接入阿里云物联网平台上传温湿度数据
|
6月前
|
存储 数据可视化 数据库连接
如何通过 Websoft9 应用自托管平台一键安装任意版本 Odoo?
Odoo 手动部署流程复杂,涉及环境获取、容器配置和后期维护等多个环节,对技术要求高且耗时长。Websoft9 提供一键安装方案:预置 Docker 环境免配置、集成加速镜像仓库、参数模板化配置以及便捷的生命周期管理,大幅降低部署门槛与时间成本。对比手工部署,Websoft9 在各环节显著提升效率,如 Docker 安装从 30~60 分钟降为 0 分钟,版本升级由手动迁数据变为 1 次点击完成。
|
9月前
|
机器学习/深度学习 边缘计算 运维
机器学习在网络安全中的防护:智能化的安全屏障
机器学习在网络安全中的防护:智能化的安全屏障
437 15
|
Android开发 芯片 SoC
全志H713/H618方案:调焦电机(相励磁法步进电机)的驱动原理、适配方法
本文介绍了全志H713/H618方案中调焦电机(相励磁法步进电机)的驱动原理、适配方法,并通过DTS配置和驱动实现代码,详细说明了如何控制步进电机的正反转和步数,以及如何进行测试。
592 1
全志H713/H618方案:调焦电机(相励磁法步进电机)的驱动原理、适配方法
|
弹性计算 自然语言处理 API
速成RAG+Agent框架大模型应用搭建
本文侧重于能力总结和实操搭建部分,从大模型应用的多个原子能力实现出发,到最终串联搭建一个RAG+Agent架构的大模型应用。
|
Java Spring 容器
Spring Boot 启动源码解析结合Spring Bean生命周期分析
Spring Boot 启动源码解析结合Spring Bean生命周期分析
320 11