如何使用微信小程序的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
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐