您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序一键登录(简单实现)

微信小程序一键登录(简单实现)

下载微信开发者工具:

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

微信公众平台:

微信公众平台 (qq.com)

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

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

 

 

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

开源后台

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

 

配置服务器域名

 

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

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

 index.wxml


  
  
  {{obj.name}}

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: "暂未登录"
      }
    })
  },

})

让我们开查看一下效果

 

 

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了