微信小程序开发教程:一键获取用户微信手机号,并存入数据库(保姆级)
如何使用微信小程序的getPhoneNumber接口一键获取用户微信手机号,并将手机号存入数据库?首先,在微信小程序的前端,我们需要创建一个按钮,用户点击这个按钮后,我们就可以获取到用户的手机号。在WXML文件中,我们创建一个按钮,并设置其open-type属性为getPhoneNumber,这样,当用户点击这个按钮时,微信会弹出一个窗口,询问用户是否同意提供手机号。然后,在TS文件中,我们需要定
如何使用微信小程序的getPhoneNumber接口一键获取用户微信手机号,并将手机号存入数据库?
首先,在微信小程序的前端,我们需要创建一个按钮,用户点击这个按钮后,我们就可以获取到用户的手机号。在WXML文件中,我们创建一个按钮,并设置其open-type属性为getPhoneNumber,这样,当用户点击这个按钮时,微信会弹出一个窗口,询问用户是否同意提供手机号。
<button bindtap="hideDialog" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" wx:if="{{hideButton}}" style="background-color: red; color: white;">确认</button>
然后,在TS文件中,我们需要定义getPhoneNumber函数,这个函数会在用户点击确认按钮后被调用。
getPhoneNumber (e) {
var that = this;
wx.login({
success: function(res) {
if (res.code){
wx.request({
url: '#', //在这里写你的接口地址,比如getOpenid
method: 'POST',
data:{
code:res.code,
},
success:function(response){
const openid = response.data.openid;
let detail = e.detail;
if (detail.errMsg === "getPhoneNumber:ok") {
let code = detail.code;
let encryptedData = detail.encryptedData;
let iv = detail.iv;
wx.request({
url: '#',//在这里写你的接口地址,比如getphone
method: 'POST',
data: {
code: detail.code,
encryptedData: encryptedData,
iv: iv,
openid,
},
success(res) {
console.log(res.data);
}
})
} else {
console.log('用户拒绝授权');
}
}
})
}else{
console.log('wx.login()调用失败!'+res.errMsg);
}
}
})
}
步骤二:服务器端获取openid和手机号
在服务器端,我们需要创建两个接口,一个是getOpenidzz接口,用于获取用户的openid,另一个是getphonezz接口,用于获取用户的手机号。
在getOpenid接口中,我们首先需要从微信服务器获取openid,然后查找数据库中是否已经存在这个openid,如果存在,就直接返回这个openid,如果不存在,就将这个openid存入数据库。
router.post('/getOpenid', function(req, res, next) {
let code = req.body.code;
let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`;
request({url: url, json: true}, function (error, response, body) {
if (!error && response.statusCode == 200) {
const openid = body.openid;
const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
sql.query(sqlStr, [openid], function(err, result) {
if (err) {
console.error(err);
res.status(500).send('Database error');
} else {
if (result.length > 0) {
res.json({ openid: result[0].openid });
} else {
const sqlStr = `INSERT INTO wxusers (openid, create_time) VALUES ('${openid}', NOW())`;
sql.query(sqlStr, (err, result) => {
if (err) throw err;
res.json({openid: openid});
});
}
}
});
}
});
});
在getphone接口中,我们首先需要从微信服务器获取用户的手机号,然后查找数据库中是否已经存在这个openid,如果存在,就更新这个openid对应的手机号,如果不存在,就将这个openid和手机号一起存入数据库。
router.post('/getphone', async function(req, res, next) {
try {
const code = req.body.code;
const openid = req.body.openid;
let url1 = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;
let responseData = await request({url: url1, json: true});
let access_token = responseData.access_token;
let urlphone = `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${access_token}`;
let phoneNumberData = await request({ url: urlphone, method: 'POST', json: true, body\\: { code } });
let phoneNumber = phoneNumberData.phone_info.phoneNumber;
const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
sql.query(sqlStr, [openid], function(err, result) {
if (err) {
console.error(err);
res.status(500).send('Database error');
} else {
if (result.length > 0) {
const sqlStr = `UPDATE wxusers SET phoneNumber = '${phoneNumber}' WHERE openid = '${openid}'`;
sql.query(sqlStr, (err, result) => {
if (err) throw err;
res.send('Data updated in the database.');
});
} else {
const sqlStr = `INSERT INTO wxusers (openid, phoneNumber) VALUES ('${openid}', '${phoneNumber}')`;
sql.query(sqlStr, (err, result) => {
if (err) throw err;
res.send('Data inserted into the database.');
});
}
}
});
} catch (error) {
console.error(error);
res.status(500).send('Error in processing');
}
});
至此,我们已经成功实现了一键获取用户微信手机号,并将手机号存入数据库的功能。
最后需要注意的是,请将下面的代码,写在router前,以供后台可以正常调用:
const appId = "wx";
const appSecret = "wx";
//填写你微信小程序的appid和appSecret
更多推荐
所有评论(0)