上一篇我们介绍了如何实现后端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文件加下的全局配置文件里进行配置
还有一个应用主题,我们可以设置我们小程序的整体风格
总结
本篇我们主要是介绍了应用的相关创建方法,以及各个部分可以做的内容。低代码工具也不是像一些人说的是一个玩具,他也是比较复杂的技术体系,各个部分都需要具备扎实的基础知识和实践的经验。用不了几年,低代码就会在应用开发市场占据不错的地位,到那个时候我们再回来看今天的各种评论,也就不攻自破了。