我没学过编程，所以对代码的事情一概不通。但是我对UI的设计比较在行，而且我做的UI都是在APP上的，所以我就想，能不能自己DIY出自己的App？现在我算是实现了这个想法。这篇是我在做Web App的一些心得，希望对做传统App还是Web App的朋友有点启发。

1、分析目标人群，确定Web App的定位：

首先我们应该以解决客户需求为出发点，再根据需求分析总结出用户需要的应用内容，确定功能清单，之后就可以着手准备制作了。比方做我想做一个微商城的Web App，我希望用户不需要通过其他软件就可以在我的微商城购买物品，而且我只需要我的Web App简单易用，用户不会因为功能过于繁多而无从下手。

【重点：定位好目标人群】

2、画出WebApp的原型

我之前做的UI，所以对于App 的原型我做的比较多，我基本都会在电脑中先画好一个雏形，再选择功能模板的位置安放，最后一旦确定好总体架构，就可以开始设计组件布局。

第一要做的是画出页面流程图，流程图主要用于确定每个功能模块的交互细节。当你把所有的交互场景都画出来后，那么应用号所需要的页面也就基本上完成了。这时，你就需要与设计师一起，对所有页面进行UI设计与页面美化了。最终生成的Web App的原型：包括所有页面设计与交互流程。现在献上我做微商城大概的设计页面框架，给大家一个思路。

1设计框架

【重点：设计原型明确页面设计与交互细节】

3. 开始Web App的开发制作

【重点：熟悉布局功能组件，拉动组件到对应的面板，设置好颜色，跳转页面及连接】

即速应用在很大程度上参考了原生App的功能，所以提供了非常丰富的功能组件，比如导航组件，轮播图组件，分类组件，视频组件，音频组件，按钮组件，自定义组件，选项投票等等组件。确实可以不需要编写代码，只需把想要的组件拖动到对应的面板里，完成页面布局、颜色、字体设定，链接跳转等，即可一键生成Web App。 当然这也是我们只做Web App过程中，最花时间的步骤，我们需要不断的创建版块和页面布局，我们也需要时刻记得每块模板都应跳转到对应的页面。

我是选择空白模板，自己建模板。自己没UI的，如果你们想省时间，我觉得可以套用模板，可以比较快的生成自己想要的Web App，毕竟能快就快，能省就省才是王道嘛。

来看看我大致的首页布局吧！

2首页布局

看不懂组件名称，不懂组件怎么用？看看《帮助》咯！《帮助》都已经把大致的布局进行了粗略的介绍。至少不会让自己对功能模模糊糊。如果对某个组件还是不清楚，那么可以点击那个组件的右上角的小问号图标，会有一个详细的介绍。

3帮助说明

看完组件说明就直接创建一个空白模板开始制作Web App

制作第一步：我先插入一个顶部导航组件，作为首页，顶部导航的标题我建议都是大家的公司或者商城名称。

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

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

4图片列表

制作第四步：因为我想在这一行左右分开，并且是做成左边是大图，右边是上下分开的小图加标题。

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

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

5双栏操作

基本上的页面编辑和布局大致是这样的，编辑过一次之后就会你发现这个Web App的制作并不难。

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

6商品列表组件

进入后台管理，我们就看到商品管理这个选项。我们先添加分类，保证自己上架的物品不会混乱难以管理。分类好后再在每个对应的分类中添加商品和填写商品的信息即可。如下图

7商品管理 后台

在商品管理后台上传了所有的商品数据后，现在只需要回到前端制作App的页面，在商品页面给每个商品填上对应后台的链接就可以了。非常方便快捷。

既然商品都上架，并且让自己的商品在售了，那就需要学会管理后台的订单和查看订单，即速应用这个也是仿照了TB做出了这样一个后台管理，着实让我这个小白也会用这个来管理订单，下面po一个我朋友的订单管理页面。

8订单管理 后台

好啦，我大概的制作过程和心得也差不多是这样啦！虽然即速应用有着蛮多的高级功能组件，其中商品列表组件（电商支付功能），BBS组件（社交娱乐功能），自定义表单组件（数据统计功能），个人中心组件等等是每位Web App作者都愿意去制作和研究的。但是我只用过商品列表组件，所以只能写一下商品列表的组件内容与情况啦，如果有其他的朋友也用过这款工具，有机会大家可以多多交流。

总结心得：即速应用（jisuapp.cn）Web App 是一款云端的App开发工具， 因具备制作简单，无需敲写代码的先质，与原生App一堆程序员轮流敲代码的时代相比，具备天生的低开发成本。 Web App 很适合我们这些对UI有着自己的设计和布局想法但是又不会编程的人。令人满意的是即速应用里面提供的组件确实易懂好用，而且布局自由。而且这个商品列表高级组件是我最满意的部分，我基本不需要考虑购物车页面或者用户购买页面的设置，因为这个组件已经帮我们完全包括好了。我做一个微商App给我的朋友，一般花10个小时左右就能做好了，而且是空白模板，如果直接套用我之前的模板修改基本4个小时就可以出一个App。所以我个人也确实体验到了低成本制作App并且无代码制作App。我觉得Web App会让传统App的市场有所改变，但是能否替代传统App我不认为，毕竟两者之间各有各优差。