下载微信开发者工具:
微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)
微信公众平台:
注册完成后,我们要获取一下APPid和小程序密钥
【注意】:appid和密钥一定要保存好
我们还需要一个接口的后台:
我们使用的是微信小程序的,用户授权,自动注册并登录的接口
配置成功后我们就可以在微信小程序中使用了
搭建一个简单的页面进行登录和退出的测试
{{obj.name}}
.my_top_img {
float: left;
margin-top: 30rpx;
width: 130rpx;
height: 130rpx;
border-radius: 50%;
}
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: "暂未登录"
}
})
},
})
让我们开查看一下效果