【Zion项目实战】资源付费小程序开发-我的账户（3）（小程序云开发资源配额） 返回列表

点击图片查看最终效果

　　今天接着分享一下关于“账户”页面的制作，账户页面最主要的功能是对用户的登录行为和用户的信息收集。

　　从上图中我们可以看到，我的账户相关的2个页面，一个是登录前，一个是登录后的。

登录前的页面，我们需要显示一个一键登录的按钮，用于进行登录操作，但是个人理解来看，这个登录的操作，主要还是让用户能够主动的提交头像和昵称信息，因为在全局数据里，已经完成了类似openid的信息记录。

登录后的页面，将会显示用户的头像，昵称，白嫖值，分享值等等。对于页面上其他按钮的功能都很简单，不做描述。今天主要讲解一下，怎么完成一键登录的功能。

制作步骤

首先在页面中，放入一个“条件式容器”，该组件的作用，就是用来判断显示什么样的页面，完成后，选择组件，在右侧面板中创建2个新的可见状态“已登录、未登录”。

PS：这里需要注意一点，千万不要修改默认的可见状态，不要认为反正也没用，我就删除了，或者改为他用，如果这么做了，你预览时，可能效果久久不能实现，哈哈哈哈，真人踩坑。记住了，默认的不要动。

创建可见状态完成后，双击“条件式容器”，进入到聚焦模式进行页面的编辑，其实就是把需要的组件放入到页面中，这里不做详细描述，太耗时间，我们说下重点，怎么配置“条件式容器”的条件。

　　点击可见状态的名字，可以看到选中情况下，是橙色边框，同时右侧会默认显示条件设置的界面。

点击“条件”按钮后，会弹出“条件设置”界面，这里我们下图所示进行配置，这样配置的意思，当前用户的用户名为空的情况下，显示“未登录”的条件式子容器。

对于“已登录”的条件式子容器，我们使用相同的方法进行配置条件，只不过这里是配置成“总是”，意思就是除了未登录情况，总是显示“已登录”的条件式子容器。

　　下面我们开始对“一键登录”的按钮添加行为，这里我们会用到“获取微信头像/昵称”，添加完成后，依次在该行为下添加“刷新当前用户数据”、“冲计算条件”、“刷新”。

刷新当前用户数据：作用当用户更新完头像和昵称后，要求系统刷新用户数据为最新

重计算条件：作用是刷新数据后，重新计算条件容器，让其显示正确的“已登录”条件式子容器，如果不计算，可能一直停留在登录界面

刷新：这个刷新是为了刷新当前页面用的，我一度认为这个行为没啥用。

　　完成上面的配置，你的账户登录功能就完成了，点击右侧预览按钮，进行预览吧。

点击图片查看最终效果

相关阅读

【Zion项目实战】资源付费小程序开发（1）

【Zion项目实战】资源付费小程序开发-详情页（2）