我没学过编程，所以对代码的事情一概不通。但是我对UI的设计比较在行，而且我做的UI都是在APP上的，所以我就想，能不能自己DIY出自己的App？现在我算是实现了这个想法。趁着我五一有空，写一遍我在做WebApp的一些心得，希望对做传统App还是WebApp的朋友有点启发。
我是选择空白模板，自己建模板。自己没UI的，如果你们想省时间，我觉得可以套用模板，可以比较快的生成自己想要的WebApp，毕竟能快就快，能省就省才是王道嘛。来看看我大致的首页布局吧！我先插入一个顶部导航组件，作为首页，顶部导航的标题我建议都是大家的公司或者商城名称。
然后我创建了一个轮播图组件做Banner，因为我做的是微商城，我仿照了TB，用轮播的方式播放一些我修好的商品图片。然后在右边的组件内容中对每个轮播图片逐一添加相对应页面链接去向。
接着我创建了一个图片列表，并在页面属性中把行列设置成了4列1行，我再修改图片高度直接设置为圆形，系统就自动调整图片高低了。接着我更换了图片，替换成按钮图片，并在点击事件中的页面链接至相对应的页面。
因为我想在这一行左右分开，并且是做成左边是大图，右边是上下分开的小图加标题。所以我先插入一个双栏组件，再在右边的栏里再插入一个双栏，这样就实现了栏目的划分。接着在最左边的双栏位置插入一个大图，并且对它的宽度和高度调节。然后对最右边的双栏也插入一个图片组件，并且右键复制一个图片组件到下面（小技巧），如下图，接着拖入文本插件，这里需要注意，拖入第三文本框后，需要先对它的上间距进行调整，再拖入第四个文本框，这样才可以做到上下图片对应文字的标题与内容。（小技巧）
插入底部导航组件，任何的App都有底部导航，而且每个页面都有，所以我这里需要提醒，每个页面的编辑完后，都需要插入一个底部导航。我自己一般是先编辑一个纯底部导航的页面，然后编辑其他页面的时候，我先复制这个纯底部导航的页面再编辑，这样能省下我不少时间。（小技巧）
接下来我想讲的是高级组件中的商品列表组件，这个是VIP才能使用的功能。不过这功能确实强大，这个组件添加到你商品页面之后，你在前端的App制作只需要编辑一下这个版块的分布和排版就好。因为所有的商品数据和图片都是在后台中上架和调整价钱的，这也是方便后台的数据管理吧。
进入后台管理，我们就看到商品管理这个选项。我们先添加分类，保证自己上架的物品不会混乱难以管理。分类好后再在每个对应的分类中添加商品和填写商品的信息即可。
在商品管理后台上传了所有的商品数据后，现在只需要回到前端制作App的页面，在商品页面给每个商品填上对应后台的链接就可以了。非常方便快捷。既然商品都上架，并且让自己的商品在售了，那就需要学会管理后台的订单和查看订单，即速应用这个也是仿照了TB做出了这样一个后台管理，着实是小白也会用这个来管理订单，下面po一个我朋友的订单管理页面。