微信小程序一键登录（简单实现）

下载微信开发者工具：

微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com) 

微信公众平台：

微信公众平台 (qq.com)

注册完成后，我们要获取一下APPid和小程序密钥

【注意】：appid和密钥一定要保存好

 

 

 我们还需要一个接口的后台： 

开源后台

我们使用的是微信小程序的，用户授权，自动注册并登录的接口

 

配置服务器域名

 

 配置成功后我们就可以在微信小程序中使用了

搭建一个简单的页面进行登录和退出的测试

 index.wxml

<view>
  <image open-type="getUserInfo" bindtap="bindgetuserinfo" class="my_top_img" src="{{obj.imgt}}"></image>
  <button bindtap="tuilongin">退出</button>
  <view>{{obj.name}}</view>
</view>

index.wxss

.my_top_img {
  float: left;
  margin-top: 30rpx;
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
}

index.js

const app = getApp()

Page({
  data: {
    obj: {},
    name: ''
  },
  methods: {
  },
  onLoad() {
    this.setData({
      obj: getApp().globalData,
      obj: {
        imgt: "https://img1.baidu.com/it/u=2205110285,1532881525&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        name: "暂未登录",
        userid: "暂未登录"
      }

    })
  },
  // 登录
  bindgetuserinfo(e) {
    console.log('触发了');
    wx.getUserProfile({ 
      success: (res) => {
        console.log(res, "info");
        getApp().globalData.imgt = res.userInfo.avatarUrl;
        getApp().globalData.name = res.userInfo.nickName;
        this.setData({
          obj: getApp().globalData
        })
        wx.login({
          success: (res) => {
            console.log(res.code);
            // 1. 拿到code发送给后端
            wx.request({
              url: 'https://api.it120.cc/填写自己的域名/user/wxapp/authorize',
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              method: "POST",
              data: {
                code: res.code
              },
              success: ((res) => {
                console.log(res, "123");
                getApp().globalData.userid = res.data.data.openid
                wx.setStorageSync('token', res.data.data.token)
                wx.setStorageSync('usert', JSON.stringify(getApp().globalData))
              })
            })
          },
        })
      }
    })
  },

  // 退出登录
  tuilongin() { 
    console.log("“退出登录了")
    wx.removeStorage({
      key: 'token',
    })
    wx.removeStorage({
      key: 'usert'
    })

    this.setData({
      obj: {
        imgt: "https://img1.baidu.com/it/u=2205110285,1532881525&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        name: "暂未登录",
        userid: "暂未登录"
      }
    })
  },

})

让我们开查看一下效果