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

Posted 低代码布道师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微搭低代码入门教程-低码编辑器介绍相关的知识,希望对你有一定的参考价值。

目录
01 总体介绍
02 应用介绍
03 页面介绍
04 hello,world
05 变量定义
06 数据绑定
我们在第四节的教程中介绍了平台方法的具体使用,本节我们介绍一下低码方法的调用。

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

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

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


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

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

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

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

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

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


/*
* 可通过 $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('用户单击取消');
        
    
);

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

这样就完成了低码的调用

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

以上是关于微搭低代码入门教程-低码编辑器介绍的主要内容,如果未能解决你的问题,请参考以下文章

微搭低代码从入门到精通07-基础布局组件

微搭低代码从入门到精通07-基础布局组件

微搭低代码入门教程04

微搭低代码入门教程-创建页面

微搭低代码入门教程02

微搭低代码入门教程02