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

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

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

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

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

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

相关文章
|
8月前
|
小程序 前端开发
如何在企业微信中使用微搭低代码
如何在企业微信中使用微搭低代码
|
3月前
|
数据可视化 安全 数据处理
探索低代码/无代码平台:开发的未来?
低代码/无代码平台正逐渐成为软件开发领域的热门话题,通过可视化界面和拖放组件,使非技术用户也能快速构建应用程序。本文介绍了低代码/无代码平台的概念、优势及挑战,并探讨了其对未来软件开发的影响。流行平台如OutSystems、Microsoft Power Apps和Bubble等提供了快速开发、降低成本和提高生产力的解决方案。尽管存在定制限制、性能问题和安全考量,但这些平台仍将是未来软件开发的重要趋势。
|
5月前
|
人工智能 安全 物联网
低代码开发10平台,总有一款适合你
本文介绍的十款低代码开发平台,如Zoho Creator、OutSystems等,各具特色,满足不同业务需求。Zoho Creator提供强大灵活的应用构建能力,支持自动化工作流及跨平台应用;OutSystems强调高效开发与企业级安全性;Mendix擅长快速构建企业级应用,特别是在物联网项目中表现突出;Appian专注业务流程管理,提升工作效率;PowerApps则深度集成微软生态系统,便于构建定制化业务应用;Quick Base适合中小企业快速开发定制应用;
115 3
|
开发框架 自然语言处理 数据可视化
低代码平台如何实现快速开发应用?
低代码平台如何实现快速开发应用?
181 0
|
8月前
|
存储 小程序 API
微搭低代码从入门到精通03用户注册
微搭低代码从入门到精通03用户注册
|
8月前
|
移动开发 小程序 UED
微搭低代码从入门到精通01应用介绍
微搭低代码从入门到精通01应用介绍
|
8月前
|
搜索推荐 数据管理 数据安全/隐私保护
代码、低代码、无代码开发触手可及的低代码平台源码
代码、低代码、无代码开发触手可及的低代码平台源码
146 0
|
开发框架 数据可视化 Cloud Native
低代码/零代码的快速开发框架
低代码/零代码的快速开发框架
1614 0
|
缓存 小程序 安全
|
移动开发 小程序 JavaScript
微搭低代码入门教程04
微搭低代码入门教程04
微搭低代码入门教程04