1、它是一款基于H5技术开发的网络应用，可以拥有与传统移动应用几乎相同的功能和形式，但可以轻松嵌入微信应用号或其他应用。以前传统的移动app需要大量的资金和技术团队的投入。

2、开发维护周期也相当长，让很多人望而却步。

3、先在电脑里画一个原型，然后选择功能模板的位置，最后一旦整体架构确定，就可以开始设计组件布局了。

(资料图片)

4、首先要做的是绘制页面流程图，主要用来确定各个功能模块的交互细节。当你画完了所有的交互场景，那么应用号所要求的页面就基本完成了。这时候就需要和设计师合作了。

5、所有页面都进行了UI设计和页面美化。Web App的原型最终生成：包括所有的页面设计和交互过程。现在我来呈现一下我的微商城的一般设计页面框架，给大家一个思路。

6、登录帐户后，选择一个空白模板并构建自己的模板。如果你自己没有UI，如果你想节省时间，我觉得你可以应用一个模板，快速生成你想要的Web App。

7、来看看我的一般主页布局吧！

8、看不懂组件名，怎么用？看《帮助》！《帮助》已经大致介绍了总平面布置。至少我不会让自己对功能感到困惑。如果组件仍然不清楚，

9、然后你可以点击那个组件右上角的小问号图标，会有详细的介绍。

10、首先，插入一个顶部导航组件作为主页。我建议顶部导航的标题是大家的公司或商城名称。

11、然后创建一个轮播组件做Banner，因为我是做微商城的，用轮播播放一些我修的货的图片。然后在右边的组件内容中，将相应的页面链接目的地逐个添加到每个轮播图片中。

12、然后我创建了一个图片列表，在页面属性中将行列设置为4列1行。然后我修改了图片高度，直接设置为圆形，系统自动调整图片高度。然后我把图片改了，换成了按钮图片，把click事件里的页面链接到了对应的页面。

13、因为我想把这条线左右分开，把它做成左边的大图，右边的小图，再加上标题。

14、于是我先插入一个双列组件，然后在右边的列中插入一个双列，这样就实现了列的划分。然后在最左边的双栏位置插入大图，调整其宽度和高度。然后将图片组件插入最右边的双列，

15、右键单击将图片组件复制到底部。

16、然后拖到文本插件中。这里需要注意的是，拖入第三个文本框后，需要先调整它的上间距，然后再拖入第四个文本框，这样上下图片才能对应文字的标题和内容。

17、插入底部导航组件，任何App都有底部导航，每个页面都有，所以我需要在这里提醒你，编辑完每个页面后，都需要插入一个底部导航。我一般是先编辑一个纯底部导航的页面，再编辑其他页面。

18、我会在编辑之前复制这个底部导航页面，这样可以节省我很多时间。

19、接下来是高级组件中的商品列表组件。这个组件添加到你的产品页面后，你只需要在前端App制作中编辑这个版块的分发和排版即可。因为所有的商品数据和图片都是上架并在后台调整的，

20、这样也方便后台的数据管理。

21、但是，我很想吐槽。后台数据整理和图片上传后，前端制作看不到图片，需要自己预览App才能看到。

22、进入后台管理，会看到商品管理的选项。先加分类，保证我们货架上的物品不会乱，不好管理。分类后，添加商品，填写每个对应分类中的商品信息。

23、在商品管理后台上传完所有的商品数据后，现在只需要回到前端页面制作App，在商品页面为每种商品填写相应的后台链接即可。非常方便快捷。

24、由于所有商品都在货架上，你自己的商品也在销售，你需要学会后台管理和查看订单。这是订单管理页面。

25、其实大家都在等着看微信应用号，不过你可以先做个webapp。当应用号上线后，我们可以直接将webapp的链接嵌入到应用号中。

本文到此结束，希望对大家有所帮助。