uni-app开发H5应用中实现第三方微信授权登录的完整指南-七爪网

初涉uni-app开发H5项目，微信授权登录对不少开发者来说是个难题。我最近也尝试了这个项目，第一次操作微信授权登录，过程中遇到了不少挑战，有很多心得体会想要和大家交流。

初次接触的困境

在着手开发项目时，一听说要实现微信授权登录，我顿时感到有些棘手。毕竟，在此之前我对此一无所知，要在uni-app开发的H5项目中融入这一功能，感觉像是无头苍蝇。微信授权登录涉及诸多参数和流程，每种授权方式都有其独特之处。尽管如此，项目进度不能拖延，我只能硬着头皮去深入探究。那时我就暗自下定决心，一旦成功实现，一定要将所学经验分享给大家。

在着手探究微信授权登录的具体操作步骤之前，我内心颇感不安，生怕自己无法掌握这个看似繁复的功能。然而，坚信自己能够逐步找到解决方法，我便开始仔细研读官方发布的资料。

onLoad(e) {
    let code = this.getUrlCode('code')
    console.log(code)
    if(code !== null || code !== "") {
        this.getOpenidAndUserinfo(code)
    }
},

微信授权方式

// 获取code
    // 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
    getCode () {
        if(isWechat()) {
            // 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
            let code = this.getUrlCode('code')
            if (code === null || code === '') {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri=' + encodeURIComponent('http://127.0.0.1/pages/views/profile/login/login') + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                // redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
                // 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
                // http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
            }
        }
    },
    
    getUrlCode (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/+/g, '%20')) || null
    },
    
    const isWechat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
    }

微信授权主要有两种形式值得注意。第一种是静默授权，它的权限范围有特定设定。这种方式不会出现授权窗口，仅能获取用户的部分信息。第二种是非静默授权，其权限配置则有所不同。这种方式会有授权窗口弹出，且需用户手动点击确认授权。虽然如此，这种方式可以获取到用户更多的信息，比如昵称、头像、性别等。这两种授权方式适用的场合各异，在项目中需根据实际需求来选择启用哪一种。

某些项目不需要收集过多用户信息，对用户使用体验的干扰应尽量减少，可能就会采用静默授权方式。然而，对于社交或互动性较强的项目，可能就需要非静默授权来搜集更多用户数据，以便为用户提供更加个性化的服务。

授权流程第一步

加载页面初期，必须进行一个重要判断。得确认是否存在code。授权一旦成功，页面会自动刷新。若此时出现code，应立即将其传递至后台服务器。这一步骤，代码逻辑必须严谨。记得我操作时，差点忽略了这一判断，若遗漏，后续功能可能会受到影响。

从技术实现上讲，编写这段判断代码并不复杂。然而，要确保其精确无误。此外，还需确保每次页面加载时，无论是初次还是授权成功后的刷新，这个判断都能正常工作。

引导用户授权

确保用户顺利进入授权页面并同意授权以获取code是关键环节。为此，我们需提供明确的指引，否则用户可能对操作步骤感到困惑。在我负责的项目中，我精心设计了简洁易懂的提示语，帮助用户明白授权的必要性。同时，在页面布局上，我也特别突出了授权入口的位置。

若引导不当，用户可能会放弃授权，进而使项目流程受阻。务必保证用户能顺畅地进入授权页面执行操作。这一环节对用户体验至关重要，处理得当能增强用户对项目的正面印象。

参数的重要性

这里有许多参数是不可或缺的。比如appid，它是公众号的独有标识，没有它，授权过程就无法进行。另外，授权后的回调链接地址也需要经过特定处理。返回类型必须准确填写为code。scope，正如之前所述，它决定了授权方式。而state参数，在重定向后也会被带上，同样不能遗漏，开发者可以在规定的参数值范围内进行填写。

getOpenidAndUserinfo(code) {
    uni.request({
        url: 'http://127.0.0.1/api/wxLogin?code='+code+'&state=state&appid='+appid,
        success: (res) => {
            console.log('通过code获取openid和accessToken', res)
            if(res.data.code === 200) {
                // 登录成功，可以将用户信息和token保存到缓存中
                uni.setStorageSync('userInfo', res.data.result.userInfo)
                uni.setStorageSync('token', res.data.result.token)
            }
        }
    })

每个参数都如同拼图的一部分，少了哪一块，整个拼图就无法完整。同时，在填写这些参数时，必须认真核对，稍有差错，调试过程将会变得非常耗时。

处理后台返回数据

{
    code: 200
    message: "登录成功"
    result: {
        token: "54f663ca-45d4-4758-97a7-f727b942c09a"
        userInfo: {
            avatar: "http://thirdwx.qlogo.cn/mmopen/vi_32/MXuWgYbeVv5icyS4XBz28vpdh4iaRJAP3WYQ2uHMBUFcjvcHwykZ5wYPJG4CibJGAMv73n813vypau7Rs4iaA1uiaIw/132",
            nickName: "Allen",
            sex: 2,
            openid: "oPSEKwuzvwfZ5NEHhn9FBMJrNXpM",
            unionid: "o_ra9t3byZL5dMG1M-p2xOBFRAyc",
        }
    }
}