我们在低代码中有区域联动选择组件，可以联动的选择省市区。这个组件虽然比较方便，但是他是在特定业务场景下才使用。对于传统行业，有很多数据分类的场景，比如联动的选择类别及设备名称。

如果选择自定义组件开发，因为开发路径长，而且难度大，需要熟练掌握小程序自定义组件的语法，而且还得会npm构建发布及掌握低码cli工具的使用。对于初学者来说，这块的技术门槛过于高。那么我们就采用低码的方法来实现一下数据联动的效果。

步骤一：建立数据源

登录微搭的控制台，点击数据模型，点击新建数据模型

输入数据源名称和标识

输入数据联动相关字段

创建好数据源之后，在列表上点击更多，点击管理数据

录入一些测试数据

步骤二：创建应用

数据源建立之后，回到控制台，点击应用，点击新建自定义应用

输入应用名称

点击从空白页创建应用

往页面里添加三个表单选择组件，名称分别修改为工艺大类、设备分类、设备名称

表单选择组件可以设置选项列表，他有两种模式，一种是手动添加选项，一种是绑定变量。

既然是要做联动选择，手动添加选项肯定不行，为此我们需要使用变量绑定的模式。我们点击变量，创建三个变量分别代表着三个表单选择的选项内容。

接下来我们就需要通过自定义连接器来构造具体的选项值。

步骤三：创建自定义连接器

点击自定义连接器，点击新建自定义连接器

输入名称和标识

点击立即新建，创建方法

输入名称和标识，选择自定义代码

自定义代码里输入如下内容：

module.exports = async function (params, context) {const result = await db.collection('lcap-data-20mTmQqUm-sjldsl_aaz4sal-preview').get();let gongyi = []for(item of result.data){gongyi.push(item.gydl)}gongyi = [...new Set(gongyi)]let list = []for(item of gongyi){list.push({label:item,value:item})}return {list: list};
};

代码的逻辑是从数据库里获取所有数据去重，然后包装成需要的结构进行返回。这里的数据源需要从云开发的库里进行选择，控制台从云产品里选择云开发cloudbase

找到开通的低码环境，然后进入

点击数据库找到我们的数据源

每一个数据源分为预览和正式，我们调试的时候先用预览，正式发布后改为正式数据源

代码写好了之后我们需要点击方法测试，看是否运行成功

可以看到已经成功返回数据了，返回之后点击出参映射，一个自定义连机器就做好了。

按照同样的操作我们继续添加另外两个连接器

module.exports = async function (params, context) {const _ = context.database.commandconst db = context.databaseconst result = await db.collection('lcap-data-20mTmQqUm-sjldsl_aaz4sal-preview').where({gydl:params.gydl}).get();let shebei = []for(item of result.data){shebei.push(item.sbfl)}shebei = [...new Set(shebei)]let list = []for(item of shebei){list.push({label:item,value:item})}return {list: list};
};

但是注意的是第二个需要添加一个入参，根据工艺大类来过滤数据

第三个连接器代码如下：

module.exports = async function (params, context) {const _ = context.database.commandconst db = context.databaseconst result = await db.collection('lcap-data-20mTmQqUm-sjldsl_aaz4sal-preview').where({gydl:params.gydl,sbfl:params.sbfl}).get();let shebei = []for(item of result.data){shebei.push(item.sbmc)}shebei = [...new Set(shebei)]let list = []for(item of shebei){list.push({label:item,value:item})}return {list: list};
};

入参需要设置两个

步骤四：变量初始化及变量绑定

自定义连接器定义好之后，就需要对我们在应用中创建的变量进行初始化，我们可以在生命周期函数里进行初始化，点击低代码编辑器

在低码编辑器的生命周期方法里对变量进行初始化

/*
* 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecyle 等信息
* 可通过 app 获取或修改全局应用的 变量 状态 等信息
* 具体可以 console.info 在编辑器Console面板查看更多信息
* 如果需要 async-await，请在方法前 async
*/export default {async onPageLoad(query) {//console.log('---------> LifeCycle onPageLoad', query)const result = await app.cloud.callConnector({name: 'sjld_t317q8r',methodName: 'getgognyidalei',params: {}, // 方法入参});$page.dataset.state.gongyidalei = result.listconst result1 = await app.cloud.callConnector({name: 'sjld_t317q8r',methodName: 'getshebeifenlei',params: {gydl:'机加工'}, // 方法入参});$page.dataset.state.shebeifenlei = result1.list$page.dataset.state.gongyidalei = result.listconst result2= await app.cloud.callConnector({name: 'sjld_t317q8r',methodName: 'getshebei',params: {gydl:'机加工',sbfl:'普通车床'}, // 方法入参});$page.dataset.state.shebeimingcheng = result2.list},onPageShow() {//console.log('---------> LifeCycle onPageShow')},onPageReady() {//console.log('---------> LifeCycle onPageReady')},onPageHide() {//console.log('---------> LifeCycle onPageHide')},onPageUnload() {//console.log('---------> LifeCycle onPageUnload')},
}

然后依次给组件绑定变量

其实初始化的时候传参就实现了一个默认联动，要想实现选中联动，就需要给组件增加自定义方法，获取当前的选中值然后再调用自定义连接器就可以。这块的方法可以自行开发一下。

总结

本节我们介绍了一下微搭中如何开发联动效果，介绍了自定义连机器的创建、自定义代码的编制和低码中如何调用自定义连接器。上述这些方法是低码的高阶使用，需要有一定的编程基础。不过既然你愿意使用低码工具，编程知识还是要补齐的，因为早晚也绕不过去。

微搭低代码中实现数据的联动选择相关推荐

微搭低代码学习之数据收集
低代码和开发之间的关系低代码平台是一种快速构建应用程序的工具,旨在提高开发效率.它们提供了一种基于图形用户界面的方式来创建应用程序,而无需编写大量的代码.使用低代码平台,开发人员可以更快速地构建和交 ...
微搭低代码中的用户登录及注册
传统开发用户登录注册,一般是需要考虑建立用户表,用户注册的话可以由管理员主动添加,将分配好的账号和密码告知用户.如果是互联网应用允许用户自主注册. 低代码中因为没有外部用户管理这个模块,所以登录注册需 ...
实战 | 如何使用微搭低代码实现按条件过滤数据
在开发应用过程中难免会用到条件查询这个功能,本篇就来详细介绍下如何使用微搭低代码实现按条件过滤数据. 业务逻辑我们在应用的会员列表中设置查询条件,根据输入的条件过滤数据,具体的效果如下图我们在手机 ...
使用微搭低代码制作每日菜单小程序
随着网络和科技的发展,利用小程序来服务内部职工的机构也越来越多.本文就使用微搭低代码来快速制作一款每日菜谱小程序,机构内部的负责人可以维护每周的菜谱,职工通过关注小程序来查看每周的菜谱信息. 一 .定 ...
微搭使用笔记(二)微搭低代码平台介绍及基础使用
概述官网地址: 官网官方文档: 官方文档 FAQ: FAQ 腾讯云微搭低代码是一个高性能的低代码开发平台,用户可通过拖拽式开发,可视化配置构建 PC Web.H5 和小程序应用.支持打通企业内部数 ...
深入解读腾讯云微搭低代码的技术架构
腾讯云微搭低代码是高效.高性能的企业级低代码平台.帮助开发者快速搭建支持多种业务场景的小程序.H5.PC WEB应用,通过简单的拖拉拽操作,而不用编写复杂的代码,实现少写代码或者不写代码,就能快速高效 ...
最佳实战 | 如何使用微搭低代码基于模板开发小程序
本文将帮助您借助腾讯云微搭低代码平台,基于已有的模板快速打造出如下图所示的问卷调查小程序. 概述从0到1开发一款问卷小程序需要经过几个步骤,从模板中心复制应用到自己的应用管理,然后根据需求定义数据源 ...
微搭低代码h5页面ios系统上拉下拉出现空白问题
环境:腾讯微搭低代码编辑器解决办法:在全局lifecycle中写如下代码 document.body.addEventListener('touchmove', (e) => { ...
微搭低代码入门教程03
作者介绍: 腾讯云微搭低代码高级布道师,专注于低码的技术布道工作.目前在博客已经完成300篇低码文章创作欢迎大家订阅专栏:微搭低代码目录控制台介绍应用介绍数据源介绍工作流组件库模板其 ...
微搭低代码实现aad的sso
微搭低代码平台是一种可帮助您快速构建和部署应用程序的工具,而无需手动编写大量代码.要在微搭低代码平台上实现Azure Active Directory(AAD)的单点登录(SSO),您需要遵循以下步骤 ...

微搭低代码中实现数据的联动选择

步骤一：建立数据源

步骤二：创建应用

步骤三：创建自定义连接器

步骤四：变量初始化及变量绑定

总结

微搭低代码中实现数据的联动选择相关推荐

最新文章

热门文章