微信小程序授权登录-58码农网

微信小程序授权登录是微信提供的一种方便快捷的登录方式，可以让用户无需注册账号即可登录使用小程序。以下是微信小程序授权登录的基本步骤：
### 开发前准备
1. "获取小程序的AppID和AppSecret"：在微信公众平台注册小程序后，可以在开发者中心获取。 2. "设置小程序的登录授权设置"：在微信公众平台小程序设置中，开启“开发者工具”的“用户信息加密存储”功能。
### 代码实现
#### 1. 用户点击登录按钮
在小程序页面中，添加一个登录按钮，用户点击后会触发登录请求。
```html ```
#### 2. 获取用户信息
在页面逻辑中，处理`getUserInfo`事件，获取用户信息。
```javascript Page({ getUserInfo: function(e) { if (e.detail.userInfo) { // 用户同意授权，获取到用户信息 console.log(e.detail.userInfo); this.login(); } else { // 用户拒绝授权 wx.showToast({ title: '授权失败', icon: 'none' }); } } }); ```
#### 3. 调用微信登录接口
在`login`方法中，调用微信登录接口获取code。
```javascript login: function() { const that = this; wx.login({ success:

相关内容：

最近在学习微信小程序，学到授权登录这里，做个笔记记录一下。

我们使用的工具是微信开发者工具，我们创建一个项目，项目结构如图所示：

我们先准备好我们的index.wxml文件，代码如下：

<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
  <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button bindtap="loginOut">退出登录</button>
</view>

以上代码先判断是否有用户记录，如果没有，就显示授权登录按钮，否则就显示我们的用户信息

然后我们先修改一下我们的组件的样式，我们打开index.wxss，修改代码如下：

.root{
    display: flex;
    flex-direction: column;
    align-items:center;
}
.touxiang{
    width:200rpx;
    height:200rpx;
    border-radius:50%;
    margin-top:30rpx;
    margin-bottom:10rpx;
}

然后我们进入index.js文件，修改代码如下：

Page({
    data:{
    //用户信息开始为空
       userInfo:''
    },
    onLoad(){
        //获取本地缓存
        let user=wx.getStorageSync('user')
        console.log("进入小程序的index页面获取缓存",user)
        this.setData({
            userInfo:user
        })
    },
    //授权登录
    login(){
        wx.getUserProfile({
            desc:'必须授权后才能继续使用',
            success:res=>{
                let user=res.userInfo
                //设置本地缓存,把用户信息缓存到本地
                wx.setStorageSync('user',user)
                console.log('用户信息',user)
                this.setData({
                    userInfo:user
                })
            }
        })
    },
    //退出登录
    loginOut(){
        this.setData({
            userInfo:''
        })
        wx.setStorageSync('user',null)
    }
})

我们点击编译，再点击模拟器，因为一开始没有缓存，所以显示授权按钮