低代码移动端示例（低代码移动端示例图）

如下为低代码的JSON串，可以直接进行导入使用，图片内容可获取演示地址

{ "widgetList": [ { "type": "advLayout", "alias": "ADL", "name": "高级布局", "category": "container", "layout": true, "icon": "section", "bodyList": [], "widgetList": [ { "type": "tabbar", "alias": "TBB", "name": "底部导航", "category": "container", "icon": "row", "widgetList": [], "cols": [ { "type": "tabbarCol", "alias": "TBBC", "name": "底部导航列", "category": "container", "icon": "grid", "hidden": true, "headerList": [ { "type": "navBar", "alias": "NAB", "name": "顶部导航", "category": "container", "icon": "row", "hidden": false, "widgetList": [], "options": { "customClass": "", "cssConfig": "", "navBar": "", "showNavbar": true, "zIndex": 1, "fixed": false, "leftArrow": true, "title": "标题", "leftIcon": "", "leftText": "", "rightText": "", "placeholder": "请输入搜索关键词", "paddingBottom": 10, "paddingLeft": 10, "paddingRight": 10, "actionIcon": "filter-o", "leftSearchIcon": "search", "name": "navBar", "background": "rgba(52, 81, 115, 1)", "color": "rgba(255, 255, 255, 1)", "bold": "bold", "fontSize": "17" }, "id": "NAB_8718191ACBF3" }, { "type": "noticeBar", "alias": "NTC", "name": "通知栏", "category": "container", "icon": "dingtalk", "hidden": false, "widgetList": [], "options": { "customClass": "", "cssConfig": "", "noticeBar": "", "mode": "", "leftIcon": "volume-o", "rightIcon": "", "text": "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。", "scrollable": true, "wrapable": false, "paddingLeft": 10, "color": "", "background": "", "clickScript": "", "name": "noticeBar" }, "id": "NTC_478CA9F64726" } ], "widgetList": [ { "type": "squareGrid", "alias": "SG", "name": "九宫格", "category": "container", "icon": "grid", "widgetList": [], "cols": [ { "type": "squareGridCol", "alias": "SGC", "name": "九宫格列", "category": "container", "icon": "grid", "hidden": true, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "CC2BBB0CE938" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "#fff" }, "id": "6CE48676ECD1" } ], "options": { "name": "", "customClass": "", "icon": "home-o", "text": "内容", "to": "", "url": "", "clickScript": "_this.execute("@form.value",{id:"本页面",name:"input",value:"11111"})", "dot": false }, "id": "SGC_402532BF1560" }, { "type": "squareGridCol", "alias": "SGC", "name": "九宫格列", "category": "container", "icon": "grid", "hidden": true, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "CE4176F34D36" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "#fff" }, "id": "05742F2F20AB" } ], "options": { "name": "", "customClass": "", "icon": "home-o", "text": "内容", "to": "", "url": "", "clickScript": "_this.execute("@form.value",{id:"本页面",name:"input",value:"22222"})", "dot": false }, "id": "SGC_A5E97A596FA6" }, { "type": "squareGridCol", "alias": "SGC", "name": "九宫格列", "category": "container", "icon": "grid", "hidden": true, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "36F16C7A1B18" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "#fff" }, "id": "BFDF94F927CA" } ], "options": { "name": "", "customClass": "", "icon": "home-o", "text": "内容", "to": "", "url": "", "clickScript": "_this.execute("@form.value",{id:"本页面",name:"input",value:"33333"})", "dot": false }, "id": "SGC_5EC8E8EFEC1C" }, { "type": "squareGridCol", "alias": "SGC", "name": "九宫格列", "category": "container", "icon": "grid", "hidden": true, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "ECC98C2B1F41" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "#fff" }, "id": "4B4B2D53F3E9" } ], "options": { "name": "", "customClass": "", "icon": "home-o", "text": "内容", "to": "", "url": "", "clickScript": "_this.execute("@form.value",{id:"本页面",name:"input",value:"44444"})", "dot": false }, "id": "SGC_901738E7BE86" } ], "options": { "customClass": [], "squareGrid": "", "cssConfig": "", "gutter": 0, "background": "#fff", "iconSize": 22, "fontSize": 12, "columnNum": 4, "direction": "vertical", "center": true, "square": false, "itemBorder": false, "clickable": true, "name": "squareGrid", "marginTop": "15", "marginLeft": "15", "marginRight": "15", "color": "rgba(25, 71, 120, 1)", "leftTopRadius": "15", "rightTopRadius": "15", "leftBottomRadius": "15", "rightBottomRadius": "15", "paddingTop": "5", "paddingBottom": "5", "paddingLeft": "5", "paddingRight": "5" }, "id": "SG_FA5E2DB8982D" }, { "type": "cellGroup", "alias": "CG", "name": "卡片", "category": "container", "icon": "card", "hidden": false, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "input", "alias": "IPT", "name": "文本框", "icon": "text-field", "formItemFlag": true, "isFormField": true, "options": { "name": "input", "label": "文本框", "widgetType": "input", "customClass": "", "disabled": false, "readonly": false, "hidden": false, "inputV2": "", "formItemConfig": "", "labelWidth": 80, "type": "text", "errorMessageAlign": "right", "buttonSize": "small", "align": "block", "validTrigger": "blur", "showBorder": false, "onClick": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "IPT_664B4FEDAA19" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "30702EA2ADDF" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "" }, "id": "67EDE139A9F3" } ], "options": { "customClass": [], "cellGroup": "", "cssConfig": "", "hidden": false, "title": "标题", "background": "#fff", "bold": "bold", "showBorder": true, "icon": "weapp-nav", "marginTop": 15, "paddingBottom": 20, "leftTopRadius": "15", "rightTopRadius": "15", "leftBottomRadius": "15", "rightBottomRadius": "15", "name": "cellGroup", "marginLeft": "15", "marginRight": "15", "transition": "fade" }, "id": "CG_3F8F47F76DFD" }, { "type": "cellGroup", "alias": "CG", "name": "卡片", "category": "container", "icon": "card", "hidden": false, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "input", "alias": "IPT", "name": "文本框", "icon": "text-field", "formItemFlag": true, "isFormField": true, "options": { "name": "test", "label": "文本框", "widgetType": "input", "customClass": "", "disabled": false, "readonly": false, "hidden": false, "inputV2": "", "formItemConfig": "", "labelWidth": 80, "type": "text", "errorMessageAlign": "right", "buttonSize": "small", "align": "block", "validTrigger": "blur", "showBorder": false, "onClick": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "IPT_31EEA135AF40" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "110E13DA4978" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "" }, "id": "4C0B9CAAA681" } ], "options": { "customClass": "", "cellGroup": "", "cssConfig": "", "hidden": false, "title": "标题", "background": "#fff", "bold": "bold", "showBorder": true, "icon": "weapp-nav", "marginTop": 15, "paddingBottom": 20, "leftTopRadius": "15", "rightTopRadius": "15", "leftBottomRadius": "15", "rightBottomRadius": "15", "name": "cellGroup", "marginLeft": "15", "marginRight": "15", "transition": "fade" }, "id": "CG_63F84CC944B2" }, { "type": "button", "alias": "BTN", "name": "按钮", "icon": "button", "formItemFlag": false, "options": { "name": "button", "customClass": "", "disabled": false, "hidden": false, "buttonV2": "", "cssConfig": "", "label": "按钮", "size": "normal", "onClick": "let form = _this.resolvePromise({id:"本页面",event:"@form"})nnthis.$toast(form['input'])", "block": true, "round": true, "marginLeft": "15", "marginRight": "15", "marginTop": "15", "type": "info", "buttonColor": "rgba(52, 81, 115, 1)", "plain": true }, "id": "BTN_6E21710A23A3" } ], "footerList": [], "options": { "customClass": "", "icon": "photo-o", "dot": false, "replace": false, "text": "", "url": "", "to": "", "changeScript": "" }, "id": "TBBC_EC326A7FAD2B" }, { "type": "tabbarCol", "alias": "TBBC", "name": "底部导航列", "category": "container", "icon": "grid", "hidden": true, "headerList": [ { "type": "noticeBar", "alias": "NTC", "name": "通知栏", "category": "container", "icon": "dingtalk", "hidden": false, "widgetList": [], "options": { "customClass": "", "cssConfig": "", "noticeBar": "", "mode": "", "leftIcon": "volume-o", "rightIcon": "", "text": "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。", "scrollable": true, "wrapable": false, "paddingLeft": 10, "color": "", "background": "", "clickScript": "", "name": "noticeBar" }, "id": "NTC_5634D1A6EE7B" } ], "widgetList": [ { "type": "list", "alias": "LIST", "name": "列表组件", "category": "container", "icon": "section", "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "cellGroup", "alias": "CG", "name": "卡片", "category": "container", "icon": "card", "hidden": false, "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "input", "alias": "IPT", "name": "文本框", "icon": "text-field", "formItemFlag": true, "isFormField": false, "options": { "name": "test1", "label": "文本框", "widgetType": "input", "customClass": "", "disabled": false, "readonly": true, "hidden": false, "inputV2": "", "formItemConfig": "", "labelWidth": 80, "type": "text", "errorMessageAlign": "right", "buttonSize": "small", "align": "flex", "validTrigger": "blur", "showBorder": false, "onClick": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "IPT_76B1201A431E" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "4E0E7AEAA850" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "" }, "id": "2D2A3070E3B5" }, { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "input", "alias": "IPT", "name": "文本框", "icon": "text-field", "formItemFlag": true, "isFormField": false, "options": { "name": "test2", "label": "文本框", "widgetType": "input", "customClass": "", "disabled": false, "readonly": true, "hidden": false, "inputV2": "", "formItemConfig": "", "labelWidth": 80, "type": "text", "errorMessageAlign": "right", "buttonSize": "small", "align": "flex", "validTrigger": "blur", "showBorder": false, "onClick": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "IPT_5437067EEB3D" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "8818B381E5FC" } ], "options": { "name": "B70716912E13", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "#fff" }, "id": "B70716912E13" } ], "options": { "customClass": "", "cellGroup": "", "cssConfig": "", "hidden": false, "title": "标题", "background": "rgba(52, 81, 115, 1)", "bold": "bold", "showBorder": false, "icon": "weapp-nav", "marginTop": 15, "paddingBottom": 20, "leftTopRadius": 10, "rightTopRadius": 10, "leftBottomRadius": 10, "rightBottomRadius": 10, "name": "cellGroup", "color": "rgba(255, 255, 255, 1)" }, "id": "CG_BEF15718275C" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "08FB4BEAD5A3" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "" }, "id": "grid08FB4BEAD5A3" } ], "options": { "customClass": "", "list": "", "cssConfig": "", "dataSource": "", "optionItems": "[n {n "test1":"测试列表数据",n "test2":"测试2"n },{n "test1":"测试数据列表",n "test2":"测试3"n }n]", "finishedText": "已经到底啦...", "successText": "加载完毕", "errorText": "请求失败，点击重新加载", "emptyImage": "default", "onCreated": "", "onMounted": "", "name": "list", "label": "list", "refresh": true, "selectType": "custom", "marginLeft": "15", "marginRight": "15", "background": null, "color": "rgba(52, 81, 115, 1)", "bold": "bold" }, "id": "LIST_24262B2D7757" }, { "type": "popup", "alias": "TC", "name": "弹层组件", "category": "container", "icon": "section", "widgetList": [ { "type": "grid", "alias": "GRD", "name": "格栅列", "category": "container", "icon": "grid", "hidden": false, "cols": [ { "type": "grid-col", "alias": "GRDC", "name": "列", "category": "container", "icon": "grid-col", "widgetList": [ { "type": "input", "alias": "IPT", "name": "文本框", "icon": "text-field", "formItemFlag": true, "isFormField": true, "options": { "name": "input", "label": "文本框", "widgetType": "input", "customClass": "", "disabled": false, "readonly": false, "hidden": false, "inputV2": "", "formItemConfig": "", "labelWidth": 80, "type": "text", "errorMessageAlign": "right", "buttonSize": "small", "align": "block", "validTrigger": "blur", "showBorder": false, "onClick": "", "onInput": "", "onChange": "", "onFocus": "", "onBlur": "", "onValidate": "", "onAppendButtonClick": "" }, "id": "IPT_663BFBD0BBA6" } ], "hidden": true, "options": { "name": "gridCol", "customClass": "", "gridColV2": "", "cssConfig": "", "span": 24, "offset": 0, "push": 0, "pull": 0, "md": 0, "sm": 0, "xs": 0 }, "id": "2AA4CF845B32" } ], "options": { "name": "grid", "customClass": "", "gridV2": "", "cssConfig": "", "gutter": 0, "background": "" }, "id": "grid2AA4CF845B32" } ], "options": { "label": "弹层标题", "customClass": "", "popup": "", "cssConfig": "", "marginTop": 15, "position": "bottom", "visible": false, "showClose": true, "name": "popup", "marginLeft": "15", "marginRight": "15" }, "id": "TC_5451531B5E23" } ], "footerList": [], "options": { "customClass": "", "icon": "home-o", "dot": false, "replace": false, "text": "", "url": "", "to": "", "changeScript": "" }, "id": "TBBC_CE0478346CDA" }, { "type": "tabbarCol", "alias": "TBBC", "name": "底部导航列", "category": "container", "icon": "grid", "hidden": true, "headerList": [], "widgetList": [ { "type": "noticeBar", "alias": "NTC", "name": "通知栏", "category": "container", "icon": "dingtalk", "hidden": false, "widgetList": [], "options": { "customClass": "", "cssConfig": "", "noticeBar": "", "mode": "link", "leftIcon": "volume-o", "rightIcon": "", "text": "我是底部导航第三个页面", "scrollable": false, "wrapable": false, "paddingLeft": "10", "color": "rgba(255, 255, 255, 1)", "background": "rgba(52, 81, 115, 1)", "clickScript": "", "name": "noticeBar", "textColor": "rgba(255, 255, 255, 1)", "paddingBottom": "", "bold": "bold", "fontSize": "22" }, "id": "NTC_B291D4EFFB0D" } ], "footerList": [], "options": { "customClass": "", "icon": "phone-o", "dot": false, "replace": false, "text": "", "url": "", "to": "", "changeScript": "" }, "id": "TBBC_D838D7E6AB6A" } ], "hidden": true, "options": { "customClass": "", "tabbar": "", "cssConfig": "", "fixed": false, "route": false, "itemBorder": true, "safeArea": false, "onChange": "", "background": "rgba(52, 81, 115, 1)", "color": "rgba(255, 255, 255, 1)", "leftTopRadius": "20", "rightTopRadius": "20", "leftBottomRadius": "30", "rightBottomRadius": "30", "paddingTop": "5", "paddingBottom": "5", "inactiveColor": "rgba(255, 255, 255, 1)", "activeColor": "rgba(58, 57, 138, 1)", "active": 1 }, "id": "TBB_D380B61F2018" } ], "footerList": [], "tabbar": "", "options": { "customClass": [], "advLayoutV2": "", "cssConfig": "", "showHeaderBody": true, "showFooter": true, "name": "advLayout", "showTabbar": true, "background": null, "color": null, "onCreated": "", "onMounted": "", "paddingBottom": "" }, "id": "ADL_3C95BC3B8BC9" } ], "formConfig": { "modelName": "formData", "refName": "vForm", "rulesName": "rules", "labelWidth": 80, "labelPosition": "top", "size": "", "labelAlign": "label-left-align", "cssCode": "", "customClass": [], "functions": "", "layoutType": "H5", "onFormCreated": "", "onFormMounted": "", "onFormDataChange": "" }}