前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微搭低代码入门教程-低码编辑器介绍

微搭低代码入门教程-低码编辑器介绍

原创
作者头像
低代码布道师
发布2021-12-20 09:44:40
9630
发布2021-12-20 09:44:40
举报
文章被收录于专栏:微搭低代码微搭低代码

目录

01 总体介绍

02 应用介绍

03 页面介绍

04 hello,world

05 变量定义

06 数据绑定

我们在第四节的教程中介绍了平台方法的具体使用,本节我们介绍一下低码方法的调用。

作为低码平台除了拖拉拽之外,最强大的功能就是可以写代码了,可以调用平台提供的丰富的API,给我们小程序添加特色的功能。

低码编辑器现在是在导航条上打开,先点击工具菜单的图标

在这里插入图片描述
在这里插入图片描述

在弹出的界面选择低代码编辑器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

低码方法的作用域分为全局和页面,全局定义的方法,每个页面都可以使用,而页面定义的方法本页面才可以调用

我们在当前页面定义一个hello的低码方法,具体操作是在handler旁边点击+

在这里插入图片描述
在这里插入图片描述

输入方法的名称hello,点击保存按钮

在这里插入图片描述
在这里插入图片描述

保存后会生成一个代码的模板,我们方法的作用是弹出一个对话框,显示你好,世界的内容

为此我们,需要找一下官方的api看看对话框是如何创建的

官方API

在这里插入图片描述
在这里插入图片描述

复制代码进入到低码编辑器,最终的效果如下

代码语言:txt
复制
/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意:该方法仅在所属的页面有效
* 如果需要 async-await,请修改成 export default async function() {}
*/

export default function({event, data}) {
app.showModal({
    title: '提示',
    content: '你好,世界',
    success(res) {
        if (res.confirm) {
            console.log('用户单击确定');
        } else if (res.cancel) {
            console.log('用户单击取消');
        }
    }
});
}

方法定义好后,回到控制台,选中按钮组件,切换到事件页签,选中我们刚刚定义好的方法

在这里插入图片描述
在这里插入图片描述

这样就完成了低码的调用

在这里插入图片描述
在这里插入图片描述

当然了这个是基础教程,具体你的低码里要怎么处理需要根据需求而定,基本上核心的内容都是需要在低码里完成的。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档