Web App无代码制作方法

我是选择空白模板，自己建模板。自己没UI的，如果你们想省时间，我觉得可以套用模板，可以比较快的生成自己想要的Web App，毕竟能快就快，能省就省才是王道嘛。来看看我大致的首页布局吧！我先插入一个顶部导航组件，作为首页，顶部导航的标题我建议都是大家的公司或者商城名称。

然后我创建了一个轮播图组件做Banner，因为我做的是微商城，我仿照了TB，用轮播的方式播放一些我修好的商品图片。然后在右边的组件内容中对每个轮播图片逐一添加相对应页面链接去向。

接着我创建了一个图片列表，并在页面属性中把行列设置成了4列1行，我再修改图片高度直接设置为圆形，系统就自动调整图片高低了。接着我更换了图片，替换成按钮图片，并在点击事件中的页面链接至相对应的页面。

因为我想在这一行左右分开，并且是做成左边是大图，右边是上下分开的小图加标题。所以我先插入一个双栏组件，再在右边的栏里再插入一个双栏，这样就实现了栏目的划分。接着在左边的双栏位置插入一个大图，并且对它的宽度和高度调节。然后对右边的双栏也插入一个图片组件，并且右键复制一个图片组件到下面（小技巧），如下图，接着拖入文本插件，这里需要注意，拖入第三文本框后，需要先对它的上间距进行调整，再拖入第四个文本框，这样才可以做到上下图片对应文字的标题与内容。（小技巧）

插入底部导航组件，任何的App都有底部导航，而且每个页面都有，所以我这里需要提醒，每个页面的编辑完后，都需要插入一个底部导航。我自己一般是先编辑一个纯底部导航的页面，然后编辑其他页面的时候，我先复制这个纯底部导航的页面再编辑，这样能省下我不少时间。（小技巧）

接下来我想讲的是组件中的商品列表组件，这个是VIP才能使用的功能。不过这功能确实强大，这个组件添加到你商品页面之后，你在前端的App制作只需要编辑一下这个版块的分布和排版就好。因为所有的商品数据和图片都是在后台中上架和调整价钱的，这也是方便后台的数据管理吧。

Web App无代码制作方法

Web App无代码制作方法