微信小程序之微信登录（新手小白也可以轻松拿捏）

微信小程序之微信登录

新手小白如何快速上手微信小程序开发？

这篇文章教你如何从0到1学会编写简单小程序，不需要会代码也可以轻松做自己想要的小程序！

微信授权登录微信小程序

1. 首先 ，要确保你个人中心已经授权登录了，不然就会出现右下角的错误；
   
2. 其次 ，开始创建一个登录按钮，我把登录按钮放到了mine.wxml下（你们可以按需放置），代码如下；
   

//登录按钮
<view class="head">
  <button wx:if="{{!userInfo}}" bindtap="toLogin">登录</button>
</view>

//登录后展示头像、昵称及自我介绍（可随意删减）
<view wx:else class="head-account">
    <image class="headElement" src="{{userInfo.avatarUrl}}" mode=""/>
    <text class="nickname">{{userInfo.nickName}}</text>
    <text class="personalSignature">一句话介绍自己</text>
  </view>

3. 继续 ，写好之后需要再mine.js文件里写入以下代码,里面有代码注释，请尽情享用！：

// 获取全局应用程序实例
const app = getApp()

// 定义一个页面
Page({
  // 页面的初始数据，这里定义了一个userInfo变量，初始为空字符串
  data: {
    userInfo: '',
  },

  // 生命周期函数：监听页面加载
  onLoad() {
    // 这里目前没有实现任何功能，一般用于初始化页面数据或设置监听事件等
  },

  // 自定义方法：授权登录
  toLogin() {
    // 输出日志，表示点击事件已被执行
    console.log("点击事件执行了")

    // 调用微信小程序的getUserProfile接口获取用户信息
    wx.getUserProfile({
      // 描述，会在弹窗中向用户展示
      desc: 'desc',
      
      // 成功回调函数
      success: (res) => {
        // 从响应结果中取出用户信息
        let user = res.userInfo
        // 输出日志，表示授权成功，并打印用户信息
        console.log("授权成功", res)

        // 更新页面数据，设置userInfo为获取到的用户信息
        this.setData({
          userInfo: user,
        })
      },

      // 失败回调函数
      fail: (res) => {
        // 输出日志，表示授权失败，并打印失败原因
        console.log("授权失败", res)
      }
    })
  },

  // 自定义方法：退出登录
  loginOut() {
    // 清空页面数据中的userInfo，模拟退出登录
    this.setData({
      userInfo: null
    })
  }
})

总结一下上述代码：
（1）用户点击登录按钮时触发toLogin方法，请求微信用户的个人信息授权，并在授权成功后将用户信息保存至页面的data.userInfo中。
（2）用户触发退出登录操作时，调用loginOut方法，清空页面数据中的用户信息，实现退出登录效果。
4. 最后 ，如果有退出操作需要在mine.wxml文件中写入一个可以点击的入口，下面是我的代码：

    <view class="nav-item">
        <view bindtap="loginOut">
        //这里放了一个图标（可随意删减）
          <image src="/images/icon/退出登录.png" bindtap="loginOut"></image>
        </view>
        <view bindtap="loginOut">退出登录</view>
    </view>

mine.wxml中本文涉及的全部代码如下（可直接复制该段）：

<view class="head">
    <button wx:if="{{!userInfo}}" bindtap="toLogin">登录</button>
</view>
//登录后展示头像、昵称及自我介绍（可随意删减）
<view wx:else class="head-account">
    <image class="headElement" src="{{userInfo.avatarUrl}}" mode=""/>
    <text class="nickname">{{userInfo.nickName}}</text>
    <text class="personalSignature">一句话介绍自己</text>
</view>
 <view class="nav-item">
    <view bindtap="loginOut">
    <image src="/images/icon/帮助中心.png" bindtap="loginOut"></image>
    </view>
    <view bindtap="loginOut">退出登录</view>
</view>

需要注意的是，html中bindtap里的属性名需要与js里的函数名一致
5. 最终效果 :

样式可以自行调整，如需源码，可以小窗我(上传文件需要md格式，没时间整)