!小白包会：2种方案10行代码利用uni-app实现微信小程序手机号一键登录全流程（包含前后端代码）详细解释

在uniapp中实现手机号一键登录，特别是针对微信小程序平台，涉及几个关键步骤和接口使用。下面我会分步骤解释整个流程，并提供一个简化的示例代码框架，同时指出哪些服务可能涉及费用。

微信小程序手机号一键登录流程概览

1. 申请与配置：

   • 确保你的小程序应用已经注册为企业类型，并且在微信公众平台上完成认证。
   • 让管理员将你的微信账号添加为项目成员，并开启“获取用户手机号”权限。
   • 在微信公众平台的小程序后台，找到“设置”->“开发设置”中开启“获取用户手机号”的开关。

2. 前端实现（uniapp）：

   • 使用wx.login()获取临时登录凭证（code）。
   • 调用wx.getUserInfo()或wx.getUserProfile()获取用户基本信息（如果需要）。
   • 调用wx.login()后，使用返回的code调用后端接口换取session_key和openid。
   • 使用wx.getPhoneNumber({})弹出授权框让用户同意获取手机号，然后通过后端解密该加密的手机号。

3. 后端实现（以Java为例）：

   • 接收前端传递的code，调用微信提供的接口换取session_key和openid。
   • 当前端传回encryptedData和iv（加密数据和初始向量）时，使用session_key解密得到手机号。

示例代码

前端uniapp代码片段

// 获取登录凭证
uni.login({
    success: (res) => {
        if (res.code) {
            // 发送到后端换取openid等
            uni.request({
                url: '你的后端接口',
                method: 'POST',
                data: { code: res.code },
                success: async (res) => {
                    if (res.data.success) {
                        const { sessionKey, openid } = res.data;
                        // 保存sessionKey和openid供后续解密使用

                        // 请求获取手机号授权
                        uni.getPhoneNumber({
                            success: (res) => {
                                const encryptedData = res.encryptedData;
                                const iv = res.iv;
                                // 将encryptedData, iv, 和sessionKey发送给后端解密
                                uni.request({
                                    url: '你的解密接口',
                                    method: 'POST',
                                    data: { encryptedData, iv, sessionKey },
                                    success: (decryptRes) => {
                                        if (decryptRes.data.success) {
                                            console.log('解密后的手机号:', decryptRes.data.phoneNumber);
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
            });
        } else {
            console.log('登录失败！', res.errMsg);
        }
    }
});

后端Java代码片段（简化示例）

// 假设你已经通过code获取了sessionKey和openid
public String decryptPhone(String sessionKey, String encryptedData, String iv) {
    // 使用微信提供的算法或第三方库进行解密
    // 以下仅为示意逻辑，具体实现需参考微信文档或使用如WXBizDataCrypt类进行解密
    WXBizDataCrypt crypt = new WXBizDataCrypt("yourAppId", sessionKey);
    try {
        Map<String, String> phoneInfo = crypt.decrypt(encryptedData, iv);
        return phoneInfo.get("phoneNumber");
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    }
}

收费情况

• 微信接口调用：基础的登录、获取用户信息等接口通常是免费的。
• 一键登录服务：如uniapp整合的个推一键登录服务，可能涉及到按量计费，具体费用需查阅最新服务提供商的计费政策。
• 云服务：如果你使用了云函数或云存储来支持一键登录的后端逻辑，云服务提供商（如阿里云、腾讯云）会根据使用量收取费用。

方案优劣

• 使用微信原生接口：优势在于集成简单，直接利用微信生态，用户体验好；劣势是需要用户手动同意获取手机号，且有步骤较多。
• 一键登录服务（如个推）：优势是可以自动填充手机号，提升用户体验；劣势是可能涉及额外费用，且需要用户设备支持相关服务。

综上，选择哪种方案取决于你的项目需求、预算以及对用户体验的考量。如果追求极致用户体验且预算允许，可以考虑一键登录服务；若预算有限，直接使用微信原生接口也是可行的。