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

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

我们上一篇讲解了在小程序中利用第三方库生成二维码,按道理讲我们可以使用自定义组件来构造一个二维码生成组件。但是实测,微搭中不支持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事件

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

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

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

相关文章
|
3月前
|
智能设计 UED
Dooring低代码关于辅助设计的思考和实践
Dooring低代码关于辅助设计的思考和实践
26 0
|
12月前
|
设计模式 资源调度 Kubernetes
微前端应用 乾坤 开发实践
乾坤作为一款微前端应用框架,可以有效的实现前端应用程序的模块化设计,代码复用和可维护性。下面我们来通过实际开发来看看乾坤的使用方式以及实践。
|
2月前
|
小程序 前端开发
如何在企业微信中使用微搭低代码
如何在企业微信中使用微搭低代码
|
2月前
|
存储 小程序 API
微搭低代码从入门到精通03用户注册
微搭低代码从入门到精通03用户注册
|
2月前
|
移动开发 小程序 UED
微搭低代码从入门到精通01应用介绍
微搭低代码从入门到精通01应用介绍
|
3月前
|
数据采集 人工智能 前端开发
Dooring-Saas低代码技术详解(干货分享)
Dooring-Saas低代码技术详解(干货分享)
42 1
|
5月前
|
搜索推荐 数据管理 数据安全/隐私保护
代码、低代码、无代码开发触手可及的低代码平台源码
代码、低代码、无代码开发触手可及的低代码平台源码
81 0
|
11月前
|
SQL XML 开发框架
新一代低代码开发平台,只需配置完成接口开发
简介 magic-api 是一个基于Java的接口快速开发框架,编写接口将通过magic-api提供的UI界面完成,自动映射为HTTP接口,无需定义Controller、Service、Dao、Mapper、XML、VO等Java对象即可完成常见的HTTP API接口开发
300 0
|
12月前
|
缓存 小程序 安全
|
XML API 开发工具
【视频】低代码样板间快速集成教程与扩展开发|学习笔记
快速学习【视频】低代码样板间快速集成教程与扩展开发。
209 0
【视频】低代码样板间快速集成教程与扩展开发|学习笔记