会员管理小程序实战开发05-权限设计

我们上节介绍了用户登录的基本知识，包含npm、登录接口、云函数、自定义连接器等。有了这些前置的知识是为了更好的进行后续的开发工作。

作为一本连载的教程，有时候光看图文教程理解的不是很到位，要是能有一个线上的小程序，在看完教程之后能够直接打开小程序体验一下多好。我想有这个需求的同学还是蛮多的，正所谓耳听为虚，眼见为实。

权限设计

为了做到这一点我们需要考虑几个问题，进入页面之后如何区分你是商家还是顾客。第二个问题是如果我们体验完商家之后如何切换一下身份，去体验一下顾客端的功能。

那要如何解决上述的问题呢？我们这样来分析一下，第一个就是要打开页面的时候确定用户的身份，那这个身份有两种做法。一种是在后台给你分配角色，前台页面通过代码来读取角色做路由跳转，不同的角色看到的页面不同。

另外一种做法是先显示一个页面，让用户来主动选择角色，根据选择的角色不同来跳转不同的页面。类似于游戏里一登录之后让你选择职业，你是选择法师还是战士，又或者是刺客。

为了让大家方便的体验功能，我们采用第二种方案，由用户自主来选择角色。

其实呢，第二套方案也不是我突发奇想想出来的，日常你有没有使用过那种免费的打卡小程序。第一次登录的时候其实就让你选择角色，如果你选择教师就会有创建班级，每日创建打卡的功能。如果你选择学生就可以选择加入班级，然后打卡的操作。这个就是按照角色来区分不同的功能。

布局组件介绍

有了上述的规划，那我们先需要搭建一下页面。要搭建页面就先需要考虑布局，我的设计是让角色在页面的中间显示，然后上下显示两个按钮，一个叫商家，一个叫顾客。

那如何布局呢？微搭的布局有对应的组件，可以将组件滑动到布局容器位置

在这里插入图片描述

可以看到组件还是蛮丰富的，不同的组件可以搭建出不同的页面效果。我们通常最常用的就是普通容器，这个既可以设置背景，也可以决定里边的组件的摆放位置，比如横向排列，纵向排列。

先往页面里添加一个普通容器

在这里插入图片描述

然后里边添加两个按钮组件

在这里插入图片描述

盒模型

现在按钮顶在了顶部，我们想要的效果是让他垂直居中，这里就需要介绍一下css里的盒模型。你在百度里搜索盒模型

在这里插入图片描述

可以看到非常详细的教程，有的人觉得学习微搭比较慢，慢的原因是因为你没有前置知识。如果你已经通过学习把这些基础知识全部都掌握了，那么工具用起来就顺手了。

为啥叫盒模型呢？可以看看MDN里的解释

在这里插入图片描述

你像我们的普通容器这个组件就是一个盒子，他是由基本部分组成的。margin叫外边距，意思他和其他组件之间的距离。如果我们是放在最外层，那么普通容器的margin就是他和手机这个窗口之间的距离。

margin有四个方向，分别是上、右、下、左。你没看错，就是这么个顺序，设置属性的时候也是按照这个顺序进行设置的。

border是他的边框，一般边框还可以设置角度，设置了之后就会有弧度，像我们需要的椭圆啦，直至圆形都是可以通过设置角度来完成的。

padding叫内布局，既然是盒模型，那么盒子里边是不是可以放东西呀，内边距就是里边留空白，这样设置是为了不让内容看的过于拥挤紧紧的贴着边框。

content就是我们真正的内容了，一个盒模型会根据以上这几个部分来自动计算高度和宽度，有时候你会发现你设置了一个普通容器的宽度为100，如果设置了这些属性你会发现他实际的宽度会超过你设置的100。

组件样式介绍

好了我们介绍了前置知识后，那微搭里如何设置呢？其实微搭里有两种设置样式的方法，一种是可视化的设置，另外一种是通过样式编辑器来通过代码设置。看个人的喜好吧，如果css比较熟悉的同学可以直接写样式代码，会比较快一点。

我们是需要让按钮居中显示，那么是需要设置他的父容器，普通容器的边距。选中普通容器，切换到样式页签

在这里插入图片描述

标红的部分就是我们的盒模型

在这里插入图片描述

我们是需要让里边的内容居中，所以我们可以设置一下内边距（padding），比如我们设置成150

在这里插入图片描述

你看按钮就往下移动了一些。除了在界面上设置属性外，我们还可以写样式代码，点击样式代码编辑

在这里插入图片描述

在这里插入图片描述

样式代码是由属性和属性值构成的。padding-top叫属性名，意思是上边距；150px是大小，意思是150像素，具体px是啥，可以百度

在这里插入图片描述

好了，这节课我们就到这，本节课我们介绍了如何设计权限，介绍了布局组件的用法及样式的基础知识。要想学好低码开发，css的知识是必备的，花点时间学习一下吧。