微信小程序新版获取手机号码实现一键登录（uniapp语法）
在微信小程序中，获取用户的手机号码是非常重要的一步。之前，我们需要通过 `wx.login()` 获取 code，然后发送给服务端换取唯一用户标识 openid，再使用 `getPhoneNumber()` 方法获取 phoneCode，最终将 phoneCode 和 openid 一起传给服务端获取手机号。但是，这个过程比较繁琐，尤其是在实现一键登录功能时。新版微信小程序提供了一个更简单的方法来获取手机号码，我们可以直接使用 `wx.login()` 和 `getPhoneNumber()` 方法来实现一键登录。
步骤1：wx.login() 获取code
首先，我们需要在小程序中调用 `wx.login()` 方法，获取 code。这个 code 是临时的，用于换取 openid。
```javascript// pages/login.jsPage({
data: {},
onLoad: function(options) {
wx.login({
success: res => {
console.log(res.code);
// code = res.code;
},
fail: err => {
console.error(err);
}
});
}
});
```
步骤2：wx.login()拿到的code发送给服务端换取openid
接下来，我们需要将 code 发送给服务端，换取 openid。我们可以使用 `uni.request()` 方法来实现这个功能。
```javascript// pages/login.jsPage({
data: {},
onLoad: function(options) {
wx.login({
success: res => {
const code = res.code;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { code: code },
success: res => {
console.log(res.data.openid);
// openid = res.data.openid;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
}
});
```
步骤3：getPhoneNumber()获取phoneCode
接下来，我们需要使用 `getPhoneNumber()` 方法来获取 phoneCode。
```javascript// pages/login.jsPage({
data: {},
onLoad: function(options) {
wx.login({
success: res => {
const code = res.code;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { code: code },
success: res => {
console.log(res.data.openid);
// openid = res.data.openid;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
wx.getPhoneNumber({
success: res => {
console.log(res.phoneNumber);
// phoneCode = res.phoneNumber;
},
fail: err => {
console.error(err);
}
});
}
});
```
步骤4：getPhoneNumber()获取的phoneCode和openid一起传给服务端获取手机号
最后，我们需要将 phoneCode 和 openid 一起传给服务端，获取手机号。
```javascript// pages/login.jsPage({
data: {},
onLoad: function(options) {
wx.login({
success: res => {
const code = res.code;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { code: code },
success: res => {
console.log(res.data.openid);
// openid = res.data.openid;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
wx.getPhoneNumber({
success: res => {
const phoneCode = res.phoneNumber;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { openid: openid, phoneCode: phoneCode },
success: res => {
console.log(res.data.phoneNumber);
// phoneNumber = res.data.phoneNumber;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
}
});
```
完整源码
```javascript// pages/login.jsPage({
data: {},
onLoad: function(options) {
wx.login({
success: res => {
const code = res.code;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { code: code },
success: res => {
console.log(res.data.openid);
const openid = res.data.openid;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
wx.getPhoneNumber({
success: res => {
const phoneCode = res.phoneNumber;
uni.request({
url: ' method: 'POST',
header: { 'Content-Type': 'application/json' },
data: { openid: openid, phoneCode: phoneCode },
success: res => {
console.log(res.data.phoneNumber);
const phoneNumber = res.data.phoneNumber;
},
fail: err => {
console.error(err);
}
});
},
fail: err => {
console.error(err);
}
});
}
});
```
注意
* 在上面的源码中，我们使用了 `uni.request()` 方法来发送请求，获取 openid 和 phoneNumber。
* 在实际的项目中，你需要将 ` 和 ` 替换为你的服务端接口地址。
* 你还需要在服务端实现相应的接口逻辑，来处理 openid 和 phoneNumber 的获取。
希望这个示例能够帮助你理解微信小程序新版获取手机号码实现一键登录的流程。
