点餐小程序实战教程03创建应用

上一篇我们介绍了如何实现后端API，介绍了登录验证的方法。有了登录验证方法之后，就需要在小程序里调用。本篇我们介绍一下小程序如何调用后端API

1 创建应用

在微搭中，我们的小程序或者后台统称为应用。打开我们的控制台，点击应用，点击前往编辑器

选择从空白新建

默认会给我们创建一个首页

现在打开的这个我们叫做编辑器，可以理解为我们所有的开发动作都是在编辑器里完成的。日常主要的工作是组合组件，设置组件的属性、样式、事件。通过创建变量来给组件绑定各种属性。通过定义方法来完成事件的配置。

编辑器分成九个区域，每个区域有不同的功能

2 第一部分侧边栏

第一部分对应我们我的设计界面，应用切换界面，数据源界面，工作流界面，素材界面，应用配置界面。

设计界面就是我们目前看到的工作区，表示我们可以在这个界面进行开发

切换到第二个视图，表示我们的应用界面，可以创建应用，打开其他应用

切换到第三个视图，表示我们的数据源开发界面，这个部分你可以创建数据源，编写后端的API，这两块的内容我们在上一节已经讲解过了，如果不会可以再看一下第二节

切换到第四个视图，表示我们的工作流界面。这个是微搭的特色，区别于别的低代码产品。有一类的产品叫无代码，主要是用表单和工作流完成内部审核的工作，比如合同审批、请假申请。

微搭的工作流准确的讲叫逻辑编排，主要是把你后端的API通过可视化的方式进行搭建。通常我们会用两类，一类是微信支付，一类是公众号集成。不过这两类只有你是企业版才可以使用，我们本次课程就不涉及这一块的内容了。

切换到第五个视图，叫素材管理。主要是设计到我们的界面部分，设计师切好图之后，你可以把图片，图标存放到这个地方，后续在配置组件的背景就可以使用素材。

最后一部分就是我们的应用配置，主要查看应用发布的报错日志，比如小程序最大要求不超过2MB，如果你发布失败了，可以在这里看到报错信息。再一个就是正式发布之后需要提交微信侧审核，这里可以看到微信的审核记录，如果有退回的，可以看到退回原因。

除了和发布相关的，也可以设置应用的访问控制，比如你是否要启用登录，比如用户名密码登录或者手机号登录

3 第二部分页面功能区

第二个区域是和页面相关的，一般我们的小程序需要有一个框架的概念，比如底部的菜单栏。就可以在页面布局部分进行设置

设置好布局之后，页面就可以引用布局，就无需每个页面都设置一遍菜单栏

在页面列表里，我们可以创建、修改页面，我们的小程序是由页面组成的。有的还喜欢设置页面的分组，其实也不用那么麻烦，团队版限制页面数量不能超过20个，超过就超体积了，也用不着进行分类

4 第三部分大纲树

我们的页面开发其实就是不停的放入组件，组件和组件之间是有嵌套关系的，在大纲树里你就可以看到这种嵌套关系。日常如果需要调整上下级的可以在大纲树里进行设置

有时候搭建好了之后发现组件的数据没有正确显示，这个时候可以切换到状态数据，我们可以观测到变量的运行值

5 第四部分代码区

这个就是微搭的特点了，作为低代码工具是可以写代码的，在这个区域可以定义变量，也可以创建方法。

变量和方法也是微搭的难点。因为微搭是基于javascrpt做全栈开发，要求你会javascript的基本语法，熟悉es各个版本的语法。至少要熟练掌握es6，还有就是要熟悉nodejs的常见写法。

你对基本概念掌握的越扎实，写起代码来就越顺畅。这就和学英语是一个道理，单词都不学，上来就想用英语写出文章来是不切实际的。

6 第五部分模式切换

微搭支持三种模式的发布，分别是H5、小程序、PC。应用创建之后默认选中的是小程序，如果需要其他模式点击对应的图标即可。

那这几种模式分别是干什么用的呢？H5相当于通过二维码扫码之后在手机里边使用，当然你也可以在PC端通过微信浏览器打开，把浏览器缩小到手机的大小。

小程序是需要我们事先注册好小程序，认证并备案通过，发布后是在微信里使用的。

PC相当于我们的管理后台，需要使用电脑，在浏览器里打开。

具体使用哪种模式和你的应用场景息息相关

7 第六部分编辑区域

中间这个像手机一样的区域就是我们的画布了，可以从右侧拖入组件进来，还可以调整组件的顺序。有些人讽刺低代码就是个拖拉拽，没啥技术含量，其实你看我讲解这几篇也不是那么回事吧。有时候事情究竟是怎么一回事还得我们自己实践获得，道听途说往往都是假消息。

8 第七部分组件区域

这一部分就是一个低代码的关键点了，低代码开发是可视化开发，是依赖于组件库的组件搭建页面。我们日常学习就是要熟练掌握，什么样的需求，什么样的场景使用什么样的组件。

而组件配置是三件套，属性、样式、事件。这三个部分都是和我们的代码区域息息相关的。

9 第八部分，发布区域

当我们完成组件的配置之后，就需要验证我们软件的正确性，这个时候就需要点击我们发布区域的实时预览

上线之后，需要定位问题的，可以将数据切换到正式数据，就可以查看正式数据的问题

应用编写好之后，我们是分为预览版和正式版。预览版相当于是开发版本，只有你自己或者你邀请的体验者使用。正式版相当于我们线上的版本，拿到备案号通过微信审核，别人就可以在微信里通过应用名称搜索到你的应用了。

而且不同版本的数据是分开的，你在预览版本录入的数据并不会直接同步到正式版本里去

10 第九部分开发调试和高阶配置

低代码开发也是需要调试的，我们可以打开我们的开发调试工具，你在代码里写的调试信息就会在这个区域里显示

他是分为三个页签，elements相当于组件最后生成的源代码，如果要覆盖组件默认样式的，需要在源代码中找到会影响组件的样式类，在组件的样式部分通过覆盖样式实现。

console部分相当于是控制台，可以看到日志的输出和各类报错信息，通过报错信息来定位问题在哪

network相当于网络界面，可以看到我们的各类请求的返回数据，查看请求头。如果遇到复杂问题，可以查看一下接口的数据交互情况。

代码编辑器打开之后就可以看到我们各类生命周期方法

一般是和微信API相关的，比如我们的下拉刷新，如果要停止就需要在生命周期方法里追加，后续我们在相应的章节中进行讲解

如果需要获取用户授权的，可以在common文件加下的全局配置文件里进行配置

还有一个应用主题，我们可以设置我们小程序的整体风格

总结

本篇我们主要是介绍了应用的相关创建方法，以及各个部分可以做的内容。低代码工具也不是像一些人说的是一个玩具，他也是比较复杂的技术体系，各个部分都需要具备扎实的基础知识和实践的经验。用不了几年，低代码就会在应用开发市场占据不错的地位，到那个时候我们再回来看今天的各种评论，也就不攻自破了。