相关文章阅读：
如何打开微信小程序？微信小程序在哪里进入？
如何安装微信小程序开发微信小程序开发安装教程
如何申请注册微信小程序微信小程序图文官方注册流程
首先，我们首先要认识到一个显而易见的事实：本质上，微信应用号就是WebApp。那么有的朋友会问，什么是WebApp？事实上，WebApp是App不同于传统移动App的另一种形式。是一款基于H5技术开发的网页App。它可以具有与传统移动应用程序几乎相同的功能和形式，但也可以轻松嵌入到微信应用程序帐户或其他应用程序中。过去，传统的移动应用需要大量的资金和技术团队投入，开发和维护周期也相当长，这让很多人望而却步。
首先在电脑上画出原型，然后选择功能模板的位置。最后，一旦确定了整体架构，就可以开始设计组件布局了。
首先要做的是绘制页面流程图。流程图主要用于确定各功能模块的交互细节。当你把所有的交互场景画完之后，申请号所需的页面就基本完成了。这时候就需要和设计师一起设计和美化所有页面的UI。 Web App的最终原型：包括所有的页面设计和交互过程。现在我想介绍一下我的微商城的粗略设计页面框架，供大家参考。 
登录您的帐户后，选择一个空白模板并构建您自己的模板。如果你自己没有UI，如果你想节省时间，我认为你可以应用模板并更快地生成你想要的Web App。
来看看我的主页大致布局吧！ 
不明白组件名称或如何使用组件？查看帮助！ “帮助”已经对总体布局进行了粗略的介绍。至少你不会让自己对这个功能含糊其辞。如果您对某个组件还不清楚，可以点击该组件右上角的小问号图标，获取详细介绍。 
首先插入一个顶部导航组件作为主页。我建议顶部导航的标题是您的公司或商城名称
然后创建一个轮播组件作为Banner，因为我是搭建一个微商城，用轮播来播放我修好的一些产品图片。然后在右侧的组件内容中为每个轮播图片一一添加对应的页面链接。 
然后我创建了一个图片列表，并将页面属性中的行和列设置为4列1行。然后我修改了图片高度，直接设置为圆形，系统自动调整了图片的高度。然后我将图像更改为按钮图像，并将单击事件中的页面链接到相应的页面。如图
因为我想把这条线的左右两边分开，做成左边是大图，右边是上下分开的小图，有标题。
于是我先插入了一个双列组件，然后在右边的列中又插入了一个双列，这样就实现了列的划分。然后在最左边的双列中插入一个大图像，并调整其宽度和高度。然后在最右边的双列中插入一个图片组件，右键复制一个图片组件到底部（小技巧），如图
然后拖入文本插件。这里需要注意的是，拖入第三个文本框后，需要先调整其上间距，然后再拖入第四个文本框，使上下图片能够对应到文字的标题和内容。 （温馨提示）
插入底部导航组件。任何应用程序都有底部导航，每个页面都有它。所以需要提醒大家的是，每个页面编辑完后，需要插入底部导航。我一般都是先编辑一个纯底部导航的页面，然后在编辑其他页面的时候，先复制纯底部导航的页面，然后再编辑，这节省了我很多时间。 （尖端）
接下来是高级组件中的产品列表组件。将此组件添加到您的产品页面后，您只需在前端App制作中编辑此部分的分布和布局即可。因为所有的商品数据和图片都在后台列出，价格调整，这样也方便后台的数据管理。
但我想抱怨一下。后台数据整理好，图片上传后，前端生产看不到图片。您需要亲自预览应用程序才能看到它们。 
进入后台管理，我们会看到产品管理的选项。我们首先添加类别，以确保我们上架的物品不会混乱且难以管理。分类后，只需添加产品，并在每个相应类别中填写产品信息即可。如图
在商品管理后台上传所有商品数据后，您只需返回前端应用创建页面，在商品页面填写每个商品对应的后台链接即可。非常方便快捷。
现在产品已经上架了，你的产品也开始促销了，你需要学会在后台管理订单，查看订单。以下是订单管理页面。 
其实大家都在等着看微信申请号，不过你可以先做一个webapp，等申请号上线后，我们就可以把webapp链接直接嵌入到申请号里了。
