微信小程序登录界面的代码html,微信小程序用户登录组件

I 效果：每个需要判断登录的页面只需引入该组件，即可知道显示登录按钮还是页面信息。

注意：这里不是登录页面，只是写的一个按钮组件，通过判断显示和隐藏按钮。

流程图如下

image.png

效果图如下

image.png

登录过程

html代码

小程序授权登录主要通过button按钮绑定bindgetuserinfo方法实现。我们这边把登录按钮封装成了组件，所以通过isShowLogin变量控制按钮显示隐藏。

使用微信授权登录

css代码

.login-box {

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 9999;

background: white;

display: flex;

flex-direction: column;

justify-content: center;

}

.login-btn {

text-align: center;