Jw
首页
技术
英语
首页
技术
英语
  • 前端

    • 微信

      • H5

        • 网页授权
        • JSSDK 配置注入
        • 分享设置
        • 调起支付
      • 小程序

        • 腾讯云 IM - 获取签名
        • 腾讯云 IM - 登录
        • 腾讯云 IM - 最近联系人
        • 常用工具类
        • 实现 async/await

微信 H5 网页授权

vue hash 模式下获取 code 的授权跳转流程与注意事项。

vue hash 模式

官方文档

同意授权后,授权不再弹窗,直接获取code

  1. 设置分享地址参数。
  2. 切换分享地址-->授权成功-->携带code重定向所设置链接-->获取地址栏code。
    // 跳转微信授权页
    /*
     * 
     * appid => 
     * redirect_url => 授权成功后重定向地址
     * scope => 应用授权作用域
     * response_type => 返回类型
     * state => 重定向后会带上state参数,用于传递参数(由于是地址栏传参授权,state参数注意长度限制)
     *
     */
    function getCode({appid,redirect_url=encodeURIComponent(location.href),scope='snsapi_userinfo',response_type='code',state='NO_STATE'}) {
        if(getQueryString('code')!=null)return;   								    // 判断当前地址是否存在code  存在则停止,调用方法,获取code传后台获取用户信息                                       // 授权成功后重定向的地址(重定向后地址会携带code) / getQueryString方法可获取 
        let author_url = 'https://open.weixin.qq.com/connect/oauth2/authorize';     // 微信授权地址
        let wx_get_author_url = `${author_url}?appid=${appid}&redirect_uri=${redirect_url}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect`;
        window.location.href=wx_get_author_url;                                     // 切换当前地址 跳转微信授权页授权
    }
    
    
    // 获取code 登陆流程
    function loginServer(){
        if(getQueryString('code')==null)return;
        let wx_code = getQueryString('code');
        /*
         *
         *...
         *...
         *...走正常登陆流程
         *
         */
    }

    // 获取 地址参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

注:

  1. 授权是跳转微信页面发起授权弹窗,授权成功后重定向,对单页不友好,整个页面重载刷新,记录比较多信息只能用缓存比较好, (state可带参数,但设置和获取不便,貌似浏览器对域名长度有限制)。
  2. code 会存在过期,后台获取jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket)。

相关

  • 微信 H5 JSSDK 配置注入:拿到 code 后的 SDK 配置
最近更新: 2026/10/12 09:08
Contributors: liujw
Next
JSSDK 配置注入