低代码开发之腾讯云微搭工具

2024-04-25 15:12

本文主要是介绍低代码开发之腾讯云微搭工具,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

低代码开发之腾讯云微搭工具

  • 微搭简介
  • 诞生缘由
  • 开发模式
  • 如何创建
  • 组件模块介绍
  • 实例讲解
    • url传参
    • 级联联动
    • 使用事件
    • 其他方法
      • 调用数据源方法 callDataSource
      • 触发流程 callProcess
  • 引入外部css/js
  • 代码编辑器的使用
    • Handler 方法使用介绍
    • Style 用法示例
    • LifeCycle 生命周期介绍
  • 数据模型方法V2

微搭简介

  • 微搭(WeDa),全称是腾讯云微搭低代码开发平台。

  • 微搭将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5应用、PC Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。

  • 微搭以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航。

  • 可以实现简易项目全程不写代码,拖拽完成。

  • 微搭里比较重要的一个概念就是应用,一个应用就是我们的一个程序,它可以是一个小程序,一个管理后台,一个H5的站点

  • 微搭地址 https://weda.cloud.tencent.com/index

  • 官方文档教程https://cloud.tencent.com/document/product/1301/68445

诞生缘由

在这里插入图片描述

开发模式

在这里插入图片描述

如何创建

分三种方法

  • 从场景应用创建
  • 空白应用创建
  • 从模板新建

在这里插入图片描述

组件模块介绍

在这里插入图片描述

在这里插入图片描述

实例讲解

url传参

  • 子父页面跳父页面,父页面接受到传参
    在这里插入图片描述
  • 父页面设置url参数
    在这里插入图片描述

在这里插入图片描述

  • 页面接收参数
    在这里插入图片描述
  • 子页面设置点击事件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

级联联动

效果展示

  • 创建三个数据模型
  • 主表 选课表

在这里插入图片描述

  • 选择关联模型
    在这里插入图片描述
  • 关联表 老师表和课程表

在这里插入图片描述- 课程根据老师进行过滤,所以这里老师也是关联关系
在这里插入图片描述
在这里插入图片描述

  • 开始创建
    在这里插入图片描述
    在这里插入图片描述
  • 选择主表
    在这里插入图片描述
  • 创建一个变量,用来保存用户选择的老师信息。后续再依据老师过滤课程的时候也需要这个变量
    在这里插入图片描述
    在这里插入图片描述
  • 选中所属老师组件,给该组件添加一个行为,选择其他事件,当值改变时候我们就将用户选中的值赋值给刚刚定义的变量
    在这里插入图片描述
    在这里插入图片描述
  • 系统默认的选择输入值,点击就好
    在这里插入图片描述
    在这里插入图片描述
  • 选中所属课程组件,设置选项筛选
    在这里插入图片描述
    在这里插入图片描述
  • 完成
  • 小问题 : 由于第一次选中后,第二次再次选择,课程没有对应id的数据,显示了id数据,我们做个优化,老师重新选择时,课程置空
    在这里插入图片描述

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

使用事件

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

在这里插入图片描述

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

其他方法

调用数据源方法 callDataSource

低码中的callDataSource是可以直接访问后端的服务的,比如后端的增删改查方法。这样就一行代码也不写就把前后端连接起来了

参数名称参数说明
数据源名称从当前环境中所有已创建的数据源进行选择
方法名对数据源方法进行选择
传入参数若数据源方法需要入参,则在此处可以传入对应参数(非必填)
显示加载在数据源请求过程中显示加载提示
显示提示数据源请求完成后显示成功或失败的消息提示

触发流程 callProcess

触发当前环境下工作流中创建的流程

参数名称参数说明
流程名称从当前环境中所有已创建的流程进行选择

引入外部css/js

微搭外部资源加载功能指在帮助开发者在应用中加载外部的 JSSDK 或 CSS 样式等资源,方便开发者快速引用第三方 SDK
并在自己的应用中使用,这样可以方便扩展前端应用的能力和样式风

! 当前加载外部资源仅支持在 Web 端使用,暂不支持小程序。

在这里插入图片描述

代码编辑器的使用

模块功能
handlerHandler 是页面的方法集合,若您需要在某页面下调用,则在该页面 Handler 下新建方法,即能够在页面中调用组件、变量和平台方法等
commonCommon 是公共的方法集合,用于多个页面间的方法复用,详情请参见 Common 全局方法复用说明。同时,针对小程序端全局配置文件(app.json)的修改,也在 common 目录下,对应文件名为 mp_config。
style全局配置区和每个页面都有 style 模块,在全局配置区的设置会作用到整个应用,单个页面的 style 只对页面内有效,详情请参见 Style 用法示例。
lifecycle应用和每个页面都有自己的 lifecycle,全局配置区的 lifecycle 在应用使用的时候会生效,而只有当某个页面在页面堆栈最上层时,才会触发该页面的 lifecycle,详情请参见 应用生命周期介绍。

Handler 方法使用介绍

在代码编辑器页面的 handler 中可以新增方法 alertHello方法

  • 我们自定义方法生成值,并通过点击事件将值赋值给文本框
    在这里插入图片描述

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

  • 点击后
    在这里插入图片描述

Style 用法示例

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

LifeCycle 生命周期介绍

微搭支持应用、页面级别的生命周期函数,当对应的生命周期函数触发时,便会自动执行函数下已配置的自定义方法。

  • 应用全局生命周期
    在这里插入图片描述
  • 页面生命周期
    在这里插入图片描述

数据模型方法V2

  • 入参
    params: ICallDataSourceParams
属性类型默认值必填说明
dataSourceNamestring数据源标识
methodNamestring数据源方法名
paramsobject方法参数,根据方法实际入参填写

在这里插入图片描述
如果数据源是数据模型,因为其方法皆由平台提供,其可用的数据源方法(methodName)是:

type
新增wedaCreateV2
新增多条wedaBatchCreateV2
删除wedaDeleteV2
删除多条wedaBatchDeleteV2
更新wedaUpdateV2
更新多条wedaBatchUpdateV2
查询wedaGetItemV2
查询多条wedaGetRecordsV2

这篇关于低代码开发之腾讯云微搭工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/935037

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Java Spring ApplicationEvent 代码示例解析

《JavaSpringApplicationEvent代码示例解析》本文解析了Spring事件机制,涵盖核心概念(发布-订阅/观察者模式)、代码实现(事件定义、发布、监听)及高级应用(异步处理、... 目录一、Spring 事件机制核心概念1. 事件驱动架构模型2. 核心组件二、代码示例解析1. 事件定义

SQLite3命令行工具最佳实践指南

《SQLite3命令行工具最佳实践指南》SQLite3是轻量级嵌入式数据库,无需服务器支持,具备ACID事务与跨平台特性,适用于小型项目和学习,sqlite3.exe作为命令行工具,支持SQL执行、数... 目录1. SQLite3简介和特点2. sqlite3.exe使用概述2.1 sqlite3.exe

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma