(15)腾讯云微搭：云开发为底层支撑的低代码应用/表单开发平台

原创 已于 2022-09-21 16:42:28 修改 · 2k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#低代码 #腾讯云 #云计算

于 2022-09-21 16:14:13 首次发布

文章目录

一、 实验平台——腾讯云微搭

官网：https://cloud.tencent.com/product/weda

腾讯云微搭以云开发作为底层支撑，提供高度开放的开发环境，将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5 应用、Web 应用等），免去了代码编写工作，让开发者能够完全专注于业务场景。

  • 微信生态能力

国内首个微信小程序原生的低代码平台。集成微信交易能力，轻松接入交易组件和商品库，开启视频号带货。

  • 腾讯系 SaaS 产品生态

可与腾讯系产品如企业微信、腾讯会议、腾讯文档、微信支付、腾讯广告等产品数据打通。

  • 云原生底座

无需关心服务器、数据库等底层运维和技术架构，具备 Serverless 化的高可用、安全防刷、免流量等能力。

  • 低代码核心能力

可视化拖拉拽、可视化流程引擎、可视化数据模型，专为企业级应用而设计的低代码解决方案。

二、 项目功能与实现

1、3个数据模型

（1） 我的课程

【我的课程】主要存储课程信息，各门课的授课教室、老师、时间等相关信息。

  • 课程名不唯一：一门课可以在多个时间段进行
  • 授课老师不唯一：一位老师可以教授多门课程
  • 教室不唯一：一个教室可能会上多门课程
  • 时间相关信息不唯一
  • 授课教室和授课老师可选填

image-20220921155455053

（2） 任务清单

【任务清单】主要存储各门课的任务目标。

  • 课程名不唯一：一门课可以创建多个任务目标
  • 其他内容均不唯一
  • 任务关键词：形如期末考、期末大作业、汇报展示等
  • 任务基础信息必填，任务说明和相关文件可选填

image-20220921155541320

（3） 成绩单

【成绩单】主要存储各门课的成绩信息。

  • 课程名唯一、必填：一门课只会记录一个成绩
  • 成绩不唯一、必填：多门课可能是同一个成绩

image-20220921155551902

2、2个通用选项集

（1） 星期

一周有七天，用于后续表单收集

image-20220921155617582

（2） 周数

假设一个学期有25周，用于后续表单收集

image-20220921155621281

3、 组件功能

（1） 标识：EVT事件、D链接、FOR循环

  • EVT

代表事件/行为，可以自由设置，如页面跳转、弹出消息框等功能。

选中组件，右侧【行为】窗口设置触发事件

image-20220921155833481

  • D

代表数据库链接。成功链接数据模型后，可以展示该数据模型中对应的内容。

image-20220921155815570

  • FOR

代表循环展示，常用于数据列表中。相当于遍历数据库中的内容，逐条展示。

只要在数据列表上绑定模型即可。

image-20220921155856782

（2） 数据采集：表单容器

数据列表用于采集表单，当我们创建数据模型后，采取以下几个步骤实现将提交的表单数据存储到数据源

a) 创建数据模型

image-20220921155917721

b) 创建表单容器，绑定数据模型

绑定后将会自动生成表单，在右侧自由设计表单样式。

必填项默认展示，选填项可选择展示，可切换数据采集方式、表单展示效果等。

image-20220921160002258

c) 提交一个表单后，在数据管理中将生成对应数据

image-20220921160036883

（3） 展示相关：数据列表、数据详情

数据列表

数据列表一般用于循环展示数据库中的数据内容，通过以下几个操作实现。

a) 绑定数据模型

image-20220921160100803

b) 设置想要展示的对应内容/条目

image-20220921160139962

image-20220921160157152

  • 数据详情

数据列表一般用于展示数据库中某条数据的详细信息，通过以下几个操作实现。

a) 在上级页面设置事件并传入参数

即点击某条数据，我们希望展示其数据详情。为其设置页面跳转的功能。

image-20220921160243675

image-20220921160250642

b) 在任务详情页面绑定数据模型、接收参数并设置条件

由于在上级传入了唯一标识【数据标识】，并将其命名为id，与是将该页面接收到的id与数据标识比较，当相等时才唯一展示该条数据。

image-20220921160320248

image-20220921160333914

c) 设置想要展示的对应内容/条目

image-20220921160348756

image-20220921160401349

（4） 图表组件：饼图

在成绩板块设计了饼图展示，以饼图形式展示自己的成绩信息，如获得几个A、几个B+，以此类推。通过以下几个操作实现：

a) 拖入饼图，设置数据模型

与数据模型相绑定。

b) 设置维度和统计内容，选择是否显示百分比。

维度：成绩

数值字段：课程名

即实现统计每个成绩下各有几门课达到该成绩。

image-20220921160431251

（5） 其他功能

  • 返回按钮

为返回的按钮图像设置页面跳转事件，点击返回键后将跳转到对应界面

  • 排序

对相应的内容排序展示，如成绩降序展示，任务清单升序展示。

  • 下拉加载/点击加载

当数据库中内容较多时，需要在页面进行加载，主要用于数据列表界面。可以设计不同的加载方案，如页面触底时进行加载，或是点击加载更多的按钮时进行加载。

image-20220921160442627

  • 样式和布局

可在样式界面自定义想要的展示方式

image-20220921160503394

4、 页面功能和展示

（1） 页面概述

共有3/5个主页面（我的课程、任务清单、个人中心）

共有3个表单页面（新增课程、新增任务、新增成绩）

共有6/8个二级页面（任务详情、课程内容、成绩单、我的文件、我的消息、关于我们）

（2） 【我的课程】页面功能

  • 日历显示今日日期，并在日期下标注任务清单完成情况

    • 红色表示未完成
    • 绿色表示已完成

  • 时间轴展示今日课程列表

  • 表单收集：新增课程

    • 对应【我的课程】数据模型
    • 用到通用选项集【星期】和【周数】

image-20220921160623078

（3） 【任务清单】页面功能

  • 展示任务清单（全部、已完成、未完成）

    • 每一条数据显示任务名、关键词和截止时间

  • 按截止时间升序排序，越紧迫的任务越早展示

  • 点击某一条目，将对应展示任务详情

    • 详情包括【课程、任务、截止时间、任务要求、任务说明、相关图片】

  • 表单收集：新增任务

    • 对应【任务清单】数据模型

    image-20220921160745063

image-20220921160803628

（4） 【个人中心】页面功能

  • 涵盖个人信息展示：头像和姓名

  • 包括 " 我的功能 " 板块：我的课程、成绩单、我的文件

    • 【我的课程】展示了个人所修课程信息
      • 包括教室、老师、课时、星期和周数在内的详细信息
    • 【成绩单】展示了个人成绩列表
      • 个人成绩降序排序，更在意好的成绩
      • 表单收集：新增成绩
        • 对应【成绩单】数据模型
        • 用到通用选项集【成绩档次】
    • **【我的文件】**展示了任务清单相挂钩的文件/图片信息

  • 包括其他板块：

    • **【我的消息】**展示了头条信息
    • **【关于我们】**展示了小程序介绍

image-20220921160935278

image-20220921161015198

image-20220921161037249

image-20220921161115541

三、 问题解决

1、 Tab栏遮蔽问题

问题：

有时会发现明明拖入了组件，但是却无法显示。这往往是因为组件之间产生了重叠。例如Tab栏常常会和容器重叠展示，导致底部无法显示。

解决方案：

加入一个较大的板块，避免重复影响到内容展示

在【样式】中调整布局的像素和距离

image-20220921161132943

2、 Tab栏选中不变色问题

问题

在选中Tab栏不同内容的时候，希望其变色来方便用户识别当前处于哪个页面，但设置完成后并没有改变。

解决方案

设置完默认色和选中色后，需要将【跳转页面】和【选中页面】进行对应。

image-20220921161142522

3、 页面链接问题

问题

在跳转到数据详情时，会产生点击的数据与展示的数据无法对应的问题。

解决方案

按照数据详情中的步骤进行即可解决，重点在于传入参数并设置条件。

腾讯云微搭低代码-会员管理系统-首页（二）
低代码布道师的博客
03-19 1978
在上一节中我们介绍了轮播图的制作，本节我们主要是讲解一下热销商品的布局的设置。在电商小程序中一般会有个商品列表，以缩略图的形式展示热销的商品。那么在低代码中是如何实现的呢？先来看一下我们实际做好的布局： 我们要实现的是行列式布局，每一行我们放两个商品的图片，看一下我们设置好的组件图 组件的设计思路是外层放一个容器，里边的话放置四个容器，每个容器里又放置一个图片，那如何实现每两个图片自动换行呢？ 这里就需要理解一下移动端开发的新的布局方式，流式布局（flex布局）它像水流一样，一直往下流，当然我们可以控制
腾讯云微搭低代码开发指南
低代码布道师的博客
04-08 1594
低代码开发中页面间的参数传递是常见的业务场景，在常规开发中，我们往往在列表中查询数据的集合，点击某一条记录的时候将这条数据的主键传递到详情页中，那低代码中是如何做到页面间的传参呢？ 列表页的数据传递 在列表页中往往在for循环中绑定循环列表的数据 在列表上定义了点击事件，该事件往往调用一个低代码的方法，主要是用来进行页面跳转 /* * 可通过 $page.handler.xxx 访问这里定义的方法 * 注意：该方法仅在所属的页面有效 * 如果需要 async-await，请修改成 export defa
腾讯云微搭低代码
huayuyunjisuan的博客
08-09 600
腾讯云微搭低代码是一个高性能的低代码开发平台，用户可通过拖拽式开发，可视化配置构建 PC Web、H5 和小程序应用。支持打通企业内部数据，轻松实现企业微信管理、工作流、消息推送、用户权限等能力，实现企业内部系统管理。连接微信生态，和微信支付、腾讯会议，腾讯文档等腾讯 SaaS 产品深度打通，支持原生小程序，助力企业内外部运营协同和营销管理。通过搭建内部管理应用连接小程序，轻松实现外部用户触达、用户信息采集、移动设备作业（如手机扫码）等场景。提供丰富的UI组件，拖拉拽即可开发应用，摆脱繁琐的代码开发。...
零基础友好！5个免费低代码平台，轻松搭系统
最新发布
m0_69539341的博客
10-10 1504
本文推荐 5 个完全免费低代码平台，覆盖全场景、制造业、微信生态等需求，零编程基础可上手，能搭 OA、小程序等系统。还提醒避开功能缩水、隐性收费坑，助力中小企业零成本实现数字化。
低代码开发之腾讯云微搭工具
ll_883963的博客
04-24 3526
微搭（WeDa），全称是腾讯云微搭低代码开发平台。微搭将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、PC Web 应用等），免去了代码编写工作，让您能够完全专注于业务场景。微搭以云开发作为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。可以实现简易项目全程不写代码，拖拽完成。
深入解读腾讯云微搭低代码的技术架构
趣谈前端
03-18 1436
腾讯云微搭低代码是高效、高性能的企业级低代码平台。帮助开发者快速搭建支持多种业务场景的小程序、H5、PC WEB应用，通过简单的拖拉拽操作，而不用编写复杂的代码，实现少写代码或者不写代码，...
腾讯云微搭低代码平台--绍河珍珠溯源
weixin_52028484的博客
01-09 1029
目录 前端搭建 首页搭建 介绍页搭建 后端搭建 前后端互动 总结： 微搭中的数据源模块是一个比较容易搞混的地方，编写完数据源字段后，数据库的信息增添不容易找到 做测试的时候，如果是用的发布版本，经历页面上的改动后需要发布新的版本 前端搭建 首页搭建 首页分为3个部分，分别是大标题介绍、数据展示、扫码模块。因为数据库暂无相应的用户数据，所以这里先用静态数据做展示。 静态页面的搭建可以从页面右边获取到各种组件，这里就不赘述具体的实施方式 ...
国内常见的14款低代码平台介绍
热门推荐
IT技术分享社区
10-11 6万+
今天给大家分享国内常见的14款低代码平台，欢迎收藏！
低代码平台：菜鸡程序员之光？
Liu_y_xin的博客
08-11 2558
低代码平台通常会被许多程序员叫做“拖拉拽平台”，低代码开发工程师也经常被认为是“菜鸡”，但是低代码平台的迅速推广及广泛使用不是空穴来风的，它本质上为程序开发提高了效率，让企业以较少的成本达到想要的效果。但是这并不能说明传统开发已经或即将被淘汰了，实际上，低代码开发受到严重的平台限制，如果使用了某个低代码开发平台，那么想要更换平台几乎是要从头再开发一遍，维护和迭代性差。总的来讲，对于一些交互简单、轻逻辑的页面，例如海报、运营活动页面、表单收集页等，低代码开发都非常适用，同时，它也可以用于快速搭建产品原型。
微搭低代码幼儿园小程序模板一键导入使用
该模板依托腾讯云微搭（WeDa）低代码平台的强大能力，通过高度封装的组件化架构和拖拽式页面编辑器，极大降低了传统小程序开发所需的技术门槛。用户无需掌握复杂的编程语言如JavaScript、WXML或后端开发知识，只需在...
低代码选谁不踩坑？JNPF 剖开技术内核：BPMN 深度 + 代码扩展，国内平台多是 “半吊子”？
sdgfafg_25的博客
09-24 1391
低代码（Low-Code Development Platform, LCDP），并非仅仅意味着减少代码编写量，其本质是通过可视化建模、自动化代码生成等一系列先进技术，实现快速应用开发的技术体系。这一体系的核心特征，可高度概括为 “80% 配置 + 20% 代码” 的混合开发模式。所谓 “80% 配置”，指的是通过可视化建模的方式，完成大部分通用功能的开发。用户只需在可视化界面中，通过简单的拖拽表单元素、编排流程节点、配置数据模型等操作，就能快速搭建出诸如表单设计、流程审批、数据报表等常见功能模块。以。
使用微搭低代码平台开发天气预报应用小程序.docx
03-23
适合学习低代码平台的同学作为入门教程使用
前端低代码平台腾讯云微搭使用文档
gallonyin的博客
07-09 5625
之前作者有写过一个同类低代码平台调研报告 H5-Dooring 点击查看，这次我们去尝试使用腾讯系低代码平台，文中也会增加两者之间的差异对比和使用体验上的区别。腾讯云微搭低代码是一个高性能的低代码开发平台，用户可通过拖拽式开发，可视化配置构建 PC Web、H5 和小程序应用。支持打通企业内部数据，轻松实现企业微信管理、工作流、消息推送、用户权限等能力，实现企业内部系统管理。连接微信生态，和微信支付、腾讯会议，腾讯文档等腾讯 SaaS 产品深度打通，支持原生小程序，助力企业内外部运营协同和营销管理。腾讯云微
腾讯云微搭低代码平台如何连接其他应用/软件？
part210的博客
11-03 752
腾讯云微搭是什么？腾讯微搭可以处理什么应用？
低代码开发之初始微搭工具
ybb_ymm的专栏
04-15 2210
之前参加了新星计划，但是没来得及写学习笔记，今天更新一下这一周的学习笔记带给大家。以下介绍来自微信开放社区关于微搭的介绍！微搭（WeDa），全称是腾讯云微搭低代码开发平台。微搭将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、PC Web 应用等），免去了代码编写工作，让您能够完全专注于业务场景。微搭以云开发作为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。
腾讯云开发低代码平台初探
低代码布道师的博客
01-11 3134
目录账号注册登录创建应用 账号注册 目前低代码平台还处于公测阶段，可以在腾讯云的控制台申请公测 腾讯云官网地址：腾讯云 可以在云产品的搜索框输入低代码，在官网上申请公测，如果公测审核通过会给你通知。 登录 公测资格审核通过后可以访问低代码的官网：低代码 第一次创建的时候需要选择环境，每个账号有两个免费的环境可用，我的已经创建满了，所以我又创建了一个按量付费的新环境，如何查看新创建的环境呢？在云产品选择云开发cloudbase 可以看到新创建的资源 创建应用 环境创建好后就可以创建自己的应用了 一个
微搭使用笔记(二)微搭低代码平台介绍及基础使用
泽济天下的专栏
02-13 5113
介绍微搭低代码平台的优势、限制、工作原理、产品架构图等基础知识。
腾讯云微搭低代码开发学习日记第6天
09-04
以下是一份腾讯云微搭低代码开发学习第6天的日记示例： # 腾讯云微搭低代码开发学习日记（7天拿证之第6天） 今天是腾讯云微搭低代码开发学习的第6天，经过前几天的学习，对整个开发流程已经有了一个较为清晰的框架认识，今天主要聚焦在深入实践和解决实际开发中遇到的问题。 ## 复习与巩固 早上一来，我先复习了前几天学习的使用`node - fetch`发送HTTP请求以及使用`context`对象下的各种API进行操作的内容。重新看了看之前写的代码，加深了对这些操作的理解。 ```javascript const fetch = require('node - fetch'); module.exports = async function (params, context) { console.log(params); // 其他业务逻辑代码 const response = await context.callWorkflow({ action: 'StartProcessWithParams', data: { TriggerType: 6, ConnectorParam: { ConnectorName: "startflow_n17f6cw", FunctionName: "method_65d91583fc619" }, ProcessKey: "flow_ttmzhe5", StartParams: [ { "name": "form_test3", "paramCode": "168049347798818754", "fieldType": "object", "fieldValueMap": { "_id": '50b8a5676425824e001b06661838b821', "xh": '1311311236743' } } ], ExtraUserInfo: { UserId: 1000000000000000000, Source: 4 } } }); return response; }; ``` ## 实践新功能 ### 深入使用 context.callModel 我尝试使用`context.callModel`来操作其他数据模型数据。在实际操作中，我创建了一个新的数据模型，用于存储用户的反馈信息。通过`context.callModel`，我实现了向这个数据模型中插入新数据的功能。 ```javascript module.exports = async function (params, context) { const newFeedback = { user_id: params.user_id, feedback_content: params.feedback_content, created_at: new Date() }; const result = await context.callModel({ name: 'feedback_model', method: 'create', data: newFeedback }); return result; }; ``` ### 尝试 context.callConnector 接着，我使用`context.callConnector`来使用API。我找到了一个公开的天气API，通过腾讯云微搭低代码的连接器功能进行配置，然后使用`context.callConnector`调用这个API获取天气信息。这一过程中，我学会了如何在腾讯云微搭中配置外部API的连接器，包括设置请求参数、请求头等等。 ```javascript module.exports = async function (params, context) { const response = await context.callConnector({ name: 'weather_api_connector', method: 'get_weather', data: { city: params.city } }); return response; }; ``` ## 遇到的问题及解决办法 在使用`context.callWorkflow`时，我遇到了一个问题，就是在传递参数时，某些参数的格式不符合要求，导致工作流无法正常启动。通过查看腾讯云微搭的官方文档和调试代码，我发现是`StartParams`中的某些字段类型定义错误，经过修正后，工作流成功启动。 ## 总结与展望 今天通过实践，对腾讯云微搭低代码开发中的数据模型操作和API调用有了更深入的理解。虽然遇到了一些问题，但通过查阅文档和调试都得到了解决。明天是学习的最后一天，我打算对整个学习过程进行总结，并且完成一个完整的小项目来巩固所学知识。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值