加油站小程序实战教程10用户登录授权

2025-03-10 约 791 字预计阅读 2 分钟

引言

在《加油站小程序实战教程09显示站点信息》中，我们介绍了如何和地图联动显示站点信息的内容。显示完基本信息后，就进入到我们的主业务中，进行加油操作了。在用户加油之前需要用户先注册并登录小程序，本篇我们介绍一下用户登录功能。

在验证用户是否登录的时候，我们提供两个视图，一个是登录前的视图，一个是登录后的视图。登录前我们用一个站点的图片以及按钮来表达，登录后就允许用户选择油号、油枪并提交订单。

打开我们的首页，在页面组件下添加两个普通容器用来显示视图。

在第一个容器下我们添加一个图片和按钮组件，设置普通容器的样式，纵向排列，水平垂直居中

给图片组件绑定地址，绑定为我们站点的LOGO

设置宽和高为150

修改按钮的内容为我要加油，设置外边距

用户是否登录，我们需要创建一个全局变量，命名为userid，表示用户的数据标识

变量创建好了之后，我们就需要控制用户未登录视图什么时候显示。通常我们是通过设置组件的条件展示来控制组件在什么时候显示。选中普通容器，点击条件展示的fx

编写表达式，表达式的意思是判断全局变量是否为空，如果为空，就表示未登录

$w.IsEmpty($w.app.dataset.state.userid)

在点击按钮的时候，需要跳转到登录页面，需要先创建该页面。点击创建页面的图标，创建登录页

我们要的页面效果如下

其余的都好说，只是这里的单选按钮默认是有个下划线，不好看，我们需要覆盖一下样式

:root {
  width: 50px;
}
:scope .wd-form-item-wrap{
  border-bottom:none;
}

覆盖样式的方法是点开底部的开发者调试工具，切换到elements，点击指针的图标

依次进行尝试，最终起作用的样式类就是我们需要覆盖的内容

回到我们的首页，给按钮配置点击事件，打开我们的登录页

本篇我们配置了登录授权功能，主要讲解了页面效果的搭建，以及控制组件是否显示的方法。在搭建页面时，不同的页面效果需要组合不同的组件来实现，主要是灵活运用各种组件的设定。