云开发低码 LowCode 是高效、高性能的拖拽式低代码开发平台,向上连接前端的行业业务,向下连接云计算的海量能力,助力企业垂直上云。云开发低码将繁琐的底层架构和基础设施抽象化为图形界面,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5应用、Web 应用等),免去了代码编写工作,让您能够完全专注于业务场景。云开发低码以云开发作为底层支撑,云原生能力将应用搭建的全链路打通,提供高度开放的开发环境,且时刻为您的应用保驾护航。
PS. 这篇文章大致是1月18号开始写的,发布时应该已经月底,版本有更新部分内容可能不一致
这里我已经创建了一个空白todolist应用了,为给各位再展现一次操作,这里再创建一个新的todlist应用,成品大致如下:http://todolist.cn/
点击创建好的新应用,进入应用信息页
可以看到应用详情、应用版本、应用数据(在CMS中)
点进「进入应用页面编辑」
PS. 强烈建议使用屏幕较大显示器!
对这个页面分析后,静态部分基本可以分为以下这种结构
为适配微信小程序,腾讯云的lowcode有自带的导航栏,一般是比较丑的,可以在页面编辑-导航栏设置-自定义样式给去掉
我们一般在body内套一个大容器container,一般开发中这个根元素都叫app
默认的container是没有高度的,如果拖过来就点掉的话,会因为没有高度而被隐藏点不到,不方便后续我们往里拖组件,这里建议有两种方案
根据我们之前的结构图,我们基本上可以用组件拖拽出如下的组件树
参考样式表如下:
{
"id": "id3",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id4",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id5",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id6",
"component": "Text",
"attributes": {
"text": "Todolist"
},
"extra": {
"commonStyle": {
"self": {
"fontSize": "36"
},
"text": {
"fontSize": "36"
}
},
"xIndex": 1
}
}
],
"extra": {
"xIndex": 0
}
},
{
"id": "id7",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id71",
"component": "Form",
"attributes": {
"name": "formInput",
"type": "text",
"focus": false,
"label": "",
"rules": [],
"value": "",
"cursor": -1,
"layout": "",
"varPath": "",
"autoFill": "",
"descSlot": "",
"disabled": false,
"formType": "",
"password": false,
"required": false,
"clearable": true,
"labelSlot": "",
"maxLength": 140,
"underline": true,
"alwaysEmbed": false,
"confirmHold": false,
"confirmType": "done",
"placeholder": "请输入",
"holdKeyboard": false,
"labelVisible": true,
"selectionEnd": -1,
"cursorSpacing": 0,
"initialValues": {},
"adjustPosition": false,
"selectionStart": -1,
"validateStatus": "success",
"validateTrigger": "onChange"
},
"items": [
{
"id": "contentSlot",
"component": "",
"items": [
{
"id": "id72",
"component": "FormInput",
"attributes": {
"label": " ",
"rules": [],
"underline": false,
"placeholder": "请添加todo"
},
"extra": {
"commonStyle": {
"self": {
"height": "60",
"background": "#fff",
"lineHeight": "80",
"paddingTop": 5,
"borderRadius": "5"
},
"text": {
"lineHeight": "80"
},
"border": {
"radiusInfo": {
"topLeft": "5",
"topRight": "5",
"bottomLeft": "5",
"bottomRight": "5"
}
},
"padding": {
"top": 5
},
"background": {
"color": "#fff",
"bgType": "color"
}
},
"xIndex": 0
}
}
]
}
],
"extra": {
"commonStyle": {
"self": {
"height": "60"
},
"size": {
"height": "60"
}
}
}
}
],
"extra": {
"commonStyle": {
"self": {
"height": "50",
"display": "flex",
"alignItems": "center",
"lineHeight": "60",
"justifyContent": "center"
},
"size": {
"height": "50"
},
"display": "flex",
"flexConfig": {
"alignItems": "center",
"justifyContent": "center"
}
},
"xIndex": 1
}
}
],
"extra": {
"commonStyle": {
"self": {
"color": "#fff",
"height": "100",
"display": "flex",
"alignItems": "center",
"background": "#323232",
"paddingLeft": 30,
"paddingRight": 30,
"justifyContent": "space-between"
},
"size": {
"height": "100"
},
"text": {
"color": "#fff"
},
"display": "flex",
"padding": {
"left": 30,
"right": 30
},
"background": {
"color": "#323232",
"bgType": "color"
},
"flexConfig": {
"alignItems": "center",
"justifyContent": "space-between"
}
},
"xIndex": 0
}
},
{
"id": "id10",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id11",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id12",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id13",
"component": "Text",
"attributes": {
"text": "正在进行"
},
"extra": {
"commonStyle": {
"self": {
"fontSize": "48",
"fontWeight": "bolder"
},
"text": {
"weight": "bolder",
"fontSize": "48"
}
},
"xIndex": 0
}
},
{
"id": "id14",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id31",
"component": "Text",
"attributes": {
"text": "1"
},
"extra": {
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"width": "40",
"height": "40",
"display": "flex",
"textAlign": "left",
"alignItems": "center",
"background": "#E6E6FA",
"fontWeight": "bolder",
"borderRadius": "50",
"justifyContent": "center"
},
"size": {
"width": "40",
"height": "40"
},
"text": {
"weight": "bolder",
"textAlign": "left"
},
"border": {
"radiusInfo": {
"topLeft": "50",
"topRight": "50",
"bottomLeft": "50",
"bottomRight": "50"
}
},
"display": "flex",
"background": {
"color": "#E6E6FA",
"bgType": "color"
},
"flexConfig": {
"alignItems": "center",
"justifyContent": "center"
}
},
"xIndex": 1
}
}
],
"extra": {
"commonStyle": {
"self": {
"display": "flex",
"alignItems": "center",
"justifyContent": "space-between"
},
"display": "flex",
"flexConfig": {
"alignItems": "center",
"justifyContent": "space-between"
}
},
"xIndex": 0
}
},
{
"id": "id15",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id41",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id43",
"component": "Icon",
"attributes": {
"name": "delete"
},
"extra": {
"commonStyle": {
"self": {
"width": "75"
},
"size": {
"width": "75"
}
},
"xIndex": 2
}
},
{
"id": "id44",
"component": "Text",
"attributes": {},
"extra": {
"commonStyle": {
"self": {
"width": "500",
"display": "inline-block"
},
"size": {
"width": "500"
},
"display": "inline-block"
},
"xIndex": 1
}
},
{
"id": "id54",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id55",
"component": "Text",
"attributes": {
"text": "√"
},
"extra": {
"commonStyle": {
"self": {
"color": "#fff",
"textAlign": "center",
"fontWeight": "bolder"
},
"text": {
"color": "#fff",
"weight": "bolder",
"textAlign": "center"
}
},
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"width": "50",
"border": "3 solid #666",
"height": "50",
"textAlign": "center",
"lineHeight": "50",
"marginLeft": 30,
"borderRadius": "5"
},
"size": {
"width": "50",
"height": "50"
},
"text": {
"textAlign": "center",
"lineHeight": "50"
},
"border": {
"type": "solid",
"color": "#666",
"width": "3",
"radiusInfo": {
"topLeft": "5",
"topRight": "5",
"bottomLeft": "5",
"bottomRight": "5"
}
},
"margin": {
"left": 30
}
},
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"display": "flex",
"marginTop": 15,
"alignItems": "center",
"background": "rgb(255, 255, 255)",
"borderLeft": "10px solid #629A9C",
"paddingTop": 15,
"borderRadius": "10",
"marginBottom": 15,
"paddingBottom": 15,
"justifyContent": "space-between"
},
"border": {
"radiusInfo": {
"topLeft": "10",
"topRight": "10",
"bottomLeft": "10",
"bottomRight": "10"
}
},
"custom": [],
"margin": {
"top": 15,
"bottom": 15
},
"display": "flex",
"padding": {
"top": 15,
"bottom": 15
},
"background": {
"color": "rgb(255, 255, 255)",
"bgType": "color"
},
"borderLeft": "10px solid #629A9C",
"flexConfig": {
"alignItems": "center",
"justifyContent": "space-between"
}
},
"xIndex": 0
}
}
],
"extra": {
"xIndex": 1
}
}
],
"extra": {
"xIndex": 0
}
},
{
"id": "id32",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id33",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id35",
"component": "Text",
"attributes": {
"text": "已经完成"
},
"extra": {
"commonStyle": {
"self": {
"fontSize": "48",
"fontWeight": "bolder"
},
"text": {
"weight": "bolder",
"fontSize": "48"
}
},
"xIndex": 0
}
},
{
"id": "id36",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id37",
"component": "Text",
"attributes": {
"text": "1"
},
"extra": {
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"width": "40",
"height": "40",
"display": "flex",
"textAlign": "left",
"alignItems": "center",
"background": "#E6E6FA",
"fontWeight": "bolder",
"borderRadius": "50",
"justifyContent": "center"
},
"size": {
"width": "40",
"height": "40"
},
"text": {
"weight": "bolder",
"textAlign": "left"
},
"border": {
"radiusInfo": {
"topLeft": "50",
"topRight": "50",
"bottomLeft": "50",
"bottomRight": "50"
}
},
"display": "flex",
"background": {
"color": "#E6E6FA",
"bgType": "color"
},
"flexConfig": {
"alignItems": "center",
"justifyContent": "center"
}
},
"xIndex": 1
}
}
],
"extra": {
"commonStyle": {
"self": {
"display": "flex",
"alignItems": "center",
"justifyContent": "space-between"
},
"display": "flex",
"flexConfig": {
"alignItems": "center",
"justifyContent": "space-between"
}
},
"xIndex": 0
}
},
{
"id": "id34",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id38",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id45",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id46",
"component": "Icon",
"attributes": {
"name": "delete"
},
"extra": {
"commonStyle": {
"self": {
"width": "75"
},
"size": {
"width": "75"
}
},
"xIndex": 2
}
},
{
"id": "id47",
"component": "Text",
"attributes": {},
"extra": {
"commonStyle": {
"self": {
"width": "500",
"display": "inline-block"
},
"size": {
"width": "500"
},
"display": "inline-block"
},
"xIndex": 1
}
},
{
"id": "id56",
"component": "Container",
"attributes": {},
"items": [
{
"id": "id57",
"component": "Text",
"attributes": {
"text": "√"
},
"extra": {
"commonStyle": {
"self": {
"color": "#fff",
"textAlign": "center",
"fontWeight": "bolder"
},
"text": {
"color": "#fff",
"weight": "bolder",
"textAlign": "center"
}
},
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"color": "#67A1E6",
"width": "50",
"border": "3 solid transparent",
"height": "50",
"textAlign": "center",
"background": "#67A1E6",
"lineHeight": "50",
"marginLeft": 30,
"borderRadius": "5"
},
"size": {
"width": "50",
"height": "50"
},
"text": {
"textAlign": "center",
"lineHeight": "50"
},
"border": {
"type": "solid",
"color": "transparent",
"width": "3",
"radiusInfo": {
"topLeft": "5",
"topRight": "5",
"bottomLeft": "5",
"bottomRight": "5"
}
},
"margin": {
"left": 30
},
"background": {
"color": "#67A1E6",
"bgType": "color"
}
}
}
}
],
"extra": {
"commonStyle": {
"self": {
"display": "flex",
"marginTop": 15,
"alignItems": "center",
"background": "#E6E6E6",
"borderLeft": "10px solid #629A9C",
"paddingTop": 15,
"borderRadius": "10",
"marginBottom": 15,
"paddingBottom": 15,
"justifyContent": "space-between"
},
"border": {
"radiusInfo": {
"topLeft": "10",
"topRight": "10",
"bottomLeft": "10",
"bottomRight": "10"
}
},
"custom": [],
"margin": {
"top": 15,
"bottom": 15
},
"display": "flex",
"padding": {
"top": 15,
"bottom": 15
},
"background": {
"color": "#E6E6E6",
"bgType": "color"
},
"borderLeft": "10px solid #629A9C",
"flexConfig": {
"alignItems": "center",
"justifyContent": "space-between"
}
}
}
}
],
"extra": {
"xIndex": 0
}
}
],
"extra": {
"xIndex": 1
}
}
],
"extra": {}
}
],
"extra": {
"commonStyle": {
"self": {
"paddingLeft": 20,
"paddingRight": 20
},
"padding": {
"left": 20,
"right": 20
}
},
"xIndex": 1
}
},
{
"id": "id29",
"component": "Container",
"attributes": {
"title": "footer"
},
"items": [
{
"id": "id39",
"component": "Text",
"attributes": {
"text": "Copyright 2014 todolist.cn clear"
},
"extra": {
"commonStyle": {
"self": {
"color": "#666677"
},
"text": {
"color": "#666677"
}
},
"xIndex": 0
}
}
],
"extra": {
"commonStyle": {
"self": {
"marginTop": 30,
"textAlign": "center"
},
"text": {
"textAlign": "center"
},
"margin": {
"top": 30
}
},
"xIndex": 2
}
}
],
"extra": {
"xIndex": 0
}
}
可以看到效果如下:
那么对于这些部分我们需要在右边的属性编辑为为其绑定数据
循环数据绑定如下:
这里解释一下步骤:
得到的效果图如下:
样式完成后,我们来完成事件,这里的事件有几个
目前lowcode的表单元素只能放在表单Form内下使用,作为通用container容器的直接子元素会报错。目前想要获取表单内的数值,最好使用submit按钮,submit绑定的事件e中,可以获取到整个表单的内容,所以在这里添加了一个按钮
即可发现我们的输入框内的内容增加到了「正在进行」中
目前还不支持传参传循环渲染的index,只能传value,那就只好用值来做判断点的谁了,可以在事件中传参
}取消完成事件export default function(e) {
let arr = new Array();
if(e.data.target){
let index = $page.dataset.state.completelist.indexOf(e.data.target);
if(index == -1)
return;
for(let i = 0 ; i < $page.dataset.state.completelist.length ; i++){
if(i != index)
arr.push($page.dataset.state.completelist[i])
else
$page.dataset.state.todolist.push($page.dataset.state.completelist[i])
}
$page.dataset.state.completelist = arr;
}
}删除事件// 删除complete
export default function(e) {
let arr = new Array();
console.log(e.data.target)
if(e.data.target){
let index = $page.dataset.state.completelist.indexOf(e.data.target);
if(index == -1)
return;
for(let i = 0 ; i < $page.dataset.state.completelist.length ; i++){
if(i != index)
arr.push($page.dataset.state.completelist[i])
}
$page.dataset.state.completelist = arr;
}
}
// 删除todo
export default function(e) {
let arr = new Array();
if(e.data.target){
let index = $page.dataset.state.todolist.indexOf(e.data.target);
if(index == -1)
return;
for(let i = 0 ; i < $page.dataset.state.todolist.length ; i++){
if(i != index)
arr.push($page.dataset.state.todolist[i])
}
$page.dataset.state.todolist = arr;
}
}
当我们编写完所有代码之后,就可以点击发布了
选择菜单栏中的预览发布
这里推荐使用本地发布,速度更快,且能帮助调试
用node安装好@cloudbase/cli工具后,按照命令开启登录后开启tcb lowcode watch
之后程序的编译过程就会在shell中展现出来,有任何报错都可以查看。
如果H5部署成功,代码会存到对应的静态网站托管下面,可以通过静态网站托管提供的路径对H5页面进行访问
小程序的部署需要提供wxappid,同时需要关闭对应小程序公众平台-开发设置中的IP白名单,才可正常使用
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。