uni-app 微信登录授权流程
在 uni-app 中实现微信登录授权功能，需要遵循以下步骤：
1. 加载微信 SDK
首先，我们需要在 `app.json` 文件中加载微信 SDK 的相关配置：
```json{
"pages": [
// ...
],
"plugins": [
{
"module": "weixin-js-sdk",
"version": "^2.0.0"
}
]
}
```
2. 在 button 上加上 open-type="getUserInfo"
在 `index.vue` 文件中，添加一个按钮，并设置其 `open-type` 属性为 `getUserInfo`：
```html
```
3. 获取用户名、性别和头像
在 `wechatLogin` 方法中，获取用户的基本信息：
```javascriptwechatLogin() {
uni.getUserInfo({
success: (res) => {
const { nickName, sex, avatarUrl } = res.userInfo;
console.log(nickName); // 用户名 console.log(sex); // 性别 console.log(avatarUrl); // 头像 },
fail: (err) => {
console.error(err);
}
});
}
```
4. 获取 js_code
在 `wechatLogin` 方法中，获取 `js_code`：
```javascriptwechatLogin() {
uni.getUserInfo({
success: (res) => {
const { nickName, sex, avatarUrl } = res.userInfo;
console.log(nickName); // 用户名 console.log(sex); // 性别 console.log(avatarUrl); // 头像 // 获取 js_code uni.login({
provider: 'weixin',
success: (loginRes) => {
const { code } = loginRes;
console.log(code); // js_code },
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
}
```
5. 换取后台返回的 openID
在 `wechatLogin` 方法中，使用 `js_code` 换取后台返回的 `openID`：
```javascriptwechatLogin() {
uni.getUserInfo({
success: (res) => {
const { nickName, sex, avatarUrl } = res.userInfo;
console.log(nickName); // 用户名 console.log(sex); // 性别 console.log(avatarUrl); // 头像 // 获取 js_code uni.login({
provider: 'weixin',
success: (loginRes) => {
const { code } = loginRes;
console.log(code); // js_code // 换取后台返回的 openID wx.request({
url: ' // 后台接口地址 data: {
grant_type: 'authorization_code',
code,
appid: 'your_app_id', //你的微信应用 ID secret: 'your_secret' //你的微信应用密钥 },
method: 'GET',
success: (res) => {
const { openid } = res.data;
console.log(openid); // openID },
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
}
```
6. 登录
在 `wechatLogin` 方法中，使用 `openID` 进行登录：
```javascriptwechatLogin() {
// ...
// 换取后台返回的 openID wx.request({
url: ' // 后台接口地址 data: {
grant_type: 'authorization_code',
code,
appid: 'your_app_id', //你的微信应用 ID secret: 'your_secret' //你的微信应用密钥 },
method: 'GET',
success: (res) => {
const { openid } = res.data;
console.log(openid); // openID // 登录 uni.login({
provider: 'weixin',
success: (loginRes) => {
const { code } = loginRes;
console.log(code); // js_code // 使用 openID 进行登录 wx.request({
url: ' // 后台接口地址 data: {
grant_type: 'authorization_code',
code,
appid: 'your_app_id', //你的微信应用 ID secret: 'your_secret' //你的微信应用密钥 },
method: 'GET',
success: (res) => {
const { openid, access_token } = res.data;
console.log(openid); // openID console.log(access_token); // access_token // 使用 access_token 进行登录 wx.request({
url: ' // 后台接口地址 data: {
grant_type: 'authorization_code',
code,
appid: 'your_app_id', //你的微信应用 ID secret: 'your_secret' //你的微信应用密钥 },
method: 'GET',
success: (res) => {
const { openid, access_token } = res.data;
console.log(openid); // openID console.log(access_token); // access_token // 登录成功 uni.showToast({
title: '登录成功',
icon: 'success'
});
},
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}
});
}
```
以上就是 uni-app 中微信登录授权流程的详细描述。
