uni-app学习心得——优选商城之用户登录与退出

通过一学期的学习和沉淀，我学习到了有关vue.js和uni-app的多种用法，也将我所学的知识化为实践，做出了“优选商城”这一案例。

由于案例内容过多，在此只摘选用户登录一块来进行讲解。

目录

前言

一、编写视图

二、登录组件和功能

1.创建并编写组件login视图

2.读入数据

 3.判断用户登录状态

三、退出登录 

小结

---

前言

优选商城项目中，“我的”页面包含了用户登录与退出功能，同时也包含下面功能：

1. 获取登录信息
2. 从本地存储中获取收藏数据，加载收藏信息
3. 查询订单状态

下面将对这几个功能进行详解。

---

一、编写视图

制作视图如下图所示，包含用户头像、用户名称、登录按钮、退出登录按钮。

登录后的界面

 

---

 

二、登录组件和功能

1.创建并编写组件login视图

login组件视图包括一键登录按钮。

 

2.读入数据

在<script>标签中编写如下代码：